Introduction à JavaFX - Partie 1

Pierre-Nicolas Mougel

Cet article présente JavaFX Script, une nouvelle technologie de SUN pour les RIA basé sur Java. A la fin de cet article vous devriez avoir un premier aperçu de cette technologie et être capable d'écrire un programme simple. D'autres articles sur JavaFX suivront qui en présenteront d'autres aspects.
Le contenu de cette présentation est facilement accessible à tout développeur ayant quelques connaissances en conception d'IHM. Des notions sur Java peuvent être utiles mais ne sont pas nécessaire.

- Titre : Introduction à JavaFX - Partie 1

- Auteur : Pierre-Nicolas Mougel

- Parution : 1 janvier 2008

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2008 Pierre-Nicolas Mougel. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Présentation de JavaFX

- I-A. Quelques exemples d'applications JavaFX

- I-B. Liens web intéressants

- I-C. Les autres technologies RIA

- II. Installation

- II-A. En mode stand alone

- II-A-1. Téléchargement

- II-A-2. Lancement d'un programme

- II-B. Plugin Eclipse

- II-B-1. Installation

- II-B-2. Création et exécution d'un projet

- II-C. Plugin Netbeans

- II-C-1. Installation

- II-C-2. Création et exécution d'un projet

- III. Programme simple avec JavaFX Script

- IIII. Conclusion

I - Présentation de JavaFX

JavaFX est un ensemble de technologies de Sun Microsystems pour le monde des RIA. Pour l'instant JavaFX comprend le langage JavaFX Script et JavaFX Mobile. En fait bien que le nom complet du langage soit JavaFX Script nous le raccourcirons en général par JavaFX, même si les technologies et le langage sont bien différents.

JavaFX apporte donc des solutions pour la création d'interfaces utilisateurs évoluées dans le même genre que celles développées avec Flash ou WPF. Cela permet également de faciliter le passage d'une application sur différentes plateformes web, desktop ou mobile. Enfin, JavaFX permet surtout de séparer la partie design d'une application de la partie métier, ce qui devrait faciliter la création d'interfaces utilisateur par des équipes spécialisées dans le graphisme et non dans le développement, et ainsi produire des IHM plus attractives.

JavaFX se base sur la machine virtuel Java pour fonctionner donc la communication avec des applications java standard est très simple. Une application JavaFX a accès à toutes les classes fournies par la machine virtuelle java, cependant le langage JavaFX Script est très différent de Java. JavaFX est un langage déclaratif typé statiquement. Si ces notions ne sont pas très claires pour l'instant l'exemple a la fin de l'article devrait vous éclaircir. Ce langage reprend également beaucoup de notions des langages de scripts à la mode tels que Python ou Ruby.

A l'heure actuel JavaFX en est encore au stade de développement, donc il y a encore des bugs et certaines fonctionnalités ne sont pas implémentés, cependant cette technologie me semble très prometteuse et j'espère qu'un aperçus du futur des technologies JavaFX vous donnera envie de les utiliser quand elles arriveront à maturité.

I-A - Quelques exemples d'applications JavaFX

Ces applications sont tirées du site openjfx. Elles utilisent une version de JavaFX en développement donc quelques bugs subsistent, cependant elles illustrent bien les possibilités de cette technologie.

JavaFX Pad : Un éditeur léger qui permet de visualiser l'exécution de programme JavaFX dans la partie supérieur de la fenêtre.

Studio Moto : Une application montrant quelques effets graphiques intéressant disponible dans JavaFX.

Moteur Tesla : Une autre application reprenant la page web des moteurs Tesla.

Client Messenger : Un client messenger écrit avec JavaFX.

Convertisseur SVG : Permet de convertir un document SVG en une classe JavaFX.

Weatherfx : Cette application affiche le temps dans 3 endroits différents. Elle utilise un service web pour connaitre le temps.

I-B - Liens web intéressants

Toutes les informations de cet article proviennent des sites web ci-dessous, vous devriez pouvoir y trouver de nombreuses informations complémentaires à cet article.

OpenJFX : Le site de la communauté qui développe JavaFX, on y retrouve des exemples d'utilisation, des démos, des cours et tous les téléchargements qui concernent JavaFX.

FAQ JavaFX : La FAQ de JavaFX

http://java.sun.com/javafx/ : La présentation de JavaFX sur le site de Sun. Il contient des liens et quelques cours.

