Rich Internet Applications con JavaFX e NetBeans

1,637 views
1,516 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,637
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Rich Internet Applications con JavaFX e NetBeans

  1. 1. Rich Internet Applications con JavaFX e NetBeans A cura di: Fabrizio Giudici
  2. 2. Introduction • JavaFX, an “umbrella” for RIA – JavaFX Script – Desktop runtime – JavaFX Mobile – More to come (design tools?) • NetBeans, an IDE – Java and other languages
  3. 3. Context • Will compete with – Adobe's Flash/Flex/Air – Microsoft Silverlight • Based on the Java Virtual Machine • Upcoming “Consumer JRE” – See “Java 6 Update N”
  4. 4. It's what you're thinking... It is intended to make Applets! (among others)
  5. 5. Samples
  6. 6. JavaFX Script • Object oriented • Declarative • Statically typed • Can access the whole Java Runtime – Comes with runtime extensions • Currently interpreted – Compiler coming soon
  7. 7. An example import javafx.ui.*; Frame { title: "Hello World JavaFX" width: 200 height: 50 content: Label { text: "Hello World" } visible: true }
  8. 8. Procedural fashion too var win = new Frame(); win.title = "Hello World JavaFX"; win.width = 200; var label = new Label(); label.text = "Hello World"; win.content = label; win.visible = true;
  9. 9. Model / View / Controller • MVC is a foundation, of course • JavaFX allows to minimize the boilerplate code between M and VC • Binding – Incremental – Bidirectional
  10. 10. Binding class HelloWorldModel { attribute saying: String; } var model = HelloWorldModel { saying: "Hello World" }; Frame { title: "Hello World JavaFX" width: 200 content: Label { text: bind model.saying } visible: true };
  11. 11. Basic components (widgets) • Border • ListBox • LayoutManager • RadioButton... • Menu • ComboBox • Label • Tree, Table • GroupPanel • TextComponents • Button • Spinner, Slider
  12. 12. Changes from plain Swing • LayoutManager → LayoutPanel • GroupPanel is supported • StackPanel
  13. 13. Listeners • Similar concept, different implementation than Swing – operations (methods) can be defined on the fly – no inner classes
  14. 14. A Listener example Button { text: "I'm a button!" mnemonic: I action: operation() { model.numClicks++; }
  15. 15. Labels • Can contain HTML • HTML can contain dynamic parts
  16. 16. Dynamic HTML example content: Label { text: bind "<html> <h2 align='center'>Shopping Cart</h2> <table align='center' ...> <tr bgcolor='#cccccc'> <td><b>Item ID</b></td> <td><b>Available</b></td> <td><b>List Price</b></td> <td> </td> </tr> { if (sizeof cart.items == 0) then "<tr><td'><b>Your cart is empty.</b></td></tr>" else foreach (item in cart.items) "<tr><td>{if item.inStock then "Yes" else "No"}</td> <td align='right'>{item.totalCost}</td></tr>" } </table> </html>" }
  17. 17. Too many words! Let's go coding!
  18. 18. The application
  19. 19. Steps • Get introduced to NetBeans • Create model classes • Create and bind some UI element • Events • Advanced stuff (search) • Integration with other tiers
  20. 20. Model classes • Person, Email, PhoneNumber • PersonFactory • PersonListModel
  21. 21. Triggers trigger on new PersonListModel { personFactory.load(); detailPane.person = personFactory.all[0]; } trigger on PersonListModel.selectedPerson = newValue { detailPane.person = personFactory.all[newValue]; }
  22. 22. Arrays var x = [1,2,3]; insert 12 into x; // yields [1,2,3,12] insert 10 as first into x; // yields [10,1,2,3,12] insert [99,100] as last into x; // yields [10,1,2,3,12,99,100] var x = [1,2,3]; insert 10 after x[. == 10]; // yields [1,2,3,10] insert 12 before x[1]; // yields [1,12,2,3,10] insert 13 after x[. == 2]; // yields [1, 12, 2, 13, 3, 10]; var x = [1,2,3]; insert 10 into x; // yields [1,2,3,10] insert 12 before x[1]; // yields [1,12,2,3,10] delete x[. == 12]; // yields [1,2,3,10] delete x[. >= 3]; // yields [1,2] insert 5 after x[. == 1]; // yields [1,5,2]; insert 13 as first into x; // yields [13, 1, 5, 2]; delete x; // yields []
  23. 23. ListBox • Model • Selected object(s) • Cell configuration
  24. 24. Canvas, Group • Canvas allows to mix components with graphics • Group is the glue between Canvas and complex structures
  25. 25. ListBox example ListBox { layoutOrientation: VERTICAL selection: bind personListModel.selectedPerson cells: bind foreach (person in personListModel.personFactory.all) ListCell { text: "{person.firstName} {person.secondName}" } }
  26. 26. Search (array query) • “List comprehensions” – Create a list out of another list – With criteria (e.g. filtering) – • select n*n from n in [1..100]
  27. 27. Search (array query) select indexof track + 1 from album in albums, track in album.tracks where track == album.title; function factors(n) { return select i from i in [1..n/2] where n % i == 0; }
  28. 28. In our case TextField { value: "Search" onChange: operation (string: String) { personListModel.selectedPerson = (select indexof person from person in personListModel.personFactory.all where person.secondName == string)[0]; } }
  29. 29. Talking to other tiers • JavaFX uses the Java Runtime... • ... you can use whatever you need – RMI, Spring Remoting, SOAP, Corba... • Only pay attention to the footprint – What will be in the “Customer JRE”?
  30. 30. JFXBuilder • See a few samples
  31. 31. Question Time • ... and feedback too What do you think about JavaFX?

×