awt -> swing -> javafx interfaces graphiques allégorie ...jvelcin/public/gl-k/java...awt -> swing...
TRANSCRIPT
-
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/