Wiki JavaFX : Un wiki avec de nombreux cours et codes sources utilisant JavaFX.

I-C - Les autres technologies RIA

Pour un comparatif avec les autres technologies RIA je vous conseil l'article de Fabien Deshayes : Comparatif technologies riches

II - Installation

II-A - En mode stand alone

Cette installation permet d'avoir accès à un maximum de ressource, mais ne permet pas d'être intégrée dans un IDE.

II-A-1 - Téléchargement

Il faut commencer par télécharger le runtime et les librairies nécessaires à l'utilisation de JavaFX. Elles sont disponibles depuis un serveur svn ou à cette adresse : https://openjfx.dev.java.net/servlets/ProjectDocumentList

L'archive contient le code source, les librairies, des exemples de démonstration et la documentation.

Une fois l'archive téléchargé, décompressez-la dans le dossier de votre choix.
Elle contient les dossiers suivant :

- /trunk/bin/ : Les programmes permettant d'exécuter vos applications

- /trunk/demos/ : Des applications de démonstrations vous permettant de vous familiariser avec les possibilités de JavaFX

- /trunk/doc/ : La documentation complète de JavaFX

- /trunk/lib/ : Les librairies permettant l'utilisation de JavaFX

- /trunk/src/ : Le code source de JavaFX

- /trunk/www/ : Quelques informations sur JavaFX

II-A-2 - Lancement d'un programme

Il est beaucoup plus simple de rajouter le programme javafx.bat dans les variables du PATH de Windows.

Pour lancer un programme vous utilisez la commande suivante : javafx.bat nomDesPackages.nomDuFichierSansExtension
Par exemple si votre fichier HelloWorld.fx se trouve dans le package demo.javafx vous utiliserez la commande suivante : javafx.bat demo.javafx.HelloWorld

II-B - Plugin Eclipse

La configuration minimale d'Eclipse est 3.2.2

II-B-1 - Installation

Je déconseille l'utilisation du plugin JavaFX sous Eclipse si vous utilisez Eclipse pour d'autres projets java. En effet après l'installation du plugin la compilation des projets java a commencé à avoir des disfonctionnements et l'auto complétion a arrêté de fonctionner. Malheureusement je n'ai pas réussi à trouver d'où pouvais venir le problème.

Pour installer le plugin Eclipse il faut aller dans le gestionnaire de plugins : Help > Software Updates > Find and install
Choisissez d'installer des nouvelles fonctionnalités

Ajouter le site http://download.java.net/general/openjfx/plugins/eclipse/site.xml dans la liste des sites de mise à jour.

Ajout d'un nouveau site de mise à jour

Sélectionnez les plugins disponibles

Liste des plugins disponibles

Acceptez la licence d'utilisation et relancez la plateforme Eclipse.
Vous pouvez désormais utiliser JavaFX dans Eclipse.

II-B-2 - Création et exécution d'un projet

Pour cela il faut créer un projet java standard, et ensuite ajouter un fichier JavaFX à ce projet. Cela rajoutera automatiquement toutes les librairies nécessaires à JavaFX au projet.

Pour exécuter le programme, il faut créer une nouvelle configuration d'exécution. Pour cela il faut sélectionner le projet java, puis dans l'onglet Arguments mettre le nom du fichier source sans son extension dans la partie Program arguments

Configuration d'exécution

II-C - Plugin Netbeans

Cette méthode nécessite la version 6 de Netbeans pour fonctionner. Une version du plugin pour Netbeans 5.5.1 est également disponible.

II-C-1 - Installation

Il faut tout d'abord ouvrir le gestionnaire de plugins et sélectionner l'onglet Available plugins

Gestionnaire de plugins

Recherchez le plugin JavaFX Script dans la liste, s'il n'apparait pas il faut aller dans l'onglet settings et activer tout les centres de mise à jour. Sélectionnez ensuite Netbeans Beta et cliquez sur Edit.

Ajout d'un centre de mise à jour

Dans la fenêtre rajoutez l'url http://updates.netbeans.org/netbeans/updates/6.0/uc/final/beta/catalog.xml.gz et cliquez sur Ok. Vous pouvez revenir à l'onglet des plugins disponible, le plugin JavaFX devrait être désormais disponible.
Sélectionnez-le et cliquez sur Install.
Sur la fenêtre suivante cliquez sur le bouton Next
Acceptez la licence et redémarrez Netbeans pour prendre en compte les modifications.

