EventHandler sur bouton rond

Version imprimable

25/04/2013, 22h54
miltone

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

1 pièce(s) jointe(s)

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.

Pièce jointe 117019

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:

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:

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

26/04/2013, 23h35
miltone

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" ?
27/04/2013, 03h23
bouye

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).

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:

Parent root = FXMLLoader.load(getClass().getResource("Root3.fxml"));

ainsi que mon fichier fxml :

Code:

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 ?

28/04/2013, 04h25
bouye

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.
28/04/2013, 12h02
miltone

Le placement layout X était apparemment bien trop loin par rapport à la taille de la fenêtre principale. J'ai encore du mal à vraiment cerner le comportement des règles de placement et de dimension.

En tout cas je ne vais pas t'embêter plus longtemps avec ce sujet sur lequel tu m'a bien aidé. J'ai effectivement réussi à faire mes boutons même si je ne comprends pas bien pourquoi le rendu est si moche :aie:

Mais cela est une autre histoire ;)