Université Lumière Lyon 2

KHARKIV National University of Economic Scène de théatre

AWT -> SWING -> JAVAFX

Interfaces graphiques Allégorie du théatre :

Master 1ère année •  Théatre = application = Stage
•  Scène = fenetre = Scene
Julien Velcin
•  Acteurs = objets graphiques
http://mediamining.univ-lyon2.fr/velcin

Scène de théatre Architecture (1)

Top Level Container
Application
menu menuItem
Stage

Scene menuBar

Group panel
 Architecture (2) Layout (1)
Objectif :
Application •  Dispose les composants visuels
•  Disposition formatée
•  Prise en compte du redimensionnement
Différents types :
•  BorderPane
•  Hbox
•  Vbox
•  StackPane
Layout •  GridPane
Panel •  FlowPane
•  TilePane
Contient les composants Agence les composants •  AnchorPane
(taille, position)

Layout (2) public ChangeInstru() {

Layout (3)
GridPane gridpane = new GridPane();
ImageView piano = new ImageView(new
Exemple : Image("images/piano.png"));
Exemple : public FlowPane addFlowPane() {
piano.setFitHeight(50);
FlowPane flow = new FlowPane();
piano.setPreserveRatio(true);
flow.setPadding(new Insets(5, 0, 5, 0));
ImageView guitare = new ImageView(new
flow.setVgap(4);
Image("images/guitare.png"));
flow.setHgap(4);
guitare.setFitHeight(50);
flow.setPrefWrapLength(170);
guitare.setPreserveRatio(true);
flow.setStyle("-fx-background-color: DAE6F3;");
ImageView orgue = new ImageView(new
Image("images/orgue.png"));
ImageView pages[] = new ImageView[8];
orgue.setFitHeight(50);
for (int i=0; i<8; i++) {
orgue.setPreserveRatio(true);
pages[i] = new ImageView(
gridpane.add(piano, 1, 0);
new Image("graphics/chart_"+(i+1)+".png"));
gridpane.add(guitare, 1, 1);
flow.getChildren().add(pages[i]);
gridpane.add(orgue, 1, 2);
}
gridpane.setVgap(15);
return flow;
this.getChildren().add(gridpane);
}
}
Layout (4) Taille et liaison des composants
Exemple :
•  Définir une taille préférée :
BorderPane border = new BorderPane(); comp.setPrefWidth(size)
HBox hbox = addHBox()
addStackPane(hbox) comp.setPrefHeight(size)
border.setTop(hbox);
border.setLeft(addVBox()); •  Lier deux composants entre eux : bind
border.setCenter(addGridPane());
border.setRight(addFlowPane());
comp.prefWidthProperty()
.bind(comp2.widthProperty());
(pour l’exemple complet, voir http://docs.oracle.com/javafx/2/layout/builtin_layouts.htm)

Mais on peut lier bien d’autres choses (ex. : le

zoom d’une image en fonction du canevas)

Graphiques, effets Transformations

GaussianBlur Rectangle rect=new Rectangle(0,0,60,60);
rect.setFill(Color.DODGERBLUE);
rect.setArcWidth(10);
rect.setArcHeight(10);

rect.setRotate(45);
InnerShadow
rect.setScaleX(2);
rect.setScaleY(0.5);

Shear shear = new Shear(0.7, 0);

Reflection SepiaTone rect.getTransforms().add(shear);

rect.setTranslateX(40);
rect.setTranslateY(10);
 JavaFX et style CSS Ma première interface (1)
•  Ajouter une feuille de style :
scene.getStylesheets().add("path/stylesheet.css");

•  Donnez une classe à un composant :

buttonAccept.getStyleClass().add("button1");

•  Exemple de style :
.root{
-fx-font-size: 16pt;
-fx-font-family: "Courier New";
-fx-base: rgb(132, 145, 47);
-fx-background: rgb(225, 228, 203); }
.button1{
-fx-text-fill: rgb(49, 89, 23);
-fx-border-color: rgb(49, 89, 23);
-fx-border-radius: 5;
-fx-padding: 3 6 6 6; }

Ma première interface (2) Ma première interface (3)

public class MaFenetre extends Application {
public Scene construitScene() { … }
MenuBar Menu Menu
GridPane

public void start(Stage primaryStage)

{
HBox Label + TextField + Bouton
myStage = primaryStage;
Text primaryStage.setTitle("Ma première fenêtre");
primaryStage.setScene(construitScene());
primaryStage.sizeToScene();
primaryStage.show();
}
public static void main(String[] args)
{
launch(args);
}
}
 Ma première interface (4) Text text = new Text("Mon premier texte");
Separator separator = new Separator();

public Scene construitScene() GridPane.setConstraints(menuBar, 0, 0);

{ grid.getChildren().add(menuBar);
GridPane grid = new GridPane(); GridPane.setConstraints(hBox, 0, 1);
MenuBar menuBar = new MenuBar(); grid.getChildren().add(hBox);
Menu menu1 = new Menu("Menu1"); GridPane.setConstraints(separator, 0, 2);
Menu menu2 = new Menu("Menu2"); grid.getChildren().add(separator);
menuBar.getMenus().addAll(menu1,menu2); GridPane.setConstraints(text, 0, 3);
MenuItem menuItem1 = new MenuItem("MenuItem1"); grid.getChildren().add(text);
menu1.getItems().addAll(menuItem1,new MenuItem("MenuItem2"));
Label label = new Label("Label: "); StackPane root = new StackPane();
TextField textField = new TextField(); root.getChildren().addAll(grid);
textField.setText("champ texte"); Scene scene = new Scene(root, 500, 300);
button1 = new Button("Bouton1"); // Scene scene = new Scene(root);
button1.setText("Bouton");
HBox hBox = new HBox(5); return scene;
hBox.getChildren().addAll(label, textField, button1); }

Gestion des événements (1) Gestion des événements (2)

Définition : Mécanisme :

Action
Message à destination de l'application :
•  Existence d'une action Event
•  Informations spécifiques à l'action Listener Réponse

Provenant soit Trois types d'objets:

•  d'une action utilisateur (saisie clavier, click souris, … ). •  L’objet qui reçoit l'événement (Button par exemple)
•  de l'application elle-même (exécution d'un Timer). •  L'événement en lui même (Event)
•  L'objet qui traite cet événement (Listener)
(notre Application, par ex.)
 Gestion des événements (3) Gestion des événements (4)
spécifie : L’objet qui traite l’évènement :
•  ce qu’il doit attendre - implémente le listener correspondant à l’évènement,
•  qui il doit prévenir si l’évènement se produit. - traite l’évènement.
Par exemple :
Button buttonOK = new Button(”OK”);
buttonOK.setOnAction(this); public class MaFenetre extends Application
implements EventHandler<ActionEvent>
...
écoute les actions public void handle(ActionEvent event)
si une action arrive, envoie-la à this. {
System.out.println(”Action !");
Note : }
this référence la classe en cours (comme super la classe mère).
Dans notre cas, this référence notre Application.

Gestion des événements (5) Gestion des événements (6)

ou directement : voir même depuis Java 8 :
...
//button1.setOnAction(this); button1.setOnAction((ActionEvent t) -> {
button1.setOnAction(new EventHandler<ActionEvent>() System.out.println("Pour gérer
{ l'événement directement !");
public void handle(ActionEvent event) });
{
System.out.println("Pour gérer l'événement
directement !");
}
});
 Gestion des événements (7)
Différents types d’événements :
Références
•  JFX Documentation :
http://docs.oracle.com/javafx/
•  Présentation de Simon Ritter, JavaFX:
Java's new Rich Client Platform
•  Sur OpenClassRoom :
http://fr.openclassrooms.com/informatique/cours/les-
applications-web-avec-javafx/
•  JavaFX-Dialogs :
http://edu.makery.ch/blog/2012/10/30/javafx-2-dialogs/