|
Ellipse TutorialConcept of Ellipse web component |
|||
|
|
|||
|
|
Ellipse TutorialConcept of Ellipse web component |
|||
|
|
|||
WARNING:This tutorial is being written! Do not hesitate to report any errors or suggestions..
Quick access:
Encode an Ellipse class component
Encode the HTML rendering of your Ellipse component
Integration of a component in an Ellipse page
Add a priority to your Ellipse component
An Ellipse component must proceed at a minimum from the class corelib.services.web.components.WebComponent. But this class does not provide any supports in terms of HTML rendering. Nevertheless the use of this type of database can be useful in some cases.
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 }If you want your component has the support of HTML rendering, then you have to use this type of database: corelib.services.web.components.VisualComponent. This class derives in fact of WebComponent.
Like an Ellipse page, a component has a personal life cycle. The life cycle of your components translates by invocation of methods on your components at different times. To work properly, your components need to redefine certain methods. These methods are initially defined on WebComponent and on 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.webapplications.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'>Ellipse</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 }The above example offers a class which can generate a footer: this footer is also used in the Virtual Caddy demonstration application. It derives from the VisualComponent class and redefined three methods.
public void component_renderBegin( WebPageEvent webPageEvent ) : this method produces the HTML stream resulting from the use of the opening tag for the Ellipse component considered.
public void component_renderChildren( WebPageEvent webPageEvent ) : this method is used to generate the equivalent HTML to the contents seized between the opening tag and the closing tag of the Ellipse component considered.
public void component_renderEnd( WebPageEvent webPageEvent ) : this one can generate the final part of the HTML rendering of the Web component.
These three methods accept a parameter of type WebPageEvent giving us access to additional information. In addition, through the VisualComponent class (that we inherited) you have access to other information including the web page in which the component is used.
Once your component is finished, you can test directly it in an Ellipse web page. The following page shows you how it is easy to test your component: please note that we do not use any Ellipse page class. Indeed, we simply want to test the HTML rendering.
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.webapplications.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>
The injection of the component in the Ellipse page needs two steps. First, in line 03, we define an alias demo that points to the package in which we have placed our Java class of our component. Then, secondly, we have placed a component CaddyFooter on the page, in line 12. You just have to deploy it on Tomcat and then to test it: you should get the following output.
If you try to make Ellipse components more sophisticated, you can also combine their properties. In terms of components, a property is defined in the traditional manner respecting the JavaBeans standard (use of coding conventions for the getters and the setters). Here is an example of a component supporting a property.
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.webapplications.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 }As you can see in line 10, the above example, defines a private attribute currentLanguage. It also defines the two access methods (getCurrentLanguage and setCurrentLanguage). It is through these two methods that the webpage will configure the status of your component. Then the method of HTML rendering (here, I decided to put everything inside – there is no component_renderChildren nor component_renderEnd) uses, of course, the current state by using the stored value for the language.
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.webapplications.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>
Here's how to use such a device. Note that on line 13, currentLanguage Reference the property and not the attribute. This line of code requires the presence of the method setCurrentLanguage: you just have to realize traces in this method to validate calls.
|
|
|||||||