Rich Internet Applications con JavaFX e NetBeans

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)

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 • ListBox
• LayoutManager • RadioButton...
• Menu • ComboBox
• Label • Tree, Table
• GroupPanel • TextComponents
• Button • 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!

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?

Rich Internet Applications con JavaFX e NetBeans

More Related Content

What's hot

Viewers also liked

Similar to Rich Internet Applications con JavaFX e NetBeans

More from Fabrizio Giudici

Recently uploaded

Rich Internet Applications con JavaFX e NetBeans