JAFFA Text Widget

TagLib
Reference

tag libraries

Jaffa Tags

Layout Controls

Guards

Page Controls

Other Tags

Struts

JSTL

Sun Site

Taglibs

reference

widgets/grid

<Portlet:Grid . . .

compatability

Overview

The grid widget can display a grid of other widgets. It supports features like column sorting, and also provides a 'frameless' version for use as a basic layout manager for other widgets.

Links...

Grid widget

Sample

General Attributes for Grid Tags

Attribute Name	Mandatory/Optional	Description
cssUrl	Mandatory	URL locataion of a css file.
className	Optional	The class name to use for CSS.
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.
detail	Optional	This flag is set to true if you wish to have an event assocaited to the doubleclicking of a row.
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 Grid Column Tags

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

Grid

top

Overview

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

JSP Code

<Portlet:Grid field="model1" detail="true"
    displayOnly="true" cssClass="fredrick" cssUrl="jaffa/css/widgets/tablesorttest.css">
    <Portlet:GridColumn label="EditBox-es" dataType="CaseInsensitiveString">
        <Portlet:EditBox field="field1" validate="true"/>
        <Portlet:EditBox field="field2"/>
    </Portlet:GridColumn>
    <Portlet:GridColumn label="Another instance of an EditBox" key="true">
        <Portlet:EditBox field="field2" validate="true"/>
    </Portlet:GridColumn>
    <Portlet:GridColumn label="HTML Text" key="true">
        <h1>Plain Text </h1>
    </Portlet:GridColumn>
</Portlet:Grid>

How they work:

Will create a complex HTML table , that is linked to various javascript JS files allowing sorting . To define columns , the GridColumTag must be defined within the enclosing GridTag. Various attributes are available, the most notable are cssURL=' ' , cssClass='' and datatype=' '. Defining a the attribute cssUrl associates the table to a different Cascading Style Sheet and cssClass to a differnt class name, and setting the datatype="" attribute , makes that column sortable.

Controlling the widget CSS

top

Controlling the look of a Grid by CSS

The Grid 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. The grid widget allows you to select from different CSS files if desired.