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 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.

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*

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

*Note, viewBean is the identifier of the Bean in the viewer, as depicted in the following line (declaration of the viewer):

<xvw:viewer beanClass="netgest.bo.xwc.xeo.beans.XEOEditBean" beanId="viewBean">

Java Source Code

public String getLabelMenu(){ return "My Menu"; };

public void execute() { /* execute some code here */ };

As you can see, the Java EL ( 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.beanProperty} and in the bean you're expected to have a "getBeanProperty()" 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" -> "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).

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:

<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>

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.

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:

<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>

aaaa

aaa

aaa

a

a

<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>