Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Rich Internet Applications con JavaFX e NetBeans

1,902 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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?

×