Ellipse Tutorial

Comment utiliser un composant web de calendrier ?

ATTENTION : Tutorial en cours d'écriture ! N'hésitez pas à nous signaler toute erreur ou suggestion.

Accès rapide :
Utilisation sous forme de composant JWT
Gestion de l'internationalisation
Gestion des événements en Javascript
Utilisation sous forme de composant Ellipse
Adaptez le look de vos calendriers

De manière interne au framework Ellipse, un calendrier est fournit sous forme de composant JWT (Javascript Widget Toolkit). Il peut donc être utilisé directement en Javascript. Néanmoins, la notion de calendrier Web est aussi encapsulée dans un composant Web Ellipse : le composant . Cette seconde possibilité permet d'utiliser très simplement un calendrier Web comme étant un élément de formulaire, avec transport de la date saisie jusqu'au serveur HTTP et gestionnaire d'événements côté serveur. Commençons, dans un premier temps, à appréhender l'utilisation d'un calendrier sous forme de composant JWT.

Utilisation sous forme de composant JWT

Commençons par créer un nouveau projet Ellipse pour y tester nos calendriers Web. Pour ce faire, ouvrez Eclipse et placez-vous dans le workspace souhaité. Au niveau de la vue "Package Explorer", cliquez avec le bouton droit de la souris et sélectionnez "New / Other... / Java Web Development / Java Web Project". La boîte de dialogue de construction du projet apparaît : saisissez comme nom de projet "TestCalendars", configurez votre serveur Web, cliquez sur "Next" puis vérifiez la présence de la facette Ellipse. Enfin, cliquez sur "Finish". En cas de demande de chargement de perspective, acceptez ce changement. Votre projet Web est maintenant créé.

Il vous faut maintenant créer une nouvelle page Web avec le support Ellipse pour le script client (en langage Javascript, bien entendu). Pour ce faire, cliquez avec le bouton droit de la souris sur votre projet (dans la vue "Package Explorer", bien entendu). Sélectionnez "New / Web Page" : une boîte de dialogue apparaît. Renseignez-y le nom "JwtCalendar.wp" et prenez soin d'activer le support pour le code côté client ("Supports Client Side").

Deux fichiers viennent d'être créés : JwtCalendar.wp et JwtCalendar.js. Ne cherchez pas le tag <script> de changement du fichier Javascript, dans la page Web : le framework Ellipse garantira un chargement implicite de ce fichier. Rajoutez dans la page web (dans le body) le code HTML suivant.

01 <?xml version="1.0" encoding="ISO-8859-1" ?>
02 <web:Html xmlns:web="corelib.services.web.components"
03           codeBehind="corelib.services.web.webapplications.WebPage">
04     <head>
05         <title>Calendar Tests</title>
06         <link rel="stylesheet" type="text/css"
07               href="corelib/services/web/javascript/jwt/Jwt.css" />
08     </head>
09     <body>
10         <h1 align="center">Calendar Tests</h1>
11 
12         <div id="forFrenchJwtCalendar" style="width: 200px; height: 170px;"> </div>
13 
14     </body>
15 </web:Html>

JwtCalendar.wp : On défini notamment un tag qui servira de conteneur pour le calendrier

Ensuite, il vous faudra éditer la partie de code client (code Javascript) ainsi, afin d'injecter votre calendrier dans le div. Bien entendu, l'injection ne pourra se faire qu'après que le tag HTML soit mis en place : d'où l'utilisation du gestionnaire d'événements onload.

01 importPackage( "corelib/services/web/javascript/jwt/Calendar.js" );
02 
03 addEventHandler( window, "onload", function ( event ) {
04     var frenchJwtCalendar = new Calendar( new Date( 2008, 0, 1 ), new Locale( "fr" ) );
05     frenchJwtCalendar.injectInDocument( document.getElementById( "forFrenchJwtCalendar" ) );
06 });

JwtCalendar.js : Instanciation et injection, par Javascript, de votre calendrier

