Ellipse Framework Tutorial - Comment utiliser le composant <web:SplitPane> (aussi appelé Splitter)?

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

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

Un SplitPane (aussi appelé Splitter dans certaines API Javascript) est un conteneur qui permet de diviser son espace en deux zones distinctes. Ces deux zones peuvent être soit l'une à côté de l'autre (séparation horizontale de l'espace), soit l'une au dessus de l'autre (séparation verticale). Chacune des deux zones peut contenir un autre composant (et donc, par héritage, éventuellement un autre type de conteneur). Comme toujours un SplitPane peut être manipulé soit directement en Javascript (composant JWT) soit par le biais d'un tag serveur Ellipse. De plus vous pouvez contrôler le look de vos composants via une feuille de styles CSS (Cascading Stylesheet Language). Reprenons plus précisément chacun de ces points.

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.

<script language="Javascript" src="corelib/services/web/javascript/Core.js"></script>

Une fois le coeur de la librairie JWT montée en mémoire, on peut charger la classe Javascript SplitPane. Pour choisir l'orientation de la séparation, il vous faut passer au constructeur une valeur (soit SplitPane.HORIZONTAL_ALIGNMENT, soit SplitPane.VERTICAL_ALIGNMENT. L'exemple ci-dessous vous montre un assemblage de deux composants SplitPane : notez l'utilisation des méthodes setFirstComponent et setSecondComponent pour ajouter les sous-composants (içi des composants des calendriers).

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

var hSplitPane = new SplitPane( SplitPane.HORIZONTAL_ALIGNMENT );
var vSplitPane = new SplitPane( SplitPane.VERTICAL_ALIGNMENT );

vSplitPane.setFirstComponent( new Calendar( new Date(), new Locale( "fr" ) ) );
vSplitPane.setSecondComponent( new Calendar( new Date(), new Locale( "en" ) ) );

hSplitPane.setFirstComponent( new Calendar() );
hSplitPane.setSecondComponent( vSplitPane );		

hSplitPane.injectInDocument( document.getElementById( "anIdentifier" ) );

Utilisation sous forme de composants Ellipse

Il est aussi possible d'utiliser un SplitPane sous forme de composant Ellipse : <web:SplitPane />. Un tel composant accepte deux sous éléments (au sens du DOM(Document Object Model) proposé par le W3C(World Wide Web Consortium) ). Ces deux éléments peuvent être : soit d'autres composants Ellipse (<web:Calendar />, ...) soit un tag HTML. Dans ce dernier cas, le tag HTML peut à son tour être constitué de sous tags. L'exemple ci-dessous assemble deux calendriers et un bloc <div> dans deux composants <web:SplitPane />.

<?xml version="1.0" encoding="ISO-8859-1" ?>
<web:Html xmlns:web="corelib.services.web.components"
    codeBehind="corelib.services.web.webapplications.WebPage">
    <head>
        <title>SplitPane Samples</title>
        <link rel="stylesheet" type="text/css" href="../CssStyles.css" />
    </head>
    <body>
        <web:SplitPane cssStyle="font-family: verdana" alignment="HORIZONTAL" dividerPosition="300">
            <web:Calendar />            
            <web:SplitPane alignment="VERTICAL" dividerPosition="200">
                <web:Calendar />
                <div style="background: white; vertical-align: middle">
                    <h2>This part is a HTML block.</h2>

                    <p>
                        A little paragraph, just for test the SplitPane component.
                        A little paragraph, just for test the SplitPane component.
                        A little paragraph, just for test the SplitPane component.
                        A little paragraph, just for test the SplitPane component.
                        A little paragraph, just for test the SplitPane component.
                        A little paragraph, just for test the SplitPane component.
                        A little paragraph, just for test the SplitPane component.
                        A little paragraph, just for test the SplitPane component.
                    </p>

                </div>                
            </web:SplitPane>
        </web:SplitPane>
    </body>
</web:Html>

This part is a HTML block.

A little paragraph, just for test the SplitPane component. A little paragraph, just for test the SplitPane component. A little paragraph, just for test the SplitPane component. A little paragraph, just for test the SplitPane component. A little paragraph, just for test the SplitPane component. A little paragraph, just for test the SplitPane component. A little paragraph, just for test the SplitPane component. A little paragraph, just for test the SplitPane component.

Ellipse Tutorial

Comment utiliser le composant ?

Utilisation sous forme de composants JWT

Utilisation sous forme de composants Ellipse

This part is a HTML block.