e

ib

cr

bs

Su
to

te

da
Up

code.makery (/)
Learning how to code.
Home (/)
Library (/library/)
Paths (/paths/)
Blog (/blog/)
About (/about/)

Edit on GitHub

Tutoriel JavaFX 8 - partie 1 : le

Scene Builder

(https://github.com/marcojakob/code.makery.ch/edit/master/collections/library/javafx8-tutorial-fr-part1.md)

Apr 19, 2014 Updated Apr 15, 2015

Les articles dans ce tutoriel

Tlchargez les sources

Langues

Sujets dans la partie 1

Faire connaissance avec JavaFX
Crer et dmarrer un projet JavaFX
Utiliser le Scene Builder pour concevoir l'interface utilisateur
Structurer simplement une application en utilisant le modle de conception
modle vue contrleur

Prrequis
le dernier Java JDK 8
(http://www.oracle.com/technetwork/java/javase/downloads/index.html)
(qui inclu JavaFX 8).
Eclipse 4.4 ou suprieur avec le plugin e(fx)clipse. Le plus simple est de
tlcharger la distribution prconfigure depuis le site e(fx)clipse
(http://efxclipse.bestsolution.at/install.html#all-in-one). Une autre faon de
faire consiste utiliser le site de mise jour
(http://www.eclipse.org/efxclipse/install.html) pour votre installation
d'Eclipse.
Scene Builder 8.0 (http://gluonhq.com/products/scene-builder/) (fourni par
Gluon car Oracle le distribue seulement sous la forme de code source
(http://www.oracle.com/technetwork/java/javase/downloads/sb2download2177776.html)).

Configuration d'Eclipse
Nous devons paramtrer Eclipse pour qu'il utilise le JDK 8 et qu'il sache o
trouver le le Scene Builder :
1. Ouvrez les prfrences et slectionnez la partie Java | Installed JREs.
2. Cliquez sur le bouton Add... pour ajoutez le JDK 8 puis sur Standard VM et
slectionnez le dossier contenant le JDK 8.
3. Supprimez les autres JREs et JDKs afin que le JDK 8 devienne le JDK par
dfaut (default) !

4. Slectionnez la partie Java | Compiler. Dfinissez la Compiler compliance

level 1.8 !

5. Slectionnez la partie JavaFX puis spcifiez le chemin de votre excutable

Scene Builder !

Liens utiles
Peut-tre voudrez-vous mettre les liens suivants dans vos favoris :
Java 8 API (http://docs.oracle.com/javase/8/docs/api/) - JavaDoc pour les
classes Java standard
JavaFX 8 API (http://docs.oracle.com/javase/8/javafx/api/) - JavaDoc pour
les classes JavaFX
ControlsFX API (http://controlsfx.bitbucket.org/) - JavaDoc pour les projets
projets ControlsFX (http://fxexperience.com/controlsfx/) et les contrles
supplmentaires JavaFX
Oracle's JavaFX Tutorials (http://docs.oracle.com/javase/8/javafx/getstarted-tutorial/get_start_apps.htm) - Tutoriels officiels d'Oracle
Maintenant, nous pouvons commencer !

Crer un nouveau projet JavaFX

Dans votre IDE Eclipse (avec e(fx)clipse install), cliquez sur File | New | Other... et
slectionnez JavaFX Project.
Spcifiez le nom du projet (par exemple AddressApp) et cliquez sur Finish !
Supprimez le package application et son contenu s'il a t automatiquement cr
!

Crer le packages
Ds maintenant nous allons suivre les bonnes pratiques de programmation. Un
principe trs important est le Model-View-Controller (MVC)
(http://en.wikipedia.org/wiki/Model_View_Controller). En accord avec ceci, nous
divisons notre code en trois units. Nous allons crer un package pour chaques
parties : (clic droit sur le dossier src, New... | Package):
ch.makery.address - contient la plupart des classes contrleur ( = la logique

mtier)
ch.makery.address.model - contient les classe modle
ch.makery.address.view - contient l'interface graphique

Note: Notre package view contiendra aussi quelques contrleurs dpendant

directement d'une interface graphique unique. Appelons-les view-controllers !

Crer le fichier de disposition FXML

Il y a deux manires de crer une interface utilisateur. L'une consiste utiliser un
fichier XML et l'autre est de tout programmer en Java. En cherchant sur le web,
vous trouverez les deux. Nous utiliserons ici le fichier XML (extension .fxml) pour
presque toutes les interfaces. Je trouve cette faon de faire plus propre car cela
permet de mieux sparer les contrleurs des interfaces. De plus, nous pouvons
utiliser l'outil graphique Scene Builder pour modifier le XML. Cela signifie que
nous n'aurons pas travailler directement en XML.
Clic droit sur le package view et new FXML Document ! Nommez-le
PersonOverview !

Conception de la GUI avec Scene Builder

Note : si vous ne pouvez pas faire fonctionner Scene Builder, tlchargez la
source de cette partie du tutoriel et essayez avec le fichier .fxml inclu !

Faites un clic droit sur PersonOverview.fxml et puis cliquez sur Open with Scene
Builder. Maintenant vous devriez voir s'afficher le programme Scene Builder avec
un AnchorPane (visible dans la partie hirarchie sur la gauche).
(Si Scene Builder ne dmarre pas, cliquez sur Window | Preferences | JavaFX et
dfinissez le chemin correct relatif l'installation de votre Scene Builder).
1. Dans la partie Hierarchy, slectionnez l'Anchor Pane et ajustez la taille sous
Layout (dans la partie de droite):

2. Ajoutez un Split Pane (Horizontal Flow) en utilisant un drag et drop depuis la

librairie sur gauche jusque dans la partie centrale ! Faites un clic droit dans la
partie Hierarchy gauche sur Split Pane et slectionnez Fit to Parent (ajuster

au contrle parent) !

3. Faites glisser un TableView (depuis la liste Controls sur la gauche) et

amenez-le dans la partie de gauche du SplitPane. Slectionnez la TableView
(pas la colonne mais le tableau) et dfinissez la contrainte du TableView
comme suit. Dans un AnchorPane, vous pouvez toujours dfinir les ancres
sur les quatres bords (plus d'information dans la partie relative aux Layouts
(http://docs.oracle.com/javase/8/javafx/layouttutorial/builtin_layouts.htm)).

4. Allez dans le menu Preview | Show Preview in Window pour voir si la fentre
s'affiche comme vous le voulez. Essayez de la rediensionner ! Le TableView
devrait tre redimensionn en mme temps que la fentre parce qu'il est
ancr aux bordures.

5. Modifiez l'entte des colonnes (dans les proprits) ! Nommez-les "First

Name" et "Last Name" !

6. Slectionnez le TableView et dfinissez constrained-resize sous Column

Resize Policy (dans les proprits). Ceci spcifie que la colonne prendra tout
l'espace disponible.

7. Ajoutez un Label sur le ct droit dont le texte sera "Person Details"

(suggestion : utilisez la recherche pour retrouver le Label). Ajustez le layout
en utilisant les ancres.

8. Ajoutez un GridPane sur le ct droit, slectionnez-le puis ajuster son layout

en utilisant les ancres (top, right et left) !

9. Ajoutez le tiquettes suivantes dans les cellules !

Note : pour ajouter une ligne dans le GridPane, slectionnez l'index d'un
ligne existante (elle deviendra jaune) puis faites un clic droit sur l'index et
slectionnez "Add Row".

10. Ajoutez une ButtonBar en bas ! Ajoutez trois boutons la barre ! Enfin,
dfinissez les ancres pour qu'ils restent leur place soit en bas et droite.

11. Maintenant, vous devriez voir quelque chose ressemblant l'image cidessous. Utilisez le menu Preview pour tester le comportement aprs
redimensionnement.

Crer l'application principale

Vous avez besoin d'un autre fichier FXML pour la disposition de base. Celle-ci
contiendra une barre de menu et encapsulera le PersonOverview.fxml que nous
venons de crer.
1. Crez un autre FXML Document dans le package view appel
RootLayout.fxml . Cette fois, choisissez BorderPane comme lment racine.

2. Ouvrez le fichier RootLayout.fxml dans l'application Scene Builder !

3. Redimensionnez le BorderPane de sorte que la largeur prfre (Pref Width)

soit 600 et la hauteur prfre (Pref Height) 400.

4. Ajoutez une MenuBar dans le slot suprieure (TOP). Nous n'implmenterons

pas les fonctionnalits du menu pour l'instant.

La classe principale de JavaFX

Maintenant vous devez crer la classe principale (main java class) qui dmarrera
notre application avec le fichier RootLayout.fxml et ajoutera la
PersonOverview.fxml au centre.

1. Faites un clic droit dans votre projet puis cliquez sur New | Other... et enfin
sur JavaFX Main Class.

2. Nous nommerons la classe MainApp et nous la placerons dans le package

contrleur ch.makery.address (note : c'est le package parent des souspaquets view et model ).

La classe MainApp.java gnre hrite de la classe Application et contient deux

mthodes. C'est la structure basique dont nous avons besoin pour dmarrer une
application JavaFX. La partie la plus importante pour nous est la mthode
start(StageprimaryStage) . Cette mthode est automatiquement appele lors du

lancement de l'application ( launch ) avec la mthode main .

Comme vous le voyez, la mthode start(...) reoit un objet Stage aen
paramtre. Le diagramme suivant montre la structure de toutes les applications
JavaFX :

Image provenant de : http://www.oracle.com (http://www.oracle.com)

C'est comme une pice de thtre : l'objet Stage est le conteneur principal qui est
habituellement une fentre avec des bordures et qui a les boutons habituels pour
minimiser, maximiser et fermer. Dans le Stage , vous ajoutez une Scene qui peut,
bien sr, tre change avec un autre object Scene . Sont ajouts dans la Scene les
noeuds JavaFX actuels comme AnchorPane , TextBox , etc.
Pour plus d'informations ce sujet, voir Working with the JavaFX Scene Graph
(http://docs.oracle.com/javase/8/javafx/scene-graph-tutorial/scenegraph.htm).

Ouvrez MainApp.java et remplacez le code par celui-ci :

packagech.makery.address;
importjava.io.IOException;

importjavafx.application.Application;
importjavafx.fxml.FXMLLoader;
importjavafx.scene.Scene;
importjavafx.scene.layout.AnchorPane;
importjavafx.scene.layout.BorderPane;
importjavafx.stage.Stage;
publicclassMainAppextendsApplication{
privateStageprimaryStage;
privateBorderPanerootLayout;
@Override
publicvoidstart(StageprimaryStage){
this.primaryStage=primaryStage;
this.primaryStage.setTitle("AddressApp");
initRootLayout();
showPersonOverview();
}
/**
*Initializestherootlayout.
*/
publicvoidinitRootLayout(){
try{
//Loadrootlayoutfromfxmlfile.
FXMLLoaderloader=newFXMLLoader();
loader.setLocation(MainApp.class.getResource("view/RootLayout.fxml")
);
rootLayout=(BorderPane)loader.load();
//Showthescenecontainingtherootlayout.
Scenescene=newScene(rootLayout);
primaryStage.setScene(scene);
primaryStage.show();
}catch(IOExceptione){
e.printStackTrace();
}
}
/**

*Showsthepersonoverviewinsidetherootlayout.
*/
publicvoidshowPersonOverview(){
try{
//Loadpersonoverview.
FXMLLoaderloader=newFXMLLoader();
loader.setLocation(MainApp.class.getResource("view/PersonOverview.fx
ml"));
AnchorPanepersonOverview=(AnchorPane)loader.load();
//Setpersonoverviewintothecenterofrootlayout.
rootLayout.setCenter(personOverview);
}catch(IOExceptione){
e.printStackTrace();
}
}
/**
*Returnsthemainstage.
*@return
*/
publicStagegetPrimaryStage(){
returnprimaryStage;
}
publicstaticvoidmain(String[]args){
launch(args);
}
}

Les commentaires pars devraient vous donner quelques indices concernant ce

qu'il se passe.
Si vous excutez l'application maintenant, vous devriez voir quelque chose
ressemblant la capture d'cran figurant au dbut de ce post.

Problmes frquents
Lorsque JavaFX ne peut pas trouver le fichier fxml que vous avez spcifi, vous
devriez voir le message d'erreur suivant :
java.lang.IllegalStateException:Locationisnotset.

Pour rsoudre ce problme, vrifiez une seconde fois le chemin du fichier fxml !
Si cela ne fonctionne toujours pas, tlchargez la source de cette partie du
tutoriel et essayez avec le fichier fxml inclu !

Qu'est-ce qui suit ?

Dans la partie 2 du tutoriel (/library/javafx-8-tutorial/fr/part2/), vous allez ajouter
des donnes et des fonctionnalits notre AddressApp.
Voici quelques autres articles qui pourraient vous intresser :
JavaFX Dialogs (official) (/blog/javafx-dialogs-official/)
JavaFX Date Picker (/blog/javafx-8-date-picker/)
JavaFX Event Handling Examples (/blog/javafx-8-event-handlingexamples/)
JavaFX TableView Sorting and Filtering (/blog/javafx-8-tableview-sortingfiltering/)
JavaFX TableView Cell Renderer (/blog/javafx-8-tableview-cell-renderer/)

Intro (/library/javafx-8-tutorial/fr/)

1 (/library/javafx-8-tutorial/fr/part1/)

2 (/library/javafx-8-tutorial/fr/part2/)

3 (/library/javafx-8-tutorial/fr/part3/)

4 (/library/javafx-8-tutorial/fr/part4/)

5 (/library/javafx-8-tutorial/fr/part5/)

6 (/library/javafx-8-tutorial/fr/part6/)

7 (/library/javafx-8-tutorial/fr/part7/)

Comments

0Comments
Recommend

code.makery

Share

SortbyOldest

Startthediscussion

Bethefirsttocomment.

Subscribe

Login

AddDisqustoyoursite

Privacy

(ht (ht (/r (ht

Subscribe to receive updates by Email (https://tinyletter.com/codemakery).

Enter email
Get updates
Created by Marco Jakob (/about) Licensed under Creative Commons Attribution 4.0
(http://creativecommons.org/licenses/by/4.0/)