code.makery (/)Learning how to code.

Subscribe to Updates

Home (/)

Library (/library/)

Paths (/paths/)

Blog (/blog/)

About (/about/)

Edit on GitHub(https://github.com/marcojakob/code.makery.ch/edit/master/collections/library/javafx-8-tutorial-fr-part1.md)Tutoriel JavaFX 8 - partie 1 : leScene BuilderApr 19, 2014 Updated Apr 15, 2015

Les articles dans ce tutoriel Tlchargez les sources Langues

Sujets dans la partie 1Faire connaissance avec JavaFXCrer et dmarrer un projet JavaFXUtiliser le Scene Builder pour concevoir l'interface utilisateurStructurer simplement une application en utilisant le modle de conceptionmodle vue contrleur

Prrequisle 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 detlcharger la distribution prconfigure depuis le site e(fx)clipse(http://efxclipse.bestsolution.at/install.html#all-in-one). Une autre faon defaire consiste utiliser le site de mise jour(http://www.eclipse.org/efxclipse/install.html) pour votre installationd'Eclipse.Scene Builder 8.0 (http://gluonhq.com/products/scene-builder/) (fourni parGluon car Oracle le distribue seulement sous la forme de code source(http://www.oracle.com/technetwork/java/javase/downloads/sb2download-2177776.html)).

Configuration d'EclipseNous devons paramtrer Eclipse pour qu'il utilise le JDK 8 et qu'il sache otrouver 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 etslectionnez le dossier contenant le JDK 8.

3. Supprimez les autres JREs et JDKs afin que le JDK 8 devienne le JDK pardfaut (default) !

4. Slectionnez la partie Java | Compiler. Dfinissez la Compiler compliancelevel 1.8 !

5. Slectionnez la partie JavaFX puis spcifiez le chemin de votre excutableScene Builder !

Liens utilesPeut-tre voudrez-vous mettre les liens suivants dans vos favoris :

Java 8 API (http://docs.oracle.com/javase/8/docs/api/) - JavaDoc pour lesclasses Java standardJavaFX 8 API (http://docs.oracle.com/javase/8/javafx/api/) - JavaDoc pourles classes JavaFXControlsFX API (http://controlsfx.bitbucket.org/) - JavaDoc pour les projetsprojets ControlsFX (http://fxexperience.com/controlsfx/) et les contrlessupplmentaires JavaFXOracle's JavaFX Tutorials (http://docs.oracle.com/javase/8/javafx/get-started-tutorial/get_start_apps.htm) - Tutoriels officiels d'Oracle

Maintenant, nous pouvons commencer !

Crer un nouveau projet JavaFXDans votre IDE Eclipse (avec e(fx)clipse install), cliquez sur File | New | Other... etslectionnez 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 packagesDs maintenant nous allons suivre les bonnes pratiques de programmation. Unprincipe trs important est le Model-View-Controller (MVC)(http://en.wikipedia.org/wiki/Model_View_Controller). En accord avec ceci, nousdivisons notre code en trois units. Nous allons crer un package pour chaquesparties : (clic droit sur le dossier src, New... | Package):

ch.makery.address - contient la plupart des classes contrleur ( = la logiquemtier)ch.makery.address.model - contient les classe modlech.makery.address.view - contient l'interface graphique

Note: Notre package view contiendra aussi quelques contrleurs dpendantdirectement d'une interface graphique unique. Appelons-les view-controllers !

Crer le fichier de disposition FXMLIl y a deux manires de crer une interface utilisateur. L'une consiste utiliser unfichier 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) pourpresque toutes les interfaces. Je trouve cette faon de faire plus propre car celapermet de mieux sparer les contrleurs des interfaces. De plus, nous pouvonsutiliser l'outil graphique Scene Builder pour modifier le XML. Cela signifie quenous n'aurons pas travailler directement en XML.

Clic droit sur le package view et new FXML Document ! Nommez-lePersonOverview !

Conception de la GUI avec Scene BuilderNote : si vous ne pouvez pas faire fonctionner Scene Builder, tlchargez lasource 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 SceneBuilder. Maintenant vous devriez voir s'afficher le programme Scene Builder avecun AnchorPane (visible dans la partie hirarchie sur la gauche).

(Si Scene Builder ne dmarre pas, cliquez sur Window | Preferences | JavaFX etdfinissez le chemin correct relatif l'installation de votre Scene Builder).

1. Dans la partie Hierarchy, slectionnez l'Anchor Pane et ajustez la taille sousLayout (dans la partie de droite):

2. Ajoutez un Split Pane (Horizontal Flow) en utilisant un drag et drop depuis lalibrairie sur gauche jusque dans la partie centrale ! Faites un clic droit dans lapartie 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) etamenez-le dans la partie de gauche du SplitPane. Slectionnez la TableView(pas la colonne mais le tableau) et dfinissez la contrainte du TableViewcomme suit. Dans un AnchorPane, vous pouvez toujours dfinir les ancressur les quatres bords (plus d'information dans la partie relative aux Layouts(http://docs.oracle.com/javase/8/javafx/layout-tutorial/builtin_layouts.htm)).

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

5. Modifiez l'entte des colonnes (dans les proprits) ! Nommez-les "FirstName" et "Last Name" !

6. Slectionnez le TableView et dfinissez constrained-resize sous ColumnResize Policy (dans les proprits). Ceci spcifie que la colonne prendra toutl'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 layouten utilisant les ancres.

8. Ajoutez un GridPane sur le ct droit, slectionnez-le puis ajuster son layouten 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'unligne existante (elle deviendra jaune) puis faites un clic droit sur l'index etslectionnez "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 ci-dessous. Utilisez le menu Preview pour tester le comportement aprsredimensionnement.

Crer l'application principaleVous avez besoin d'un autre fichier FXML pour la disposition de base. Celle-cicontiendra une barre de menu et encapsulera le PersonOverview.fxml que nousvenons de crer.

1. Crez un autre FXML Document dans le package view appelRootLayout.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'implmenteronspas les fonctionnalits du menu pour l'instant.

La classe principale de JavaFXMaintenant vous devez crer la classe principale (main java class) qui dmarreranotre application avec le fichier RootLayout.fxml et ajoutera laPersonOverview.fxml au centre.

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

2. Nous nommerons la classe MainApp et nous la placerons dans le packagecontrleur ch.makery.address (note : c'est le package parent des sous-paquets view et model ).

La classe MainApp.java gnre hrite de la classe Application et contient deuxmthodes. C'est la structure basique dont nous avons besoin pour dmarrer uneapplication JavaFX. La partie la plus importante pour nous est la mthodestart(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 aenparamtre. Le diagramme suivant montre la structure de toutes les applicationsJavaFX :

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 esthabituellement une fentre avec des bordures et qui a les boutons habituels pourminimiser, 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 lesnoeuds 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;

@Overridepublicvoidstart(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.fxml"));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 cequ'il se passe.

Si vous excutez l'application maintenant, vous devriez voir quelque choseressemblant la capture d'cran figurant au dbut de ce post.

Problmes frquentsLorsque JavaFX ne peut pas trouver le fichier fxml que vous avez spcifi, vousdevriez 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 dututoriel 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 ajouterdes 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-handling-examples/)JavaFX TableView Sorting and Filtering (/blog/javafx-8-tableview-sorting-filtering/)JavaFX TableView Cell Renderer (/blog/javafx-8-tableview-cell-renderer/)

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

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

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

0Comments code.makery Login1

Share SortbyOldest

Startthediscussion

Bethefirsttocomment.

Subscribe AddDisqustoyoursited Privacy

Recommend

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/)

(ht (ht (/r (ht