IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaFX Discussion :

EventHandler sur bouton rond


Sujet :

JavaFX

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre très actif
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Mai 2007
    Messages
    643
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Mai 2007
    Messages : 643
    Par défaut EventHandler sur bouton rond
    Salut à tous,

    cela peut paraitre évident mais j'aimerais comprendre le fonctionnement d'un eventHandler sur un bouton qui d'apparence est rond. L'objectif est de reproduire les 3 boutons de bases des fenêtres windows (Agrandir, fermer ou réduire) mais de façon ronde et non de simples boutons carrés.

    Je me base pour exemple sur l'application "JavaFX Ensemble" fourni par Oracle pour se faire une idée de JavaFX : http://www.oracle.com/technetwork/ja...les/index.html

    Dans laquelle j'aimerais reproduire le même système de gestion de fenêtrage à l'aide des 3 petits boutons rond en haut à droite.

    Ainsi comment m'y prendre :
    - Existe t-il une possibilité de créer des boutons ronds ?
    - S'agit t-il plutôt d'image ?
    - comment se fait t-il que le déclenchement du changement de couleur du bouton répond de manière rond (comme l'image) ?
    - s'agit-il plutôt d'un dessin javaFX rond sur lequel on applique un eventHandler et dans lequel on dessine une croix pour simuler un bouton ?

    Bref comment implémenter techniquement par JavaFX les boutons standards de fenêtrage windows mais de façon arrondi d'après vous ?


    Merci de votre éclairage

  2. #2
    Rédacteur/Modérateur

    Avatar de bouye
    Homme Profil pro
    Information Technologies Specialist (Scientific Computing)
    Inscrit en
    Août 2005
    Messages
    6 901
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : Nouvelle-Calédonie

    Informations professionnelles :
    Activité : Information Technologies Specialist (Scientific Computing)
    Secteur : Agroalimentaire - Agriculture

    Informations forums :
    Inscription : Août 2005
    Messages : 6 901
    Billets dans le blog
    54
    Par défaut
    1) oui

    2) c'est une méthode, mais ça peut aussi être fait simplement via le CSS en utilisant une valeur de -fx-background-radius et de -fx-border-radius assez importante.

    3) même chose : CSS ou image.

    4) tu peux aussi faire ca avec un ImageView et un composant custom et tes propres événements, mais Button est suffisamment flexible (via CSS) pour éviter d'avoir a se casser la nénette.

    BREF, c'est hyper simple a faire.

    Nom : Roundbutton.png
