Level: Intermediate Sukumar Konduru, Advisory Software Engineer, IBM Dallas, Developer Technical Support Center
28 Jan 2003 WebSphere Portal V4 provides style sheet elements that you can use in a portlet to display HTML elements such as forms and tables. Using these style sheet elements in portlets enables visual consistency among all the portlets on a page. This article includes sample code which shows you how to use these style sheet elements in a portlet.
Introduction IBMTM WebSphereTM Portal Version 4.1 (hereafter called WebSphere Portal) provides style sheet elements that you can use in a portlet to display HTML elements such as forms and tables. Using these style sheet elements in portlets enables visual consistency among all the portlets on a page. This article shows you how to use these style sheet elements in portlet code. To experience the look and feel of these style sheet elements for rendering HTML elements, install the attached portlet.
Themes and skins
WebSphere Portal displays pages using themes and skins. Themes define the look and feel of the overall portal, including navigation bar, color and size of fonts, corners of a page, and tabs. Skins define the border around the portlet and the look and feel of the portlet's title bar.
The cascading style sheets used to display portal pages are part of a theme. This article uses a place which uses
Portal Default Theme
to display pages. The style sheet accessed using Internet Explorer with user preferences of English locale for the above theme is
WebSphere\PortalServer\app\wps.ear\wps.war\themes\html\ie\en\Styles.css
.
Understanding Styles.css
The
Styles.css
defines style sheet elements which are classified into the following categories.
- General styles for HTML elements like BODY, A, etc.
- Styles used in the common sections like navigation bar, toolbar, etc.
- Styles used in administrative portlets
- Styles used in the End-user portlets
- Styles used in the Lotus portlets
This article shows how to use the style sheet elements within the End-user portlet. These defined elements are used to display HTML forms, tables, and status messages.
Project description The attached portlet, shown in Figure 1, displays these four links. - Form
- Sample Form
- Table
- Status Messages
When you click on each link, the portlet displays content from different JSP files. Each JSP file uses several End-user portlet CSS elements. Figure 1: Sample portlet, PortletUsingCSS  To see the style sheet elements used by the sample portlet. - Download
and install the attached WAR file.
-
Create a place which uses
Portal Default Theme.
- Create a page under this place.
-
Customize the page by adding an instance of
PortletUsingCSS
portlet.
Displaying a form When you access the customized page, the portlet displays various links, as shown in Figure 1. Click on Form. A form displays, as shown in Figure 2, which demonstrates the style sheet classes you can use within a form. Figure 2: Form style sheet elements 
Listing 1 shows the contents of the JSP used to
display the form above.
Listing 1: Sample FormView.jsp code
<%@ taglib uri='/WEB-INF/tld/portlet.tld' prefix='portletAPI'%>
<portletAPI:init/>
<jsp:useBean id="PortletUsingCSSBean" class="com.ibm.dr.PortletUsingCSSBean"
scope="request" />
<DIV CLASS="wpsPortletBack">
<SPAN CLASS="wpsPortletText">
<A HREF="<%= (String)(portletRequest.getAttribute("sUriMain")) %>">Back to Main Window</A>
</SPAN>
<BR>
<BR>
<SPAN CLASS="wpsPortletHead">
wpsPortletHead<BR>
</SPAN>
<SPAN CLASS="wpsPortletText">
wpsPortletText<BR>
</SPAN>
<SPAN CLASS="wpsPortletTinyText">
wpsPortletTinyText<BR>
</SPAN>
<FORM ACTION="<portletAPI:createURI/>" METHOD="POST">
<TABLE width="100%" border="0" cellspacing="0" cellpadding="0">
<TR>
<TD width="100%" align="left"><SPAN CLASS="wpsLabelText">wpsLabelText</SPAN>
</TD>
</TR>
<TR>
<TD width="100%" align="left">
<INPUT CLASS="wpsEditField" type="text" name="<portletAPI:encodeNamespace
value='xyz' />" >
</TD>
</TR>
<TR>
<TD width="100%" align="left">
<BR>
<INPUT type="checkbox" name="<portletAPI:encodeNamespace value='xyz' />" >
<SPAN CLASS="wpsLabelText"> wpsLabelText</SPAN>
<SPAN CLASS="wpsDescriptionText">wpsDescriptionText</SPAN>
</TD>
</TR>
</TABLE>
<BR>
<INPUT CLASS="wpsButtonText" type="submit" name="Save_Button" value="wpsButtonText"
size=35>
</FORM>
</DIV> |
You can use the style sheet elements in forms in the following ways.
Table 1: Form style sheet element uses
| Element | Use this element to... | | wpsPortletBack | Set the background color of a portlet | | wpsPortletHead | Set the text as the title | | wpsPortletText | Set the characteristics of the portlet text | | wpsPortletTinyText | Display tiny text in a portlet | | wpsLabelText | Set visual attributes for label text of a form | | wpsDescriptionText | Set the characteristics of the description text for the form elements | | wpsButtonText | Set the style of the button text |
To see the form elements used in a real application, click on Back to Main Window, and then click Sample Form. Figure 3 shows a mortgage calculation application form which uses the form style sheet elements. Figure 3: Using form style sheet elements in an application  In the sample form above, you see several style sheet elements, which are explained here. wpsPortletHead
Displays the title of this form as
Mortgage CalculatorwpsPortletText
Describes the function of this form:
Calculates monthly payment of mortgage paymentwpsLabelText
Use to set all text fields labels
wpsDescriptionText
Tells how to enter the Mortgage Rate field:
Enter in decimalswpsButtonText
Sets the label on the button as
Calculate
Displaying a table Click Back to Main Window, and then click Table. Figure 4 illustrates the table style sheet elements.
Figure 4: Table style sheet elements 
Listing 2 shows the code for the JSP used to display the table above.
Listing 2: TableView.jsp code
<%@ taglib uri='/WEB-INF/tld/portlet.tld' prefix='portletAPI'%>
<portletAPI:init/>
<DIV CLASS="wpsPortletBack">
<BR>
<SPAN CLASS="wpsPortletText">
<A HREF="<%= (String)(portletRequest.getAttribute("sUriMain")) %>">Back To Main Window</A>
</SPAN>
<BR>
<BR>
<TABLE cellspacing="0" cellpadding="0" width="70%" border="0">
<TR>
<TD CLASS="wpsTableHead">wpsTableHead </TD>
</TR>
<TR >
<TD CLASS="wpsTableRow"> wpsTableRow </TD>
</TR>
<TR>
<TD CLASS="wpsTableShdRow"> wpsTableShdRow </TD>
</TR>
<TR >
<TD CLASS="wpsTableRow"> wpsTableRow </TD>
</TR>
<TR>
<TD CLASS="wpsTableShdRow"> wpsTableShdRow </TD>
</TR>
</TABLE>
</DIV> |
You use wpsTablehead
to display the table heading. To display rows of a table with shading on alternate rows, use
wpsTableRow
and
wpsTableShdRow, as illustrated in Figure 4.
Displaying status messages Click Back To Main Window and click on the link labeled Status Messages. Figure 5 shows a table of the elements you can use to display status messages in various ways. Each status message element is shown with its corresponding icon and an example message. Figure 5: Status messages style sheet elements 
Listing 3 shows the code for the JSP used to
display the status messages examples above.
Listing 3: StatusVew.jsp code
<%@ taglib uri='/WEB-INF/tld/portlet.tld' prefix='portletAPI'%>
<portletAPI:init/>
<DIV CLASS="wpsPortletBack">
<SPAN class="wpsPortletText">
<A HREF="<%= (String)(portletRequest.getAttribute("sUriMain")) %>"
>Back To Main Window</A>
</SPAN>
<BR>
<BR>
<TABLE cellspacing="9" cellpadding="0" width="70%" border="0">
<TR>
<TD valign="top"><IMG border="0"
src="<%=portletResponse.encodeURL("/icons/warning.gif")%>"
alt="Show Info"
width="16"
height="16"></TD>
<TD valign="top" CLASS="wpsFieldWarningText">wpsFieldWarningText</TD>
<TD CLASS="wpsFieldWarningText">Are you sure you want to delete this place?
Place1</TD>
</TR>
<TR>
<TD valign="top"><IMG border="0"
src="<%=portletResponse.encodeURL("/icons/error.gif")%>"
alt="Show Info"
width="16"
height="16"></TD>
<TD valign="top" CLASS="wpsFieldErrorText">wpsFieldErrorText</TD>
<TD CLASS="wpsFieldErrorText">You must enter a name for the place or cancel this
action.</TD>
</TR>
<TR>
<TD valign="top"><IMG border="0"
src="<%=portletResponse.encodeURL("/icons/success.gif")%>"
alt="Show Info"
width="16"
height="16"></TD>
<TD valign="top" CLASS="wpsFieldSuccessText">wpsFieldSuccessText</TD>
<TD CLASS="wpsFieldSuccessText">The web module was uninstalled successfully. </TD>
</TR>
<TR>
<TD valign="top"><IMG border="0"
src="<%=portletResponse.encodeURL("/icons/info.gif")%>"
alt="Show Info"
width="16"
height="16"> </TD>
<TD valign="top" CLASS="wpsFieldInfoText">wpsFieldInfoText</TD>
<TD CLASS="wpsFieldInfoText">Find is only available if supported in a theme.</TD>
</TR>
<TR>
<TD valign="top"><IMG border="0"
src="<%=portletResponse.encodeURL("/icons/inlineHelp.gif")%>"
alt="Show Info"
width="16"
height="16"></TD>
<TD valign="top" CLASS="wpsInlineHelpText">wpsInlineHelpText</TD>
<TD CLASS="wpsInlineHelpText">To use Web Services, first define UDDI Web
Service registries using the 'Manage Web Services' portlet and then use
the 'Provide registry authentication information' task, below, to provide
userid and password for a UDDI Web Service registry.</TD>
</TR>
</TABLE>
</DIV> |
You can use the status message elements in the following ways. wpsFieldWarningText
Display a warning
wpsFieldErrorText
Describe an error while entering a value for a field
wpsFieldSuccessText
Provide confirmation of the success of an operation
wpsFieldInfoText
Describe a field
wpsInlineHelpText
Provide inline help for a form
Conclusion
This article demonstrated various style sheet elements in a portlet. Using style sheet elements in the portlet allows visual consistency among all the portlets in a page. You can also modify style sheet elements located in Styles.css to better suit your needs for the look and feel of your portlet content.
Download | Description | Name | Size | Download method |
|---|
| Code sample in war format | portletusingCSS.war | 13 KB | FTP |HTTP |
|---|
Resources
About the author | | | Sukumar Konduru is an Advisory Software Engineer at the IBM Dallas, Developer Technical Support Center. He holds M.S in Computer Science from University of Houston. You can reach Sukumar Konduru at konduru@us.ibm.com. |
Rate this page
| 
