ATTENTION : Tutorial en cours d'écriture ! N'hésitez pas à nous signaler toute erreur ou suggestion.
Accès rapide : Coder une classe de composant NWS Coder le rendu HTML de votre composant NWS Intégration du composant dans une page NWS Ajout de propriété à notre composant NWS
Un composant NWS doit, au minimum, dériver de la classe corelib.services.web.components.WebComponent. Cependant cette classe ne fournit pas de support en terme de rendu HTML. Néanmoins l'utilisation de ce type de base peut s'avérer utile dans certains cas particuliers.
01 package corelib.services.web.samples.virtualcaddy.webcomponents; 02 03 import corelib.services.web.components.WebComponent; 04 05 public class MinimalComponent extends WebComponent { 06 07 public MinimalComponent() { 08 // CAUTION : print a message to the Web server logs 09 // Not in the HTML result !!! 10 System.out.println( "Hello" ); 11 } 12 13 }
Si vous souhaitez que votre composant ait le support de rendu HTML, il vous faudra alors utiliser le type de base suivant : corelib.services.web.components.VisualComponent. Cette classe dérive en fait de WebComponent.
Tout comme une page NWS, un composant a un cycle de vie qui lui est propre. Ce cycle de vie sur vos composants se traduit par des invocations de méthodes sur vos composants à différents moments. Pour que vos composants se comportent correctement, il faut donc qu'ils redéfinissent certaines méthodes. Ces méthodes sont initialement définies sur WebComponent et sur VisualComponent.
01 package corelib.services.web.samples.virtualcaddy.webcomponents; 02 03 import java.io.PrintWriter; 04 05 import corelib.services.web.components.VisualComponent; 06 import corelib.services.web.server.events.WebPageEvent; 07 08 public class CaddyFooter extends VisualComponent { 09 10 @Override public void component_renderBegin( WebPageEvent webPageEvent ) { 11 PrintWriter out = this.webPage.getOut(); 12 out.println( "\n<hr/>" ); 13 out.println( "<div align='center'>" ); 14 } 15 16 @Override public void component_renderChildren( WebPageEvent webPageEvent ) { 17 PrintWriter out = this.webPage.getOut(); 18 out.println( " <a href='http://www.infini-software.com'>NWS</a>" ); 19 out.println( " sample web application - " ); 20 out.println( " <a href='Trace.wp'>View web trace</a>" ); 21 } 22 23 @Override public void component_renderEnd( WebPageEvent webPageEvent ) { 24 PrintWriter out = this.webPage.getOut(); 25 out.println( "</div>" ); 26 } 27 28 }
L'exemple ci-dessus vous propose donc une classe permettant de générer un pied de page : ce pied de page est de plus utilisé dans l'application de démonstration Virtual Caddy. Elle dérive donc de la class VisualComponent et en redéfinie trois méthodes.
public void component_renderBegin( WebPageEvent webPageEvent ) : cette méthode produit le flux HTML résultant de l'utilisation du tag ouvrant pour le composant NWS considéré.
public void component_renderChildren( WebPageEvent webPageEvent ) : cette méthode est invoquée pour générer le HTML équivalent au contenu saisie entre le tag ouvrant et le tag fermant du composant NWS considéré.
public void component_renderEnd( WebPageEvent webPageEvent ) : permet de générer la partie finale du rendu HTML du composant Web.
Ces trois méthodes acceptent un paramètre de type WebPageEvent nous donnant accès à des informations complémentaires. De plus, par le biais de la classe VisualComponent (que l'on hérite) vous avez accès à d'autres informations et notamment la page Web dans laquelle le composant est utilisé.
Une fois votre composant terminé, vous pouvez directement le tester dans une page WEB NWS. La page ci-dessous vous montre comment tester, très simplement, votre composant : notez qu'on n'utilise pas de classe de page NWS. Effectivement, nous souhaitons simplement tester le rendu HTML.
01 <?xml version="1.0" encoding="ISO-8859-1" ?> 02 <web:Html xmlns:web="corelib.services.web.components" 03 xmlns:demo="corelib.services.web.samples.virtualcaddy.webcomponents" 04 codeBehind="corelib.services.web.server.WebPage"> 05 <head> 06 <title>User component Sample</title> 07 <link rel="stylesheet" type="text/css" href="CssStyles.css" /> 08 </head> 09 <body> 10 <h1>User component Sample</h1> <br /> 11 12 <demo:CaddyFooter /> 13 14 </body> 15 </web:Html>
L'injection du composant dans la page NWS se fait en deux étapes. Premièrement, en ligne 03, nous définissons un alias demo qui pointe vers le package dans lequel nous avons placé la classe Java de notre composant. Puis, en second lieu, nous avons placé un composant CaddyFooter dans la page, en ligne 12. Déployez sur Tomcat, puis testez : vous devriez obtenir l'affichage suivant.
Si vous cherchez à faire des composants NWS plus sophistiqués, sachez que vous pouvez aussi leur associer des propriétés. Au niveau d'un composant, une propriété se définie de manière traditionnelle en respectant le standard JavaBeans (utilisation des conventions de codage pour les getters et les setters). Voici un exemple de composant supportant une propriété.
01 package corelib.services.web.samples.virtualcaddy.webcomponents; 02 03 import java.io.PrintWriter; 04 05 import corelib.services.web.components.VisualComponent; 06 import corelib.services.web.server.events.WebPageEvent; 07 08 public class LanguageSelector extends VisualComponent { 09 10 private String currentLanguage = "fr"; 11 12 13 public String getCurrentLanguage() { 14 return currentLanguage; 15 } 16 17 public void setCurrentLanguage( String currentLanguage ) { 18 this.currentLanguage = currentLanguage; 19 } 20 21 22 @Override public void component_renderBegin( WebPageEvent webPageEvent ) { 23 PrintWriter out = this.webPage.getOut(); 24 String imageStyle = "style='border: 0px; cursor: pointer;'"; 25 26 out.println( "<div>" ); 27 out.println( " <script language='javascript'>" ); 28 out.println( " function changeLanguage( language ) { " ); 29 out.println( " var inputNode = document.getElementById('"+this.getId()+"');"); 30 out.println( " inputNode.value = language;" ); 31 out.println( " inputNode.form.submit();" ); 32 out.println( " }" ); 33 out.println( " </script>" ); 34 out.println( " <img src='Images/LocaleFR.png' onclick='changeLanguage(\"fr\");'" ); 35 out.println( " title='Changer le language en français' " + imageStyle + "/>"); 36 out.println( " <img src='Images/LocaleEN.png' onclick='changeLanguage(\"en\");'" ); 37 out.println( " title='Change language to english' " + imageStyle + "/>" ); 38 out.println( " <input type='hidden' id='" + this.getId() + "'" ); 39 out.println( " name='" + this.getId() + ":currentLanguage'" ); 40 out.println( " value='" + this.currentLanguage + "' />" ); 41 out.println( "</div>" ); 42 } 43 44 }
Comme vous pouvez le voir en ligne 10, l'exemple ci-dessus, définit un attribut privé currentLanguage. Il définit aussi les deux méthodes d'accès (getCurrentLanguage et setCurrentLanguage). C'est par l'intermédiaire de ces deux méthodes que la page Web va configurer l'état de votre composant. Ensuite la méthode de rendu HTML (ici, j'ai décidé de tout y mettre dedans - pas de component_renderChildren et de component_renderEnd) utilise, bien entendu, l'état courant en utilisant la valeur stockée pour le langage.
01 <?xml version="1.0" encoding="ISO-8859-1" ?> 02 <web:Html xmlns:web="corelib.services.web.components" 03 xmlns:demo="corelib.services.web.samples.virtualcaddy.webcomponents" 04 codeBehind="corelib.services.web.server.WebPage"> 05 <head> 06 <title>User component Sample</title> 07 <link rel="stylesheet" type="text/css" href="CssStyles.css" /> 08 </head> 09 <body> 10 <h1>User component Sample</h1> <br /> 11 12 <demo:CaddyFooter /> 13 <demo:LanguageSelector currentLanguage="fr" /> 14 </body> 15 </web:Html>
Voici comment utiliser un tel composant. Notez bien qu'en ligne 13, currentLanguage référence bien la propriété et non l'attribut. Cette ligne de code impose la présence de la méthode setCurrentLanguage : il vous suffit de réaliser des traces dans cette méthode pour valider les appels.
Dominique LIARD - © 2007 SARL Infini Software - Tous droits réservés Les autres marques et les noms de produits cités dans ces documents sont la propriété de leurs détenteurs respectifs.