Il est à noter que le constructeur de calendriers peut accepter deux paramètres. Le premier correspond à la date initialement sélectionnée par votre calendrier (à défaut c'est la date du jour qui sera considérée). Le second permet de fixer la langue à utiliser pour l'affichage du calendrier. De plus, par défaut, c'est le mois actuel qui est présenté. Si vous souhaitez changer cet aspect, vous pouvez utiliser la méthode setDisplayedMonth( date ) : elle utilise une date qui fixera le mois à afficher.

Il faut maintenant déployer votre application Web dans votre serveur J2EE. Pour ce faire, cliquez avec le bouton droit de la souris sur votre projet (toujours dans la vue "Package Explorer"), puis sélectionnez "Run As / Run on serveur" : acceptez le déploiement sur le serveur. Enfin prenez votre navigateur favoris et invoquez l'URL adaptée : certainement http://localhost:8080/TestCalendars/JwtCalendar.wp : un calendrier similaire à celui-ci devrait apparaître.

Gestion de l'internationalisation

De manière similaire à Java, le librairie JWT propose aussi une classe Locale permettant la gestion de la localisation (langages et pays utilisés par vos composants). Le composant JWT Calendar supporte pour l'heure deux langues pour son affichage : le français et l'anglais (utilisé par défaut) et ne tient pas compte de l'information de localisation géographique. En passant cette instance new Locale("fr"), votre calendrier devrait s'afficher en français. En utilisant la valeur "en", il devrait s'afficher en anglais.

Gestion des événements en Javascript

Comme présenté dans certains autres documents de ce tutorial, le framework Ellipse et plus précisément la librairie JWT, propose des extensions pour la gestion des événements en Javascript. Les calendriers JWT tirent profit de ces extensions et permettent de réagir à un changement de sélection de date d'un calendrier. Pour ce faire, rajoutez un gestionnaire à l'événement onDateSelected de votre calendrier. Les exemples de codes suivants montrent comment modifier une zone de saisie de texte en cas de changement de date.

01 <?xml version="1.0" encoding="ISO-8859-1" ?>
02 <web:Html xmlns:web="corelib.services.web.components"
03           codeBehind="corelib.services.web.webapplications.WebPage">
04     <head>
05         <title>Calendar Tests</title>
06         <link rel="stylesheet" type="text/css"
07               href="corelib/services/web/javascript/jwt/Jwt.css" />
08     </head>
09     <body>
10         <h1 align="center">Calendar Tests</h1>
11 
12         <div id="forFrenchJwtCalendar" style="width: 200px; height: 170px;"> </div>
13         <div>Selected date = <input id="forSelectedDate" /></div>
14 
15     </body>
16 </web:Html>

JwtCalendar.wp : On rajoute un champ <input /> (ligne 13)

01 importPackage( "corelib/services/web/javascript/jwt/Calendar.js" );
02 
03 addEventHandler( window, "onload", function ( event ) {
04     var frenchJwtCalendar = new Calendar( new Date( 2008, 0, 1 ), new Locale( "fr" ) );
05     frenchJwtCalendar.injectInDocument( document.getElementById( "forFrenchJwtCalendar" ) );
06     addEventHandler( frenchJwtCalendar, "onDateSelected", function( event ) {
07         document.getElementById( "forSelectedDate" ).value = frenchJwtCalendar.getSelectedDate();
08     });
09 });

JwtCalendar.js : On rajoute le gestionnaire d'événements (ligne 06)

Un petit test du gestionnaire d'événements :

Selected date =

Utilisation sous forme de composant Ellipse

L'utilisation d'un calendrier sous forme d'un composant web Ellipse est encore plus simple qu'en JWT. Qui plus est le transport de la date saisie jusqu'au serveur HTTP est automatiquement prise en charge et le support de gestionnaires d'événements côté serveur est offert. Le composant de calendrier Ellipse est disponible dans le package corelib.services.web.components : il faut donc utiliser un espace de nom (namespace) XML adapté. Voici un exemple d'utilisation sous forme de composant Ellipse.

Je vous conseille de créer (via le plugin Ellipse et l'assistant de création de page Web) une nouvelle page Web appelée CalendarSamples.wp. Pensez à ajouter une classe de code coté serveur (classe corelib.services.web.samples.virtualcaddy.webpages.samples.CalendarSamples).

01 <?xml version="1.0" encoding="ISO-8859-1" ?>
02 <web:Html xmlns:web="corelib.services.web.components"
03           codeBehind="corelib.services.web.samples.virtualcaddy.webpages.samples.CalendarSamples">
04     <head>
05         <title>Calendar Tests</title>
06         <link rel="stylesheet" type="text/css"
07               href="corelib/services/web/javascript/jwt/Jwt.css" />
08     </head>
09     <body>
10         <h1 align="center">Calendar Tests</h1>
11 
12         <web:Form method="POST">
13             <web:Calendar id="calDemo2" cssStyle="width: 200px; height: 170px;" autoPost="true" />
14             Selected date is : <web:TextBox id="txtDate" /> <br/>
15         </web:Form>
16 
17     </body>
18 </web:Html>

CalendarSamples.wp : Utilisation sous forme d'un composant Ellipse (ligne 13)

Remarque importante : si vous utilisez un calendrier comme un champ de formulaire, alors il ne faudra pas oublier d'inclure un formulaire dans votre page web. Notez aussi que dans ce cas, aucune ligne de code Javascript n'est requise, contrairement à l'exemple exploitant la librairie JWT. En fait ces lignes seront générées automatiquement par le serveur Web lors du traitement de la page Web.

Si vous souhaitez exploiter les mécanismes de gestion d'événements côtés serveur, il vous suffit de rajouter la classe de code serveur suivante. Elle rajoute un écouteur de type FormInputListener afin de réagir à un changement de valeur. En tant que champ de formulaire, le calendrier propose aussi la propriété autoPost : elle permet de forcer automatiquement une soumission du formulaire au serveur dès lors qu'un changement de date intervient au sein du navigateur. Il se peut que cette propriété ne vous intéresse pas toujours.

01 package corelib.services.web.samples.virtualcaddy.webpages.samples;
02 
03 import corelib.services.web.components.Calendar;
04 import corelib.services.web.components.TextBox;
05 import corelib.services.web.components.events.FormInputEvent;
06 import corelib.services.web.components.events.FormInputListener;
07 import corelib.services.web.webapplications.WebPage;
08 import corelib.services.web.webapplications.events.WebPageEvent;
09 
10 public class CalendarSamples extends WebPage {
11 
12 	private Calendar calDemo2;
13 	private TextBox txtDate;
14 	
15 	
16 	@Override public void page_load( WebPageEvent webPageEvent ) {
17 		calDemo2.addFormInputListener( new FormInputListener() {
18 			@Override public void valueChanged( FormInputEvent event ) {
19 				calDemo2_valueChanged( event );
20 			}
21 		});
22 	}
23 	
24 	public void calDemo2_valueChanged( FormInputEvent event ) {
25 		txtDate.setValue( calDemo2.getSelectedDate().toString() );		
26 	}
27 	
28 }

CalendarSamples.java : Classe de code serveur rattachée à la page web

Pour ce qui est de l'internationalisation de votre composant Ellipse de calendrier, sachez que le choix de la langue est imposé par celle utilisée par votre session de navigation. Pour changer l'internationalisation de vos calendriers il faudra donc configurer votre session par l'intermédiaire d'une page web. L'exemple ci-dessous "ajout de deux bouttons" vous montre comment modifier la langue utilisée pour votre session de navigation.

01 <?xml version="1.0" encoding="ISO-8859-1" ?>
02 <web:Html xmlns:web="corelib.services.web.components"
03           codeBehind="corelib.services.web.samples.virtualcaddy.webpages.samples.CalendarSamples">
04     <head>
05         <title>Calendar Tests</title>
06         <link rel="stylesheet" type="text/css"
07               href="corelib/services/web/javascript/jwt/Jwt.css" />
08     </head>
09     <body>
10         <h1 align="center">Calendar Tests</h1>
11 
12         <web:Form method="POST">
13             <web:Calendar id="calDemo2" cssStyle="width: 200px; height: 170px;" autoPost="true" />
14             Selected date is : <web:TextBox id="txtDate" /> <br/>
15             <web:Button id="btnFrench" value="Français" />
16             <web:Button id="btnEnglish" value="English" />
17         </web:Form>
18 
19     </body>
20 </web:Html>

CalendarSamples.wp : ajout de deux boutons (lignes 15 et 16)

01 package corelib.services.web.samples.virtualcaddy.webpages.samples;
02 
03 import java.util.Locale;
04 
05 import corelib.services.web.components.Button;
06 import corelib.services.web.components.Calendar;
07 import corelib.services.web.components.TextBox;
08 import corelib.services.web.components.events.ActionEvent;
09 import corelib.services.web.components.events.ActionListener;
10 import corelib.services.web.components.events.FormInputEvent;
11 import corelib.services.web.components.events.FormInputListener;
12 import corelib.services.web.webapplications.WebPage;
13 import corelib.services.web.webapplications.events.WebPageEvent;
14 
15 public class CalendarSamples extends WebPage {
16 
17 	private Calendar calDemo2;
18 	private TextBox txtDate;
19 	private Button btnFrench;
20 	private Button btnEnglish;
21 	
22 	
23 	@Override public void page_load( WebPageEvent webPageEvent ) {
24 		calDemo2.addFormInputListener( new FormInputListener() {
25 			@Override public void valueChanged( FormInputEvent event ) {
26 				calDemo2_valueChanged( event );
27 			}
28 		});
29 		this.btnFrench.addActionListener( new ActionListener() {
30 			@Override public void actionPerformed( ActionEvent arg0 ) {
31 				CalendarSamples.this.setLocale( new Locale( "fr", "FR" ) );				
32 			}
33 		});
34 		this.btnEnglish.addActionListener( new ActionListener() {
35 			@Override public void actionPerformed( ActionEvent arg0 ) {
36 				CalendarSamples.this.setLocale( new Locale( "en", "US" ) );				
37 			}
38 		});
39 	}
40 	
41 	public void calDemo2_valueChanged( FormInputEvent event ) {
42 		txtDate.setValue( calDemo2.getSelectedDate().toString() );		
43 	}
44 	
45 }

CalendarSamples.java : Ajout des gestionnaires d'événements sur les bouttons

Adaptez le look de vos calendriers

La librairie JWT à été conçue de manière à garantir que les composants produits puissent être facilement configurables en terme de look and feel. Pour ce faire, la notion de classe de styles CSS (voir le tutorial CSS à ce sujet) a largement été utilisée. Il en va donc de même pour le calendrier JWT. Le tableau suivant vous donne la liste des classes de styles que vous pouvez utiliser.

Nom de la classe	Utilisation
.JwtCalendar	Cette classe permet d'accéder au tag racine (un div) du composant Calendrier. Vous pouvez donc configurer le détourage ou les caractéristiques d'arrière plan de votre calendrier.
.JwtCalendarHearder	Permet de configurer les caractéristiques visuelles du bandeau supérieur de votre calendrier.
.JwtCalendar #tdDisplayedMonth td	Il ne s'agit pas exactement d'une classe CSS, mais d'un sélecteur basé sur cette classe. Il permet d'accéder aux caractéristiques visuelles des jours présentés dans votre calendrier.
.JwtCalendar th	Idem et représente les cellules d'en-tête de votre calendrier.
.JwtCalendarSelectedDate	Permet de modifier l'affichage du jour sélectionné.
.JwtCalendarPreviousButton	Permet de modifier l'apparence des deux bouttons permettant respectivement de reculer d'une année ou d'un mois.
.JwtCalendarNextButton	Permet de modifier l'apparence des deux bouttons permettant respectivement d'avancer d'un mois ou d'une année.

Bien entendu, des valeurs par défaut sont déjà définies. Néanmoins vous pouvez définir votre propre feuille de styles CSS en la basant sur celle proposée par défaut par Ellipse et en ne modifiant que les caractéristiques souhaitées. Pour ce faire, rajoutez la déclaration suivante en tête de votre feuille de styles CSS : @import "corelib/services/web/javascript/jwt/Jwt.css";.

Enfin sachez que les informations, présentées dans le tableau ci-dessus, permettent de modifier l'intégralité des calendriers présents dans votre document. Il est néanmoins possible de modifier les caractéristiques CSS d'un seul calendrier parmis plusieurs, comme en atteste l'exemple ci-dessous. Il utilise quelques sélecteurs CSS qui s'appliquent à des tags du document mais qui se doivent d'être contenus dans un sur-tag ayant comme identifiant (l'attribut id) Demo.

01 <div id="Demo">
01 	<web:Calendar id="calDemo3" />
01 	<style>
01 		#Demo .JwtCalendar {
01 			width: 300px;
01 			height: 180px;
01 			background: #F0E0FF;
01 		}
01 		#Demo .JwtCalendar #tdDisplayedMonth td {
01 			border: 1px solid #F0E0FF;
01 		}
01 		#Demo .JwtCalendar th {
01 			background: #FF8C00;
01 		}
01 	</style>
01 </div>

Exemple de style CSS particulier à un calendrier

ATTENTION : Ellipse Framework vous est proposé en version beta (d'évaluation) afin de vous permettre d'évaluer ce framework. Infini Software se dégage de toutes responsabilités relatives à l'utilisation de ce framework. De plus, Infini Software ne pourra nullement être tenu responsable de l'utilisation des informations présentes dans ces tutoriaux.