8 - Cours Java - JavaFx - Introduction PDF

Interfaces graphiques avec JavaFx 8- Introduction Module: Programmation Objet Avancée A.Mazoul Département Génie informatique  Interfaces graphiques avec JavaFx...

Interfaces graphiques avec JavaFx 8- Introduction Module: Programmation Objet Avancée A.Mazoul Département Génie informatique  Interfaces graphiques avec JavaFx JavaFx Qu’est-ce que JavaFx JavaFX est un framework et une bibliothèque d'interface utilisateur issue du projet OpenJFX, qui permet aux développeurs Java de créer une interface. En mars 2014, JavaFX devient la bibliothèque de création d'interface graphique officielle du langage Java. Le développement de son prédécesseur Swing étant abandonné, excepté pour les corrections de bogues. Cette bibliothèque a été conçue pour remplacer Swing et AWT, qui ont été développés à partir de la fin des années 90 A.Mazoul Programmation orienté objet Java 2  Interfaces graphiques avec JavaFx JavaFx Structure d’une application JavaFx Une application JavaFx se compose d’une hiérarchie de composants. L'application est codée en créant une sous-classe de Application. La fenêtre principale d'une application est représentée par un objet de type Stage qui est fourni par le système au lancement de l'application. L'interface est représentée par un objet de type Scene qu'il faut créer et associer à la fenêtre (Stage). La scène est composée des différents éléments de l'interface graphique (composants de l'interface graphique) qui peuvent être de différents types:  Des élément de contrôles utilisateur: Label, TextField, ListView…  Des formes graphiques: Circle, rectangle, Line…  Des médias: ImageView, MediaView…  Les layouts pour grouper les éléments pour assurer la mise en page: BorderPane, Hbox, Vbox , GridPane…. La méthode start() construit le tout. A.Mazoul Programmation orienté objet Java 3  Interfaces graphiques avec JavaFx JavaFx Structure d’une application JavaFx Structure d’une fenêtre JavaFx: Stage Scene BorderPane HBox VBox GridPane Label TextField Button Label TextField Label CheckBox Label ComboBox Button A.Mazoul Programmation orienté objet Java 4  Interfaces graphiques avec JavaFx JavaFx Première Application JavaFx Une première application, le traditionnel Hello World !: A.Mazoul Programmation orienté objet Java 5  Interfaces graphiques avec JavaFx JavaFx Cycle de vie d'une application Lors du lancement d'une application par la méthode statique Application.launch() le runtime JavaFX effectue les opérations suivantes : Crée une instance de la classe qui hérite de Application Appelle la méthode init() Appelle la méthode start() et lui passe en paramètre une instance de Stage (qui représente la fenêtre principale [primary stage]) Attend ensuite que l'application se termine, L'application appelle par exemple Platform.exit() (ne pas utiliser System.Exit()) Appelle la méthode stop() launch() init() start() stop() Les méthodes init() et stop() ne doivent pas obligatoirement être redéfinies (par défaut elle ne font rien). A.Mazoul Programmation orienté objet Java 6  Interfaces graphiques avec JavaFx JavaFx Cycle de vie d'une application A.Mazoul Programmation orienté objet Java 7  Interfaces graphiques avec JavaFx JavaFx Traiter une action de l'utilisateur La méthode setOnAction() permet d'enregistrer un EventHandler< ActionEvent > EventHandler est une interface fonctionnelle possédant la méthode handle(event) qui définit l'action à effectuer). On utilisant l’expression Lambda: A.Mazoul Programmation orienté objet Java 8  Interfaces graphiques avec JavaFx JavaFx Style La notion de style, skin ou thème caractérise l'ensemble des aspects visuels de l'interface graphique (forme, couleur, texture, ombre, police de caractères, …). En JavaFX, le style des composants est défini par des feuilles de style de type CSS. La méthode setUserAgentStylesheet() de la classe Application permet d'indiquer l'URL de la feuille de style qui est à appliquer globalement. Deux styles, nommés Modena et Caspian, sont prédéfinis et sont associés aux constantes Si l'on veut fixer ou changer le look and feel des interfaces, on peut le faire au démarrage de l'application : A.Mazoul Programmation orienté objet Java 9  Interfaces graphiques avec JavaFx JavaFx Fenêtre principale Par défaut, au lancement d'une application, la fenêtre principale (stage) est centrée sur l'écran. Différentes méthodes peuvent être invoquées sur l'objet Stage pour influencer la position et la taille de cette fenêtre :  setX() : Position en x du coin supérieur gauche  setY() : Position en y du coin supérieur gauche  centerOnScreen() : Centrage sur l'écran (par défaut)  setMinWidth() : Fixe la largeur minimale de la fenêtre  setMinHeight() : Fixe la hauteur minimale de la fenêtre  setMaxWidth() : Fixe la largeur maximale de la fenêtre  setMaxHeight() : Fixe la hauteur maximale de la fenêtre  setResizable() : Détermine si la fenêtre est redimensionnable  sizeToScene() : Adapte la taille de la fenêtre à la taille de la scène liée à cette fenêtre A.Mazoul Programmation orienté objet Java 10  Interfaces graphiques avec JavaFx JavaFx Fenêtre principale Autres méthodes de l'objet Stage :  setTitle() : Définit le titre de la fenêtre (affiché selon OS)  setFullScreen() : Place la fenêtre en mode plein-écran ou en mode standard (si paramètre false) (selon OS)  getIcons().add() : Définit l'icône dans la barre de titre  setAlwaysOnTop() : Place la fenêtre toujours au dessus des autres (généralement à éviter)  setScene() : Définit la scène (sa racine) qui est associée à la fenêtre  show() : Affiche la fenêtre à l'écran (et la scène qu'elle contient) A.Mazoul Programmation orienté objet Java 11  Interfaces graphiques avec JavaFx JavaFx Fenêtre principale La fenêtre principale, appelée « primary stage » est celle qui est passée en paramètre (par le système) à la méthode start(). Dans une application JavaFX, il est possible de créer d'autres fenêtres indépendantes (d'autres objets Stage) et de les gérer A.Mazoul Programmation orienté objet Java 12  Interfaces graphiques avec JavaFx JavaFx Les Bordures Les classes Border et BorderStroke permettent de créer des bordures et de les assigner à la propriété border. A.Mazoul Programmation orienté objet Java 13  Interfaces graphiques avec JavaFx JavaFx Les Bordures Les classes Background, BackgroundFill et BackgroundImage permettent de créer des arrière-plans qui peuvent être composés d'une superposition de remplissage (fill) et/ou d'images. A.Mazoul Programmation orienté objet Java 14  Interfaces graphiques avec JavaFx JavaFx Méthode basée sur FXML Java Fx offre la possibilité de déclarer la structure des composants de l’interface graphique dans un fichier XML. Le fichier FXML représente la vue de l’application. Au démarrage de l’application, le fichier XML est lu, les composants sont instanciés. Pour programmer les réponses aux évènements, on crée un contrôleur associé à la vue FXML La classe principale Contrôleur Vue Fichier css A.Mazoul Programmation orienté objet Java 15  Interfaces graphiques avec JavaFx JavaFx Méthode basée sur FXML Exemple de fichier Fxml Style.css Taille du layout Fichier style.css Version Java La classe Java Version API JavaFx « contrôleur » bg est la classe css La méthode qui sera invoquée après le click A.Mazoul Programmation orienté objet Java 16  Interfaces graphiques avec JavaFx JavaFx Méthode basée sur FXML Contrôleur pour gérer les évènements des éléments du fichier FXML A.Mazoul Programmation orienté objet Java 17  Interfaces graphiques avec JavaFx JavaFx les Conteneurs (Layouts) Les conteneurs jouent donc un rôle important dans la structuration et la disposition des composants qui seront placés dans les interfaces. Les layouts de JavaFX fonctionnent donc de manière similaire aux layouts de AWT/Swing JavaFX fournit plusieurs mises en page prédéfinies telles que:  Hbox  Vbox  BorderPane  StackPane  TextFlow  AnchorPane  TitlePane  GridPane  FlowPanel  etc… A.Mazoul Programmation orienté objet Java 18  Interfaces graphiques avec JavaFx JavaFx les Conteneurs (Layouts) A.Mazoul Programmation orienté objet Java 19  Interfaces graphiques avec JavaFx JavaFx les Conteneurs (Layouts) A.Mazoul Programmation orienté objet Java 20  Interfaces graphiques avec JavaFx JavaFx: les Conteneurs HBox HBox est un conteneur (container), qui arrange les sous-composants sur une seule ligne. Il place les composants sur une ligne horizontale. Les composants sont ajoutés à la suite les uns des autres (de gauche à droite). L'ajout des composants enfants dans le conteneur s'effectue en invoquant d'abord la méthode générale getChildren(). A.Mazoul Programmation orienté objet Java 21  Interfaces graphiques avec JavaFx JavaFx: les Conteneurs HBox A.Mazoul Programmation orienté objet Java 22  Interfaces graphiques avec JavaFx JavaFx: les Conteneurs VBox HBox est un conteneur (container), qui arrange les sous-composants sur une seule colonne. Il place les composants verticalement. Les composants sont ajoutés à la suite les uns des autres (de haut en bas). L'ajout des composants enfants dans le conteneur s'effectue en invoquant d'abord la méthode générale getChildren(). A.Mazoul Programmation orienté objet Java 23  Interfaces graphiques avec JavaFx JavaFx: les Conteneurs VBox A.Mazoul Programmation orienté objet Java 24  Interfaces graphiques avec JavaFx JavaFx: les Conteneurs FlowPane Le layout FlowPane place les composants sur une ligne horizontale ou verticale et passe à la ligne ou à la colonne suivante lorsqu'il n'y a plus assez de place disponible. L’option Orientation détermine s'il s'agit d'un FlowPane horizontal (par défaut) ou vertical. A.Mazoul Programmation orienté objet Java 25  Interfaces graphiques avec JavaFx JavaFx: les Conteneurs FlowPane L'ajout des composants enfants dans un conteneur FlowPanes'effectue en invoquant getChildren().add(…) ou addAll(n,...) Quelques propriétés importantes du conteneur FlowPane:  hgap: Espacement horizontal entre les composants ou colonnes  vgap: Espacement vertical entre les composants ou lignes  padding: Espacement autour du conteneur  alignment: Alignement global des composants dans le conteneur  rowValignment: Alignement vertical dans les lignes  columnHalignment: Alignement horizontal dans les colonnes  prefWrapLength: Détermine la largeur préférée ou la hauteur préférée  orientation: Orientation du FlowPane A.Mazoul Programmation orienté objet Java 26  Interfaces graphiques avec JavaFx JavaFx: les Conteneurs FlowPane A.Mazoul Programmation orienté objet Java 27  Interfaces graphiques avec JavaFx JavaFx: les Conteneurs TilePane Le layout TilePane place les composants dans une grille alimentée soit horizontalement (par ligne, de gauche à droite) soit verticalement (par colonne, de haut en bas). Toutes les cellules de cette grille ont la même taille. ce qui n'est pas le cas pour FlowPane. La largeur des composants correspond à la plus grande largeur et la hauteur à celle la plus grande parmi les composants placés dans le conteneur. Quelques propriétés importantes:  getChildren().add(node) : L'ajout d’un composant dans un conteneur.  getChildren().addAll(node1,node2,node3,...) : L'ajout de plusieurs composants dans un conteneur. A.Mazoul Programmation orienté objet Java 28  Interfaces graphiques avec JavaFx JavaFx: les Conteneurs TilePane TilePane FlowPane A.Mazoul Programmation orienté objet Java 29  Interfaces graphiques avec JavaFx JavaFx: les Conteneurs BorderPane Le conteneur BorderPane permet de placer les composants enfants dans cinq zones : Top, Bottom, Left, Rightet Center. Un seul objet Node (composant, conteneur,...) peut être placé dans chacun de ces emplacements. A.Mazoul Programmation orienté objet Java 30  Interfaces graphiques avec JavaFx JavaFx: les Conteneurs BorderPane A.Mazoul Programmation orienté objet Java 31  Interfaces graphiques avec JavaFx JavaFx: les Conteneurs AnchorPane Le conteneur AnchorPane permet de positionner les composants enfants à une certaine distance des côtés du conteneur (Top, Bottom, Left et Right). Un composant peut être ancré à plusieurs bords et même à des bords opposés (left et right par exemple). Dans ce cas, le composant pourra être étiré ou comprimé pour respecter les contraintes d'ancrage. Par défaut, les composants sont ancrés en haut et à gauche. A.Mazoul Programmation orienté objet Java 32  Interfaces graphiques avec JavaFx JavaFx: les Conteneurs AnchorPane L'ajout des composants dans un conteneur AnchorPane s'effectue en invoquant l'une des deux méthodes : getChildren().add(node) getChildren().addAll(node1,node2,node3,...) Pour définir les contraintes d'ancrage, il faut invoquer des méthodes statiques de AnchorPane: topAnchor() : définit la distance par rapport au haut rightAnchor() : définit la distance par rapport au côté droit bottomAnchor() : définit la distance par rapport au bas leftAnchor() : définit la distance par rapport au côté gauche Exemple AnchorPane.setTopAnchor(btnOk, 10.0); AnchorPane.setRightAnchor(btnOk, 0.0); AnchorPane.setBottomAnchor(btnQuit, 15.0); A.Mazoul Programmation orienté objet Java 33  Interfaces graphiques avec JavaFx JavaFx: les Conteneurs AnchorPane A.Mazoul Programmation orienté objet Java 34  Interfaces graphiques avec JavaFx JavaFx: les Conteneurs StackPane Le conteneur StackPane empile les composants les uns au dessus des autres dans l'ordre d'insertion : les premiers "au fond", les derniers "au-dessus". L'ajout des composants dans un conteneur de type StackPane s'effectue en invoquant l'une des deux méthodes :  getChildren().add(node)  getChildren().addAll(node1,node2,node3,...) Le conteneur StackPane peut être utile pour créer un composant complexe à partir d'éléments existants en les superposant (placer du texte au dessus d'une forme ou d'une image, combiner des éléments graphiques, etc.). Des méthodes statiques de StackPane peuvent être invoquées pour appliquer des contraintes de positionnement aux composants :  alignment() : permet de modifier l'alignement par défaut (CENTER par défaut) du composant passé en paramètre.  margin() : fixe une marge (objet de type Insets) autour du composant passé en paramètre (par défaut Insets.EMPTY) A.Mazoul Programmation orienté objet Java 35  Interfaces graphiques avec JavaFx JavaFx: les Conteneurs StackPane A.Mazoul Programmation orienté objet Java 36  Interfaces graphiques avec JavaFx JavaFx: les Conteneurs GridPane Le conteneur GridPane permet de disposer les composants dans une grille flexible (arrangement en lignes et en colonnes), un peu à la manière d'une table HTML. Le nombre de lignes et de colonnes de la grille est déterminé automatiquement par les endroits où sont placés les composants. Par défaut, la hauteur de chaque ligne est déterminée par la hauteur du composant le plus haut qui s'y trouve. Par défaut, la largeur de chaque colonne est déterminée par la largeur du composant le plus large qui s'y trouve. A.Mazoul Programmation orienté objet Java 37  Interfaces graphiques avec JavaFx JavaFx: les Conteneurs GridPane Les contraintes globales sont associées aux lignes/colonnes du GridPane en les ajoutant dans une liste, avec les méthodes :  getRowConstraints.add(row_constraint)  getColumnConstraints.add(column_constraint) L'ordre des ajouts correspond à l'ordre des lignes/colonnes A.Mazoul Programmation orienté objet Java 38  Interfaces graphiques avec JavaFx JavaFx: les Conteneurs GridPane On peut également appliquer des contraintes individuelles aux composants placés dans un GridPane. Ces contraintes sont prioritaires sur les contraintes de lignes et colonnes. Les contraintes sont appliquées en invoquant des méthodes statiques de GridPane qui permettent de gérer les propriétés suivantes : A.Mazoul Programmation orienté objet Java 39  Interfaces graphiques avec JavaFx JavaFx: les Conteneurs GridPane A.Mazoul Programmation orienté objet Java 40  Interfaces graphiques avec JavaFx JavaFx: les Conteneurs GridPane A.Mazoul Programmation orienté objet Java 41 A.Mazoul Réseaux informatiques Téléinformatique 42