Embed Size (px)
Citation preview
Rich Internet Applications
con JavaFX e NetBeans
A cura di:
Fabrizio Giudici
Introduction
• JavaFX, an “umbrella” for RIA– JavaFX Script– Desktop runtime– JavaFX Mobile– More to come (design tools?)
• NetBeans, an IDE– Java and other languages
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”
It's what you're thinking...
It is intended to make Applets!(among others)
Samples
JavaFX Script
• Object oriented• Declarative• Statically typed• Can access the whole Java Runtime
– Comes with runtime extensions
• Currently interpreted– Compiler coming soon
An example
import javafx.ui.*;
Frame { title: "Hello World JavaFX" width: 200 height: 50 content: Label { text: "Hello World" } visible: true }
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;
Model / View / Controller
• MVC is a foundation, of course• JavaFX allows to minimize the
boilerplate code between M and VC• Binding
– Incremental– Bidirectional
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 };
Basic components (widgets)
• Border• LayoutManager• Menu• Label• GroupPanel• Button
• ListBox• RadioButton...• ComboBox• Tree, Table• TextComponents• Spinner, Slider
Changes from plain Swing
• LayoutManager → LayoutPanel• GroupPanel is supported• StackPanel
Listeners
• Similar concept, different implementation than Swing– operations (methods) can be defined on
the fly– no inner classes
A Listener example
Button { text: "I'm a button!" mnemonic: I action: operation() { model.numClicks++; }
Labels
• Can contain HTML• HTML can contain dynamic parts
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>" }
Too many words! Let's go coding!
The application
Steps
• Get introduced to NetBeans• Create model classes• Create and bind some UI element• Events• Advanced stuff (search)• Integration with other tiers
Model classes
• Person, Email, PhoneNumber• PersonFactory• PersonListModel
Triggers
trigger on new PersonListModel { personFactory.load(); detailPane.person = personFactory.all[0]; }
trigger on PersonListModel.selectedPerson = newValue { detailPane.person = personFactory.all[newValue]; }
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 []
ListBox
• Model• Selected object(s)• Cell configuration
Canvas, Group
• Canvas allows to mix components with graphics
• Group is the glue between Canvas and complex structures
ListBox example
ListBox { layoutOrientation: VERTICAL selection: bind personListModel.selectedPerson cells: bind foreach (person in personListModel.personFactory.all) ListCell { text: "{person.firstName} {person.secondName}" } }
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]
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; }
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]; } }
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”?
JFXBuilder
• See a few samples
Question Time
• ... and feedback too
What do you think about JavaFX?
