Cours IHM-1

JavaFX
1 - Introduction
Concepts de base
Jacques BAPST
jacques.bapst@hefr.ch

Java GUI Bref historique [1]

A l'origine du langage Java, les interfaces graphiques taient cres
en utilisant la librairie AWT (java.awt)
Composants "lourds" (heavyweight) bass sur ceux de la machine cible
Difficult de crer des applications multiplateformes (write once, run
anywhere), lourdeur

Rapidement, la librairie Swing (javax.swing) est venu complter

(et partiellement remplacer) la librairie AWT
Composant "lgers" (lightweight) dessins par la librairie
Pluggable Look&Feel
L&F multiplateforme (Metal)
L&F imitant (plus ou moins bien) ceux des OS spcifiques (Windows, OS X, )

JavaFX 1 a tent, sans grand succs, de remplacer Swing

Essentiellement bas sur un (nouveau) langage de script (JavaFX Script)
Vaine tentative pour concurrencer Flex (bas sur Flash et MXML)
IHM-1 FX01

Jacques BAPST

Java GUI Bref historique [2]

Une refonte importante du toolkit a pris en compte les critiques formules
et a conduit une nouvelle mouture : JavaFX 2
Caractristiques principales :
Abandon du langage de script
Choix de deux modes : interfaces bases sur du code Java (API) et/ou sur un
langage descriptif utilisant une syntaxe XML : FXML
Cration d'un outil interactif Scene Builder pour crer graphiquement des
interfaces et gnrer automatiquement du code FXML
Utilisation possible de feuilles de styles CSS pour adapter la prsentation sans
toucher au code (crer des thmes, des skins, etc.)
Application du modle de conception (design pattern) Builder avec un chanage
de mthodes (Fluent API)

IHM-1 FX01

Jacques BAPST

Java GUI Bref historique [3]

Avec la sortie de Java 8, une nouvelle version baptise JavaFX 8 a t
dveloppe :
Intgration dans la distribution de la plateforme standard Java (JDK, JRE)

Plus de librairie externe tlcharger et rfrencer

Scene Builder 2 : nouvelle version de l'outil d'dition graphique de GUI (FXML)

Cohabitation amliore avec les composants Swing
Prise en compte des nouveaux concepts introduits en Java 8 et notamment les
expressions lambda et les streams

Abandon des Builders (deprecated)

Ajout d'une nouvelle API pour grer l'impression

Ajout de nouveaux composants riches (DatePicker, TreeTableView, )
Gestion des crans tactiles (TouchEvent, GestureEvent, )
Amlioration des librairies graphiques 2D et 3D
Ajout d'un outil de packaging pour simplifier le dploiement des applications
JavaFX devient le standard officiel pour le dveloppement des interfaces des
applications Java

IHM-1 FX01

Jacques BAPST

Java GUI Bref historique [4]

Chronologie des principales tapes :

IHM-1 FX01

Jacques BAPST

Potentiel de JavaFX [1]

JavaFX tant le rsultat de dveloppements
rcents, il bnficie de concepts modernes qui
en font un framework intressant pour la
ralisation d'applications dans des domaines trs divers.
JavaFX est trs bien dot pour dvelopper des interfaces riches en
relation avec des donnes stockes dans des bases de donnes ou
accessibles au travers de serveurs d'informations.
Sa riche librairie graphique 2D et 3D lui donne galement un
intressant potentiel dans des domaines varis :

Reprsentations graphiques
Animations graphiques
Modlisation (CAD, )
Applications multimdia
Ralit virtuelle et augmente
Jeux

IHM-1 FX01

Jacques BAPST

Potentiel de JavaFX [2]

La possibilit de dcoupler le design graphique (grce l'outil Scene
Builder et FXML) permet de dlguer la conception graphique de
l'interface un spcialiste (UI designer) qui n'a pas l'obligation de
connatre et matriser le langage Java.
L'application possible de feuilles de style CSS renforce encore cette
sparation entre le design graphique et les traitements qui seront
effectus l'aide de code Java.
Diffrents composants complexes sont disponibles et permettent,
avec un minimum d'effort, de crer des applications riches :

Effets visuels (ombrages, transitions, animations, )

Graphiques 2D (charts)
Navigateur web (WebKit)
Images, audio, vido (media player)

IHM-1 FX01

Jacques BAPST

Potentiel de JavaFX [3]

Actuellement, de nombreuses applications sont des applications
web, bases sur les technologies HTML5 + CSS + JavaScript (avec un
grand nombre de frameworks disponibles) ou sur Flash/Flex ou
Silverlight (les deux derniers cits tant clairement en perte de vitesse).
Une comparaison dtaille entre ces technologies web et JavaFX
sort du cadre de ce cours mais plusieurs billets de blog et documents
dcrivent les caractristiques ainsi que les avantages et
inconvnients de ces diffrentes technologies, par exemple :
Introduction du livre Mastering JavaFX 8 Controls, Hendrik Ebbers,
Oracle Press, 2014
Blog Code Makery : code.makery.ch/blog/javafx-vs-html5

IHM-1 FX01

Jacques BAPST

I/F dclaratives vs procdurales [1]

La plateforme JavaFX offre deux techniques complmentaires pour
crer les interfaces (I/F) graphiques des applications :
Manire dclarative
En dcrivant l'interface dans un fichier FXML (syntaxe XML)
L'utilitaire graphique Scene Builder facilite la cration et la
gestion des fichiers FXML
L'interface peut tre cre par un designer (sans connaissance Java,
ou presque...)
Sparation entre prsentation et logique de l'application (MVC)

Manire procdurale
Utilisation d'API pour construire l'interface avec du code Java
Cration et manipulation dynamique des interfaces
Cration d'extensions et variantes (par hritage)
Homognit des sources de l'application

Il est possible de mlanger les deux techniques au sein d'une mme

application (l'API javafx.fxml permet de faire le lien entre les deux).
IHM-1 FX01

Jacques BAPST

I/F dclaratives vs procdurales [2]

Technique dclarative (fichier FXML, Scene Builder et rsultat).
<?xml version="1.0" encoding="UTF-8"?>
<?import
<?import
<?import
<?import
<?import

javafx.geometry.*?>
javafx.scene.text.*?>
javafx.scene.control.*?>
java.lang.*?>
javafx.scene.layout.*?>

<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" prefHeight="100.0" prefWidth="400.0" >

<top>
<Label id="title" fx:id="title" text="Titre" textFill="#0e17c2" >
<font>
<Font name="SansSerif Bold" size="20.0" />
</font>
</Label>
</top>
<bottom>
<Button fx:id="btnHello" mnemonicParsing="false" onAction="#handleButtonAction"/>
</bottom>
<padding>
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
</padding>
</BorderPane>

IHM-1 FX01

Jacques BAPST

10

Dploiement [1]
Une application JavaFX peut tre dploye (mise disposition des
utilisateurs) de diffrentes manires :
Installe localement comme une application autonome
(standalone/desktop application)
Semblable une application native
La machine virtuelle Java peut tre intgre ou non dans l'excutable
(.exe ou .jar)

Installe sur un serveur et intgre dans une page web

Lance depuis un navigateur, en cliquant sur un lien ou sur un autre lment
actif de la page
Lance automatiquement ds qu'une page est charge
Utilise la technique Java Web Start (fichier JNLP + descripteur de
dploiement XML)
Une fois tlcharge, l'application peut galement tre lance horsconnexion (mise en cache local)

IHM-1 FX01

Jacques BAPST

11

Dploiement [2]
Diffrents efforts de dveloppement sont en cours pour permettre
de dployer des applications JavaFX sur des terminaux mobiles
(smartphones et tablettes Android, iOS, ) ainsi que sur des systmes
embarqus (Raspberry Pi, ).
La communaut javafxports.org est notamment active dans ce
domaine assez prometteur qui permettrait, partir d'un code
unique, de gnrer de relles applications multiplateformes
(standalone et mobiles) comportant des interfaces riches.

IHM-1 FX01

Jacques BAPST

12

Projets connexes
JavaFX devrait, terme, tre totalement publi en open-source (ce
n'est que partiellement le cas) dans le cadre du projet OpenJFX.
De nombreux projets contribuent enrichir l'cosystme JavaFX.
Parmi les principaux (et les plus dynamiques) on peut mentionner :
ControlsFX : Projet open-source destin offrir des composants
supplmentaires (controls) de qualit

fxexperience.com/controlsfx

JFXtras
DataFX

TestFX

IHM-1 FX01

: Projet open-source destin fournir aux dveloppeurs

des lments utiles dans leur vie de tous les jours et qui
manquent dans la version de base de JavaFX
jfxtras.org
: Projet open-source destin faciliter la collaboration
entre une application JavaFX et un systme de gestion
des donnes (DB, )
javafxdata.org
: Librairie pour automatiser le test des applications
JavaFX
github.com/TestFX
Jacques BAPST

13

Documentation [1]
Quelques rfrences web utiles ( mettre dans vos bookmarks) :
Tutoriel officiel Oracle

docs.oracle.com/javase/8/javase-clienttechnologies.htm

FX-Experience : Blog gr par des experts du domaine

(news, demos, )
Autre blog ddi diffrentes thmatiques JavaFX

fxexperience.com
guigarage.com

Communaut des dveloppeurs du projet open-source OpenFJX

(qui est un sous-projet de OpenJDK)
javafxcommunity.com
API JavaFX (Javadoc)

docs.oracle.com/javase/8/javafx/api

Attention : On trouve, sur le web, encore passablement de documentation et de code

JavaFX en version 1.x. Des changements majeurs sont intervenus dans les
versions 2.x et 8.x. Tout ce qui date d'avant 2012 doit tre considr avec
beaucoup de prudence et de circonspection.
IHM-1 FX01

Jacques BAPST

14

Documentation [2]
Quelques livres :
Pro JavaFX 8 - A Definitive Guide to Building Desktop, Mobile,
and Embedded Java Clients
James Weaver, Weiqi Gao, Stephen Chin, Dean Iverson,
Johan Vos, Adrian Chin
Apress, 2014
ISBN: 978-1430265740
JavaFX 8 - Introduction by Example
Carl Dea et Mark Heckler
Apress, 2014

ISBN: 978-1430264606

Mastering JavaFX 8 Controls

Hendrik Ebbers
McGraw-Hill Professional - Oracle Press, 2014

ISBN: 978-0071833776

IHM-1 FX01

Jacques BAPST

15

Programmation Java
Avant d'aborder les concepts principaux de JavaFX il est ncessaire
de prsenter quelques lments de programmation Java qui sont
utiles voire ncessaires pour dvelopper des applications avec des
interfaces graphiques.
Il s'agit notamment des notions suivantes :

Types numrs (enum)

Gnricit (classes, interfaces et mthodes gnriques)
Structures de donnes prdfinies (Collections)
Annotations (@...)
Expressions lambda
Rfrences de mthodes
Streams

Ces notions seront sommairement prsentes au chapitre suivant

qui constitue une petite parenthse technique de programmation
Java, indispensable pour aborder la suite.
IHM-1 FX01

Jacques BAPST

16