Ellipse Tutorial

Comment utiliser le composant <web:HtmlTextEditor> ?


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

Certaines applications Web peuvent nécéssiter la saisie de textes au format HTML(HyperText Markup Language) : ce format permettant un contenu plus riche est plus sophistiqué (mise en gras, italic, souligné, listes à puces, listes numérotée, utilisation de couleurs, ...). Si tel est votre besoin, le composant <web:HtmlTextEditor> est fait pour vous. Ce composant permetttra d'injecter dans la page Web une zone de saisie de texte. Cette zone de texte sera décorée d'une barre d'outils vous permettant d'accéder au principales possibilités HTML en termes d'édition de texte. A titre d'exemple, voici ce composant : vous pourrez ainsi vous faire une idée de ses possibilités.

Comme pour tous les autres composants graphiques Ellipse, le composant <web:HtmlTextEditor> 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

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

Votre composant d'édition HTML devra être injecté dans un noeud du document HTML. Il faut donc définir ce noeud (traditionnellement, un tag <div>) et lui donner un identifiant unique (attribut id). Il est aussi vivement conseillé de séparer la partie mise en page (via le langage HTML) de la partie code client (via le langage Javascript). L'extrait de code suivant vous montre un exemple de structure HTML prête à recevoir votre composant d'édition HTML. 

 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 

<html>
    <head>
        <title>HtmlTextEditor Samples</title>
        <script language="Javascript"
                src="corelib/services/web/javascript/Core.js"></script>
        <script language="Javascript"
                src="HtmlTextEditorSample.js"></script>
        <link rel="stylesheet" type="text/css" 
              href="corelib/services/web/javascript/jwt/Jwt.css" />
        <style>
            /* CSS Style used for decorate the editor */
            #forHtmlTextEditor {
                width: 800px;
                height: 400px;
                border: 1px solid rgb(153,187,232);
            }
        </style>
    </head>
    <body>
    
        <h1 id="title">HtmlTextEditor Samples</h1> <br/>
    
        <!-- This tag is used for inject the HTML editor -->
        <div id="forHtmlTextEditor"></div>    <br/>
        
        <!-- This button is used for get the edited HTML text -->
        <input id="btnGetContent" type="button" value="Get Editor Content" />

        <!-- This button is used for set the edited HTML text -->
        <input id="btnSetContent" type="button" value="Reset" />

    </body>
</html>
Fichier HtmlTextEditorSample.html

Le composant HtmlTextEditor est définit dans le fichier Javascript corelib/services/web/javascript/jwt/HtmlTextEditor.js. Il est donc nécessaire d'importer ce fichier via la directive JWT importPackage. Voici le code associé à la page HTML précédente. 

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

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

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

    var htmlTextEditor = new HtmlTextEditor();            
    htmlTextEditor.injectInDocument(document.getElementById("forHtmlTextEditor"));
    htmlTextEditor.setTextContent( "Initial text" );

    var buttonNode = document.getElementById( "btnGetContent" );
    addEventHandler( buttonNode, "onclick", function() {
        alert( htmlTextEditor.getTextContent() );
    });

    var resetNode = document.getElementById( "btnSetContent" );
    addEventHandler( resetNode, "onclick", function() {
        htmlTextEditor.setTextContent( "" );
    });

});
Fichier HtmlTextEditorSample.js

Utilisation sous forme de composants Ellipse

Nous allons maintenant voir comment utiliser le composant <web:HtmlEditor> sous forme de composant Ellipse. Bien entendu cela simplifiera de manière importante son utilisation. Premièrement, vous n'aurez plus à utiliser de code Javascript. Deuxièmement, vous pourez ajouter un traitement côté serveur afin de traiter la donnée saisie sur le poste client. Bien entendu, ce composant est vu (via le framework Ellipse) comme étant un élément de formulaire.

L'exemple de code ci-dessous montre comment utiliser le composant d'édition. Notez un point important : il existe deux techniques afin de passer le texte initial à éditer dans le composant : soit vous utilisez l'attribut value (comme pour tous les autres composants de formulaires), soit vous placez votre texte en le tag ouvrant et le tag fermant du composant (c'est la technique utilisée par l'exemple et elle est à privilégiée dans le cas d'un contenu relativement long). Si vous cherchez à utiliser les deux techniques conjointement sur un même composant d'édition, c'est la seconde qui sera retenue. 

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

<?xml version="1.0" encoding="ISO-8859-1" ?>
<web:Html xmlns:web="corelib.services.web.components"
          codeBehind="corelib.services.web.samples.virtualcaddy.webpages.samples.HtmlTextEditorSample">
    <head>
        <title>HtmlTextEditor Sample</title>
        <link rel="stylesheet" type="text/css" href="../CssStyles.css" />
    </head>
    <body>

        <h1 style="text-align: center">HtmlTextEditor Sample</h1> <br />

        <web:Form>
            <center>
                <web:HtmlTextEditor id="htmlTextEditor" cssStyle="width: 600px; height: 300px">
                    This is a <b>HTML</b> text <u>editor</u> component.
                </web:HtmlTextEditor>

                <web:Button id="btnSend" value="Send" />
                <web:Button id="btnReset" value="Reset" />
            </center>
        </web:Form>

    </body>
</web:Html>
Fichier HtmlTextEditorSample.wp

Voici maintenant le code Java associé à la page. Il fourni notamment les gestionnaires d'événements pour les deux boutons utilisés par la page. Notez que le contenu saisi est maintenu entre chaque aller/retour sur le serveur. 

 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 

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

import corelib.services.web.components.Button;
import corelib.services.web.components.HtmlTextEditor;
import corelib.services.web.components.events.ActionEvent;
import corelib.services.web.components.events.ActionListener;
import corelib.services.web.webapplications.WebPage;
import corelib.services.web.webapplications.events.WebPageEvent;

public class HtmlTextEditorSample extends WebPage {
    
    private HtmlTextEditor htmlTextEditor;
    private Button btnSend;
    private Button btnReset;
    
    @Override
    public void page_load( WebPageEvent webPageEvent ) {
        btnSend.addActionListener( new ActionListener() {
            @Override public void actionPerformed( ActionEvent event ) {
                btnSend_actionPerformed( event );
            }
        });
        btnReset.addActionListener( new ActionListener() {
            @Override public void actionPerformed( ActionEvent event ) {
                btnReset_actionPerformed( event );
            }
        });
    }
    
    
    private void btnSend_actionPerformed( ActionEvent event ) {
        System.out.println( "Server received: " + htmlTextEditor.getValue() );
    }

    private void btnReset_actionPerformed( ActionEvent event ) {
        htmlTextEditor.setValue( "" );
    }

}
Fichier HtmlTextEditorSample.java

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.