The Ellipse Tutorial - How to use the component <web:DatePicker>?

WARNING: This tutorial is being written! Do not hesitate to report any errors or suggestions.

Quick access:
Using as a JWT component
Managing the internationalization
Managing events in Javascript
Using as an Ellipse component
Adjust the look of your DatePicker component

Internally to the Ellipse framework, the DatePicker component is provided in the form of JWT component (Javascript Widget Toolkit). It may therefore be used directly in Javascript. However, this Web component is also encapsulated in an Ellipse Web component: the component <web:DatePicker />. This second option allows you to use very simply the Web component as a form element, with transport of the seized date until the HTTP server and the event handler on the server side. Start, in a first time by apprehending the use of the component as a JWT component.

Using as a JWT component

We begin by creating a new Ellipse project to test our components of date selection. To do this, open Eclipse and put you in the desired Workspace. At the sight "Package Explorer", click with the right mouse button and select"New / Other... / Java Web Development / Java Web Project". The dialog box of construction of the project appears: you must enter as project name "TestDatePickers", set your Web server, click on "Next" and then check the presence of the Ellipse facet. Finally, click on "Finish". If you are asked a loading of perspective, accept this one. Your Web project is now been created.

You must now create a new Web page with the Ellipse support for the client script (in languageJavascript, of course). To do this, click with the right mouse button on your project (in "Package Explorer", of course). Select "New / Web Page": a dialog box appears. Fill in it the name "JwtDatePicker.wp" and take care to enable the support for the client-side code.

Two files have just been created: JwtDatePicker.wp and JwtDatePicker.js. Don't search for the changing tag <script> of the Javascript file in the web page: the Ellipse framework will ensure an implicit loading of this file. Add in the webpage (in the body) the following HTML code.

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>DatePicker 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">DatePicker Tests</h1>
11 
12         <div id="forFrenchJwtDatePicker" style="width: 200px"> </div>
13 
14     </body>
15 </web:Html>

JwtDatePicker.wp : We define a particular tag that will serve as a container for the DatePicker component

Then you need to edit the part of client code (Javascript code) to inject your component in the div. Of course, the injection can be achieved only after that the HTML tag has been put in place: hence the use of the events handler onload.

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

JwtDatePicker.js : Instanciation and injection, by JavaScript, of your component

You have to note that the manufacturer of the DatePicker component can accept two parameters. The first one is the date originally selected by your component (by default it is the current date that will be considered). The second one allows to fix the language to be used for the display.

We must now have to deploy our application in our J2EE Web server. To do this, click with the right mouse button on your project (always in the sight "Package Explorer"), then choose "Run As / Run on server": accept the deployment on the server. Finally, take your favourite browser and invoke the appropriate URL: certainly http://localhost:8080/TestDatePickers/JwtDatePicker.wp: a DatePicker component like this would appear.

Managing the internationalization

Like Java, the JWT library also offers a class Locale for managing the localization (languages and countries used by your components). The JWT component DatePicker supports for the moment two languages for its display: the french and the english (used by default) and doesn't take care the geographical location information. In passing this request new Locale("fr"), your component should appear in french. Using the value "en" it should appear in english.

Managing events in Javascript

As presented in some other documents of this tutorial, the Ellipse framework, and more specifically the JWT library, provides extensions for management of events in Javascript. The JWT component DatePicker benefits of these extensions and can react to a changing of date selection of the component. To do so, add a manager at the event onDateSelected of your component. The following examples of codes show how to modify a text input area in case of date changing.

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>DatePicker 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">DatePicker Tests</h1>
11 
12         <div id="forFrenchJwtDatePicker" style="width: 200px"> </div>
13         <div>Selected date = <input id="forSelectedDate" /></div>
14 
15     </body>
16 </web:Html>

JwtDatePicker.wp : We add a field <input /> (line 13)

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

JwtDatePicker.js : We add the events manager (line 06)

A little test of the events manager:

Selected date =

Using as an Ellipse component

The use of the component DatePicker as an Ellipse web component is more simply than with JWT. In addition, transporting the seized date until the HTTP server is automatically taken in care and the support events managers on the server-side events is offered to you. The component <web:DatePicker /> is proposed through the package corelib.services.web.components: you need to use the XML namespace adapted. Here is an example of use as an Ellipse component.

I advise you to create (through the Ellipse plugin and the wizard for creting a Web page) a new Web page called DatePickerSamples.wp. Remember to add a class of code on the server-side (class classe corelib.services.web.samples.virtualcaddy.webpages.samples.DatePickerSamples).

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.DatePickerSamples">
04     <head>
05         <title>DatePicker 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">DatePicker Tests</h1>
11 
12         <web:Form method="POST">
13             <web:DatePicker id="calDemo2" cssStyle="width: 200px;" autoPost="true" />
14             Selected date is : <web:TextBox id="txtDate" /> <br/>
15         </web:Form>
16 
17     </body>
18 </web:Html>

DatePickerSamples.wp : Using as an Ellipse component (line 13)

Important note: If you use this component as a form field, then you must have to include a form on your web page. Also note that in this case, no line of Javascript code is required, unlike the example that exploit the JWT library. In fact these lines will be automatically generated by the Web server during the processing of the web page.

If you want to exploit the mechanisms of events management on the server-side, you just have to add the following class of server code. It adds a listener of type FormInputListener to react to a change of value. As a form field, the component DatePicker also proposes the property autoPost: it allows you to automatically force a submission of the form to the server accordingly a change of date occurs within the browser. It is possible that this property doesn't interest you all the time.

01 package corelib.services.web.samples.virtualcaddy.webpages.samples;
02 
03 import corelib.services.web.components.DatePicker;
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 DatePickerSamples extends WebPage {
11 
12 	private DatePicker dpDemo2;
13 	private TextBox txtDate;
14 	
15 	
16 	@Override public void page_load( WebPageEvent webPageEvent ) {
17 		dpDemo2.addFormInputListener( new FormInputListener() {
18 			@Override public void valueChanged( FormInputEvent event ) {
19 				dpDemo2_valueChanged( event );
20 			}
21 		});
22 	}
23 	
24 	public void dpDemo2_valueChanged( FormInputEvent event ) {
25 		txtDate.setValue( dpDemo2.getSelectedDate().toString() );		
26 	}
27 	
28 }

DatePickerSamples.java : Class of server code linked with the web page

For the internationalization of your component <web:DatePicker />, you have to note that it works the same that for the component <web:Calendar />. I refer you to the datasheet of this component for more informations.

Adjust the look of your DatePicker component

The component <web:DatePicker /> uses a component <web:Calendar /> for its display. The main needs in terms of look and feel are therefore relating with the calendar component. For more informations, i refer you once again to the technical data sheet of this component.

Ellipse Tutorial

How to use the component ?

Using as a JWT component

Managing the internationalization

Managing events in Javascript

Using as an Ellipse component

Adjust the look of your DatePicker component