Projet MVC-CD Initiation à JavaFX 2.0

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 Scene contient tous les éléments de notre interface graphique. Elle compose une page dans l application. 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

Page 5 sur 11 javafx.scene.node Prarent Control ChoiceBox ComboBoxBare ColorPicker Combobox Labeled ButtonBase Button CheckBox Hyperlink MenuButton ToggleButton Cell Label TitledPane ListView MenuBar Slider TabPane TextInputControl ToolBar TreeView Group Region Axis Chart Pane AnchorPane BorderPane FlowPane GridPane HBox StackPane TilePane VBox WebView Shape Arc Cercle Line Polygon Rectangle Text Canvas ImageView

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 StackPane Date 1 2 3 GridPane FlowPane TitlePane AnchorPane Page 8 sur 11

7 Migration Swing JavaFX : Swing Components JButton JLabel JTextField JDialog Border Layout JTable JTree JavaFX Controls Button Label TextField BorderPane Accordion TableView TreeView TreeTableView Structure de Swing : Jframe + ContentPane Container Compenent + LayoutManager Structure de JavaFX Stage Scene Container +Layout Control FXML Page 9 sur 11

8 La séparation des préoccupations: Developpeur Designer UX Designer graphique Code java Main.java User interface View.fxml 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 : Pour appliquer un Look ande Feel : Scene.getStylesheets(String url) 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] [Oracle-02] [IHM-01] JavaFX Foire aux questions http://www.oracle.com/technetwork/java/javafx/overview/faq-1446554.html Architecture de JavaFX http://docs.oracle.com/javase/8/javafx/get-started-tutorial/jfx-architecture.htm Cours IHM-1 : JAVAFX http://jacques.bapst.home.hefr.ch/ihm1/cours/ihm1_all_4up.pdf Page 11 sur 11