Introduction à JavaFX - Partie 1

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▲

I-B. Liens web intéressants▲

I-C. Les autres technologies RIA▲

II-A. En mode stand alone▲

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.

Sélectionnez les 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

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

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.

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.

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

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

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.