JavaFX, because you're worth it

JavaFXbecause you're worth it

Thierry Wasylczenko@twasyl

me.getInfo();

Software & quality engineer @ GE HealthcareJFXtras contributorOpenJFX in progressFormer Java Full Professor & teacher @ SUPINFOSpeaker

We all know this...

But also this...

private class MyFrame extends JFrame {

private void initComponents() { jLabel1 = new JLabel(); jTextField1 = new JTextField(); jLabel2 = new JLabel(); jTextField2 = new JTextField(); jLabel3 = new JLabel(); jRadioButton1 = new JRadioButton(); jRadioButton2 = new JRadioButton(); jButton1 = new JButton(); jScrollPane1 = new JScrollPane(); jTable1 = new JTable(); setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE); jLabel1.setText("Person name:"); jLabel2.setText("Person first name:"); jLabel3.setText("Sex:"); jRadioButton1.setText("Male"); jRadioButton1.addActionListener( new ActionListener() { public void actionPerformed(ActionEvent evt) { // TODO } }); // TO BE CONTINUED }}

To get this...

The big button syndrome

Desktop apps in Java

Abstract Window Toolkit (AWT)SwingEvent Dispatch Thread (EDT)ComplexL&F

Old lookingNimbusSynthetica, JGoodies Looks, SWT Ribbon, Quaqua,Substance, ...

Some tools "helped" us ...

Visual EditorEclipse pluginHow many JARs do I need to start creating aUI??!!

NetBeans

... or not !

So much junk code !!Not even editable

Except outside the IDE

A hope shined ...

JavaOne 2007JavaFX is announcedRich Internet Applications (RIA)"Seems" promising

... but ...

Java + Flash + Flex

=

JavaFX

=

???

I am a Java developer !!

Scripting languageSimilar to Flash scripting languageUnusable Java API

JARs? What's that?Hey, I'm a Java developer !!

Look through the Windows

Windows Presentation Foundation(WPF)Works above DirectXIntroduced with .NET 3.0XAMLHey, I'm still a Java developer !

eface

And now ...

JavaFX 2

JavaFX architecture

Base classes

ApplicationThe entry point of your appApplication.launch()Override start()

SceneLike the content pane in SwingHosts a root element

Stage = JFrameContains a scenestage.show();

Base classes

public class TweetWallFX extends Application {

public static void main(String[] args) {

Application.launch(TweetWallFX.class, args);

}

@Override public void start(Stage stage) throws Exception {

// Do your stuff here

Scene scene = new Scene( ... ); stage.setScene(scene); stage.show(); }

}

FXML

MVCMarkup-based languageCSS stylingJavaScript capabilitiesComponent binding

Controller conceptURL locatorI18N

FXML

<?xml version="1.0" encoding="UTF-8"?><?import java.lang.*?><?import javafx.scene.*?><?import javafx.scene.effect.*?><?import javafx.scene.image.*?><?import javafx.scene.control.*?><?import javafx.scene.layout.*?>

<AnchorPane xmlns:fx="http://javafx.com/fxml" id="mainPanel" fx:id="anchorPane" prefHeightstyle="-fx-background-color: linear-gradient(#69B4E4 0%, #0070B9 100%);" > <children> <ImageView id="twitterSticker" fitWidth="128" fitHeight="128" layoutX="30" <image> <Image url="@/com/twasyl/tweetwallfx/resources/images/twitterSticker.png" </image> </ImageView> <Label text="TweetWallFX" prefWidth="1024" style="-fx-font-size: 100pt; -fx-text-fill: white; -fx-font-weight: bold;" <Button id="button" text="Search" onAction="#startTweetWall" style="-fx-font-size: 20pt;" </children></AnchorPane>

JavaFX CSS

Properties prefixed with -fx-fx-text-fill-fx-background-color...

linear-gradientradial-gradientrgb / rgbaEffects

dropshadow &innershadow

JavaFX CSS

Inline CSS

<Label text="TweetWallFX" prefWidth="1024" style="-fx-font-size: 100pt; -fx-text-fill: white; -fx-font-weight: bold;"

JavaFX CSS

Stylesheets and CSS classes

<AnchorPane ...> <stylesheets> <URL value="@/com/twasyl/Default.css" /> </stylesheets> <children> <Label styleClass="cool-class" /> <Label> <styleClass> <String fx:value="very-cool-class" /> <String fx:value="amazing-class" /> </styleClass> </Label> <children></AnchorPane>

JavaFX CSS

Java code

myButton.getStyleClass().addAll("cool-class", "very-cool-class");myButton.setStyle("-fx-background-color: white");

Controller

Similar to master pages in ASPSimilar to a Managed BeanUsed to

manage eventsupdate the view dynamically...

Referenced by fx:controller in the FXMLInitializable

Used to initialize the controller after the rootelement

Controller

public class TweetWallFXController implements Initializable {

// ...

@Override public void initialize(URL arg0, ResourceBundle arg1) {

// ...

}}

@FXML

Component bindingLike JSFEach attribute must be strictly named as the fx:idin the FXML

Controller Method Event handleronAction, onClosed, ... attributesReferenced with # in FXML

@FXML

The controller

// ...

@FXML private Pane anchorPane;

@FXML public void startTweetWall(ActionEvent e) {// ...}

// ...

@FXML

The FXML

<AnchorPane ... fx:id="anchorPane" ... fx:controller="com.twasyl.tweetwallfx.controllers.TweetWallFXController" <children> <Button id="button" onAction="#startTweetWall" ... />

</children></AnchorPane>

FXMLLoader

Load a FXML fileResourceBundle can be defined

Get the controller

FXMLLoader

URL fxmlURL = getClass().getResource("/my/package/myFile.fxml");FXMLLoader fxml = new FXMLLoader(fxmlURL);

// Get the root element of the fileParent root = (Parent) fxml.load();

// Get the controller associated to the FXMLMyController mc = (MyController) fxml.getController();

Properties

Expand & improve the JavaBeans concept"Observe" a value

Event deliveryListeners

Conventionprivate property fieldspublic final getter / setter for the valuepublic getter for the property

Properties

public class Foo {

private DoubleProperty litersOfCoffee = new SimpleDoubleProperty();

public final double getLitersOfCoffee() {

return this.litersOfCoffee.get();

}

public final void setLitersOfCoffee(double value) {

this.litersOfCoffee.set(value);

}

public DoubleProperty litersOfCoffeeProperty() {

return this.litersOfCoffee;

}

}

Bindings

Observes dependenciesProperties

Updates itself according changesHigh-Level APILow-Level APIKind of Observer / Observable patternExample:

Could be used to synchronize the UI and thebusinessRefresh a chart data

Bindings

IntegerProperty num1 = new SimpleIntegerProperty(10);

IntegerProperty num2 = new SimpleIntegerProperty(20);

IntegerProperty num3 = new SimpleIntegerProperty(30);

IntegerProperty num4 = new SimpleIntegerProperty(40);

NumberBinding operation = Bindings.add(num1.multiply(num4), num2.divide(num3));

System.out.println("How much? " + operation.getValue());

num1.setValue(100);

System.out.println("And now? " + operation.getValue());

Bindings

How much? 400.67

And now? 4000.67

FXCollections

Extension of CollectionsObservableInterfaces

ObservableList, ObservableMapListeners

ListChangeListener, MapChangeListenerFXCollections

Utility class

FXCollections

List<String> stringLst = new ArrayList<String>();

// Create an observable listObservableList<String> stringObsLst1 = FXCollections.observableList(stringLst);

ObservableList<String> stringObsLst2 = FXCollections.observableList();

stringObsLst1.addListener(new ListChangeListener<String>() {

@Override public void onChanged(Change<? extends String> event) {

while(event.next()) {

if(event.wasAdded()) {

// ...

} else if(event.wasRemoved()) {

// ... } } }}

Chart API

Chart API

Animation

Animation

KeyValueRepresent a "fixed" position of a Node

KeyFrameA durationSome KeyValues

AnimationCould contain some KeyFrames (Timeline)Play

Animation

Node node = ... ;

KeyValue kv = new KeyValue(node.layoutXProperty(), 100);

KeyFrame kf = new KeyFrame(new Duration(5000), kv);

Timeline timeline = new Timeline(kf);

timeline.setCycleCount(Animation.INDEFINITE);

timeline.setOnFinished( ... );

timeline.play();

Effects

Lot of effects availableBlur, blend, reflection, shadows, ...

Input propertyChain of effects

Media

Long way from JMFAudio

MP3, AIFF, WAV, AAC,m4a

VideoFLV, MPEG-4(H.264/AVC)

MetadataListeners

Media

File mySong = new File("/mySong.mp3");

Media myMedia = new Media(mySong.toURI().toString());

MediaPlayer player = new MediaPlayer(myMedia);

player.setOnEndOfMedia( new Runnable() { ... });

player.volumeProperty().addListener( ... );

player.play();

// ...

if(player.statusProperty().get() == Status.PLAYING) { // ...}

SceneBuilder

UI builder toolUseful for RAD

FXML generationCSS supportPreviewer

SceneBuilder

Scenic View

Understand current state of your applicationManipulation of the scenegraphManipulation of properties

Scenic View

Tools / API

JFXtrasFX Experience tool

Theminge(fx)clipseGroovyFXScalaFX...

Useful resources

http://thierrywasyl.wordpress.com

http://thierrywasyl.wordpress.comhttp://docs.oracle.com/javafx/index.htmlhttps://forums.oracle.com/forums/forum.jspa?forumID=1385http://fxexperience.comhttp://jfxtras.org

Thank you