Computer Associates
User-Centered Design
 Contact Us 
Thin-Client (Web-Browser) UI Design Standards
TAU Home › Thin-Client UI Standards Portlet Prototype
Portlets
Provides general design principles for portlets.

Example of Quick Start Portlet

Portlet Title
Brief description of functionality
 Job Status
Short description of the feature and what to expect when link is clicked.
Brief description of functionality

Backup Manager
Short description of the feature and what to expect when link is clicked.

Brief description of functionality
Restore Manager
Short description of the feature and what to expect when link is clicked.
Brief description of functionality
Media Pool
Short description of the feature and what to expect when link is clicked.
Brief description of functionality
Device Manager
Short description of the feature and what to expect when link is clicked.

 

Example of Search Portlet

Search Portlets
Recent Searches:
Search For:
Keywords:
Saved Searches:

Table of Search Results Portlet

Table of Search Results Portlet
All Folders › My Folder
« ‹ 11-20 of 100 › »
Title Details
Title 1 Detail 1
Title 2 Detail 2
Title 3 Detail 3
Title 4 Detail 4

Message Portlet

Message Portlet
Warning: The warning message.
Error: The error message.
Alert: The alert message.
Confirmation: The confirmation message.

Menu Portlet

Menu Portlet

Example HTML of Menubar

Escalation View Search Window

Example HTML of Submenu

Escalations
Customers
Products

Example Mouseover/ Color Change

Escalations

WSRP Portlet Mapping

WSRP Portlet Mapping
All Folders › My Folder
« ‹ 11-20 of 100 › »
Title Details
Title 1 Detail 1
Title 2 Detail 2
Title 3 Detail 3
Title 4 Detail 4


(According to Portlet Specification - JSR 168) Mock Up
Portlet Class Name Portlet Class Description
portlet-section-footer Table or section footnote Sample for portlet-section-footer. This is mapped to the .data class.
portlet-form-label Text used for the descriptive label of the whole form (Not the labels for fields. Sample for portlet-form-label. This is mapped to the .label class.
portlet-icon-label Text that appears beside a context dependent action icon. Sample for portlet-icon-label. This is mapped to the .data class.
portlet-dlg-icon-label Text that appears beside a “standard” icon (e.g. Ok, or Cancel) Sample for portlet-dlg-icon-label. This is mapped to the .data class.
portlet-menu-description Descriptive text for the menu (e.g. in a help context below the menu) Sample for portlet-menu-description. This is mapped to the .tip_text class.
portlet-menu-caption Menu caption Sample for portlet-menu-caption. This is mapped to the .menu_unselected_text, .menubar_unselected_background.

Computer Associates
© 2004 Computer Associates International, Inc. All rights reserved. About