(r2) XeoPrimerWebComponentsLibrary < WebXEO

WebXEO Web>XeoPrimer>XeoPrimerWebComponentsLibrary (revision 2) (raw view)~~EditAttach~~

-- Main.PedroRio - 13 Jan 2011
---+ XEO Web Components - Library

While [[XeoPrimerObjectModelling][modelling the first Object Model]] for the XEO Library, you used XEO Studio's Scaffolding function to generate the Author viewers (list/edit/lookup) and also it addedd an automatic entry to our Main viewer (Main.xvw). From the previous chapter [[XeoPrimerWebComponentsIntro][you created a new Main viewer]] (Main_Library.xvw) and added and entry to that viewer; in this chapter you'all an entry to the list viewer of the Author Object Model, understand the component structure of a List/Edit and Lookup Viewer and add an icon to an Object Model.
---+++ Adding an icon to an Object Model

One thing that's visually very pleasant to users are icons. XEO Object Models can have an associated 16x16 gif icon that will be displayed in certain situation automatically (or can be manually displayed as well, as will be showed next).Start by [[%ATTACHURL%/ico16.gif][downloading the following icon]] <img alt="ico16.gif" src="%ATTACHURL%/ico16.gif" />. In the default web application of the XEO Library application you'll find a folder named "Resources" (it should be empty), the Resources folder is where XEO will search for icon's associated with XEO Object Models. Inside that folder, one folder per Object Model can be created to store the Model's icon, for this example create a LIB_Author folder and copy the downloaded file to that folder (be sure that it's named ico16.gif).

For now this will be all, you'll later in this chapter where the icon will be shown automatically and in the next section how to display it manually.
---+++ Adding an entry for the author list viewer

Open the previously created Main_Library.xvw viewer and replace the xvw:menu component for the MyViewer viewer with the following:
<verbatim><xvw:menu text='Authors'
       value="{viewerName:'LIB_Author/list.xvw', boql:select LIB_Author}"
       target='Tab' serverAction="#{viewBean.listObject}" icon='resources/LIB_Author/ico16.gif' /></verbatim>

Let's explain the xvw:menu component a bit. The xvw:menu component is a generic component for creating buttons with an action, it can be used in tree panels, as well as in toolbars to create button. It has a _text_ property which is the label displayed, a _target_ property which allows to choose where the action of the menu will be presented (in a main viewer it's usually as a tab), the _icon_ property which will render an icon next to the menu's label, a _serverAction_ property which is the action to be invoked from the XEOMainBean (or any custom bean extending that bean). For a list viewer that method will most probably be the "listObject" method, as that method is prepared to open the list viewer and receive parameters through the _value_ property of the menu component. In this example we're passing a [[http://www.json.org/][JSON ]]object with two attributes, the name of the viewer (LIB_Author/list.xvw) and the BOQL (XEOQL) expression to select the desired instances. The _value_ property can also have more attributes which will be explained when needed.

The previous instructions have all the required steps to add a Main viewer entry to display a list viewer (the icon is optional, naturally), and you'll replicate them when adding the remaing list viewer entries.

Launch the project and login as usual and then click on the "Authors" entry in the main menu, the result should be the one depicted in figure XWCLib.1

<img width="772" alt="AuthorListViewerAndMain.png" src="http://wiki.itds.pt/pub/WebITDS/XeoPrimerWebComponentsLibrary/AuthorListViewerAndMain.png" title="AuthorListViewerAndMain.png" height="336" />

Figure XWCLib.1 - Main viewer with entry for the Authors List Viewer (and List viewer open)

aa

Attachments

Topic attachments
I	Attachment	Action	Size	Date	Who	Comment
png	AuthorListViewerAndMain.png	manage	8.7 K	2011-01-13 - 15:26	PedroRio
gif	ico16.gif	manage	0.7 K	2011-01-13 - 14:37	PedroRio	LibAuthor_Icon

Topic revision: r2 - 2011-01-13 - PedroRio

No permission to view TWiki.WebTopBar

No permission to view TWiki.WebBottomBar