Le blog de Monsieur Patate

Pour notre premier programme nous allons commencer par un Hello World, histoire d’être original

Alors, si vous avez bien suivi la procédure d’installation vous avez une configuration d’OpenLaszlo fonctionnelle et un Éclipse qui marche, nous allons donc créer notre premier projet en OpenLaszlo.

Lancez Éclipse ainsi que le serveur LPS avec les icÃŽnes sur le bureau, vous noterez que sous Windows une fenêtre DOS reste ouverte, c’est normal, il va falloir faire avec pendant quelque temps j’ai l’impression.

Dans Éclipse, sélectionnez File, New -> Project…

Lancez Éclipse ainsi que le serveur LPS avec les icÃŽnes sur le bureau, vous noterez que sous Windows une fenêtre DOS reste ouverte, c’est normal, il va falloir faire avec pendant quelque temps j’ai l’impression.

Dans Éclipse, sélectionnez File, New -> Project…

Dans la fenêtre New Project sélectionnez Laszlo puis Laszlo Project puis cliquez sur Next

Choisissez un nom pour ce projet, HelloWorld par exemple.

Dans la fenêtre suivante, tous les paramÚtres sont déjà remplis depuis la configuration du plug-in, il n’y a donc normalement rien à changer, vous pouvez cliquer sur Finish .

Une fenêtre apparaît, “Open Associated Perspective ?“, pour vous demander si vous voulez ouvrir la perspective associée aux projets OpenLaszlo, cocher la case, puis répondez Yes. Vous aurez ainsi une mise en place automatique de tous les composants utiles au développement d’application OpenLaszlo.

Voilà à quoi ressemble l’interface lors du premier projet, nous allons commencer par fermer l’onglet “Welcome” avec la croix sur l’onglet.

Nous allons en suite créer notre premier fichier OpenLaszlo, pour cela, positionnez-vous dans la fenêtre “Script Explorer” à gauche, cette fenêtre contiendra tous les projets créés avec Éclipse, pour le moment elle ne contient que le projet HelloWorld, positionnez-vous sur ce projet puis cliquez sur le “+”.

2 objets son apparus, “src” et “Libraries“,le premier ne contient rien, c’est le répertoire qui contiendra les fichiers de notre projet. le 2Úme contient les éléments qui sont utilisés lors de la compilation de programmes OpenLaszlo, il est donc conseillé de ne pas toucher cette partie.

Positionnez-vous sur l’objet “src” puis faites un clique droit puis sélectionnez New -> Laszlo File

Dans la fenêtre qui apparaît, changez le nom du fichier en HelloWorld.lzx puis cliquez sur Finish.

Le nouveau fichier apparaît dans l’interface avec les balises de base d’un fichier OpenLaszlo

HelloWorld.lzx

la premiÚre ligne indique le type de fichier et le codage des caractÚres, comme nous l’avons vu en introduction, les fichiers OpenLaszlo au format XML, donc tous les objets du code seront présent sous la forme:

ou

Les balises suivantes “<canvas>
 </canvas>” englobent le code LZX.

Dans notre premier script nous allons afficher une fenêtre qui contiendra le texte

(Roulement de tambours)
.

hello world !!!!

Comment faire cette prouesse technique ?

Facile avec Open Laszlo
.

Nous allons commencer par créer la fenêtre

Ajoutez ce code entre les balises <canvas> :

Petite explication, l’objet <window/> est défini dans la bibliothÚque standard d’OpenLaszlo et permet de créer des fenêtres avec la charte graphique de base d’OpenLaszlo, c’est donc le moyen le plus rapide pour créer des applications Web.

Lorsque l’objet <window/> a été conçu, plusieurs attributs lui on été doté pour permettre au programmeur d’interagir sur lui, ainsi, nous pouvons utiliser l’attribut title pour définir le titre de la fenêtre, width pour définir la largeur et height pour la hauteur, beaucoup d’autres attributs sont modifiables, pour plus de détails je vous laisse voir la documentation à cette adresse: l’objet window.

Maintenant, nous allons mettre du texte dans la fenêtre, ajoutez ce code entre les balises <window>:

Comme pour l’objet <window/> l’objet <text/> a des attributs propres qui lui sont définis, ici align et valign pour le positionnement horizontal et vertical, comme pour l’objet <window/> je vous laisse voir à cette adresse pour plus de détails: l’objet text.

Lorsque vous vous positionnez sur un objet, vous pouvez remarquer que ces attributs sont accessibles et modifiables directement depuis Eclipse par le biais de la fenêtre “Attributes” en bas.

Maintenant votre code devrait ressembler à ça:

Nous allons maintenant configurer la compilation du projet

sélectionnez dans le menu Run puis Run


Dans la fenêtre Run, sélectionnez Laszlo Application dans la liste puis cliquez sur New en bas.

Dans Name entrez HelloWorld
Sélectionnez le bouton Project
 et choisissez le projet HelloWorld.

Dans le champ LZX Application cliquez sur Browse
 puis sélectionnez le fichier HelloWorld

Pour rendre plus facile l’exécution du code par la suite il est conseillé de créer un raccourcie, cliquez sur l’onglet Common puis cochez la case Run

validez avec Apply puis cliquez sur Run en bas de la fenêtre pour lancer la compilation.

Éclipse, vous demande, si vous voulez enregistrer les travaux en cours cliquez sur OK

Et voila vous avez réalisé votre premiÚre application avec OpenLaszlo.

Si vous effectuez des modifications sur le code et que vous voulez lancer l’exécution, il vous suffira par la suite de cliquer sur le bouton Run, entouré en rouge sur l’image ci-dessous.

Lorsque vous appuyiez sur le bouton “Run” Éclipse lancera la compilation du dernier projet exécuté, si vous avez plusieurs projets en cours, vous pouvez sélectionner le projet avec le menu contextuel de ce bouton en cliquant sur la flÚche à droite de celui-ci.