(r8) XeoPrimerWebComponentsIntro < WebXEO

WebXEO Web>XeoPrimer>XeoPrimerWebComponentsIntro (revision 8) (raw view)~~EditAttach~~
-- Main.PedroRio - 07 Jan 2011
---+ XEO Web Components Introduction - XEO Library

In order to finalize the XEO Library project we'll need the web pages, created with XEO's Web Components layer. As explained in [[XeoPrimerConcepts#xwc][XEO Concept's introduction chapter]], XEO Viewers are the containers for XEO Components which will render the webpage. Each XEO Viewer is associated with a Java class (a Bean, just like those used in JSF based applications); in that bean are the structures required by the components and the viewer itself for a sucessfull render. Different types of Beans exist for the different types of Viewers in the XEO Framework, see figure XWC.1 for details.

<img width="960" alt="XEO Bean Hierarchy" src="http://wiki.itds.pt/pub/WebITDS/XeoPrimerWebComponentsLIbrary/XWC_BeanHierarchy.png" title="XEO Bean Hierarchy" height="720" />

__XWC.1 - XEO Bean Hierarchy (including custom Beans)__

As depicted in figure XWC.1, there are five different types of Bean suspplied by the framework (XEOBaseBean, XEOBaseList, XEOEditBean, XEOMainBean and XEOBaseLookupList). Each of them is designed for a specific purpose, and provides tools that aid in that purpose:
   * The XEOBaseList bean is suited to list instances which are selected through a XEOQL (BOQL) expression, usually in a list viewer
   * The XEOEditBean allows to edit a specific instance object and can be used to create edit viewer that deals with multiple instances
   * The XEOBaseLookupList is used to create a listing of instances to allow selection of one instance
   * The XEOMainBean is the bean for the Main viewer to allow opening tabs/windows with viewers
   * The XEOBaseBean is the (as the name suggests) the base bean for all other beans and provides the tools to create any custom viewer that does not fit any of the previous categories.

All of the previous beans, can (and should) be extended to provide the values to XEO Components when customizing a particular viewer.

XEO Components have properties and actions, both can binded to methods in the Java bean. XEO Component properties are binded to Java bean getter methods (which return a value) and XEO Component actions are binded to Java methods that are void (to basically execute an action, instead of returning a value). The following is a sample of a XEO Menu component declaration and the respective Java code in the bean (the menu component is used in toolbars to create buttons).

XML declaration*
<verbatim><xvw:menu text='#{viewBean.labelMenu}'
          serverAction="#{viewBean.execute}" />
            
</verbatim>

*Note, viewBean is the identifier of the Bean in the viewer, as depicted in the following line:
<verbatim><xvw:viewer beanClass="netgest.bo.xwc.xeo.beans.XEOEditBean" beanId="viewBean"></verbatim>

Java Source Code
<verbatim>public String getLabelMenu(){ return "My Menu"; };</verbatim> <pre><verbatim>public void execute() { /* execute some code here */ };</verbatim>
</pre>

As you can see, the Java EL ( [[http://developers.sun.com/docs/jscreator/help/2update1/jsp-jsfel/jsf_expression_language_intro.html][Expression language]]) is used to bind component properties and actions to Bean methods (just like in a JSF component). When a component property expects a value, you bind it with #{viewBean.<em>beanProperty</em>} and in the bean you're expected to have a "<em>getBeanProperty</em>()" method, while an action is binded to a void method in the Java bean.
Attachments
Topic attachments
I	Attachment	Action	Size	Date	Who	Comment
png	XWC_BeanHierarchy.png	manage	16.9 K	2011-01-10 - 15:39	PedroRio
Topic revision: r8 - 2011-01-11 - PedroRio
No permission to view TWiki.WebTopBar
No permission to view TWiki.WebBottomBar