II-C-2 - Création et exécution d'un projet

Cette étape est très simple, il suffit de créer un projet de type JavaFX.
Vous devez choisir un nom pour votre projet et choisir un emplacement pour les fichiers.

Création d'un nouveau projet

Pour exécuter votre programme, cliquez avec le bouton droit sur votre projet et choisissez Run Project

III - Programme simple avec JavaFX Script

Pour être un peu original, je vous propose une première application "Bonjour JavaFX". Cet exemple est largement inspiré du tutoriel "Getting Started with the JavaFX Script Language" du site https://openjfx.dev.java.net/, mais vous avouerez qu'il n'y a pas énormément de façon de réaliser un HelloWorld...

Il faut tout d'abord créer un nouveau projet avec l'éditeur de votre choix.

Commençons par importer les classes dont nous aurons besoin. Les utilisateurs de java devraient être familiers avec cette syntaxe.

import javafx.ui.*;

Créons ensuite une classe HelloWorldModel qui contiendra les données de notre application. Ici nous avons juste besoin d'un texte.

On remarque une syntaxe un peu spéciale pour déclarer un attribut de classe. Le type se trouve après le nom de la variable, et on ne spécifie pas de niveau de visibilité.

class HelloWorldModel {
attribute text : String;
}

Nous avons besoin d'une instance de notre modèle, nous l'appellerons model et le texte sera initialisé avec la valeur "Rien à dire..."

var model = HelloWorldModel {
text : "Rien a dire..."
};

Voici un premier exemple de syntaxe déclarative. A la différence de java où il faudrait commencer par instancier une classe puis utiliser des méthodes pour modifier les attributs ici l'instanciation et l'initialisation se fait en même temps. Il ne s'agit pas d'un constructeur spécifique, on peut choisir d'initialiser ou pas n'importe quel attribut de la classe avec cette syntaxe.

Il serait également possible d'utiliser cette syntaxe qui ressemble plus a du java classique :

var model = new HelloWorldModel();
model.text = "Rien a dire...";

Nous allons maintenant créer notre fenêtre, toujours en utilisant la syntaxe déclarative.

Frame {
title: "BonjourFX"
width: 300
height: 150
visible: true
content: GridPanel {
border: EmptyBorder {
top: 10
left: 10
bottom: 10
right: 10
}
rows: 2
columns: 1
}
}

Avec ce bout de code, nous avons une fenêtre qui s'affiche à l'écran avec quelques attributs initialisés : Le titre, la taille et on indique à la fenêtre qu'elle doit s'afficher.
On indique également que le panel doit utiliser le layout GridPanel qui contiendra deux lignes et une colonne, avec des bords de 10px.
Cependant, cette fenêtre ne contient rien. Nous allons donc rajouter quelques composants à notre fenêtre en utilisant l'attribut cells de la classe GridPanel.

cells : [
Label {
text: bind model.text
},
Button {
text: "Dis bonjour"
action: operation() {
model.text = "Bonjour JavaFX !!";
}
}
]

cells prend en paramètre un tableau de Widget. Les crochets [ et ] permettent de créer un tableau de manière déclarative. Le premier widget est un label, dont la valeur sera récupérée à partir de l'attribut text de notre modèle. A chaque fois que la valeur du modèle sera modifiée, notre Label sera également automatiquement modifié.

Le deuxième widget est un bouton qui lorsqu'il sera appuyé modifiera la valeur de l'attribut text de notre modèle. On remarque que le bouton n'appel aucune méthode du label, cependant puisque celui-ci est lié à la valeur de l'attribut text il sera automatiquement modifié lorsque l'on appuiera sur le bouton.
On remarque également qu'il n'est pas nécessaire de créer une nouvelle classe pour ajouter un comportement à un bouton.

Le programme est désormais terminé, vous pouvez lancer l'exécution du programme. Si tout c'est bien passé votre première application JavaFX devrait démarrer, bravo !!

Première application JavaFX

IIII - Conclusion

J'espère que cette première partie vous aura mis l'eau à la bouche concernant JavaFX. J'imagine que vous avez beaucoup de questions concernant le langage, comme la gestion de l'encapsulation, la communication avec un programme java ou les nouvelles possibilités pour réaliser une interface graphique.

Et bien les prochaines parties de cet article répondront à ces questions, et vous aurez l'occasion de découvrir d'autres fonctionnalités intéressantes de ce langage comme la gestion des tableaux et l'introspection.