Initiation à JavaFX
publicité
Projet MVC-CD
Initiation à JavaFX 2.0
Créé par M. Jaouadi, le 25 mars 2015
Modifié par M. Jaouadi, le 30 mars 2015
Page 1 sur 11
Table des matières
1
Préambule ....................................................................................................................................... 3
2
JavaFX .............................................................................................................................................. 3
3
Architecture de JavaFX .................................................................................................................... 3
4
Structure d’une application en JavaFX ............................................................................................ 4
4.1
Graphe de scène...................................................................................................................... 4
4.2
Exemple : ................................................................................................................................. 6
5
Les composants standards (Controls) : ........................................................................................... 7
6
Les conteneurs (Layout-Pane) : ....................................................................................................... 8
7
Migration Swing JavaFX : ............................................................................................................ 9
8
La séparation des préoccupations:................................................................................................ 10
9
Référence externe au projet ......................................................................................................... 11
Page 2 sur 11
1 Préambule
Ce document expose d’abord une initiation théorique à JavaFX une technologie considérée comme
étant l’avenir pour le développement d'interfaces graphiques en Java.
Notre choix s’est fixé sur cette technologie afin d’améliorer la réactivité de nos IHM, et favoriser la
séparation MVC. De plus, la communauté java SE s’oriente vers considérer JavaFX le successeur de
Swing pour sa librairie d’interface utilisateur (Client UI library). Ceci a été clairement déclaré dans la
documentation d’Oracle [Oracle-01].
Dans cette perspective et afin de maintenir le cycle de vie du plugin et assurer la prospérité de tout le
projet, une migration de l’environnement Swing vers JavaFX est pertinente.
2 JavaFX
Le JavaFX est un langage de programmation orienté interface graphique. Cette technologie est en
faveur des applications internet riches qui se comportent sur des multiples plateformes.
JavaFX évolue vers le multimédia à travers le traitement des images, la création de media player, et
l’intégration audio et vidéo. Ces applications ont l’avantage d’être exécuté sur le web, sur le bureau,
(Desktop) ainsi que sur mobile, et même sur télévision.
La nouvelle version JavaFX 2 .0 donne la possibilité de développer en deux modes :
-
Mode procédural : à travers les classes java.
-
Mode déclaratif : en utilisant la syntaxe XML.
3 Architecture de JavaFX
L'architecture technique de JavaFX est composée de plusieurs couches qui reposent sur la machine
virtuelle Java (JVM). Seulement la couche API est publique, les autres peuvent subir des changements
au fil des versions. Ceci permet d’éviter tout problème de compatibilité. [IHM-01]
Figure 1 Diagramme d’architecture de JavaFX [Oracle-02]
Quantum Toolkit : permet de lier le « Prism » et la boîte à outils de fenêtrage « Glass » ensemble et
les rendre accessibles à la couche JavaFX. Elle gère également les règles relatives aux Threading et à la
manipulation des événements.
Page 3 sur 11
Prism : pipeline graphique permet d’effectuer la rastérisation et le rendu (rendering) des scènes
JavaFX.
Glass Windowing Toolkit : est responsable de fournir des services d'exploitation natifs, tels que la
gestion des fenêtres, des minuteries et des surfaces.
4 Structure d’une application en JavaFX
La structure des composants dans une application JavaFX est basée sur la métaphore du théâtre. Le
conteneur de niveau le plus élevé est le stage, à l’intérieur du stage se trouve la scène, cette scène
contient le graphe de scène, c’est-à-dire la structure hiérarchique des éléments graphiques dans
l’interface.
Toutes classes créées doivent hériter de la
classe mère Application :
Public class Main extends Application
Stage
est
la
fenêtre
principale
indispensable pour l’affichage. C’est
l’équivalent de java.awt.Frame en Java.
Stage
primaryStage.show() ; //afficher la fenêtre
principale.
Scene contient tous les éléments de notre
interface graphique. Elle compose une
page dans l’application.
Scene
Container
+ layout
Container
+ layout
...
Scene scene=new Scene(root,500,400);
Une Scène est associée par la suite à la
fenêtre principale Stage :
Compenents
Controls
Compenents
Controls
Compenents
Controls
primaryStage.setScene(scene);
Nodes : ce sont les éléments visuels de la
scène : les containers et les composants
de JavaFX.
4.1 Graphe de scène
Le graphe de scène contient tous les éléments qui composent une interface utilisateur, des groupes,
des dispositions, des contrôles et des formes. Ces objets sont des nœuds qui héritent de la classe mère
Node. Cette classe comporte de nombreuses sous-classes. Les feuilles de l'arbre sont généralement
constitués de composants visibles (boutons, champs texte…) et les nœuds intermédiaires (y compris la
racine) sont généralement des éléments de structuration (souvent invisibles), typiquement des
conteneurs ou panneaux de différents types (HBox, VBox, BorderPane,…). La famille des nœuds dans
une scène est présentée dans la figure ci-dessous :
Page 4 sur 11
ChoiceBox
ColorPicker
ComboBoxBare
Combobox
Button
CheckBox
ButtonBase
Hyperlink
Control
Labeled
Cell
ListView
Label
MenuBar
TitledPane
Group
MenuButton
ToggleButton
Slider
TabPane
TextInputControl
ToolBar
Prarent
TreeView
AnchorPane
Region
WebView
Axis
Chart
Pane
javaFX.scene.node
Shape
Canvas
ImageView
BorderPane
FlowPane
GridPane
Arc
HBox
Cercle
StackPane
Line
TilePane
Polygon
VBox
Rectangle
Text
Page 5 sur 11
4.2 Exemple :
public class Main extends Application {
@Override
public void start(Stage stage) {
Group root = new Group();
Scene scene = new Scene(root, 500, 500, Color.BLACK);
Rectangle r = new Rectangle(25,25,250,250);
r.setFill(Color.BLUE);
root.getChildren().add(r);
stage.setTitle("JavaFX Scene Graph Demo");
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
Page 6 sur 11
5 Les composants standards (Controls) :
Figure 2 JavaFX UI Controls
Page 7 sur 11
6 Les conteneurs (Layout-Pane) :
BorderPane
Top
Left
Center
Right
Buttom
HBox
Current
VBox
Date
1
2
3
StackPane
GridPane
FlowPane
TitlePane
AnchorPane
Page 8 sur 11
7 Migration Swing JavaFX :
Swing
Components
JButton
JavaFX
Controls
Button
JLabel
Label
JTextField
TextField
JDialog
____
Border Layout
BorderPane
____
Accordion
JTable
TableView
JTree
TreeView
TreeTableView
____
Structure de Swing :
Jframe
+
ContentPane
Container
Compenent
+
LayoutManager
Structure de JavaFX
Container
Stage
Scene
Control
+Layout
FXML
Page 9 sur 11
8 La séparation des préoccupations:
Developpeur
Designer UX
Code java
Main.java
User interface
View.fxml
Designer graphique
Style
application.css
Contrôleur
Controller.java
Prise en charge de CSS
JavaFX offre la possibilité d’appliquer les feuilles de style dans la scène graphique et ses composants
comme les styles CSS destinées aux composants HTML dans un navigateur.
Pour apporter un style à une scene :
Scene.getStylesheets(String url)
Pour appliquer un Look ande Feel :
setUserAgentStylesheet(String url)
Le look and feel standard de JavaFX 2.0 est
Caspian par contre celui de javaFX 8.0 est
Modena
Caspian
setUserAgentStylesheet(STYLESHEET_CASPIAN)
Modena
setUserAgentStylesheet(STYLESHEET_ Modena)
Page 10 sur 11
Génération du FXML
C’est le développement en utilisant l’approche déclarative. Un fichier FXML est un fichier au format
XML dont la syntaxe est conçue pour décrire l'interface (la vue) avec ses composants, ses
conteneurs, sa disposition.
Tableau 1 Mapping Java-XML
Java
Button b = new Button() ;
b.setText("Hello World");
new BorderPane().setCenter(new
Button("Hello World"));
FXML
<Button>
<Button text= " Hello World">
<BorderPane><center><Button text= "Hello
World"/></center></BorderPane>
9 Référence externe au projet
[Oracle-01]
JavaFX Foire aux questions
http://www.oracle.com/technetwork/java/javafx/overview/faq-1446554.html
[Oracle-02]
Architecture de JavaFX
http://docs.oracle.com/javase/8/javafx/get-started-tutorial/jfx-architecture.htm
[IHM-01]
Cours IHM-1 : JAVAFX
http://jacques.bapst.home.hefr.ch/ihm1/cours/ihm1_all_4up.pdf
Page 11 sur 11
