Example of Progress Indicator

	35% Please wait. Generating Report ...

Example of Shuttle Control with Horizontal Layout. Shuttle Control Shown in a Group Box.

Select Property Templates

Available   Selected Marketing Template Advertising Template Sales Template HR Template

Example of Shuttle Control with Vertical Layout. Shuttle Control Shown in a Group Box.

Select Property Templates

Available Objects Marketing Template Advertising Template Sales Template HR Template Selected Objects

Example HTML of Menubar

Escalation View Search Window

Example HTML of Submenu

Escalations
Customers
Products

Example Mouseover/ Color Change

Escalations

Table (instruction text, view options links, multiple row select with row level actions links, icon column, table level buttons, record navigation)

Table Header These are instructions you can give about the table and its usage. View Option 1|View Option 2 Select and: Row Level Action 1|Row Level Action 2 « ‹ 11-20 of 100 › » Select Sortable column Numeric Data Sortable column selected Column Header Icon Column datalink 1000 data data datalink 1 data data datalink 100 data data datalink 10000 data data « ‹ 11-20 of 100 › »

Table (multiple row select with row level actions links, icon column, table level buttons, record navigation)

Table Header Select and: Row Level Action 1|Row Level Action 2 « ‹ 11-20 of 100 › » Select Sortable column Numeric Data Sortable column selected Column Header Icon Column datalink 1000 data data datalink 1 data data datalink 100 data data datalink 10000 data data « ‹ 11-20 of 100 › »

Table ( single row select with row level actions drop down, record navigation drop-down)

Table Header Select and: Row Level Action 1 Action 2 Action 3 « ‹ 1- 10 of 100 11- 20 of 100 21- 30 of 100 ... › » Select Wrapping Column Heading Numeric Data Sortable column selected Column Header datalink 1000 data data datalink 1 data data datalink 100 data data datalink 10000 data data     « ‹ 1- 10 of 100 11- 20 of 100 21- 30 of 100 ... › »

Table (view options drop-down)

Table Header Show: View Option 1 View Option 2 View Option 3   « ‹ 1- 10 of 100 11- 20 of 100 21- 30 of 100 ... › » Wrapping Column Heading Numeric Data Sortable column selected Column Header datalink 1000 data data datalink 1 data data datalink 100 data data datalink 10000 data data     « ‹ 1- 10 of 100 11- 20 of 100 21- 30 of 100 ... › »

Table (action column drop-down)

Table Header Wrapping Column Heading Sortable Column Heading Sortable column selected Sortable Column Heading Actions datalink 1000 data data Action 1 Action 2 Action 3 Really Long Action datalink 1 data data Action 1 Action 2 Action 3 Really Long Action datalink 100 data data Action 1 Action 2 Action 3 Really Long Action datalink 10000 data data Action 1 Action 2 Action 3 Really Long Action

Table (with row headers and column banding)

Table Header Customer ABC Customer DEF Customer XYZ City Houston San Francisco New York State Texas California New York Country USA USA USA

Tree Table Example with Multiple Columns (With one parent shown at a time and breadcrumbs )

Table Header Level A › Level A.1 Name Status Level A.1 1 Folder 2 Folder 3 File 3 File 4

Primary Tabs Only

Unselected Tab Selected Tab Unselected Tab

Primary Tabs with Subtabs

Unselected Tab Selected Tab Unselected Tab

Selected Subtab Unselected Subtab 2 Unselected Subtab 3

Primary Tabs with Vertical Menu and without Subtabs.

Unselected Tab Selected Tab Unselected Tab

Menu Item One Item Two Item Three Item Four

tab 2, menu item 2, sublink 1 content goes here

Primary Tabs with Subtabs and Vertical Menu

Unselected Tab Selected Tab Unselected Tab

Selected Subtab Unselected Subtab 2 Unselected Subtab 3

Menu Item One Item Two Item Three Item Four

tab 2, menu item 2, sublink 1 content goes here

Hierarchical Vertical Menu

Unselected Tab Selected Tab Unselected Tab Menu Item One Item Two Sublink One Sublink Two Sublink Three Item Three tab 2, menu item 2, sublink 1 content goes here

Example of Page Buttons

Page Buttons

Example of Four-Column (100% width layout with 20, 20, 20, 40)

Page Header Breadcrumb Root > Breadcrumb > Page Header • = Required Label: • Label: This form requires a long text area for input Label: • Label: Label: © 2004 Computer Associates International Inc. All rights reserved. About