Table des Matières
Les composants OpenLaszlo sont des objets de haut niveau qui implémentent les fonctions classiques des interfaces graphiques. Cela va des objets simples comme les boutons (OpenLaszlo components are high-level objects that implement common user-interface functions. They range from relatively simple objects such as <button>) aux objets complexes comme les formulaires (<form>) et les tableaux (<grid>).
Les composants écrits par Laszlo Systems, Inc., et fournis avec le Serveur OpenLaszlo sont appelés composants LZ.
Ce tutoriel d'introduction vous présente l'ensemble des composants OpenLaszlo et comment utiliser leurs fonctionnalités de base. Nous verrons dans les chapitres suivants comment utiliser les fonctionnalités avancées des composants et créer vos propres composants.
La façon la plus simple de construire une application OpenLaszlo est d'utiliser les composants LZ "tels quels" avec leurs comportements par défaut. Ce chapitre presente de tels exemples. Il contient aussi quelques exemples qui utilisent des concepts non encore présentés. Ne vous inquiétez pas si vous ne comprenez pas bien comment ils fonctionnent. L'idée ici est de s'habituer aux applications OpenLaszlo construites avec les composants. Les tutoriels suivants vous présenteront les concepts qui vous manquent pour créer vos propres applications.
Avant d'apprendre comment utiliser les composants dans une application OpenLaszlo, il est important de se faire une idée de l'étendue des composants disponibles dans OpenLaszlo.
L'exemple suivant présente une bonne partie des composants. C'est une version abrégée de l'exemple inclus dans l' The example below shows a miscellaneous collection of components. It's an abreviated version of the sampler in the Explorateur OpenLaszlo, qui fournit un panorama de tous les composants. Le code qui met en oeuvre ces composants peut paraître intimidant si vous n'avez jamais travaillé avec ce type de langage, mais ne soyez pas rebuté. En fait, vous n'avez même pas besoin de regarder le code pour l'instant. Votre objectif ici est de commencer à réfléchir aux choses que vous pouvez faire grâce à une application OpenLaszlo, et les composants sont la route la plus sûre vers la productivité.
La The Référence LZX décrit toutes les balises, attributs et méthodes associées à chaque composant.
Exemple 6.1. Divers Composants
<canvas width="800" height="500">
<silverstyle name="silvercolors"/>
<greenstyle name="greencolors"/>
<bluestyle name="bluecolors"/>
<view id="s1" x="20" y="20">
<view layout="spacing:20">
<text>Choose a style to change colors...</text>
<view name="stylechooser" layout="axis:x; spacing:4">
<text>Style:</text>
<combobox width="120" editable="false">
<method event="onselect">
var colorchoice = this.text;
canvas[colorchoice+'colors'].setAttribute("isdefault", true);
</method>
<textlistitem text="silver"/>
<textlistitem text="green"/>
<textlistitem text="blue" selected="true"/>
</combobox>
</view>
<tabslider width="250" height="200">
<tabelement text="holiday cheer" selected="true">
<radiogroup>
<radiobutton text="peace on earth"/>
<radiobutton text="joy to the world"/>
<radiobutton text="happy new year"/>
</radiogroup>
</tabelement>
<tabelement text="housewares">
<simplelayout axis="y" spacing="10"/>
<checkbox text="stainless steel"/>
<checkbox text="glassware"/>
</tabelement>
<tabelement text="isotope">
<text multiline="true" width="${immediateparent.width}">
Atoms that have the same number of protons but a different number of neutrons. They are atoms of the same element that have different masses. The isotope number is the number of protons plus the number of neutrons.
</text>
</tabelement>
</tabslider>
<tabs>
<tabpane>Insecticides
<simplelayout spacing="10" inset="10"/>
<radiogroup>
<radiobutton>Yes, I want to know more</radiobutton>
<radiobutton>No, I prefer to remain blissfully unaware</radiobutton>
<radiobutton>Please tell my neighbor, who may tell me</radiobutton>
</radiogroup>
</tabpane>
<tabpane text="Subliminal">
<button height="22">Submit</button>
</tabpane>
</tabs>
</view>
<window text="test window" width="250" height="250" x="410" y="180" resizable="true" id="fw" title="A Simple Window">
<menubar name="mbar" placement="menubar">
<menu name="file" id="mfile" width="80">File
<menuitem text="item 1"/>
<menuseparator/>
<menuitem id="MWS" text="item 3">
<menu name="subedit">subedit
<menuitem text="subitem 1"/>
<menuitem text="subitem 2"/>
</menu>
</menuitem>
</menu>
<menu name="Options">Document
<menuitem text="option 1"/>
<menuitem text="option 2"/>
</menu>
</menubar>
<scrollbar/>
</window>
<view layout="spacing:14">
<button height="22">Submit</button>
<button height="22" enabled="false">disabled</button>
<combobox width="100">
<textlistitem text="pistachio" selected="true"/>
<textlistitem text="chocolate chip"/>
</combobox>
<radiogroup>
<radiobutton text="tension"/>
<radiobutton text="distance"/>
</radiogroup>
</view>
<view layout="spacing:20">
<view layout="spacing:10">
<checkbox text="I want to take a weekend flight"/>
<checkbox text="Also search airports within 70 miles"/>
</view>
<view layout="spacing:5">
<edittext width="200" text="text entry here"/>
<edittext width="200" text="disabled" enabled="false"/>
</view>
</view>
<simplelayout axis="x" spacing="20"/>
</view>
</canvas>
|
Vous remarquerez que l'Explorateur OpenLaszlo regroupe les composants suivant les "composants de formulaire" et les "composants généraux". C'est un groupement principalement heuristique des composants qui apparaissent généralement ou non à l'intérieur des balises <form>. Il n'y a aucune différence particulière; par exemple, la balise <button> peut être contenue dans une vue (<view>) ou une fenêtre <window>— elle n'a pas besoin d'être incluse dans un formulaire (<form>).
Dans cette partie, nous allons étudier les différentes façons d'utiliser des composants dans des applications OpenLaszlo :
-
utilisation des balises
-
utilisation des bibliothèques JavaScript
-
utilisation de la liaison de données
Comme précisé précédemment, l'utilisation de script et les liaisons de données sera approfondie dans les chapitres suivants. Ne vous inquiétez pas si vous n'êtes pas très à l'aise avec ces concepts.
Le plus simple pour utiliser les composants est de faire une application qui ne contienne que des balises - pas de script. L'exemple trivial suivant montre à quoi cela ressemble.
Exemple 6.2. Exemple d'utilisation des Composants avec balises seulement
<canvas height="100">
<simplelayout axis="x" spacing="10" inset="10"/>
<list shownitems="4">
<textlistitem>judy</textlistitem>
<textlistitem>ann</textlistitem>
<textlistitem>betsy</textlistitem>
<textlistitem>sarah</textlistitem>
<textlistitem>carol</textlistitem>
<textlistitem>danah</textlistitem>
</list>
<radiogroup>
<radiobutton text="apple"/>
<radiobutton text="cherry"/>
<radiobutton text="key lime"/>
</radiogroup>
</canvas>
|
Bien sûr, de façon pratique, vous aurez parfois besoin d'utiliser du script, que ce soit dans une méthode ou moins fréquemment, pour créer un composant à l'intérieur d'une balise As a practical matter, of course, you will usually need to use need to use some script, whether in a method, or, less frequently, to create a component within a <script>.
En plus de la déclaration de composants avec des balises, vous pouvez créer et manipuler les composants depuis JavaScript.
L'exemple suivant montre comment vous pouvez créer des boutons en utilisant balises et script.
Exemple 6.3. Création de composants avec du script
<canvas height="150">
<simplelayout/>
<!-- Voici un bouton créé avec une balise -->
<button name="framitz" width="50">
hello
</button>
<script>
// et voici un bouton créé en utilisant du scrip
var b = new button();
b.setattribute("width", 50);
b.setattribute("height", 50);
</script>
</canvas>
|
Dans l'exemple ci-dessous, la méthode onclick ajoute de façon procédurale un élément au composant <list>.
Exemple 6.4. Bibliothèques des Composants
<canvas height="150">
<simplelayout spacing="10"/>
<list id="mylist" height="82">
<textlistitem text="something"/>
</list>
<view layout="axis:x;spacing:4" >
<edittext id="item" text="new item"/>
<button text="Add" isdefault="true">
<method event="onclick">
mylist.addItem(item.text);
</method>
</button>
</view>
</canvas>
|
Une troisième façon de créer des composants est par la liaison de données. Dans l'exemple ci-dessous, un nouveau composant A third way to create components is through databinding. In the example below, a new component textlistitem est créé pour tout noeud correspondant de l'ensemble de données "mydata".
Exemple 6.5. Composants commandés par les données
<canvas height="200">
<dataset name="mydata" src="../contacts.xml" request="true"/>
<simplelayout axis="x" spacing="10" inset="10"/>
<list id="a">
<textlistitem datapath="mydata:/contacts/person"
text="$path{'@firstname'}"/>
</list>
<list id="b" shownitems="4">
<textlistitem datapath="mydata:/contacts/person"
text="$path{'@firstname'}"/>
</list>
</canvas>
|