TP1 (suite)
Initiation à JavaFX
Commençons par la construction d’une interface très simple : une simple contenant
un bouton, dessinée ci-dessous :
Le code qui permet d’afficher cette interface est le suivant :
import [Link];
import [Link];
import [Link];
import [Link];
public class MyJavaFX extends Application {
@Override // Override the start method in the Application class
public void start(Stage primaryStage) {
// Create a button and place it in the scene
Button btOK = new Button("OK");
Scene scene = new Scene(btOK, 200, 250);
[Link]("MyJavaFX"); // Set the stage title
[Link](scene); // Place the scene in the stage
[Link](); // Display the stage
}
/**
* The main method is only needed for the IDE with limited
* JavaFX support. Not needed for running from the command line.
*/
public static void main(String[] args) {
launch(args);
}
}
Ce programme permet d’afficher une seule scène. On peut afficher plusieurs scènes :
Exemple 2 : affichage de 2 scènes.
import [Link];
import [Link];
import [Link];
import [Link];
public class MultipleStageDemo extends Application {
public void start(Stage primaryStage) {
// Create a scene and place a button in the scene
Scene scene = new Scene(new Button("OK"), 200, 250);
[Link]("MyJavaFX"); // Set the stage title
[Link](scene); // Place the scene in the stage
[Link](); // Display the stage
Stage stage = new Stage(); // Create a new stage
[Link]("Second Stage"); // Set the stage title
// Set a scene with a button in the stage
[Link](new Scene(new Button("New Stage"), 100, 100));
[Link](); // Display the stage
}
/**
* The main method is only needed for the IDE with limited
* JavaFX support. Not needed for running from the command line.
*/
public static void main(String[] args) {
launch(args);
}
}
On obtient l’affichage suivant :
Il existe plusieurs types de pane (sous-classes de la classe pane):
1) StackPane : Les éléments sont « empilés » les uns sur les autres
Exemple
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
public class ButtonInPane extends Application {
public void start(Stage primaryStage) {
// Create a scene and place a button in the scene
StackPane pane = new StackPane();
[Link]().add(new Button("OK"));
Scene scene = new Scene(pane, 400, 100);
[Link]("Button in a pane"); // Set the stage title
[Link](scene); // Place the scene in the stage
[Link](); // Display the stage
}
public static void main(String[] args) {
launch(args);
}
}
2) FlowPane : les éléments sont placés de gauche à droite et de haut en bas
Exemple :
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
public class ShowFlowPane extends Application {
public void start(Stage primaryStage) {
// Create a pane and set its properties
FlowPane pane = new FlowPane();
[Link](new Insets(11, 12, 13, 14));
[Link](5);
[Link](5);
// Place nodes in the pane
[Link]().addAll(new Label("First Name:"),
new TextField(), new Label("MI:"));
TextField tfMi = new TextField();
[Link](1);
[Link]().addAll(tfMi, new Label("Last Name:"),
new TextField());
// Create a scene and place it in the stage
Scene scene = new Scene(pane, 200, 250);
[Link]("ShowFlowPane"); // Set the stage title
[Link](scene); // Place the scene in the stage
[Link](); // Display the stage
}
public static void main(String[] args) {
launch(args);
}
}
3) TilePane : les éléments sont alignés de gauche à droite et de haut en bas avec des
espaces égaux.
Exemple :
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
public class TilePaneDemo extends Application {
@Override
public void start(Stage primaryStage) throws Exception {
TilePane root = new TilePane();
[Link](new Insets(10,10,10,10));
[Link](20);
[Link](30);
Button button = new Button("Java");
[Link]().add(button);
// Short Button
Button button1 = new Button("C/C++");
[Link](70, 50);
[Link]().add(button1);
// Short Button
Button button2 = new Button("C#");
[Link]().add(button2);
// Button
Button longButton3 = new Button("Objective C");
[Link]().add(longButton3);
// Button
Button button4 = new Button("Swift");
[Link]().add(button4);
Scene scene = new Scene(root, 500, 300);
[Link]("TilePanel Layout Demo ([Link])");
[Link](scene);
[Link]();
}
public static void main(String[] args) {
launch(args);
}
4) HBox et VBox :
a. HBox : Les éléments sont disposés dans un container horizontal de gauche
à droite
b. Vbox : Les éléments sont disposés dans un container vertical de haut en
bas
5) BorderPane : Les éléments sont disposés selon 4 directions et un centre.
6) GridPane : les éléments sont disposés selon une grille avec des indices (colonne,
ligne).
Remarque :
Tous les panes précédents peuvent être imbriqués les uns dans les autres pour créer des
interfaces complexes et variées.
Exemple utilisant un BorderPane avec HBox et VBox :
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
public class ShowHBoxVBox extends Application {
@Override // Override the start method in the Application class
public void start(Stage primaryStage) {
// Create a border pane
BorderPane pane = new BorderPane();
// Place nodes in the pane
[Link](getHBox());
[Link](getVBox());
// Create a scene and place it in the stage
Scene scene = new Scene(pane);
[Link]("ShowHBoxVBox"); // Set the stage title
[Link](scene); // Place the scene in the stage
[Link](); // Display the stage
}
private HBox getHBox() {
HBox hBox = new HBox(15);
[Link](new Insets(15, 15, 15, 15));
[Link]("-fx-background-color: gold");
[Link]().add(new Button("Computer Science"));
[Link]().add(new Button("Chemistry"));
// ImageView imageView = new ImageView(new Image("image/[Link]"));
// [Link]().add(imageView);
return hBox;
}
private VBox getVBox() {
VBox vBox = new VBox(15);
[Link](new Insets(15, 5, 5, 5));
[Link]().add(new Label("Courses"));
Label[] courses = {new Label("CSCI 1301"), new Label("CSCI 1302"),
new Label("CSCI 2410"), new Label("CSCI 3720")};
for (Label course: courses) {
[Link](course, new Insets(0, 0, 0, 15));
[Link]().add(course);
}
return vBox;
}
/**
* The main method is only needed for the IDE with limited
* JavaFX support. Not needed for running from the command line.
*/
public static void main(String[] args) {
launch(args);
}
}
Exemple avec un GridPane :
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
public class ShowGridPane extends Application {
@Override // Override the start method in the Application class
public void start(Stage primaryStage) {
// Create a pane and set its properties
GridPane pane = new GridPane();
[Link]([Link]); //affiche le pane en position centree H et V
dans la scene
[Link](new Insets(11.5, 12.5, 13.5, 14.5));
[Link](5.5);
[Link](5.5);
// Place nodes in the pane
[Link](new Label("First Name:"), 0, 0);
[Link](new TextField(), 1, 0);
[Link](new Label("MI:"), 0, 1);
[Link](new TextField(), 1, 1);
[Link](new Label("Last Name:"), 0, 2);
[Link](new TextField(), 1, 2);
Button btAdd = new Button("Add Name");
[Link](btAdd, 1, 3);
[Link](btAdd, [Link]);
// Create a scene and place it in the stage
Scene scene = new Scene(pane);
[Link]("ShowGridPane"); // Set the stage title
[Link](scene); // Place the scene in the stage
[Link](); // Display the stage
}
/**
* The main method is only needed for the IDE with limited
* JavaFX support. Not needed for running from the command line.
*/
public static void main(String[] args) {
launch(args);
}
Exercice: En utilisant les différents panes, écrire les programmes permettant d’obtenir
les interfaces suivantes :
a)
b)
c)
