Ellipse Tutorial

Comment utiliser le composant <web:ColorPicker> ?


ATTENTION : Tutorial en cours d'écriture ! N'hésitez pas à nous signaler toute erreur ou suggestion.

Accès rapide :
   Utilisation sous forme de composants JWT
   Utilisation sous forme de composants Ellipse

Il peut, dans certains cas (editeurs HTML, gestion de rendez-vous au sein d'un calendrier, ...) être utile de sélectionner une couleur. Pour ce faire, on peut imaginer qu'on vous demande de saisir les trois valeurs des composantes RGB (Red, Green, Blue) de la couleur souhaitée : mais cette solution n'est certainnement pas la plus ergonomique. Il serait préférable de présenter un nuancier (même très simpliste), afin de permettre une sélection de couleur la plus simple possible. Qui plus est, ce nuancier pourrait se présenter dans la page à la demande (quand l'utilisateur le souhaite). C'est très exactement ce que permet de faire le composant <web:ColorPicker>. Si vous souhaitez que le nuancier reste affiché en permanence sur la page Web, préférez alors le composant <web:ColorChooser>.

Comme pour tous les autres composants graphiques Ellipse, le composant <web:ColorPicker> peut être utiliser de deux manières différentes : soit sous forme de composants JWT(Javascript Widget Toolkit : API Javascript de mise en oeuvre d'IHM Web. Cette API trouve notamment son inspiration auprès de l'API Java SWING. Elle constitue la partie cliente du framework Ellipse) (et donc utilisable directement en Javascript, quelque soit la technologie serveur retenue pour le développement du projet considéré), soit sous forme de composants Web Ellipse. Dans ce dernier cas, le composant aura bien entendu, une existance côté client (en Javascript), mais aussi côté serveur (en Java). Reprenons ces deux possibilités une à une.

Utilisation sous forme de composants JWT

