Créer un "tabelement" avec OpenLaszlo
Un "tabelement" est trés facile à créer grace à OpenLaszlo. Cet outil vous permet de présenter votre contenu (texte ou/et image) d'une maniére originale et à l'aspect professionnel.
Je vous propose ici le code source utilisé par l'Hôtel du Golfe à Golfe-Juan.
Source du Tabelement de l'Hôtel du Golfe Juan
<!-- 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: