lundi 19 novembre 2012

ImageChooser pour JavaFX

Bonjour,

Faisant majoritairement du développement d'IHM desktop en Java avec Swing, je me suis naturellement penché sur JavaFX 2.0.
Bien qu'elle manque encore de composants, j'aime beaucoup cette API et la trouve assez prometteuse.

J'ai donc fait un peu mumuse avec et voici mes premiers résultats : ImageChooser, un petit composant tout simple pour sélectionner une image.
Il s'agit d'un bouton qui, lorsqu'on clique dessus, permet de sélectionner une image sur le disque. Une fois sélectionnée, une miniature de l'image est affichée sur le bouton.

Un exemple sera plus parlant :
HBox hbox = new HBox(5);
hbox.setAlignment(Pos.CENTER);
hbox.setPadding(new Insets(10));
ImageChooser imageChooser = new ImageChooser();
imageChooser.setImagePadding(2);
hbox.getChildren().addAll(imageChooser, new Label("Choose your avatar"));

Donne le résultat suivant :

Il est possible de spécifier une image de "non sélection" (attention, ce n'est pas une image par défaut mais l'image dessinée quand la sélection est nulle).
imageChooser.setNoSelectionImage(new Image("nobody.png"));


Cliquez sur le bouton pour parcourir le disque et sélectionner une image dont une miniature sera affichée.



L'image sélectionnée est accessible via la propriété selectedImage.
Image image = imageChooser.getSelectedImage();

Un menu contextuel sur clic droit permet de vider la sélection.


Notez que vous pouvez très bien utiliser ce composant dans un FXML :
<?import com.mytdev.javafx.scene.control.ImageChooser?>
<HBox xmlns:fx="http://javafx.com/fxml" alignment="center" spacing="5">
    <padding>
        <Insets top="10" right="10" bottom="10" left="10" />
    </padding>
    
    <ImageChooser imagePadding="2" />
    <Label text="Choose your avatar" />
</HBox>

En spécifiant l'image de non-sélection :
<?import com.mytdev.javafx.scene.control.ImageChooser?>
<HBox xmlns:fx="http://javafx.com/fxml" alignment="center" spacing="5">
    <padding>
        <Insets top="10" right="10" bottom="10" left="10" />
    </padding>
    
    <ImageChooser imagePadding="2">
        <noSelectionImage>
            <Image url="@nobody.png" />
        </noSelectionImage>
    </ImageChooser>
    <Label text="Choose your avatar" />
</HBox>

Voilà, je me suis assez amusé à faire ça, n'hésitez pas à me faire des retours ;-)

Le jar et le code sont disponible ici. Si vous utilisez maven, vous pouvez ajouter la dépendance suivante :
<dependency>
    <groupId>com.mytdev</groupId>
    <artifactId>jfx-image-chooser</artifactId>
    <version>0.0.4</version>
</dependency>

@ ++