JavaFX (présentation de la bibliothèque, exemple de code)

Davide Gagliardi

<< JavaFX >>

                                                          

INTRODUCTION :

Java a différentes méthodes pour la création d’interfaces graphiques dont les principales sont  :

-SWING

-ATW 

Ce sont librairies graphiques très ancienne et avec un langage complexe.

 

Java FX Versions:

- JAVAFX1 , cette version a échoué

- JAVAFX2, totalement différent de la première version

- JAVAFX8

-JAVAFX9, version actuelle.

JavaFx est une technologie créée par Sun Microsystem, qui appartient désormais à Oracle.

Cette technologie est principalement utilisée pour la creation de Rich Internet Application (RIA).

RIA : Il s’agit des applications web qui ont le mêmes caractéristiques que les logiciels traditionnels installés sur un ordinateur.

Avec JavaFx il est possible de créer des applications pour les ordinateurs, les portables etc...JavaFx a aussi son propre langage de programmation ‘JavaFx script’,un langage dédié à la graphique.

Le SDK de JavaFx étant désormais intégré au JDK standars Java SE, il est inutile de réaliser une installation spécifique pour JavaFx. Il suffit d'avoir une version de la JDK plus récente que  7

 


PRINCIPE DE FONCTIONNEMENT :

  1.  On peut normalement utiliser le langage Java ou pour le layout un fichier XML appelé FXML ;
  2. Pour les bords, les couleurs etc... JavaFx utilise la technologie CSS (la même utilisée par les pages html) ;
  3. Simplification en ce qui concerne la gestion des événements (compliquée dans SWING et ATW).

Concepts clés :

        

  • Stage : c’est la fenêtre qui contient le boutons principales pour fermer, minimiser et maximiser et elle est géré par le système d’exploitation;
  • Scene :ce sont le différentes pages contenues dans le Stage. Il y aura plusieurs ‘Scene’;
  • Node : ce sont les élémentes graphiques contenus dans le Scene(Boutons, Textbox etc...).

   NB : Stage,Scene et Node sont des Classes Java;

Les Nodes (contrôles) les plus importants :

 

il y a aussi des NodesChartes’ (graphiques)

JavaFx propose un grand nombre de types de diagrammes différentes : en fromage, en barres,en courbes.                      

         

 

JavaFx JavaDoc API
https://docs.oracle.com/javafx/2/api/index.html

 

 

 

 

et node Parent ou Container ou Panneau :

AnchorPane                                                   BorderPane         

 

                 

 FlowPane                                                    Vbox-Hbox

                

StackPane                                                    TilePane

              

GridView


 UML JAVAFX

Dans l ‘ application il y a une méthode ‘main’ et une méthode ‘start’. Application est la superclasse de la classe MyApp qui contient la méthode launch ,que est appelé dans le main, et aussi start (on fait l’Override).La classe Application crée le Stage (avec ‘launch’) qui sera le même Stage passé en paramètre à la méthode ‘start’ de la classe MyApp. Après MyApp crée une Scene, des Nodes (LeafNodes ,c’est-à-dire des contrôles, et Parent ou Container). Un des Nodes est aussi le Root Node, et ce Root Node "accroche" tous les Nodes à la Scene.

-Un 'Scene' est composé de un ou plusieurs Nodes

-Un 'Node' est composé de un ou plusieurs fils(ou Panneuax)


PREMIÈRE CLASSE EN JAVAFX

public class Main extends Application {

@Override

public void start(Stage stage){

Group root = new Group() ; //Le root est Group ou Pane

Scene scene = new Scene(root, 500,500, Color.BLACK) ;

stage.setTitle( ‘JAVAFX Demo’ ) ;

Rectangle r = new Rectangle(25,25,250,250) ;//Nodes(ajouter un rectangle bleu dans la ‘scene’)

r.setFill(Color.BLUE) ;

root.getChildren().add(r) ;

stage.setScene(scene) ; //Pour choisir la ‘scene’

stage.show() ;

         }

public static void main(String[] args){

launch(args) ; //launch est une méthode de la SuperClass ‘Application’

       }

}

il y a deux options pour créer un layout  , ce sont :

- Java ou FXML.

le code peut être écrit à la main ou avec le logiciel ‘Scene Builder’ qui construit le fichier FXML grâce à la graphique que nous ferons.

Scene Builder téléchargement : SceneBuilder.

Notre méthode start (Override method) sera :

@Override

public void start (Stage stage) throws Exception {

Parent root = FXMLLoader.load(getClass().getResource("circle.fxml")) ;

stage.setTitle("Circle Demo") ;

stage.setScene(new Scene(root, 500, 150)) ;

stage.show() ;

}


PREMIÈRE JAVAFX PROJECT

Si vous avez cette erreur  en création :

The type 'Application' is not API (restriction on required library 'C:\Program Files\Java\jre1.8.0_151\lib\ext\jfxrt.jar')

-Bouton droit de la souris sur ‘JRE System Library’ → Properties → Workspace Default JRE → Apply and close.

Cette erreur peut survenir car Eclipse ‘pense’ que la librairie utilisée n’est pas dans le public-API. Ce mécanisme est appelle : ACCESS RESTRICTION.

      Méthode main

  • Application est la superclasse qui contient la méthode ‘start’
  •  EventHendler est l’interface qui contient la méthode ‘handle’. Cette méthode est appelée quand un objet fait exécuter une action.

    Méthode start

  • On utilise b1.setOnAction(this) pour commander au bouton que la méthode à utiliser sera le ‘handle’ de cette classe.

        Méthode handle

  •         Quand on clique dessus le Bouton ‘b1’ il affichera ‘W La France’ dans la console.


DEUXIÈME JAVAFX PROJET (Création d’un login)

Il existe une autre manière pour créer un projet JavaFx avec un plugin qui permet de créer un projet JavaFx avec un fichier .fxml et un controller.

Pour télécharger le plugin → Help → Install new Software → et coller :

e(fx)clipse - IDE - Updatesite - http://download.eclipse.org/efxclipse/updates-released/2.0.0/site (choisir e(fx)eclipse – install).

Pour créer un nouveau projet JavaFx :

File → New → Other → JavaFX Project.

Après, il faut choisir le nom du projet et aussi :

- Application type → Desktop ou Mobile

-Package name

-Langage(pour créer l’interface utilisateur) : None , FXGraph , FXML(On choisira ce langage)

-Root Type : pour choisir le panneau(AnchorPane dans ce case)

-File Name : c’est le nom du fichier fxml

-Controller Name : c’est le nom du controller.

Arbre du projet :

 

Il y aura aussi un fichier.css (java a créé  ce stylesheet) pour modifier l’esthétique de  notre application .

 

 

 

Télécharger le Scene Builder.

Pour editer notre ‘Bienvenue.fxml’ , bouton droit de la souris et choisir ‘Open with SceneBuilder’.

On ne voit rien car le 'Stage' n ‘ a ni hauteur ni longueur . Pour les modifier aller sur l’onglet ‘Layout’ et modifier ‘Pref Width’ et ‘Pref Height’. Utiliser 700 et 400 et aussi choisir le background-color (#20120F).

On obtient :

Il faut placer un autre AncorPane(dans le première AncorPane ) pour la zone de identification

 

On place aussi une ‘TextBox’ pour l’ID , une ‘PasswordField’ pour le mot de passe et un bouton. Pour mettre une image il faut mettre un ImageView dans le container. Pour le remplir avec une image il faut spécifier le chemin de l’image (il est possible de la placer dans le src du projet).

Pour donner un objetId à chaque objet dans notre application il faut aller dans la section ‘code’ de l’objet et écrire l ‘ objetId dans ‘fx:id’. Il faut le faire pour tous les éléments qui nous intéressent.Il y a egalement une ‘textbox’ pour déclarer le nom de la methode ‘OnAction’ pour le bouton. Une fois terminé on aura un fichier que sera notre Controller.(Le SceneBuilder n’ écrit pas directement dans le BienvenueController mais il fait une copie). Pour Copier cette copie :

View → Show sample controller Skeleton ;

On aura :                                                   Coller dans le BienvenueController.java

public class BienvenueController {                                          

@FXML

private Button BtnSite;

@FXML

private PasswordField password;

@FXML

private Button btnLogin;

@FXML

private TextField username;

@FXML

void makeLogin(ActionEvent event) {}

Ensuite on peut remplir notre méthodes (il y a une autre méthode pour le second bouton qui ouvre une page sur internet ).

La Classe ‘Desktop’ est une classe qui appartient à AWT mais qu'on peut egalement utiliser avec JavaFx.

Pour terminer, fermer la fenêtre avec un bouton(il faut ajouter une autre méthode dans le Controller) .

Pour enlever la bar avec les icônes pour fermer, réduire etc... on utilise la méthode suivante (dans start)  :

stage.initStyle(StageStyle.UNDECORATED);

stage.setWidth(940); //Pour fixer hauteur et longueur

stage.setHeight(470);

On Obtient:

 


JavaFx peut être utilisé soit pour les applications web soit pour créer des jeux vidéo (2d ou 3d)

Veuillez trouver ci-dessous des examples:

https://www.youtube.com/watch?v=xAZQfXvlpsI -Advanced Application Development  

https://www.youtube.com/watch?v=uPa3pu8qEx4 -Java 3D Game 

https://www.youtube.com/watch?v=B5H_t0A_C14&t=11s -Connect 4.

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *