Dans ce billet, un petit programme en JavaFX qui dessine en un échiquier. Ce petit programme était l'occasion de s'essayer à utiliser un
CustomNode (qui ici correspondra à l'échiquier). Et quand il y a quelques années j'enseignais la programmation en Java, le dessin d'un échiquier était un des premiers TP que je donnais aux étudiants quand nous abordions AWT/Swing, parce que c'est simple à mettre en oeuvre.
Ci-après la copie d'écran du programme :
Ce programme est composé de 2 fichiers :
ChessBoardNode.fx qui contient la classe
ChessBoardNode qui étend la classe
CustomNode et
Main.fx qui contient notre
Stage et utilise le
ChessBoardNode.
Tout d'abord
ChessBoardNode.fx :
/*
* ChessBoardNode.fx
*
*/
package simplechessboard;
import javafx.scene.CustomNode;
import javafx.scene.Group;
import javafx.scene.Node;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
/**
* @author TGITS
*/
public class ChessBoardNode extends CustomNode {
public var lightColor:Color;
public var darkColor:Color;
public var casesByRow:Integer;
public var numberOfRows:Integer;
public var caseWidth:Integer;
public var caseHeight:Integer;
public var x:Integer;
public var y:Integer;
override function create():Node {
return Group {
content: for (i in [1..casesByRow]) {
for (j in [1..numberOfRows]) {
Rectangle {
x: this.x + this.caseWidth * (i-1);
y: this.y + this.caseHeight * (j-1) ;
width: this.caseWidth;
height: this.caseHeight;
fill: if ((i+j) mod 2 == 0) {this.lightColor}
else {this.darkColor };
}//Rectangle
}//for
}//content
}//Group
}//Create
}//create
Tout ceci est assez simple, mais revenons sur quelques points :
- La classe
CustomNode est une classe abstraite et il faut redéfinir la fonction "create" ; attention en JavaFX quand on redéfinit il faut utiliser le mot clé
override.
Cette fonction
create est un peu comme la méthode
paint pour les composants graphiques en Java/Swing : en la redéfinissant on indique comment le composant doit être "peint". Cette méthode doit retourner un objet de type Node. Ici on créé plusieurs
Rectangle (en fonction du nombre de lignes et du nombre de cases par ligne, valeurs définies dans les attributs) pour lesquels on alterne les couleurs parmi 2 et qui forment un
Group, sous-classe de
Node.
On remarquera qu'un certain nombre d'attributs ont été définis pour rendre l'échiquier plus facilement paramétrable.
Autre point, on notera ici l'utilisation du
for et du
if : il faut rappeler qu'en JavaFX, ce sont des expressions et qu'ils retournent un résultat.
A part cela, ce code ne pose pas de difficultés particulières.
Maintenant utilisons cette classe dans
Main.fx :
/*
* Main.fx
*
*/
package simplechessboard;
import javafx.scene.paint.Color;
import javafx.scene.Scene;
import javafx.stage.Stage;
import simplechessboard.ChessBoardNode;
/**
* @author TGITS
*/
Stage {
title: "Simple Chess Board"
scene: Scene {
content : ChessBoardNode {
lightColor:Color.WHITE;
darkColor:Color.BLUE;
casesByRow:8;
numberOfRows:8;
caseWidth:50;
caseHeight:50;
}//content
}//Scene
}//Stage
On utilise directement un objet
ChessBoardNode, en renseignant certains de ces attributs. On notera que l'abscisse et l'ordonnée de l'échiquier ne sont pas renseignées, pas plus d'ailleurs que la largeur ou la hauteur de la
Scene ou du
Stage : c'est JavaFX qui détermine tout cela en prenant les valeurs au plus juste.
Initialement, je voulais proposer une suite à ce billet sur JavaFX, en repartant de cet exemple et en l'améliorant un peu par la mise en oeuvre du "
binding" de JavaFX pour obtenir simplement des petits effets sympathiques. Cependant je trouve qu'un billet de blog ce n'est pas l'idéal pour faire un texte comportant du code. En effet, je ne doit pas être doué mais je n'ai pas réussi à faire une mise en page correcte simplement pour les parties de code. En plus pas possible de joindre une archive du projet.
Entretemps j'ai créé un petit
site sur Google Sites, dans lequel
je reprends et complète ce billet.
Messages