En préambule, je souhaitez indiquer/rappeler que la librairie JWT propose une classe Javascript de manipulation de couleur au format RGB(Format de représentation d'une couleur, ou chacune des composantes RGB (Red, Green et Blue) est exprimée via un entier compris en 0 et 255) : c'est la bien entendu la classe Color. Activez ce lien pour de plus amples informations.

Bien entendu, avant d'exploiter la librairie JWT, il est nécessaire de charger le coeur de cette librairie en mémoire (notamment, pour avoir accès à la fonction importPackage). L'extrait de code suivant montre comment réaliser cette étape au sein d'une page HTML(HyperText Markup Language) standard. Notez, bien entendu, que si vous utilisez une page Web Ellipse, cette inclusion de script est réalisée automatiquement : il ne faut donc surtout pas la rejouer une seconde fois. 

 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 

<html>
    <head>
        <title>JWT library is used in a simple HTML page</title>
        
        <!-- You can specify the root of the JWT library.
            By default this variable is set with this value.
            
            var __APPLICATION_PATH__ = "./";
        -->
        
        <!-- Load JWT core library: should be loaded once -->
        <script language="Javascript" src="corelib/services/web/javascript/Core.js">
        </script>
        
        <!-- Load the default JWT CSS styles -->
        <link rel="stylesheet" type="text/css" 
              href="corelib/services/web/javascript/jwt/Jwt.css" />
        
    </head>
    <body>
    
        <!-- Your page content -->

    </body>
</html>
Chargement du module de base de la librairie JWT

Pour avoir accès au composant <web:ColorPicker>, il faut charger le fichier javascript suivant : corelib/services/web/javascript/jwt/ColorPicker.js. Ce fichier ne doit pas être chargé avec le tag HTML <script>, mais via la fonction Javascript importPackage. Les deux extraits de code suivants vous montre, respectivement, une page HTML et son fichier de code Javascript associé. 

 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 

<html>
    <head>
        <title>JWT Color Picker samples</title>
        <script language="Javascript" src="corelib/services/web/javascript/Core.js">
        </script>
        
        <script language="Javascript" src="ColorPickerSamples.js">
        </script>
        
        <link rel="stylesheet" type="text/css"
              href="corelib/services/web/javascript/jwt/Jwt.css" />
    </head>
    
    <body>
        <h1 style="text-align:center">JWT Color Picker samples</h1>
        <br/>

        <table border="0" width="100%">
            <tr>
                <td width="50%">
                    <p>Default color selected</p>
                    <div id="forColorPicker1"></div>
                    <p>Selected color : <input id="inputForColorPicker1" /></p>
                </td>
                <td>
                    <p>With initial color selected</p>
                    <div id="forColorPicker2"></div>
                    <p>Selected color : <input id="inputForColorPicker2" /></p>
                </td>
            </tr>
        </table>

    </body>
</html>
Fichier ColorPicker.html

Comme vous pouvez le voir, la page HTML définie un tableau HTML constitué de deux cellules côte à côte. Dans chacune de ces cellules, nous allons chercher à y injecter un composant <web:ColorPicker>. Voici le code du fichier Javascript associé. 

 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
 10 
 11 

importPackage("corelib/services/web/javascript/jwt/ColorPicker.js");

addEventHandler(window, "onload", function (event) {

    var colorPicker1 = new ColorPicker();
    colorPicker1.injectInDocument( document.getElementById( "forColorPicker1" ) );

    var colorPicker2 = new ColorPicker();
    colorPicker2.injectInDocument( document.getElementById( "forColorPicker2" ) );
    
});
Fichier ColorPicker.js

A titre d'exemple voici l'affichage produit par deux composants <web:ColorPicker>.

Default color selected

Selected color :

With initial color selected

Selected color :

Comme vous pouvez le voir dans l'exemple ci-dessus, il est possible de spécifier une couleur initiale à votre composant de sélection de couleur. Pour ce faire, passer la couleur souhaitée au constructeur de la classe ColorPicker (ex: new ColorPicker( Color.GREEN );). Une autre possibilité permet de changer la couleurs sélectionner à un instant donné : pour se faire, il faudra utiliser la méthode setSelectedColor( newColor ). Notez aussi que vous pouvez récupérer la couleur sélectionnée via la méthode getSelectedColor().

Le composant <web:ColorPicker> fournit aussi un événement permettant de réagir à la selection d'une nouvelle couleur. Cet événement se nomme onColorSelected. Il déclenche soit si vous double-cliquez sur une couleur du nuancier, soit si vous activez le bouton "ok", soit si vous appuyez sur la touche entrée lors de l'édition des composantes RGB de la couleur. Pour enregistrer votre gestionnaire d'événements sur le composant, il vous faudra, bien entendu, utiliser la méthode addEventHandler. A titre de rappel, n'oubliez pas que cette méthode du framework permet d'enregistrer plusieurs gestionnaires sur un même émetteur d'événements. Voici un exemple d'utilisation de ces concepts. 

 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
 10 
 11 
 12 
 13 
 14 
 15 
 16 
 17 
 18 
 19 
 20 

importPackage("corelib/services/web/javascript/jwt/ColorPicker.js");

addEventHandler(window, "onload", function (event) {

    var colorPicker1 = new ColorPicker();
    addEventHandler( colorPicker1, "onColorSelected", function() {
        var strColor = this.getSelectedColor().toHtmlString()
        document.getElementById("inputForColorPicker1").value = strColor;
    });
    colorPicker1.injectInDocument( document.getElementById( "forColorPicker1" ) );

    var colorPicker2 = new ColorPicker();
    colorPicker2.setSelectedColor( Color.RED );
    addEventHandler( colorPicker2, "onColorSelected", function() {
        var strColor = this.getSelectedColor().toCssString()
        document.getElementById("inputForColorPicker2").value = strColor;
    });
    colorPicker2.injectInDocument( document.getElementById( "forColorPicker2" ) );
    
});
Fichier ColorPicker.js

Utilisation sous forme de composants Ellipse

Si vous êtes désireux d'utiliser 100% des fonctionnalités du framework Ellipse, les choses deviennent encore plus simples : plus aucune ligne de code Javascript n'est requises. Le simple fait d'utiliser le tag Ellipse <web:ColorPicker> suffira à afficher un composant dans la page. Voici un premier exemple : notez que l'on peut choisir la couleur initialement affichée. 

 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
 10 
 11 
 12 
 13 
 14 
 15 
 16 
 17 
 18 
 19 
 20 

<?xml version="1.0" encoding="ISO-8859-1" ?>
<web:Html xmlns:web="corelib.services.web.components"
          codeBehind="corelib.services.web.webapplications.WebPage">
    <head>
        <title>ColorPicker Samples</title>
        <link rel="stylesheet" type="text/css"
              href="corelib/services/web/javascript/jwt/Jwt.css" />
    </head>
    <body>
        <h1 align="center">ColorPicker Samples</h1> <br/>
        
        
        <h2>ColorPicker as Ellipse web component</h2>
        <web:ColorPicker id="chooser0" />

        <h2>ColorPicker as Ellipse web component with initial color</h2>
        <web:ColorPicker id="chooser1" value="#FF0000" />
        
    </body>
</web:Html>
Fichier ColorPicker.wp

Il est important de noter que le composant <web:ColorPicker> se comporte comme un élément de formulaire (d'ou l'attribut XML value). En conséquence, si le tag est placé dans un formulaire web, la couleur sélectionnée est transportée jusqu'au serveur Web, sans que vous n'ayez plus de chose à spécifier (si ce n'est le code de traitement côté serveur). A titre d'exemple, voici un exemple de formulaire web contenant un composant de sélection de couleur. 

 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 

<?xml version="1.0" encoding="ISO-8859-1" ?>
<web:Html xmlns:web="corelib.services.web.components"
          codeBehind="corelib.services.web.samples.virtualcaddy.webpages.samples.ColorPickerSamples">
    <head>
        <title>ColorPicker Samples</title>
        <link rel="stylesheet" type="text/css"
              href="corelib/services/web/javascript/jwt/Jwt.css" />
    </head>
    <body>
        <h1 align="center">ColorPicker Samples</h1> <br/>
        
        
        <h2>ColorPicker as Ellipse web component</h2>
        <web:ColorPicker id="chooser0" />

        <h2>ColorPicker as Ellipse web component with initial color</h2>
        <web:ColorPicker id="chooser1" value="#FF0000" />


        <h2>ColorPicker as Ellipse web component with autoPost</h2>
        <web:Form method="POST">
            <web:ColorPicker id="chooser2" autoPost="true" /> <br/>
            Selected color is : <web:TextBox id="txtColor" cssStyle="width: 240px" /> <br/>
        </web:Form>    
        
    </body>
</web:Html>
Fichier ColorPicker.wp

Voici maintenant le code Java côté serveur. Notez la manière utilisée pour enregistrer l'écouteur sur le composant de sélection de couleur. Le code devrait vous convaincre de la simplicité d'utilisation. Pour information, ces deux derniers exemples de code sont disponible dans l'application de démonstration du Framework Ellipse. 

 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 

package corelib.services.web.samples.virtualcaddy.webpages.samples;

import corelib.services.web.components.ColorPicker;
import corelib.services.web.components.TextBox;
import corelib.services.web.components.events.FormInputEvent;
import corelib.services.web.components.events.FormInputListener;
import corelib.services.web.webapplications.WebPage;
import corelib.services.web.webapplications.events.WebPageEvent;

public class ColorPickerSamples extends WebPage {
    
    private ColorPicker        chooser2;
    private TextBox         txtColor;
    
    @Override public void page_load( WebPageEvent webPageEvent ) {
        this.chooser2.addFormInputListener( new FormInputListener() {
            @Override public void valueChanged( FormInputEvent event ) {
                chooser2_valueChanged( event );
            }
        });
    }
    
    public void chooser2_valueChanged( FormInputEvent event ) {
        this.txtColor.setValue( this.chooser2.getSelectedColor().toString() );        
    }


}
Classe corelib.services.web.samples.virtualcaddy.webpages.samples.ColorPickerSamples

ATTENTION : Ellipse Framework vous est proposé en version beta (d'évaluation) afin de vous permettre d'évaluer ce framework. Infini Software se dégage de toutes responsabilités relatives à l'utilisation de ce framework. De plus, Infini Software ne pourra nullement être tenu responsable de l'utilisation des informations présentes dans ces tutoriaux.

Dominique LIARD - © 2007..2010 SARL Infini Software - Tous droits réservés
Les autres marques et les noms de produits cités dans ces documents sont la propriété de leurs détenteurs respectifs.