-
Interfaces graphiques
Julien Velcin http://mediamining.univ-lyon2.fr/velcin
Master 1ère année
Université Lumière Lyon 2 KHARKIV National University of
Economic Scène de théatre
AWT -> SWING -> JAVAFX Allégorie du théatre :
• Théatre = application = Stage • Scène = fenetre = Scene •
Acteurs = objets graphiques
Scène de théatre
Application
Stage
Scene
Group
Architecture (1)
Top Level Container
menuBar
panel
menuItem menu
-
Architecture (2) Application
Panel Layout
Contient les composants Agence les composants (taille,
position)
Layout (1) Objectif :
• Dispose les composants visuels • Disposition formatée •
Prise en compte du redimensionnement
Différents types : • BorderPane • Hbox • Vbox • StackPane •
GridPane • FlowPane • TilePane • AnchorPane
Layout (2) Exemple :
public ChangeInstru() { GridPane gridpane = new GridPane();
ImageView piano = new ImageView(new
Image("images/piano.png")); piano.setFitHeight(50);
piano.setPreserveRatio(true); ImageView guitare = new
ImageView(new
Image("images/guitare.png")); guitare.setFitHeight(50);
guitare.setPreserveRatio(true); ImageView orgue = new
ImageView(new
Image("images/orgue.png")); orgue.setFitHeight(50);
orgue.setPreserveRatio(true); gridpane.add(piano, 1, 0);
gridpane.add(guitare, 1, 1); gridpane.add(orgue, 1, 2);
gridpane.setVgap(15); this.getChildren().add(gridpane); }
Layout (3) public FlowPane addFlowPane() { FlowPane flow = new
FlowPane(); flow.setPadding(new Insets(5, 0, 5, 0));
flow.setVgap(4); flow.setHgap(4); flow.setPrefWrapLength(170);
flow.setStyle("-fx-background-color: DAE6F3;"); ImageView pages[] =
new ImageView[8]; for (int i=0; i
-
Layout (4) Exemple :
BorderPane border = new BorderPane(); HBox hbox = addHBox()
addStackPane(hbox) border.setTop(hbox); border.setLeft(addVBox());
border.setCenter(addGridPane());
border.setRight(addFlowPane());
(pour l’exemple complet, voir
http://docs.oracle.com/javafx/2/layout/builtin_layouts.htm)
Taille et liaison des composants
• Définir une taille préférée :
comp.setPrefWidth(size)comp.setPrefHeight(size)
• Lier deux composants entre eux : bind
comp.prefWidthProperty()
.bind(comp2.widthProperty());
Mais on peut lier bien d’autres choses (ex. : le zoom d’une
image en fonction du canevas)
Graphiques, effets GaussianBlur
InnerShadow
SepiaTone Reflection
Transformations
rect.setTranslateX(40); rect.setTranslateY(10);
Rectangle rect=new Rectangle(0,0,60,60);
rect.setFill(Color.DODGERBLUE); rect.setArcWidth(10);
rect.setArcHeight(10);
rect.setRotate(45);
rect.setScaleX(2); rect.setScaleY(0.5); Shear shear = new
Shear(0.7, 0); rect.getTransforms().add(shear);
-
JavaFX et style CSS
• 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 (1)
Ma première interface (2)
Label + TextField +
Menu
Bouton
Grid
Pane
MenuBar
HBox
Text
Menu
Ma première interface (3) public class MaFenetre extends
Application { public Scene construitScene() { … } public void
start(Stage primaryStage) { myStage = primaryStage;
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) public Scene construitScene() {
GridPane grid = new GridPane(); MenuBar menuBar = new
MenuBar();
Menu menu1 = new Menu("Menu1"); Menu menu2 = new
Menu("Menu2");
menuBar.getMenus().addAll(menu1,menu2); MenuItem menuItem1 = new
MenuItem("MenuItem1");
menu1.getItems().addAll(menuItem1,new MenuItem("MenuItem2"));
Label label = new Label("Label: "); TextField textField = new
TextField();
textField.setText("champ texte"); button1 = new
Button("Bouton1");
button1.setText("Bouton"); HBox hBox = new HBox(5);
hBox.getChildren().addAll(label, textField, button1);
Text text = new Text("Mon premier texte"); Separator separator =
new Separator(); GridPane.setConstraints(menuBar, 0, 0);
grid.getChildren().add(menuBar); GridPane.setConstraints(hBox,
0, 1);
grid.getChildren().add(hBox); GridPane.setConstraints(separator,
0, 2);
grid.getChildren().add(separator); GridPane.setConstraints(text,
0, 3);
grid.getChildren().add(text); StackPane root = new StackPane();
root.getChildren().addAll(grid); Scene scene = new Scene(root, 500,
300); // Scene scene = new Scene(root); return scene;
}
Gestion des événements (1) Définition : Message à destination de
l'application :
• Existence d'une action • Informations spécifiques à
l'action
Provenant soit
• d'une action utilisateur (saisie clavier, click souris, … ).
• de l'application elle-même (exécution d'un Timer).
Gestion des événements (2) Mécanisme : Trois types d'objets:
• L’objet qui reçoit l'événement (Button par exemple) •
L'événement en lui même (Event) • L'objet qui traite cet événement
(Listener) (notre Application, par ex.)
Action
Event Listener Réponse
-
Gestion des événements (3) spécifie :
• ce qu’il doit attendre • qui il doit prévenir si l’évènement
se produit.
Button buttonOK = new Button(”OK”);
buttonOK.setOnAction(this);
écoute les actions si une action arrive, envoie-la à this.
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 (4)
Par exemple : public class MaFenetre extends Application
implements EventHandler
... public void handle(ActionEvent event) {
System.out.println(”Action !");
}
L’objet qui traite l’évènement : - implémente le listener
correspondant à l’évènement, - traite l’évènement.
Gestion des événements (5)
ou directement : ... //button1.setOnAction(this);
button1.setOnAction(new EventHandler() {
public void handle(ActionEvent event) { System.out.println("Pour
gérer l'événement directement !"); }
});
Gestion des événements (6)
voir même depuis Java 8 :
button1.setOnAction((ActionEvent t) -> {
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/