|
Ellipse TutorialComment utiliser un composant web de calendrier ? |
|||
|
|
|||
|
|
Ellipse TutorialComment 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
<web:Calendar />. 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.
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>
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 });
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.
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.
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>
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 });Un petit test du gestionnaire d'événements :
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>
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 }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>
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 }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>
|
|
|||||||