JAFFA UserGrid Widget

TagLib
Reference

tag libraries

Jaffa Tags

Layout Controls

Guards

Page Controls

Other Tags

Struts

JSTL

Sun Site

Taglibs

reference

widgets/user grid

<Portlet:UserGrid . . .

compatability

Overview

A UserGrid was developed as an extention of the 'Grid' widget to include some 'user personalization' features. This personalization allows a user to select the visible columns of the grid, and the order of the columns. This information is persisted so each time the grid is rendered for this user, it is done to there requirements. In addition to this it has a hover capability incase you scroll away from header or key fields in a large list.

It can render its output in three formats (Visual HTML, Excel compliant HTML and XML), all of which honor the ordering and column visiblity when used.

As with its predicesors, the <Table> and <Grid>, its visuals can be controlled via modifying the default CSS definitions supplied with Jaffa

For exmaples of this widget using its different output format, refer to the 'results.jsp' pages generated by the ObjectFinder pattern

Sample

General Attributes for User Grid Tag

Attribute Name	Mandatory/Optional	Description
userGridId	Mandatory	This is the unique id of the folding section.This must not have the same value as any other widget on the screen
detail	Optional	This flag is set to true if you wish to have an event assocaited to the doubleclicking of a row.
width	Optional	Specify the width to use. This is included using style="width: xxx"
noRecordsKey	Optional	This allows a token key to be specified with a custom no records message.
outputType	Optional	Values are 'WebPage' (default), 'Xml', 'Excel'. WebPage - writes out HTML with css and javascript functionality. Xml - writes out as XML data using <Root> and <Row> tags and use the column label for each cell in the grid. Excel - writes out a plain table with no formatting except on the <TD> tag it added in the attribute <x:str> which assumes x is defined as the correct MS-Excel namespace at the top of the page (<html xmlns:x="urn:schemas-microsoft-com:office:excel">). By doing this you can marshal the output of this page straight to Excel and the x:str will preserve formatting of strings, without it any string fields containing numbers with leading zeros, get treated as strings, and you loose the leading zeros.
field	Optional	This is the field name that will match the corresponding getter and setter on the Form Bean.
target	Optional	Specifies a literal HTML for target="".

General Attributes for User Grid Column Tag

Attribute Name	Mandatory/Optional	Description
label	Mandatory	allows the user to specify a literal label or a key for a token .. use [] when specifying a token.
height	Optional	Specify the height to use. This is included using style="height: xxx"
width	Optional	Specify the width to use. This is included using style="width: xxx"
key	Optional	This flag sets the column as being part of the primary.
datatype	Optional	This specifies the datatype to associate to a column for sorting. Valid values are 'String' (Default), 'CaseInsensitiveString', 'Number' or 'Date'

Events

Event Name	Description
do_rows_Clicked(row number)	This event is fired when row is double clicked
do_Rows_View_Clicked(row number)	This event is fired when the detail icon is pressed

General Comments

Because of the differences in the DOM manipulation between Internet Explorer and the Gecko Browsers the sorting rountines will run far slower in the Gecko Browsers.

User Grid

top

Overview

A UserGrid is a widget that resembles a Table. It can contain other widgets and allows the user the ability to sort columns if a datatype attribute is specified.

In Browser

Main UserGrid

Settings Menu

JSP Code

<Portlet:UserGrid field="model1" detail="true" userGridId="exampleUserGrid" >
  <Portlet:UserGridColumn label="EditBox-es" key="true"
                          dataType="CaseInsensitiveString" >
    <Portlet:EditBox field="field1" validate="true"/>
    <Portlet:EditBox field="field2"/>
  </Portlet:UserGridColumn>
  <Portlet:UserGridColumn label="Another instance of an EditBox"
            key="true">
    <Portlet:EditBox field="field2" validate="true"/>
  </Portlet:UserGridColumn>
  <Portlet:UserGridColumn label="HTML Text" key="true">
    Plain Text
  </Portlet:UserGridColumn>
</Portlet:UserGrid>

Controlling the widget CSS

top


How they work Will create a complex HTML table , that is linked to various javascript JS files allowing sorting and various functions. Each table will have an associated settings menu. allows the user to change round the order of the columns and what columns to be shown. To define columns , the userGridColumTag must be defined within the enclosing userGridTag. Various attributes are available, the most notable are key=' ' and datatype=' '. Defining key='true' will identify that column as being one of the primary keys of the data set, and setting the datatype="" attribute , makes that column sortable.

Controlling the look of a User Grid by CSS The UserGrid widget's corresponding CSS can be found at 'source/html/jaffa/css/widgets/tablesort.css'. Look at the diagrams to identify areas within the tables governed by the CSS.


It is important to note that tr.userGridSettingsHighlightOn is used to select the highlight color for the settings menu. Also when you are setting background colors .. do not use the background-color style tag use bacground instead as this is java script compliant.


The UserGrid widget dynamically adds in the the CSS in the header of the page as opposed to they way the other widgets work. Also you must define the button.css for the buttons to appear on the settings screen, else they will appear only as text links.

Overview

In Browser

JSP Code

How they work

Controlling the look of a User Grid by CSS