ZK - Simply Rich

Développement

Où commencer...

Le langage de balise de ZK est le ZUML. Il est destiné aux développeurs web non spécialisés dans la programmation et leur permet de créer efficacement des interfaces utilisateurs riches et ergonomiques. Comme vous l'avez vu, il est possible de le mélanger avec du XHTML, du XUL mais également d'y introduire d'autres langages. Ceux supportés actuellement sont le BeanShell (Java), le JavaScript, le Groovy, le Ruby, le Python et le MVEL.

Un nombre très impressionant de composants sont disponibles dans ce framework. Ils vont du plus simple champ de texte à des composants très gros permettant une intégration de Google Maps, du Fisheye de Dojo ou encore du célèbre éditeur en ligne FCKeditor.

Divers composants

Une démonstration des diverses possibilités de ZK est disponible sous forme d'une Live Demo.

L'intégration de tels composant est vraiment rendue aisée par le ZUML. Prenons l'exemple du FCKeditor proposé sur le site de démonstration.

<window title="FCKeditor">
	<fckeditor id="ed" onChange="ta.value = self.value"/>
	<textbox id="ta" rows="6" width="100%" onChange="ed.value = self.value"/>
</window>

Ce code très court montre les raccourcis apportés par le ZUML. Une balise spécifique a été définie pour ce composant de même que chacun des composants XUL, XHTML etc. La balise window correspond au fenêtres qui composent l'interface ci-dessus. La balise textbox est un aire de texte. Le propriétés de chaque composants sont listées dans la documentation développeur de ZK. Ici la textbox fait 6 lignes de hauteur et prend toute la largeur de la fenêtre. Un identifiant a été donné à chaque composant interne à cette fenêtre. Les accès transversaux sont alors très simples, il suffit de choisir un évènement déclencheur et affecter où manipuler notre valeur. La fenêtre propose ici deux champs de texte, celui de FCKeditor et celui de la textbox. Très intuitivement nous pouvons accéder aux propriétés des deux composants soit par self soit par son identifiant.

Prenons un exemple un peu plus complet comme celui d'un accès jdbc à notre base de donnée.

<window title="JDBC demo" border="normal">
	<zscript>{
		import java.sql.*;
		 void submit() {
		//load driver and get a database connetion
		//Note: It is usually better to use connection pool. Please consult
		//the manual of your Web server. Or, refer to the Developer's Guide
			Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
			String url = "jdbc:odbc:Fred";
			Connection con = DriverManager.getConnection(url,"myLogin", "myPassword");
			PreparedStatement stmt = con.prepareStatement("INSERT INTO user values(?, ?)");
			
			//insert what end user entered into database table
			stmt.setString(1, name.value );
			stmt.setString(2, email.value );
			
			//execute the statement, commit and close the jdbc connection
			stmt.executeUpdate();
			con.commit();
			con.close();
		}
	}</zscript>
	<grid>
	<rows>
		<row>Name : <textbox id="name"/></row>
		<row>Email: <textbox id="email"/></row>
		<row><button label="submit" onClick="submit()" /></row>
	</rows>
	</grid>
</window>

La première chose à remarquer est la balise zscript. C'est celle qui permet de faire du scripting directement dans la page. A l'intérieur de ces balises, nous importons un package provenant du JRE. La méthode submit est ensuite définie pour la gestion de l'évènement de validation du formulaire défini plus bas.

Nous voyons que le code Java ne présente aucune spécificité mais le plus intéressant est l'appel de la méthode déclarée. Dans le formulaire qui dispose de deux champs de texte, le bouton de validation est paramétré appeler cette méthode submit() lors de l'évènement clic sur le bouton.

La deuxième chose intéressante est l'accès depuis le code Java aux valeurs des champs de texte. De la manière la plus simple possible, comme si nous nous trouvions dans le même contexte technologique, nous faisons référence aux valeurs de ces champs par leur identifiant.

Astuces

Même si comme nous l'avons vu le développement est très facile, quelques conseils peuvent être utiles pour ne pas perdre de temps. De nombreux tutoriaux, le Live Demo, la référence des développeurs et le guide des développeurs sont remplis d'exemples. Le développement d'applications ne vous demandera pas beaucoup plus que de vous en inspirer.

Lorsque vous souhaitez utiliser un composant, rendez vous dans la documentation de ZK. Recherchez le composant qui vous intéresse et vous trouverez toutes les propriétés de celui-ci, les évènements associés etc.

Une deuxième documentation qui est le guide des développeurs comporte également de nombreuses pistes pour l'amélioration de vos interfaces et traitements. Vous y trouverez beaucoup d'explications sur la gestion des composants comme l'affectation de contraintes, les layouts, des évènements ou encore l'utilisation d'autres langages.