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<8; i++) { pages[i] = new ImageView( new Image("graphics/chart_"+(i+1)+".png")); flow.getChildren().add(pages[i]); } return flow; }

Exemple :

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<ActionEvent>

... 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<ActionEvent>() {

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/