|
Ellipse TutorialHow to use the calendar Web component? |
|||
|
|
|||
|
|
Ellipse TutorialHow to use the calendar Web component? |
|||
|
|
|||
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
Management of events in Javascript
Using as an Ellipse component
Adjust the look of your calendars
Inside the Ellipse framework, a calendar is provided as a JWT component (Javascript Widget Toolkit). It can therefore be used
directly in Javascript. Nevertheless, the concept of Web calendar is also encapsulated in an Ellipse Web component: the component
<web:Calendar />. The second option allows you to use very simply a Web calendar as a form element,
with transport of the included date until the HTTP server and the events' manager on the server-side. We will start, in a first step, by apprehending
the use of a calendar as a JWT component.
We begin by creating a new Ellipse project to test our Web calendars. To do this, open Eclipse and place yourself in the workspace you want. 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 for the project appears: enter as project name "TestCalendars", configure 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 created.
You must now create a new Web page with the Ellipse support for the client script (in Javascript language, 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. Register in it the name "JwtCalendar.wp" and take care to activate the support for the client-side code ( "Supports Client Side").
Two files have just been created: JwtCalendar.wp and JwtCalendar.js. Do not search for the changing tag <script>
of the Javascript file, in the Web page: the Ellipse framework will guarantee an implicit loading of this file. Add in the web page
(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>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"> </div> 13 14 </body> 15 </web:Html>
Then, you need to edit the part of client code (Javascript code) for injecting your calendar in the div. Of course, the injection
can be achieved only after the HTML tag is in place: hence the use of the event handler 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 });
Just note that the manufacturer of calendars can accept two parameters. The first one is the date originally selected
by your calendar (the default value is the current date that will be considered). The second one allows you to fix the language to be used for the display of the calendar.
Moreover, by default, it is the current month which is presented. If you want to change that aspect, you can use the method
setDisplayedMonth( date ): it uses a date which will set the month to display.
We must now deploy your Web application in your J2EE server. To do this, click with the right mouse button on your project (always in sight "Package Explorer"), then choose "Run As / Run on server": accept the deployment on the server. Finally, take the browser you want and invoke the appropriate URL: certainly http://localhost:8080/TestCalendars/JwtCalendar.wp: a calendar like this one should appear.
Similarly as Java, the JWT library also offers a class Locale for managing the localization
(languages and countries used by your components). The Calendar JWT component supports for the moment two languages for its display: french and
english (used by default) and does not take into account the geographical location information. In passing this request
new Locale("fr"), your calendar should be displayed in french. Using the value "en" it should appears in english.
As presented in some other documents of this tutorial, the Ellipse framework and more specifically the JWT library, provides extensions for
the management of events in Javascript. The JWT calendars benefit from these extensions and can react to a changing selection of a calendar date.
To do this, add a manager to the event onDateSelected of your calendar. The following examples of codes show
how to modify a text input area in case of change of 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"> </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 });A little test of events' manager:
Using a calendar in the form of an Ellipse web component is more easy than in JWT. In addition the transport of the seized date
until theHTTP server is automatically taken care and the support of events' manager on the server-side is offered. The Ellipse calendar component
is available in the package corelib.services.web.components: you need to use an XML namespace adapted.
Here is an example of use as a component Ellipse.
I advise you to create (through the !ellipse plugin and the wizard of Web page creation) a new Web page called CalendarSamples.wp.
Remember to add a class of code on the server-side (class 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;" autoPost="true" /> 14 Selected date is : <web:TextBox id="txtDate" /> <br/> 15 </web:Form> 16 17 </body> 18 </web:Html>
Important note: if you use a calendar as a form field, then don't forget 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 generated automatically by the Web server while the treatment of the web page.
If you want to exploit the mechanisms of events management on the server side, you just have to add the next class of server code.
It adds a listener of type FormInputListener to react to a change of value. As a form field, the calendar
also proposes the property autoPost: it allows you to automatically force a submission, of the form to the server, when a
changing of date occurs within the browser. It is possible that this property doesn't interest you everytime.
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 }As for the internationalization of your Ellipse component of calendar, be aware that the choice of language is imposed by this one used by your browsing session. To change the internationalization of your calendars, you have to configure your session through a web page. The example below "Adding two buttons" shows you how to change the language used for your browsing session.
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;" 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 }The JWT library has been designed to ensure that the components producted can be easily configured in terms of look and feel. To do so, the notion of class of CSS styles (see the CSS tutorial in this regard) has largely been used. It is therefore the same for the JWT calendar. The following table gives you a list of classes of styles that you can use.
| Name of the class | Using |
|---|---|
| .JwtCalendar | This class gives access to the root tag (a div) of the Calendar component. You can configure the clipping or the background characteristics of your calendar. |
| .JwtCalendarHearder | Allows you to configure the visual characteristics of the top banner of your calendar. |
| .JwtCalendar #tdDisplayedMonth td | It is not exactly a CSS class, but a switch based on this class. It provides access to visual characteristics of the days presented in your calendar. |
| .JwtCalendar th | Idem and it represents the header cells of your Calendar. |
| .JwtCalendarSelectedDate | Allows you to change the display of the selected day. |
| .JwtCalendarPreviousButton | Allows you to change the appearance of the two buttons allowing you to back a year or a month. |
| .JwtCalendarNextButton | Allows you to change the appearance of the two buttons allowing you to advance a month or a year. |
Of course, default values are already defined. But you can define your own CSS style sheet basing it on that one
proposed by default by Ellipse and by only changing the desired characteristics. To do this, add the following statement in the head
of your CSS style sheet: @import "corelib/services/web/javascript/jwt/Jwt.css";.
Finally you have to know that the informations, presented in the table above, allow you to change the whole of the calendars presented in your
document. It is nevertheless possible to modify the CSS characteristics of one calendar among several calendars, as shown by the example below.
It uses some CSS selectors that apply themselves to tags of the document but which must be contained in a tag-on
which identifier (the id attribute) is 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>
|
|
|||||||