Upload
others
View
20
Download
0
Embed Size (px)
Citation preview
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/