(r68) XeoPrimerXeoXwc < WebXEO

WebXEO Web>XeoPrimerXeoXwc (revision 68) (raw view)~~EditAttach~~
-- Main.TWikiAdminUser - 11 Sep 2009
---+ XEO Web Components Reference

This section provides information about XEO Web Components (XWC the visual layer of the XEO Framework. You'll find information about the components provided by XEO, you'll also find tutorials and reference material about how to create your own component or how to create a plugin to an existing component.You can find the following content in this section:
   * [[#webcomponents][XEO Web Components List]] (The list of all components provided by XEO and their documentation)
   * [[#javaapisamples][Java samples]] (Snippets of Java Code that perform a common action)
   * [[#customcomponent][Custom Web Component Creation]] (Create a new component from scratch)
   * [[#componentPlugin][Web Component Plugins]] (Change the behavior of an existing component)
   * [[#i18n][Internationalization]] (Learn how to localize your viewers/components)
   * [[#viewerEvents][Viewer Events]] (Learn to interact with a viewer in its life-cycle)
   * [[#valueChangeListener][Value Change Listeners]] (Respond to changes in a value of a component)
   * [[#libs][Libraries ]](Reference of Java Libraries/Frameworks used by XWC)
---++ XEO Web Components List <a name="webcomponents"></a>

The XEO Framework includes a set of pre-defined components to accelerate the programer's job. There are two types of components, the ones that can be used freely and the ones that are binded to XEO objects.

The components binded to XEO Models are designated *XEO Components* and the not-binded are *XVW Components* (there are XVW components which can be binded to XEO Models, but it's not a requirement).
---++++ XEO Components:

As explained before, XEO Components are typically binded to a XEO Object and there are several categories of components
---+++++ XEO Components - Forms
   * [[WebXEO.XvwForm][Form]] - Form with dependences control
   * [[WebXEO.FormEdit][FormEdit ]] - Form to edit a XEO Object
   * [[WebXEO.FormList][FormList ]] - Form to list a set of XEO Objects
   * [[WebXEO.FormLookupList][FormLookupList]] - Form to allow the selection of a XEO Object from a list of XEO Objects
---+++++ XEO Components - List of Objects

   * [[WebXEO.XeoList][List]] - A list of XEO objects
   * [[WebXEO.XeoBridge][Bridge]] - The list of objects in a bridge of a given XEO Object
   * [[WebXEO.LookupList][LookupList]] - A list of objects to make a selection from (a Lookup)
---+++++ XEO Components - Toolbars

   * [[WebXEO.EditToolBar][EditToolBar]] - A toolbar for use with FormEdit components
   * [[WebXEO.ListToolBar][ListToolBar]] - A toolbar for use with FormList components
   * [[WebXEO.LookupListToolBar][LookupListToolBar]] - A toolbar for use with FormLookupList components
   * [[WebXEO.BridgeToolBar][BridgeToolBar ]] - a toolbar for use with Bridge components
   * [[WebXEO.ModelMethod][ModelMethod ]] - A menu that invokes a method defined in a XEOModel
   * <span style="color: #0000ff;"><span style="text-decoration: underline;">[[WebXEO.XEOMenuCounter][MenuCounter]]</span></span> - A menu that has a counter (unread messages in outlook style)
---+++++ XEO Components - Other
   * [[WebXEO.XeoColumnAttribute][ColumnAttribute]] - extends [[WebXEO.ColumnAttribute][ColumnAttribute]]
   * [[WebXEO.SplitedLookup][SplitedLookup]] - A lookup that allows searching
---++++ XVW Components:
   * [[WebXEO.AjaxText][AjaxText]] - A component to constantly update text via ajax
   * <span style="text-decoration: underline;">[[WebXEO.XvwActionButton][Action Button]]</span> - A simple button to invoke an action
   * <span style="text-decoration: underline;"><span style="text-decoration: underline;">[[WebXEO.XvwButtonHTML][Button HTML]]</span></span> - A simple button to invoke an action
   * <span style="text-decoration: underline;"><span style="text-decoration: underline;">[[WebXEO.XvwColumn][Column]]</span></span>
   * <span style="text-decoration: underline;"><span style="text-decoration: underline;">[[WebXEO.ColumnAttribute][Column Attribute]]</span></span> - To customize columns in list components
   * <span style="text-decoration: underline;"><span style="text-decoration: underline;">[[WebXEO.XvwColumns][Columns]]</span></span>
   * [[WebXEO.XvwCharts][Charts]] 
      * [[WebXEO.XvwCharts#PieChart][PieChart ]]- To create Pie Charts
      * [[WebXEO.XvwCharts#BarGraph][BarChart ]]- To create horizontal/vertical bar charts
      * [[WebXEO.XvwCharts#LineChart][LineChart ]]- To create line charts
   * [[WebXEO.DialogProgress][Dialog Progress]] - To display feedback while a long-running operation is in course
   * <span style="text-decoration: underline;">[[WebXEO.XvwErrorMessages][Error Messages]]</span> - To display error messages in a viewer
   * <span style="text-decoration: underline;">[[WebXEO.XvwGlobalSearch][GlobalSearch]]</span> - A toolbar component, typically to be placed in a main viewer
   * <span style="color: #0000ff;"><span style="text-decoration: underline;"> GridExplorer </span></span> - A listing of elements with preview capabilities and saving views (also sharing views)
   * [[WebXEO.GridPanel][GridPanel]] - A table with a listing of elements (columns can be ordered, grouped, etc..) 
      * [[WebXEO.GridNavBar][GridNavBar]] - A navigational bar for the GridPanel
   * <span style="text-decoration: underline;">[[WebXEO.XVWHTMLFileBrowser][HTML File Browse]]</span> - A file selection component
   * [[WebXEO.XvwIncludeCss][IncludeCss]]
   * [[WebXEO.XvwIncludeScript][IncludeScript]]
   * [[WebXEO.XvwMainLayout][MainLayout]]
   * [[WebXEO.XvwMenu][Menu]] - Create Menus in Toolbar and Tree components
   * [[WebXEO.XWCProgressAndDialogs][Message Box]] - Message boxes of several types
   * <span style="text-decoration: underline;">[[WebXEO.XvwOutputHtml][Output HTML]]</span> - To output HTML code directly to the browser
   * <span style="text-decoration: underline;">[[WebXEO.XvwPanel][Panel]]</span> - A panel to create sections in the viewer
   * <span style="text-decoration: underline;"><span style="text-decoration: underline;">[[WebXEO.XvwProgressBar][Progress Bar]]</span></span> - A progress bar to show the progress of a given operation
   * [[WebXEO.XvwRegionLayout][RegionLayout]] 
      * [[WebXEO.XvwRegionLayout][BottomRegion ]]
      * [[WebXEO.XvwRegionLayout][LeftRegion ]]
      * [[WebXEO.XvwRegionLayout][RightRegion ]]
      * [[WebXEO.XvwRegionLayout][TabPanel ]]
   * <span style="text-decoration: underline;"><span style="text-decoration: underline;">[[WebXEO.XvwRequestAction][RequestAction]]</span></span>
   * 
      * <span style="text-decoration: underline;"><span style="text-decoration: underline;">[[WebXEO.XvwRequestAction][RequestActionValue]]</span></span>
   * [[WebXEO.XvwRows][ Rows ]]- Creates a table to place elements 
      * [[WebXEO.XvwRows][ Row ]]- Creates a row inside the table 
         * [[WebXEO.XvwRows][ Cell ]]- Creates a column inside a row
   * <span style="text-decoration: underline;"><span style="text-decoration: underline;">[[WebXEO.XvwSection][Section]]</span></span> - The equivalent of an HTML fieldset
   * <span style="color: #0000ff;"><span style="text-decoration: underline;">[[WebXEO.XvwTabs][Tabs]]</span></span> - Container for tab components 
      * [[WebXEO.XvwTabs][Tab]] - To create a tab in the application where content can be rendered
   * <span style="color: #0000ff;"><span style="text-decoration: underline;"><span style="text-decoration: underline;">[[WebXEO.XvwTitle][Title]]</span></span></span> - Component to render a title to the viewer
   * <span style="color: #0000ff;"><span style="text-decoration: underline;"><span style="text-decoration: underline;">[[WebXEO.XvwToolBar][Tool Bar]]</span></span></span> - Generic toolbar to place buttons that execute actions
   * <span style="color: #0000ff;"><span style="text-decoration: underline;">[[WebXEO.XvwTreePanel][Tree Panel]]</span></span> - A tree structure with menus
   * <span style="color: #0000ff;"><span style="text-decoration: underline;">[[WebXEO.XvwWindow][Window]]</span></span>
---+++++ XVW Components - Form Attributes (Input):

In form components, input components can be used to the gather input from a user

[[WebXEO.XvwAttributeBase][AttributeBase]]- Base component from which all component inherit their properties

   * [[WebXEO.XvwAttribute][ Attribute]] - Renders a label and an input field of chosen type (can be binded to a XEO Object attribute)
   * [[WebXEO.AttributeText][AttributeText ]]- For small text values
   * [[WebXEO.AttributeNumber][AttributeNumber ]]- For numeric values
   * [[WebXEO.AttributeBoolean][AttributeBoolean ]]- For boolean values (yes/no, true/false) values
   * [[WebXEO.AttributeDate][AttributeDate ]]- For Date values (does not include time)
   * [[WebXEO.AttributeDateTime][AttributeDateTime ]]- For DateTime values (includes time information)
   * [[WebXEO.AttributeTime][AttributeTime ]]- For time values (does not include date information)
   * [[WebXEO.AttributeFile][AttributeFile ]]- For Binary Files
   * [[WebXEO.AttributeImage][AttributeImage ]]- Renders the content of a binary file as an image
   * [[WebXEO.AttributeWordMacro][AttributeWordMacro ]]- For Binary files with special compatibility to work with MS Word Templates
   * [[WebXEO.AttributeHtmlEditor][AttributeHtmlEditor ]]- To Edit HTML
   * [[WebXEO.AttributeLov][AttributeLov ]]- For a list of values
   * [[WebXEO.AttributeNumberLookup][AttributeNumberLookup ]]- To select a XEOObject (keeping the value of its BOUI)
   * [[WebXEO.AttributePassword][AttributePassword ]]- For password values
   * [[WebXEO.AttributeTextarea][AttributeTextarea ]]- For long textual values
---+++++ XVW Components - Form Attributes (Output):

   * [[WebXEO.AttributeOutput][AttributeOutput ]]- To output any content

---++ [[WebXEO.XeoPrimerWebComponentsAPI][Java API Samples]] <a name="javaapisamples"></a>

A list of Java code snippets regarding common operations with the Java API of Web Components ( [[WebXEO.XeoPrimerWebComponentsAPI][read more]])

---++ [[WebXEO.XeoPrimerCustomWebComponent][XEO Web Components - Custom Component Creation ]]<a name="customcomponent"></a>

How to create a custom component a use it in a viewer.( [[WebXEO.XeoPrimerCustomWebComponent][read more]])
---++ Internationalization ( [[WebXEO.XeoPrimerInternationalizationXWC][I18N]]) <a name="i18n"></a>

It's possible to have messages for the various components/viewers localized in multiple languages, [[WebXEO.XeoPrimerInternationalizationXWC][the procedure on how to achieve that is described in the I18N page]].

---++ [[WebXEO.XeoPrimerWebComponentChangeListener][Value Change Listeners]]<a name="valueChangeListener"></a>

XEO Web Components that extend the XUIOutput component can have a value change listener, i.e. a method will be invoked whenever the value of the component changes ( [[WebXEO.XeoPrimerWebComponentChangeListener][read more]]).
---++ [[WebXEO.XeoPrimerWebComponentViewerEvents][Viewer Events]]<a name="viewerEvents"></a>

Viewer Events are a mechanism that allow you to interact at the Java Bean level in the various parts of a viewer life-cycle ( [[WebXEO.XeoPrimerWebComponentViewerEvents][read more]])

---++ [[WebXEO.XeoPrimerWebComponentPlugin][XEO Web Component Plugin]]<a name="componentPlugin"></a>

Instead of creating a full web component, you can also create a component plugin to change some of the default behavior of the component ( [[WebXEO.XeoPrimerWebComponentPlugin][read more]])

---++ [[WebXEO.XeoPrimerXwcLibraries][Libraries]] <a name="libs"></a>

The following table summarizes the list of libraries/frameworks used in the XEO Framework (including a description and a link to the project site). [[WebXEO.XeoPrimerXwcLibraries][Go to the page]].
---++ [[XeoXWCDefaultProperties][ Web Components Default Properties ]]

---++ [[XeoXWCDataConnectors][XEO XWC Data List Connectors]]
Topic revision: r68 - 2013-03-27 - JoaoAires
No permission to view TWiki.WebTopBar
No permission to view TWiki.WebBottomBar