Affichages : 1034
Taille : 197,5 Ko

    Les boutons folder, home et browse en haut de l'image sont des instance de Button qui ont une icône ronde (le rond noir est dans le dessin de l'icone) et le styleClass seapodym-image-button (en plus du styleClass de base button) :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .seapodym-image-button {
        -fx-padding: 0;
        -fx-background-color: transparent;
        -fx-background-radius: 20;
        -fx-content-display: graphic-only;
    }
    .seapodym-image-button:pressed {
        -fx-background-color: derive(-seapodym-selection, 50%);
    }
    .seapodym-image-button:armed, .seapodym-image-button:selected {
        -fx-background-color: -seapodym-selection;
    }
    Le bouton convert en bas de l'image est aussi un Button mais qui utilise une icône "carrée" (AKA sans bordure ronde noire autour) et a le styleClass seapodym-image-button, plus les styles suivant settés a mano (dans le FXML dans mon cas mais ça marche aussi si directement mis dans le code) :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    -fx-padding: 10; -fx-background-radius: 50; -fx-border-color: black; -fx-border-width: 3; -fx-border-radius: 50;
    Ici j'ai fait expres de prendre un screenshot ou je suis en train d'appuyer dessus avec la souris pour montrer ce que donne la sous-impression orange (voir selecteur armed) qui est bien sur ronde également (après il faut jouer sur le offset pour éviter que la bordure ne dépasse).

    Et ça, c'est juste avec des icônes simples et un CSS modifiant l'apparence de la skin normale, mais tu as tout ce qu'il faut au niveau CSS pour skinner aussi tes boutons avec des images/9-slicing, voir -fx-background-image etc dans la doc CSS.
    Merci de penser au tag quand une réponse a été apportée à votre question. Aucune réponse ne sera donnée à des messages privés portant sur des questions d'ordre technique. Les forums sont là pour que vous y postiez publiquement vos problèmes.

    suivez mon blog sur Développez.

    Programming today is a race between software engineers striving to build bigger and better idiot-proof programs, and the universe trying to produce bigger and better idiots. So far, the universe is winning. ~ Rich Cook

  3. #3
    Membre très actif
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Mai 2007
    Messages
    643
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Mai 2007
    Messages : 643
    Par défaut
    J'ai revu la documentation CSS pour JavaFX différemment. Je cerne mieux sont utilité. Existe t-il d'ailleurs un endroit différent pour visualiser les CSS property des différents node, un peu comme une API DOC. Je trouve ca un peu rustre comme doc de référence.

    Je n'ai pas bien cerné la notion de "user agent styles sheets". J'ai bien compris la priorité des stylesheets et je sais que c'est le type de stylesheets le plus faible mais pas ce que c'est réellement.

    De plus il font la différence entre un "inline Style" et du code dans la priorité des styles. Les inlines styles étant déjà du code je ne vois pas trop...

    On peut faire un bouton rond par une méthode...il s'agit donc de inline style ou de "code style" ?

  4. #4
    Rédacteur/Modérateur

    Avatar de bouye
    Homme Profil pro
    Information Technologies Specialist (Scientific Computing)
    Inscrit en
    Août 2005
    Messages
    6 901
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : Nouvelle-Calédonie

    Informations professionnelles :
    Activité : Information Technologies Specialist (Scientific Computing)
    Secteur : Agroalimentaire - Agriculture

    Informations forums :
    Inscription : Août 2005
    Messages : 6 901
    Billets dans le blog
    54
    Par défaut
    Le mieux est d'utiliser SceneBuilder (même si au final tu ne fais pas de FXML) et ScenicView.

    SceneBuilder offre en effet la possibilité d'utiliser le CSS Analyzer (menu View->Show CSS Analyzer dans SceneBuilder 1.1 beta) qui permet de voir toutes les propriétés CSS qui s'appliquent sur le type de noeud sélectionné et de voir d'où sont originaire leur valeur : default, inspector, stylesheet (celles du CSS en respectant la hiérarchie et l'ordre des CSS) et inline (celles mises via setStyle()).

    ScenicView permet d'explorer une scène live (que ce soit ou non du FXML) et de tester certaines modifications au vol.

    On peut le faire via les deux séparément (CSS ou inline) ; ou même un mix des deux : comme c'est le cas de mon gros bouton rond qui reprend le style du CSS mais a en plus un style inline pour modifier des trucs (lui rajouter une bordure que son icone n'a pas et adapter le rayon a sa plus grande taille).
    Merci de penser au tag quand une réponse a été apportée à votre question. Aucune réponse ne sera donnée à des messages privés portant sur des questions d'ordre technique. Les forums sont là pour que vous y postiez publiquement vos problèmes.

    suivez mon blog sur Développez.

    Programming today is a race between software engineers striving to build bigger and better idiot-proof programs, and the universe trying to produce bigger and better idiots. So far, the universe is winning. ~ Rich Cook

  5. #5
    Membre très actif
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Mai 2007
    Messages
    643
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Mai 2007
    Messages : 643
    Par défaut
    Après des heures pour comprendre comment faire ce que je voulais et ensuite le faire voilà que SceneBuilder m'affiche bien ce que j'ai créé comme fichier fxml avec lui-même mais au lancement de me même fichier FXML mes boutons ne s'affichent pas....

    Mon Scenic View ne semble evidemment ne plus analyser les details de la JVM de mon application non plus.

    Il faut vraiment que Oracle parie sur la pédagogie de la mise en oeuvre de JavaFX parce que ca reste quand même un parcours du combattant pour le moment.

    Voici l'instruction de chargement de mon fichier FXML :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
            Parent root = FXMLLoader.load(getClass().getResource("Root3.fxml"));
    ainsi que mon fichier fxml :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    <?xml version="1.0" encoding="UTF-8"?>
     
    <?import java.lang.*?>
    <?import java.net.*?>
    <?import javafx.scene.control.*?>
    <?import javafx.scene.control.Label?>
    <?import javafx.scene.image.*?>
    <?import javafx.scene.layout.*?>
    <?import javafx.scene.layout.BorderPane?>
     
    <BorderPane prefHeight="922.0" prefWidth="1171.0" xmlns:fx="http://javafx.com/fxml">
      <bottom>
        <HBox prefHeight="100.0" prefWidth="200.0" style="-fx-background-color:grey" />
      </bottom>
      <center>
        <Pane prefHeight="250.0" prefWidth="250.0" style="-fx-background-color:red" />
      </center>
      <left>
        <FlowPane prefHeight="200.0" prefWidth="100.0" style="-fx-background-color:yellow" />
      </left>
      <right>
        <Pane prefHeight="200.0" prefWidth="100.0" style="-fx-background-color:green">
          <stylesheets>
            <URL value="@../sceneStyleSheets.css" />
          </stylesheets>
        </Pane>
      </right>
      <top>
        <Pane prefHeight="200.0" prefWidth="200.0">
          <children>
            <Button alignment="CENTER" contentDisplay="TOP" graphicTextGap="0.0" layoutX="1149.0" layoutY="7.0" minHeight="13.0" minWidth="16.0" mnemonicParsing="false" prefHeight="15.0" prefWidth="15.0" style="-fx-padding : 0; -fx-background-color : transparent; -fx-border-color:grey; -fx-border-width:2; -fx-background-radius:30; -fx-border-radius:30; ">
              <graphic>
                <ImageView fitHeight="7.0" fitWidth="7.0" pickOnBounds="true">
                  <image>
                    <Image url="@../resources/croixGris.png" preserveRatio="false" smooth="false" />
                  </image>
                </ImageView>
              </graphic>
            </Button>
            <Button alignment="CENTER" contentDisplay="TOP" graphicTextGap="0.0" layoutX="1149.0" layoutY="29.0" minHeight="13.0" minWidth="16.0" mnemonicParsing="false" prefHeight="15.0" prefWidth="15.0" style="-fx-padding : 0;
    -fx-background-color : transparent;
    -fx-border-color:grey;
    -fx-border-width:2;
    -fx-background-radius:30;
    -fx-border-radius:30;
    ">
              <graphic>
                <ImageView fitHeight="7.0" fitWidth="7.0" pickOnBounds="true">
                  <image>
                    <Image url="@../resources/moinsGris.png" preserveRatio="false" smooth="false" />
                  </image>
                </ImageView>
              </graphic>
            </Button>
            <Button alignment="CENTER" contentDisplay="TOP" graphicTextGap="0.0" layoutX="1149.0" layoutY="52.0" minHeight="13.0" minWidth="16.0" mnemonicParsing="false" prefHeight="15.0" prefWidth="15.0" style="-fx-padding : 0;
    -fx-background-color : transparent;
    -fx-border-color:grey;
    -fx-border-width:2;
    -fx-background-radius:30;
    -fx-border-radius:30;
    ">
              <graphic>
                <ImageView fitHeight="7.0" fitWidth="7.0" pickOnBounds="true">
                  <image>
                    <Image url="@../resources/plusGris.png" preserveRatio="false" smooth="false" />
                  </image>
                </ImageView>
              </graphic>
            </Button>
          </children>
        </Pane>
      </top>
    </BorderPane>
    A l'execution aucun bouton n'apparait mais le reste oui.

    Aurais-tu une idée par hasard ?

  6. #6
    Rédacteur/Modérateur

    Avatar de bouye
    Homme Profil pro
    Information Technologies Specialist (Scientific Computing)
    Inscrit en
    Août 2005
    Messages
    6 901
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : Nouvelle-Calédonie

    Informations professionnelles :
    Activité : Information Technologies Specialist (Scientific Computing)
    Secteur : Agroalimentaire - Agriculture

    Informations forums :
    Inscription : Août 2005
    Messages : 6 901
    Billets dans le blog
    54
    Par défaut
    Le tout s'affiche sans problème chez moi (a part le fait bien sur que je n'ai pas les images ou le CSS) mais on voit bien la forme ronde des boutons.
    Merci de penser au tag quand une réponse a été apportée à votre question. Aucune réponse ne sera donnée à des messages privés portant sur des questions d'ordre technique. Les forums sont là pour que vous y postiez publiquement vos problèmes.

    suivez mon blog sur Développez.

    Programming today is a race between software engineers striving to build bigger and better idiot-proof programs, and the universe trying to produce bigger and better idiots. So far, the universe is winning. ~ Rich Cook

Discussions similaires

  1. [C#] [Win forms] Info bulle sur bouton
    Par RobinJulie dans le forum Windows Forms
    Réponses: 4
    Dernier message: 25/11/2004, 16h12
  2. Detection clic sur bouton precedent
    Par shaun_the_sheep dans le forum Servlets/JSP
    Réponses: 4
    Dernier message: 20/10/2004, 17h18
  3. [FLASH MX PRO] Action répétée sur bouton
    Par dens63 dans le forum Flash
    Réponses: 4
    Dernier message: 15/04/2004, 14h16
  4. Réponses: 9
    Dernier message: 23/02/2004, 19h14
  5. Construire chemin sur bouton avec évt Javascript
    Par Ph. B. dans le forum XMLRAD
    Réponses: 4
    Dernier message: 27/05/2003, 10h26

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo