Java FX Partie4

  • View
    238

  • Download
    0

Embed Size (px)

Text of Java FX Partie4

  • 7/23/2019 Java FX Partie4

    1/64

    Cours IHM

    -

    1JavaFX

    Jacques BAPST

    jacques.bapst@hefr.ch

    4

    -

    Conteneurs

    Layout

    -

    Panes

  • 7/23/2019 Java FX Partie4

    2/64

    Disposition des composants

    Gnralits

    Notions de base

    IHM-1 FX04 Jacques BAPST 2

  • 7/23/2019 Java FX Partie4

    3/64

    Disposition des composants

    [1]

    La qualit d'une interface graphique repose sur de nombreux

    lments mais la disposition des composants dans la fentre figurecertainement parmi les plus importants.

    Quand on parle de la disposition(layout) d'une interface, ons'intresse plus particulirement :

    A la taille des composants A la position des composants

    Position dans la fentre

    Position relative des lments les uns par rapport aux autres

    Aux alignements et espacements qui favorisent la structuration visuelle

    Aux bordures et aux marges (notamment autour des conteneurs) Au comportement dynamique de l'interface lorsqu'on redimensionne

    la fentre, lorsqu'on dplace une barre de division (splitpane), etc.

    IHM-1 FX04 Jacques BAPST 3

  • 7/23/2019 Java FX Partie4

    4/64

    Disposition des composants

    [2]

    Il est possible de dimensionner et de positionner les composants de

    manire absolue (en pixels, mm, etc.).

    Une disposition avec des valeurs absolues peut tre utile et mmencessaire dans certaines situations particulires. Cependant, dansla plupart des cas, elle prsente de nombreux dfauts, car :

    La taille naturelle des composants peut varier, en fonction De la langue choisie (libells, boutons, menus, )

    De la configuration de la machine cible (paramtres de l'OS)

    Du look&feel, thme, skin, style (CSS) choisi par l'utilisateur

    La taille de la fentre peut galement varier

    Par le souhait de l'utilisateur Par obligation, pour s'adapter la rsolution de l'cran de

    la machine cible (pour afficher l'intgralit de l'interface)

    IHM-1 FX04 Jacques BAPST 4

  • 7/23/2019 Java FX Partie4

    5/64

    Disposition des composants

    [3]

    Pour viter ces inconvnients on prfre dlguer la disposition des

    composants des gestionnaires de disposition(layout managers)qui sont associs des conteneurs.

    L'ide principale est de dfinir des rgles de disposition (descontraintes) que le gestionnaire se chargera de faire respecter enfonction du contexte spcifique de la machine cible.

    AvecJavaFX, les layout managers sont intgrs aux conteneurs(layout-panes) et ne sont pas manipuls directement par lesprogrammeurs (seulement au travers des proprits des conteneurs).

    C'est donc par le choix du layout-pane et en fonction des contraintes

    donnes que sont dtermines les rgles de disposition.

    Plusieurs layout-panes sont prdfinis dansJavaFX. Il est galementpossible de dfinir ses propres conteneurs avec des rgles dedisposition spcifiques, mais c'est rarement ncessaire.

    IHM-1 FX04 Jacques BAPST 5

  • 7/23/2019 Java FX Partie4

    6/64

    Taille des composants

    Les composants (nodes) que l'on peut placer dans des conteneurs

    possdent des proprits qui peuvent tre prises en compte lors ducalcul de leur disposition.

    minWidth : Largeur minimale souhaite pour le composant

    prefWidth : Largeur prfre (idale) du composant

    maxWidth : Largeur maximale souhaite pour le composant

    minHeight : Hauteur minimale souhaite pour le composant

    prefHeight : Hauteur prfre (idale) du composant

    maxHeight : Hauteur maximale souhaite pour le composant

    L'effet de ces proprits dpend naturellement du type deconteneur (layout-pane) utilis et de ses rgles spcifiques depositionnement et de dimensionnement.

    IHM-1 FX04 Jacques BAPST 6

  • 7/23/2019 Java FX Partie4

    7/64

    Systme de coordonnes [1]

    Le systme de coordonnes utilis parJavaFXplace l'origine dans le

    coin suprieur gauche du conteneur ou du composant considr.

    Les valeurs de l'axexcroissent vers la droite.

    Les valeurs de l'axe ycroissent vers le bas (traditionnel en infographie).

    La taille des composants est dfinie par leur largeur (width) et parleur hauteur (height).

    IHM-1 FX04 Jacques BAPST 7

    Component

    x

    y

    [0,0]

    yc

    xc

    Width

    Height

  • 7/23/2019 Java FX Partie4

    8/64

    Systme de coordonnes [2]

    Coordonnes d'origine de diffrents lments d'une application

    JavaFX.

    IHM-1 FX04 Jacques BAPST 8

    Window / Stage

    Scene / Root

    Node / Component

    Screen

  • 7/23/2019 Java FX Partie4

    9/64

    Systme de coordonnes [3]

    En ralit, toute la librairie graphique est base sur un systme de

    coordonnes en trois dimensions (3D).

    La troisime dimension est reprsentepar l'axe z dont les valeurs augmententlorsqu'on s'loigne de l'observateur.

    Pour la gestion des interfaces "classiques"(de type WIMP), on ne s'occupe gnralement pas de l'axe z et ontravaille uniquement dans le planx/y.

    Dans les API, pratiquement toutes les coordonnes sont donnesavec des nombres virgule (gnralement des double).

    Le systme n'est donc pas ncessairement li aux pixels de l'cran Des transformations sont ainsi facilement possibles (translation,

    homothtie, rotation, ) en utilisant l'algbre linaire

    Lors du rendu un alignement sur les pixels peut tre automatiquementeffectu (voir mthode snapToPixel())

    IHM-1 FX04 Jacques BAPST 9

  • 7/23/2019 Java FX Partie4

    10/64

    Fentre principale [1]

    Par dfaut, au lancement d'une application, la fentre principale

    (primary stage) est centre sur l'cran.

    Diffrentes mthodes peuvent tre invoques sur l'objet Stage pourinfluencer la position et la taille de cette fentre :

    setX() : Position en x du coin suprieur gauche

    setY() : Position en y du coin suprieur gauchecenterOnScreen() : Centrage sur l'cran (par dfaut)

    setMinWidth() : Fixe la largeur minimale de la fentre

    setMinHeight() : Fixe la hauteur minimale de la fentre

    setMaxWidth() : Fixe la largeur maximale de la fentre

    setMaxHeight() : Fixe la hauteur maximale de la fentresetResizable() : Dtermine si la fentre est redimensionnable

    sizeToScene() : Adapte la taille de la fentre la taille de la scnelie cette fentre

    IHM-1 FX04 Jacques BAPST 10

  • 7/23/2019 Java FX Partie4

    11/64

    Fentre principale [2]

    Autres mthodes de l'objet Stage :

    setTitle() : Dfinit le titre de la fentre (affich selon OS)

    setFullScreen() : Place la fentre en mode plein-cran ou en modestandard (si paramtre false) (selon OS)

    getIcons().add() : Dfinit l'icne dans la barre de titre

    setAlwaysOnTop() : Place la fentre toujours au dessus des autres

    (gnralement viter)

    setScene() : Dfinit la scne (sa racine) qui est associe la fentre

    show() : Affiche la fentre l'cran (et la scne qu'elle contient)

    showAndWait() : Affiche la fentre l'cran et attend que la fentre soitferme pour retourner (mthode bloquante).

    Cette mthode n'est pas applicable la fentreprincipale (primary stage).

    . . . Et beaucoup d'autres (consulter la documentation)

    IHM-1 FX04 Jacques BAPST 11

  • 7/23/2019 Java FX Partie4

    12/64

    Fentre principale [3]

    Pour dterminer la taille de l'cran, on peut utiliser la classe Screen

    et rechercher le rectangle qui englobe la zone utilisable de l'cran(ou l'intgralit de la surface de l'cran).

    La mthode getVisualBounds() prend en compte l'espace occuppar certains lments du systme d'exploitation (barre de tche,menu, etc.).

    La mthode getBounds() retourne par contre un rectangle quireprsente la surface totale de l'cran.

    IHM-1 FX04 Jacques BAPST 12

    Screenscreen= Screen.getPrimary();

    Rectangle2D bounds = screen.getVisualBounds();

    doublescreenWidth = bounds.getWidth();

    doublescreenHeight= bounds.getHeight();

    doublescreenDpi = screen.getDpi(); // Dot per inch

  • 7/23/2019 Java FX Partie4

    13/64

    Fentre principale [4]

    La fentre principale, appeleprimary stage est celle qui est passe

    en paramtre (par le systme) la mthode start().

    Dans une applicationJavaFX, il est possible de crer d'autresfentres indpendantes (d'autres objets Stage) et de les grer.

    IHM-1 FX04 Jacques BAPST 13

    private voidcreateStage() {

    Stage secondStage= newStage();secondStage.setTitle("Second Stage");

    root2= . . . // Cration de la scne de la deuxime fentre

    secondStage.setScene(newScene(root2));

    secondStage.show();

    }

    @Override

    public voidstart(Stage primaryStage) {

    . . .

    createStage();

    . . .

    }

  • 7/23/2019 Java FX Partie4

    14/64

    Bordures [1]

    Des bordures peuvent tre appliques toutes les sous-classes de

    Region, notamment autour des conteneurs (layout-panes) et autourdes composants (moins frquent).

    C'est la proprit border (hrite de Region) qui est utilise pourdfinir les caractristiques de la bordure.

    Les classes Border et BorderStroke permettent de crer desbordures et de les assigner la proprit border. Border estimmuable et permet ainsi de crer des objets rutilisables (on peutappliquer une mme bordure plusieurs conteneurs ou composants).

    Pour les bordures,JavaFXsuit le modle de conception propos

    pour les feuilles de style CSS3. Cette spcification est relativementcomplexe et permet la gestion de bordures assez sophistiques.

    Les exemples ci-aprs illustrent une utilisation simple des bordurespour entourer un conteneur (de type HBox).

    IHM-1 FX04 Jacques BAPST 14