XEO Web Components is the visual layer of a XEO application. XEO Web Components provide a runtime environment that allows you to create the web interface of a XEO Application and interact with XEO Model instances using XEO Viewers. A XEO Viewer is container of XEO Web Components which together create the layout (and behavior) of a web page and there are several pre-defined viewers such as (depicted in the figures):
Main Viewer: Create the application environment
List Viewer: Lists instances of a given XEO Model
Edit Viewer: Edits a single instance a XEO Model
Lookup Viewer: Search and select instances of a XEO Model (to relate with other instances)
You can also create your own custom viewers using the Components provided by XEO.
XEO Viewers are inspired in JSF technology (with some modifications). You declare them using a XML syntax and lay out the components, but you don't need to declare the beans in faces-config.xml (nor declare navigation rules). Each viewer has a supporting bean, declared in a property of the root component of a XEO Viewer, that bean will be instantiated whenever the viewer is rendered and will be used to support the components used in the viewer.
Example declaration of a viewer:
<?xml version="1.0" encoding="UTF-8"?> <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.LibAuthorEditBean" beanId="viewBean">
<xeo:formEdit>
<xvw:section label='Geral'>
<xvw:rows>
<xvw:row><xvw:cell><xvw:attribute objectAttribute="name"/></xvw:cell></xvw:row>
</xvw:rows>
</xvw:section>
<xvw:tabs>
<xvw:tab label='Published Books'>
<xeo:list onRowDoubleClick="" renderToolBar="false" targetList="#{viewBean.dataBooks}">
<xvw:columns>
<xvw:columnAttribute dataField='title'> </xvw:columnAttribute>
</xvw:columns>
</xeo:list>
</xvw:tab>
</xvw:tabs>
</xeo:formEdit>
</xvw:viewer>
</xvw:root>
XEO Provides a set of rich components to help you deal with every situation regarding XEO Models. You have components to create tree-like structures, gridPanels (with sorting, filtering and grouping capabilities), toolbars, sections, tabs, form fields (textual, numeric, date, etc...), bridge and lookups (that allow you to relate instances with other instances), message boxes, progress bars, etc, depicted in figure XEO 5
Fig. XEO 5
If the provided components are not enough, you can also create your own custom components, allowing you to have full control of the behavior and appearance over the result. Also, components are extensible via plug-ins. You can create a plug-in to change the properties/behavior of existing components.
Several XEO Web Components are integrated with XEO models and adapt themselves to the Model at runtime. For instance, the xvw:attribute component (a form field) will read from the Model the definition of the attribute to which it's linked and render accordingly (i.e. if the XEO Model attribute is of type text the component will render as a text field, if it's a date it will render a field with a small calendar to choose a date). Also, the behavior of components is integrated with XEO Models, if a given Model attribute is required, the component will display its label in red.
Components have their values supplied by the backing bean of the viewer where you can implement logic. Also, components may trigger actions (a button for instance) whose logic may be implemented in the bean.