Le Tabelement

<!-- Déclaration du modéle de document; encoding="ISO-8859-1" nous permet
d'afficher les caractéres accentués -->
<?xml version="1.0" encoding="ISO-8859-1" ?>

<!-- Déclaration du titre et de la taille de notre application -->
<canvas title="Hôtel du Golfe" width="560" height="320" >

<!-- Déclaration des couleurs à utiliser -->
<style name="customstyle" basecolor="silver" textcolor="0x072450"
bordercolor="silver" bgcolor="0x072450"/>

<!-- Application du style à notre tabelement, création d'une nouvelle
classe!!! -->
<class name="mytabslider" extends="tabslider" mintabheight="20"
style="customstyle"/>

<!-- Image (étoile) à utiliser pour chaque tabelement, création d'une
nouvelle classe!!!-->
<class name="tabview" extends="view" placement="header" x="2" y="1"
resource="etoile.png"/>

<!-- Extensions des classes de texte -->
<class name="mytext" extends="text" fgcolor="white" fontsize="12"
multiline="true"/>
<class name="mytext1" extends="mytext" x="30" fontsize="16"/>

<!-- Balise ouvrante de notre tabslider avec taille et position -->
<mytabslider width="560" height="320" y="0" x="0">

<!-- Balise ouvrante de notre premier tabelement avec titre, position et
selected="true" qui signifie qu'au chargement de l'application ce tabelement
sera séléctionné. -->
<tabelement text="Chambre tout confort, vue mer et climatisation!" text_x="22" selected="true">

<!-- Application de l'image étoile -->
<tabview/>

<!-- Application pour faire défiler une image (tutoriel précédant) -->
<view resource="chambre-hotel-du-golfe-200px.jpg" x="${0 - (this.sqrtx *
this.sqrtx)}">
<attribute name="sqrtx" value="-23"/>
<animator attribute="sqrtx" from ="-23" to="23" duration="30000"
repeat="Infinity" motion="linear"/>
</view>

<!-- Textes et images à droite de l'image qui défile -->
<view x="270" y="0" bgcolor="0x072450" width="500" height="201">
<view x="15">
<simplelayout axis="y" spacing="2" />
<view resource="climatisation.gif" y="1">
<mytext1>
Air-conditionné</mytext1>
</view>
<view resource="television-satellite.gif" >
<mytext1>
Télévision satellite</mytext1>
</view>
<view resource="telephone-direct.gif" >
<mytext1>
Téléphone direct</mytext1>
</view>
<view resource="coffre-fort.gif" >
<mytext1>
Coffre fort</mytext1>
</view>
<view resource="baignoire.gif" >
<mytext1>
Salle de bain, baignoire</mytext1>
</view>
<mytext>
Derniére rénovation: 2003.<br />
Twin, double, triple et quadruple.<br />
6 chambres avec balcon vue mer.</mytext>
</view>
</view>

<!-- 4 vues pour border l'image qui défile -->
<view bgcolor="white" x="0" y="0" width="269" height="1"/>
<view bgcolor="white" x="0" y="191" width="269" height="1"/>
<view bgcolor="white" x="0" y="0" width="1" height="200"/>
<view bgcolor="white" x="269" y="0" width="1" height="200"/>

<!-- Balise fermante de notre premier tabelement -->
</tabelement>

<!-- La suite du code est donnée à titre indicative, rien de plus à
apprendre -->
<tabelement text="Piscine avec solarium, pour une journée farniente!"
text_x="22" >
<tabview/>
<view resource="piscine-hotel-du-golfe.jpg" x="0" y="0">
<view bgcolor="white" x="0" y="0" width="267" height="1"/>
<view bgcolor="white" x="0" y="191" width="267" height="1"/>
<view bgcolor="white" x="0" y="0" width="1" height="200"/>
<view bgcolor="white" x="267" y="0" width="1" height="200"/>
</view>
<simplelayout axis="x" spacing="7" />
<view y="16">
<simplelayout axis="y" spacing="4" />
<mytext1 x="15">
Piscine de l'hôtel du golfe</mytext1>
<mytext width="220" x="15">
<br />
La piscine de l'hôtel du golfe, ensoleillée toute la journée, est réservé
aux clients de l'hôtel.<br />
<br />
Vous pourrez y prendre votre petit déjeuner avant de passer la journée à
bronzer sur un transat à l'ombre d'un parasol...</mytext>
</view>
</tabelement>
<!-- Vous pouvez créer d'autres tabelement en copiant les deux ci-dessus et
en changeant le texte et les photos ... -->

<!-- Balise fermante de notre tabslider -->
</mytabslider>
<!-- Balise fermante de notre canvas et de cette application -->
</canvas>

Notre code lzx est complet, transformons le en fichier SWF par le serveur
OpenLaszlo en mode SOLO, puis intégrons le à notre page HTML comme un simple
fichier Flash!
Et voici le résultat: