Client Léger Riche : OpenLaszlo

Accueil

Origine de ce site

Au cours de la 3^e année de formation au sein de l'école Ingénieurs2000, la réalisation d'un exposé présentant un sujet lié au domaine informatique (outil, méthode, langage, réseaux, ... ) est demandée aux apprentis.

Cet exposé se déroule en deux parties :

• Une présentation orale de 30 minutes devant l'ensemble des apprentis de la promotion.
• Un site web documentant le sujet étudié

Les exposés de système sont suivis par Dominique REVUZ. Beaucoup d'autres sujets sont traités sur le site des exposés IR.

Auteur

Cet exposé a été réalisé par Gilles Tartivel en Novembre 2005.

Sujet abordé

Les tendances actuelles en terme de développement "client léger" s'articulent souvent autour de :

• J2EE ou .NET : couches souples et stables d'éxécution et d'accès aus données
• HTML : couche de présentation compliquée et non intuitive

Le language HTML limite les applications.

Figure 1. Tendance Informatique

De nouvelles technologies remplaçant le HTML permettent d'habiller les applications par des interface plus efficaces. Ce sont les serveurs de présentation.

Actuellement ces serveurs publient des interfaces riches et évoluées en format Flash, appelées "Client Léger Riche" ou "Rich Internet Applications", combinant les interfaces utilisateurs riches et la facilité de publication du web.

Figure 2. Problèmes auxquels les applications riches pour Internet répondent :

Deux technologies permettent de réaliser de telles interfaces : OpenLaszlo et Macromedia Flex.

Le sujet que j'aborderais au cours de cette présentation sera OpenLaszlo.

OpenLaszlo : Présentation

Présentation

OpenLaszlo est une plateforme open-source : licence CPL (Common Public License), développée à l'origine par la société Laszlo Systems.

OpenLaszlo est préconisé pour le développement et le déploiement d'applications web avec des interfaces dont le "look and feel" est recherché.

La structure applicative est constituée :

• d'un langage de développement : le LZX, basé sur XML et Javascript, est utlisé pour définir l'interface utilisateur de l'application. LZX est familier pour les développeurs d'applications web habitués au XHTML et au Javascript
• d'une bibliothèque de classes : constituée de conteneurs, des contrôleurs et des gestionnaires de hauts niveau (Drag & Drop )
• d'un service d'éxécution : proxy permettant l'interaction entre l'utilisateur et les sources de données, optimisation des performances (mise en cache des contenus, ...)

L'environnement est très proches de ASP,JSP et XSLT

Figure 3. Couche présentation de Laszlo

OpenLaszlo : Publication

Méthodes

Il existe deux méthodes pour publier une application OpenLaszlo.

Méthode simple

Les applications Laszlo peuvent être compilées du format LZX en un fichier binaire au format SWF. Elles peuvent donc être chargées de manières statiques au travers d'une page web existante.

Cette méthode est connue comme le déploiement "serverless" car aucun serveur de présentation n'est nécessaire, seul le serveur Web est sollicité. Les binaires sont simplement disposés sur le server Web.

Les applications déployées de cette manière manque de certaines fonctionnalités comme la possibilité de faire tourner des services web SOAP ou d'appeler des méthodes à distances avec le langage XML.

Méthode évoluée

Alternativement, les applications Laszlo peuvent être déployées comme des servlets Java traditionnels qui sont compilés et retournés au navigateur web dynamiquement. Cette méthode implique que le serveur web exécute le serveur OpenLaszlo, aussi appelé "Laszlo Presentation Server" ou LPS.

Cette méthode est connue comme le déploiement "LPS-proxied".

"Laszlo Presentation Server" est un servlet Java compilant des applications LZX en des binaires exécutables pour les environnements ciblés. Jusqu'en février 2006, LPS produisait uniquement des binaires en format SWF. Il désormais possible de générer du DHTML.

"Laszlo Presentation Server" nécessite ainsi forcément un serveur d'application J2EE avec un Java Runtime Environment 1.3 ou supérieur.

Figure 4. Développement et publication Laszlo

OpenLaszlo : Architecture / Mécanisme Interne

2.1 Architecture / Mécanisme Interne

LPS est diviséen 3 sous-systèmes principaux que sont : le compilateur de l'interface (Interface Compiler), le gestionnaire de données (Data Manager) et le gestionnaire de connexions persistentes (Persistent Connection Manager).

Figure 5. Architecture de Laszlo Presentation Server (image issue de http://www.laszlosystems.com )

Le compilateur de l'interface consiste en un compilateur de balise LZX, un compilateur de scripts et un transformateur de médias. Les deux compilateurs convertissent respectivement les balises LZX de la l'application et le code JavaScript en un fichier binaire SWF (bytecode) exécutable par le client Flash. Durant le chargement initial, le compilateur de l'interface gén è re un fichier en format SWF puis le place dans un cache, duquel il sera envoyévers le client. En fonction de l'invocation du client, le SWF est directement transmis ou est inclus dans un fichier HTML.

Le transformateur de médias converti tout les types de médias autorisés en un unique fichier binaire compressé lisible par Laszlo. Les différents types de média pouvant ê tre utilisés sont le JPEG, GIF, PNG, MP3, TrueType, et SWF.

Le gestionnaire de données comprend un compilateur de données, convertissant toutes les donnés binaires compressées lisibles par Laszlo et une série de connecteurs permettant à l'application de récupérer des données via XML/HTTP. Les application Laszlo peuvent ainsi interagir à travers le réseau avec des bases de données, des WebServices, des fichiers XML et des objets JAVA.

Le gestionnaire de connexions persistantes gère principalement l'authentification pour les applications Laszlo qui nécessitent cette fonctionnalité.

Intéraction entre le client et Laszlo Presentation Server

Nous allons illustrer une intéraction simple entre le client et le serveur à travers un exemple. Prenons une simple application composée de 2 affichages : la première affiche un écran permettant de saisir un code postal, le second affichage fournit des informations sur la météorologie de la ville concernée. Dans cet exemple les données concernant la météorologie sont stockées dans un simple XML Web Service.

Figure 6. Intéraction Client - Serveur

Les classes Laszlo

L'architecture générale d'une application Laszlo est basée sur des "Laszlo Foundations Classes" qui est une librairie basique de composants permettant de réaliser des applications dynamiques et animées. L'objectif de ces classes est de simplifier la création des applicaitons et offrir aux utilisateurs un rendu visuel attrayant et dynamique.

Langage LZX : Les notions de bases

Hello World

Le code source d'une application Laszlo est un document XML, ou un ensemble de documents XML :

<canvas> 
	<text>Hello World</text>
</canvas>
				

Une application Laszlo est toujours inclus entre les balises <canvas> </canvas>

Une fenêtre simple

Les fenêtres permettent de spécifier comment les éléments interagiront entre eux.

<canvas width="500" height="350">
	<window x="20" y="20" width="200" height="250" 
		title="Fenetre Simple" resizable="true">
		<simplelayout axis="y" spacing="10" />
		<text>du texte.</text>
		<text>encore du texte.</text>
	</window>
</canvas>
								

	La balise <window> permet de créer une fenêtre. Comme la plupart des balises, des attributs permettent de les configurer. Ici nous précisons la position et la dimension en pixels, le nom et le fait que la fenêtre est redimensionnable.
	La balise <simplelayout> permet de positionner les éléments de façon relative. C'est le gestionnaire de mise en page.
	Nous avons insérer dans la balise <window> 2 éléments fils <text>. Le texte sera ainsi positionné à l'intérieur de la fenêtre.

Figure 7. Résultat du code Laszlo

Utilisation de scripts JavaScript

Il existe plusieurs façons d'utiliser des scripts. Nous allons illustrer 3 façons de coder différentes à travers une petite application permettant simplement de déplacer une fenêtre à partir d'une action :

Figure 8. Visualisation de l'application

Par les attributs.

<canvas width="500" height="200">
	<window x="100" y="30" title="Window 2" name="windowTwo">
		<text>This is the second window.</text>
	</window>
	<window x="20" y="20" width="150" title="Simple Window">
		<button text="My button"
			onclick="this.parent.parent.windowTwo.setAttribute('x',
			this.parent.parent.windowTwo.getAttribute('x') + 20)"/> 
	</window>
</canvas>
				

Modification de l'attribut x de windowTwo actionnée par le bouton.

Ce code fonctionne, mais n'est pas très propre. Il serait plus élégant d'encapsuler le code dans une fonction et de l'appeler lors du clic sur le boutton.

Par Appel de fonction.

<canvas width="500" height="200">
	<script>
		// Déplace la 2e fenetre de 20 pixels sur la droite
		function moveWindow() {	
			var increment = 20;
			var originalX =	canvas.windowTwo.getAttribute('x');
			var newX = originalX + increment;
			canvas.windowTwo.setAttribute('x', newX);
		}
	</script>
	<window x="100" y="30" title="Window 2" name="windowTwo">
		<text>This is the second window.</text>
	</window>
	<window x="20" y="20" width="150" title="Simple Window">
		<button text="My button" onclick="moveWindow();"/>
	</window>
</canvas>
				

	Déclaration et définition de la fonction
	Appel de la fonction

Le code est plus simple à comprendre, le code est plus présentable (étalé sur plusieurs lignes, commentaires) et il est plus simple d'attribuer des nom de variables.

Cependant, la fonction est détachée du bouton. Une façon encore plus élégante d'atteindre le même résultat est d'écrire une méthode associée au bouton.

Par les méthodes.

<canvas width="500" height="200">
	<window x="100" y="30" title="Window 2" name="windowTwo">
		<text>This is the second window.</text>
	</window>
	<window x="20" y="20" width="200" title="Simple Window">
		<button text="My button" onclick="this.moveWindow()">
			<!-- Déplace la 2e fenetre de 20	pixels sur la droite -->
			<method name="moveWindow">
				var increment = 20;
				var originalX = this.parent.parent.windowTwo.getAttribute('x');
				var newX = originalX + increment;
				this.parent.parent.windowTwo.setAttribute('x', newX);
			</method>
		</button>
	</window>
</canvas>
				

	Appel de la méthode
	Déclaration et définition de la méthode

Les méthodes ne sont pas globale, nous devons les appeler de manière relative. Dans le cas du bouton, nous utilisons this.moveWindow().

Langage LZX : Les notions avancées

Programmation orientée objet

LZX est un langage orienté objet qui permet de créer des classes personnalisées et réutilisables.

<canvas width="500" height="80">
	<class name="MyClass" width="80" height="25" bgcolor="#CFD9AB"> 
		<text align="center" valign="middle">Hello,World!</text>
	</class>

	<MyClass name="myFirstInstance"/>
</canvas>
				

	Déclaration et définition de la classe (La balise <class> définie la classe)
	Instanciation de la classe

Figure 9. Affichage du résultat

Héritage d'une classe et surcharge de méthodes

Les classes instanciées héritent des attributs et des méthodes de la classe source.

<canvas>
	<class name="SpecialButton" extends="button" onclick="changeSize()">
		<method name="changeSize">
			this.setAttribute('width', '200');
		</method>
	</class>

	<simplelayout axis="y" spacing="10"/>
	<SpecialButton>200</SpecialButton>
	<SpecialButton>
		400
		<method name="changeSize">
			this.setAttribute('width', '400');
		</method>
	</SpecialButton>
</canvas>
				

	Extension de la classe <button>
	Surchage de la méthode changeSize

Figure 10. Affichage du résultat

IDE4Laszlo

IBM fourni actuellement le seul environnement de développement pour OpenLaszlo.

Entièrement gratuit, ce plugin nommé IDE4Laszlo pour la plateforme de développement Eclipse facilite la création de fichiers LZX.

Avantages

IDE4Laszlo permet entre autres de :

• Mieux organiser les projets Laszlo
• Créer des applications en mode texte et mode graphique (WYSIWYG)
• Indenter le code automatiquement
• Prévisualiser l'application
• Effectuer une coloration syntaxique
• Effectuer une auto-complétion sur les mots clés du langage LZX
• Evaluer les expressions des scripts.
• Effectuer des débogages

Copie d'écran

Figure 11. Captures d'écran du plugin IDE4Laszlo pour Eclipse en mode texte et graphique

Tests unitaires OpenLaszlo :"LzUnits"

Introduction

Il existe une implémentation des frameworks de test "xUnit" pour les application OpenLaszlo, ce sont les LzUnit.

Les fonctionnalités fournies par le Framework LzUnit sont essentiellement fournies par 2 classes public : TestCase et TestSuite.

TestSuite représente un ensemble de tests et TestCase représente un test particulier dans la série de tests. En résumé, chaque TestSuite contient un ou plusieurs tests qui sont instanciés par TestCase.

Un programme LZX contenant une série de tests, lancera automatiquement au chargement tous les tests associés (TestCase).

Un rapport est automatiquement affiché avec les éléments suivants :

• Nombre de tests effectués
• Nombre d'échecs
• Nombre d'erreurs
• Messages d'erreur

Ecrire une série de tests LzUnit

Les tests LzUnit contiennent un ou plusieurs tests logiques qui sont représentés par les méthodes correspondantes dans les <TestCase>. Le nom des méthodes doivent impérativement commencer par "test" afin d'être reconnu! Dans chaque test, nous devons utiliser les méthodes assertXXX() standards de l'API xUnit pour définir les vérifications.

Voici un code classique montrant l'utilisation des LzUnit :

				
<canvas debug="true">
	<include href="lzunit"/> 
	<debug y="60"/>
	
	<testsuite>
		<testcase>
			<attribute name="prop1" value="'gNTIC'" when="once"/>
			<text name="mytext" width="200" bgcolor="blue" text="LzUnit example"/>

			<method name="testsuccess">
				assertEquals(prop1, 'gNTIC')
			</method>
			<method name="testfailure">
				assertTrue(mytext.multiline, "This is not a multiline text field")
			</method>
			<method name="testerror">
				callGNTIC()
			</method>
		</testcase>
	</testsuite>
</canvas>					
				

	Ne pas oublier d'inclure la librairie LzUnit
	Déclaration de la série de test avec la balise <testsuite>
	Déclaration d'un test avec la balise <testcase>
	Déclaration d'une méthode qui se déroulera correctement
	Déclaration d'une seconde méthode qui générera un échec : le texte n'est pas multi-ligne !
	Déclaration d'une troisième méthode qui générera une erreur : la méthode callGNTIC() n'existe pas !

Figure 12. Exemple typique d'erreurs : Résultat de l'exemple ci-dessus

Exécution séquentielle des tests

Par défaut, l'ordre d'exécution des tests n'est pas garanti. S'il est important qu'il y ai un ordre précis dans l'exécution des tests, nous pouvons positionner le flag asynchronoustests à false comme le montre l'exemple suivant :

				
<canvas debug="true" height="200">
	<include href="lzunit"/>

	<debug y="60"/>

	<script>
		asynchronoustests = false 
	</script>

	<class name="syncrun" extends="TestCase">
		<attribute name="counter" value="1" when="once"/>
		<method name="testfirst">
			assertEquals(1, counter++)
		</method>

		<method name="testsecond">
			assertEquals(2, counter++)
		</method>

		<method name="testthird">
			assertEquals(3, counter++)
		</method>
	</class>

	<testsuite>
		<syncrun/>
	</testsuite>
</canvas> 
				
				

Positionnement du flag asynchronoustests

Figure 13. Exemple de tests passés avec succès : Résultat de l'exemple ci-dessus

OpenLaszlo

Référence

Le site web officiel d'OpenLaszlo qui contient toutes les informations qui m'ont étés nécessaires pour la réalisation de mon exposé et de ce site.