Nouveau et cool!

Technologies coté client javaFX

BENZOUACHE Hani

Agenda

Introduction

C’est quoi javaFX?

La plateforme javaFX

Démonstration

What’s next?

Java supporte-elle le développement des applications clientes riches ?

Oui…..mais !

JavaFx simplifie le développement des applications clientes riches

C’est quoi javaFX?

JavaFx, est l'évolution de la plate-forme client Java conçu pour permettre aux développeurs d'applications de créer et de déployer facilement des applications clients riches qui se comportent toujours sur de multiples plateformes.

‘‘

,,

La plateforme JavaFx

Pourquoi utiliser JavaFx?

Plateforme client riche

intuitive

Préserver son

investissement

Fonctionnalité cross-

browser

Intégration en

entreprise

RIAs for all

screens

• Desktop• Navigate

ur• Mobile• TV{

Demonstration

Structure à base d’arbre ‘’Scene graph• Graphe acyclique orienté• Les parents et les fils• Représentation des composants GUI

les principaux nœuds de chaque arbre sont• Stage: la fenêtre d'accueil de l'application• Scene: les canevas, où les composants

montrent

Tous les composants et éléments graphiques sont placés dans la scène

Demonstration

Demonstration

Group (root)

AnchorPane

TextField

Button

ListView

Demonstration

Entry-Point

LoginExample.java

User interface

LoginExample.fxml

Contrôleur

LoginController.java

Interface style

LoginExample.css

Demonstration

LoginExample.java

@Override public void start(Stage stage) throws Exception { Parent root = FXMLLoader.load(getClass().getResource("fxml_example.fxml")); Scene scene = new Scene(root, 300, 275); stage.setTitle("FXML Welcome"); stage.setScene(scene); stage.show(); }

Demonstration

LoginExample.fxml

<GridPane fx:controller="fxmlexample.FXMLExampleController" xmlns:fx="http://javafx.com/fxml" alignment="center" hgap="10" vgap="10"> <padding><Insets top="25" right="25" bottom="10" left="25"/></padding> <Text text="Welcome" GridPane.columnIndex="0" GridPane.rowIndex="0" GridPane.columnSpan="2"/> <Label text="User Name:" GridPane.columnIndex="0" GridPane.rowIndex="1"/> <TextField GridPane.columnIndex="1" GridPane.rowIndex="1"/> <Label text="Password:" GridPane.columnIndex="0" GridPane.rowIndex="2"/> <PasswordField fx:id="passwordField" GridPane.columnIndex="1" GridPane.rowIndex="2"/> </GridPane>

Demonstration

LoginExample.fxml....

<HBox spacing="10" alignment="bottom_right" GridPane.columnIndex="1" GridPane.rowIndex="4"> <Button text="Sign In" onAction="#handleSubmitButtonAction"/> </HBox> <Text fx:id="actiontarget" GridPane.columnIndex="1" GridPane.rowIndex="6"/> </Gridpane>

LoginController.java

public class FXMLExampleController { @FXML private Text actiontarget; @FXML protected void handleSubmitButtonAction(ActionEvent event) { actiontarget.setText("Sign in button pressed"); } }

Demonstration

LoginExample.fxml..

<stylesheets> <URL value="@Login.css" /> </stylesheets> </GridPane>

Login.css

root { display: block; } .root { -fx-background-image: url("background.jpg"); } .label { -fx-font-size: 12px; -fx-font-weight: bold; -fx-text-fill: #333333; -fx-effect: dropshadow( gaussian …………………………………

Scene BuilderJavaFX Scene Builder

• Outil pour construire les UIs.• Code FXML généré

automatiquement.

Scene BuilderDrag&Drop

Intégration avec l'EDI

Edition preview en temps réel

And more…Ensemble

• Galerie de plus de 100 exemples d'applications.

What next ?

8

JavaFx 3DLambda expression

Rich Text

Public API for CSSPrinting Support

Swing Node

DatePickerTree Table Control

Questions !!