(r12) XeoPrimerWebComponentsIntro < WebXEO

WebXEO Web>XeoPrimer>XeoPrimerWebComponentsIntro (revision 12) (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.<em><strong> Each XEO Viewer is associated with a Java class</strong></em> (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 a Java bean. Component properties are binded to Java getter methods (which return a value) and Component actions are binded to Java methods that are void (to 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, for example).

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 (declaration of the viewer):
<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.
---+++++ Opening a viewer from a Main Viewer

Main viewers are responsible for shaping a XEO Application. They define the structure of viewers that at first can be opened in the application's workspace, those viewers can be list, edit or custom viewers, usually they'll be list viewers, but they can be anything as the XEOMainBean has methods to open different types of viewers. We'll start with an example, by creating a tiny custom viewer that we'll open in a Main viewer (which we'll reuse later for the Library project).

Fire up XEO Studio and select the XEOLibrary Project, go the "File" menu, and select "New" -&gt; "XEO Web Viewer", choose "Blank" from the list, press next and then type "MyViewer" as the name of the viewer (as depicted in figure XWC.2).

<img width="800" alt="CreateViewer.png" src="http://wiki.itds.pt/pub/WebITDS/XeoPrimerWebComponentsLIbrary/CreateViewer.png" title="CreateViewer.png" height="488" />

__Figure XWC.2 - Creating a blank viewer.__

XEO Studio uses a template to create the viewer, and in the blank case the code is the following (the viewer will be located in the:
<verbatim><xvw:root 
    xmlns:xvw="http://www.netgest.net/xeo/xvw"
    xmlns:xeo="http://www.netgest.net/xeo/xeo"
>
    <xvw:viewer beanClass="" beanId="viewBean">
        <xvw:form>
        </xvw:form>
    </xvw:viewer>
    
</xvw:root></verbatim>

Every XEO Viewer will have a root element (xvw:root) where the namespaces to be used in the viewer are declared. By default the xeo and xvw prefixes are declared so that all components provided by the XEO framework can be used. If you create custom components, you'll probably create them in a different namespace and when you need to use them in a viewer, they'll be declared in the root element. The xeo prefix is used for components which are tied (in some way) with XEO Object Model instances, while the xvw prefix is used for components which do not required any Object Model instance to work properly. In this small example we'll only required xvw-prefixed components.

Each XEO Viewer declaration also requires two things. A viewer component and a form component. The viewer component (xvw:viewer) indicates the fully qualified name of the Java bean class (throug the _beanClass_ attribute), as well as its identifier (although, at the moment, the XEO framework only supports one bean identifier and it's _viewBean_, through the beanId attribute). The form component does not require any attributes, but it's required to allow component values to be posted to the bean.

In order to continue, we'll require a Java bean. Go to the "File" menu, select "New" and choose "Class". Fill the package with "org.example.viewers.beans" and class name with _MyBean_, make it a subclass of _netgest.bo.xwc.xeo.beans.XEOBaseBean_, like depicted in figure XWC.3.

<img width="525" alt="CustomBean.png" src="http://wiki.itds.pt/pub/WebITDS/XeoPrimerWebComponentsLIbrary/CustomBean.png" title="CustomBean.png" height="626" />

__Figure XWC.3 - Creating a custom Java Bean for a viewer__

Return to the MyViewer.xvw file and fill the beanClass attribute with "org.example.viewers.beans.MyBean" to be like the following:
<verbatim><xvw:root 
    xmlns:xvw="http://www.netgest.net/xeo/xvw"
    xmlns:xeo="http://www.netgest.net/xeo/xeo"
>
    <xvw:viewer beanClass="org.example.viewers.beans.MyBean" beanId="viewBean">
        <xvw:form></xvw:form>        
    </xvw:viewer>
    
</xvw:root></verbatim>

Ok, so now you're ready to add some components (which we'll bind to the bean to get the values). We'll add two tab components. The first tab will have a text field (with a label) and a date field (also with a label) and the second tab will have nothing (just its label). The code to achieve is the following:
<verbatim><xvw:root xmlns:xvw="http://www.netgest.net/xeo/xvw" xmlns:xeo="http://www.netgest.net/xeo/xeo">
    <xvw:viewer beanClass="org.example.viewer.beans.MyBean"
        beanId="viewBean">
        <xvw:form>
            <xvw:tabs>
                <xvw:tab label='Tab1'>
                    <xvw:rows>
                        <xvw:row>
                            <xvw:cell>
                                <xvw:attribute label='Text' 
                                inputType="attributeText"></xvw:attribute>
                            </xvw:cell>
                            <xvw:cell>
                                <xvw:attribute label='Date' 
                                inputType="attributeDate"></xvw:attribute>
                            </xvw:cell>
                        </xvw:row>
                    </xvw:rows>
                </xvw:tab>
                <xvw:tab label='Tab2' />
            </xvw:tabs>
        </xvw:form>
    </xvw:viewer>
</xvw:root></verbatim>

As explained before, the form encapsulates all components. The first component is a "Tabs" component which is a container for "Tab" components (in this example we have two, each with a label ("Tab1" and "Tab2"). Inside our first tab, we'll make use of the Rows/Row/Cell component set (this allows to use a tabular layout which in case of form fields gives it a nicer look). Inside each of the Cell components we have "attribute" components which translates to a generic form field which can be declared to be a text, number, date, datetime, longtext, file or html.

You can use XEO Studio's built-in Viewer Preview, just like depicted in figure XWC.4, bellow, to preview the layout of a viewer while designing the viewer (you'll have to [[XeoPrimerStudioIntroduction#launch][launch the project before that]], so that can preview the viewers), just open the MyViewer viewer and press the "Preview" tab.

<img width="800" alt="MyViewer.png" src="http://wiki.itds.pt/pub/WebITDS/XeoPrimerWebComponentsLIbrary/MyViewer.png" title="MyViewer.png" height="658" />

__Figure XWC.4 - XEOStudio's Viewer Preview__

To make it more interesting you'll add outputHTML component which will allow you to print html content inside the viewer and that content will be binded to a bean property to make dinamic. Add the following to the viewer (bellow the _rows_ components:
<verbatim><xvw:outputHtml valueExpression = #{viewBean.html}></verbatim>

Next, add the following code to your bean.
<verbatim>private String html;
    
    public String getHtml(){
        
        String result = "<b>";
        result += Math.random();    
        result += "</b>";
        html = result;
        return html;
    }</verbatim>

This previous code will render a random number in bold each time the viewer is opened (or each time you change tabs), as you can see in the figure XWC.5 (highlighted in red).

<img width="800" alt="RandomValue.png" src="http://wiki.itds.pt/pub/WebITDS/XeoPrimerWebComponentsLIbrary/RandomValue.png" title="RandomValue.png" height="264" />

__Figure XWC.5 - Random value printed by the outputHtml component__

<strong><em>______</em></strong>

<div style="position: absolute; left: -10000px; top: 2946px; width: 1px; height: 1px; overflow: hidden;" id="_mcePaste"> <verbatim><xvw:root 
    xmlns:xvw="http://www.netgest.net/xeo/xvw"
    xmlns:xeo="http://www.netgest.net/xeo/xeo"
>
    <xvw:viewer beanClass="" beanId="viewBean">
        <xvw:form>
        </xvw:form>
    </xvw:viewer>
    
</xvw:root></verbatim> </div>
Attachments
Topic attachments
I	Attachment	Action	Size	Date	Who
png	CreateViewer.png	manage	38.7 K	2011-01-11 - 15:31	PedroRio
png	CustomBean.png	manage	19.9 K	2011-01-11 - 16:19	PedroRio
png	MyViewer.png	manage	8.7 K	2011-01-12 - 10:05	PedroRio
png	RandomValue.png	manage	4.4 K	2011-01-12 - 18:03	PedroRio
png	XWC_BeanHierarchy.png	manage	16.9 K	2011-01-10 - 15:39	PedroRio
Topic revision: r12 - 2011-01-12 - PedroRio
No permission to view TWiki.WebTopBar
No permission to view TWiki.WebBottomBar