Programmation avancée 2021-2022

TD3 - JavaFX

Objectifs pédagogiques :
- Découvrir les composants graphiques de base
- Connaitre les différents conteneurs
- Intégrer des composants graphiques plus avancés
- Implémenter des interactions
Ressources :
- Supports de cours disponibles sur l’espace eCampus
- Documentation : docs.oracle.com/javase/8/javafx/api/toc.htm

Contexte :

Concevoir une interface équivalente à celle de la configuration de police sous Word 2016 :

guillaume.loup@univ-evry.fr 1/7
Programmation avancée 2021-2022

Etape 0 : Nouveau projet

 Lancer Eclipse

 Créer un nouvel Workspace « JavaFX »

 Créer un nouveau projet JavaFX :

o File > New > Other > JavaFX > JavaFX Project*

o Nommer le projet « InterfacePolice » et valider

*Si ce type de projet n’est pas disponible dans Eclipse, l’installer :

1. menu «Help/Install New Software »

2. Work with : Oxygen – http://download.eclipse.org/releases/oxygen

3. Sélectionner General Purpose Tools>e(fx)clipse - IDE

Etape 1 : Organiser les conteneurs

Dans la partie centrale du conteneur BorderPane intial déjà présent

 Créer les 5 conteneurs organisés dans une « VerticalBox »

o 1 conteneur de type « AnchorPane » pour le choix de la police de type

o 1 conteneur de type « FlowPane » pour le titre « Effets »

o 1 conteneur de type « TilePane » pour les checkbox « Effets »

o 1 conteneur de type « FlowPane » pour le titre Aperçu

o 1 conteneur de type « GridPane » pour le contenu de l‘Aperçu

guillaume.loup@univ-evry.fr 2/7
Programmation avancée 2021-2022

guillaume.loup@univ-evry.fr 3/7
Programmation avancée 2021-2022

Etape 2 : Disposer les boutons

 Créer les 4 boutons

 Créer un nouveau conteneur de type « HorizontalBox »

 Ajouter les boutons au nouveau conteneur

 Placer « OkAnnulerBox » dans la partie « down » du conteneur BorderPane initial

Etape 3 : Disposer les titres (Effets et Aperçu)

Dans le conteneur de type « FlowPane » prévu pour les titres

 Créer un Label

 Affecter une police ressemblant au modèle

guillaume.loup@univ-evry.fr 4/7
Programmation avancée 2021-2022

Etape 4 : Disposer les cases à cocher des « Effets »

Dans le conteneur de type « TilePane » :

 Créer les 7 Checkbox

 Les disposer comme ci-dessous :

Etape 5 : Configuration de la police

Dans le conteneur de type « AnchorPane » :

 Créer les 4 Label, les 3 Textfield, les 3 ListView et la ComboBox

 Les disposer comme ci-dessous :

guillaume.loup@univ-evry.fr 5/7
Programmation avancée 2021-2022

Etape 6 : Choix d’une couleur

 Utiliser le composant ColorPicker pour permettre à l’utilisateur de choisir la police

 La gestion de la police par défaut « Automatique » ne doit pas être implémentée

Facultatif :

o La ComboBox refermée peut contenir la couleur sélectionnée

Etape 7 : Bouton interactif

 Permettre à l’utilisateur de refermer l’ensemble de l’application en cliquant (une seule fois) sur
le bouton « Annuler »

guillaume.loup@univ-evry.fr 6/7
Programmation avancée 2021-2022

Etape 8 : Gestion de la sélection de la liste

 Créer un évènement qui remplit le TextField quand la sélection de la ListView change

o Pour Police, Style et Taille

Facultatif :

o Créer l’événement inverse : changement de la sélection de la ListView quand la saisie du

TextField change

Etape 9 : Aperçu de la police

 Utiliser un Shape ou un Canvas

o Pour le cadre, les lignes et le texte

 Créer un Label toujours aligné dans le coin en bas à gauche, et contenant le texte « Police
TrueType, identique à l’écran et à l’impression »

 Utiliser les conteneurs « GridPane »

 Créer un événement qui modifie la police du texte exemple (« IUT de Laval ») en fonction des
choix ci-dessus

guillaume.loup@univ-evry.fr 7/7