JBoss Portal 2.4

• Get the Bundle: The download bundle is available from our download page . Bundles are noted with the 'JBoss Portal + AS' naming convention.

• Extract the bundle: Extract the zip archive to a directory of your choosing. In windows, we recommend, C:\jboss-X.X.X

• Start the Server: Go to JBOSS_INSTALL_DIRECTORY/bin and execute run.bat (run.sh, if Linux)

• From our download page

• From CVS, running the following command:

                          cvs -d :pserver:anonymous@anoncvs.forge.jboss.com:/cvsroot/jboss co jboss-portal-2.4
                       

• Source JBP 2.2 database from which we migrate portal data. (You should already have this!)

• Destination JBP 2.4 database to which we migrate portal data.

• JBoss Portal 2.2 DB: jbossportal22

• JBoss Portal 2.4 DB: jbossportal24

• cardemo-object.xml

                    
                    <?xml version="1.0" encoding="UTF-8"?>
                    <deployments>
                       <deployment>
                          <if-exists>overwrite</if-exists>
                          <parent-ref>default</parent-ref>
                          <page>
                             <page-name>samples</page-name>
                             <window>
                                <window-name>CarDemoWindow</window-name>
                                <instance-ref>CarDemoPortletInstance</instance-ref>
                                <region>center</region>
                                <height>0</height>
                             </window>
                          </page>
                       </deployment>
                       <deployment>
                          <if-exists>overwrite</if-exists>
                          <instance>
                             <instance-name>CarDemoPortletInstance</instance-name>
                             <component-ref>cardemo.CarDemoPortlet</component-ref>
                          </instance>
                       </deployment>
                    </deployments>
                    
                 

• In cardemo-object.xml file comment out whole <deployment>...</deployment> tag which contains <instance>...</instance> .

• Copy the text you just commented out and put it in newly created portlet-instances.xml file.

• Edit and change portlet-instances.xml file using following rules:

  Surround whole file content with </deployments> tag.

  Replace </instance-name> tag with </instance-id> one

  Replace </component-ref> tag with </portlet-ref> one

• cardemo-object.xml

                    
                    <?xml version="1.0" encoding="UTF-8"?>
                    <deployments>
                       <deployment>
                          <if-exists>overwrite</if-exists>
                          <parent-ref>default</parent-ref>
                          <page>
                             <page-name>samples</page-name>
                             <window>
                                <window-name>CarDemoWindow</window-name>
                                <instance-ref>CarDemoPortletInstance</instance-ref>
                                <region>center</region>
                                <height>0</height>
                             </window>
                          </page>
                       </deployment>
                    </deployments>
                    
                 

• portlet-instances.xml

                    
                    <?xml version="1.0" encoding="utf-8" standalone="yes"?>
                    <deployments>
                       <deployment>
                          <instance>
                             <instance-id>CarDemoPortletInstance</instance-id>
                             <portlet-ref>CarDemoPortlet</portlet-ref>
                          </instance>
                       </deployment>
                    </deployments>
                    
                 

• VIEW - Generates markup reflecting the current state of the portlet.
• EDIT - Should allow a user to customize the behaviour of the portlet.
• HELP - Should provide some information to the user as to how to use the portlet.

• NORMAL - A portlet shares this page with other portlets.
• MINIMIZED - A portlet may show very little information or none at all.
• MAXIMIZED - A portlet may be the only portlet displayed on this page.

• <deployments>...</deployments>

  The deployments tag, encapsulates the entire document. You may specify more than one deployment within this tag.

• <deployment>...</deployment>

  The deployment tag is used to specify object deployments: portals, pages, windows, etc...

• <if-exists>...</if-exists>

  Possible values are overwrite or keep . Overwrite will destroy the existing object in the database and create a new one, based on the content of the deployment. Keep will maintain the existing object deployment or create a new one if it does not yet exist.

• <parent-ref>...</parent-ref>

  The parent-ref tag specifies where a particulare object will exist within the portal object tree. In our example, above, we are defining a window and assigning it to default.default , interpreted, this means the window will appear in the default portal and the default page within it.

• <window>...</window>

  Used to define a portlet window. You will then need to assign to this window, a portlet instance and assign it to a layout region.

• <window-name>...</window-name>

  A unique name given to this portlet window.

• <instance-ref>...</instance-ref>

  The portlet instance that this window will represent. It must correspond to the value of instance-id , assigned in your portlet-instances.xml

• <region>...</region><height>...</height>

  The values are used to specify where this window will appear within the page layout. Region often depends on regions defined in your layout. Height can be any number between 0-X.

• <deployments>...</deployments>

  The deployments tag, encapsulates the entire document. You may specify more than one portlet instance deployment, within this tag.

• <deployment><instance>...</instance></deployment>

  The deployment , and embedded instance tags are used to specify one portlet instance.

• <instance-id>...</instance-id>

  A unique name given to this instance of the portlet. It must correspond to the value of instance-ref , assigned to the window in your *-object.xml .

• <portlet-ref>...</portlet-ref>

  The portlet that this instance will represent. It must correspond to the value of portlet-name , assigned in your portlet.xml .

•                         <preferences><preference>...</preference></preferences>

  Preferences for this portlet instance are defined here, as type String, in a key-value pair style. It is also possible to specify preferences as type String[], as in:

  <preferences>
     <preference>
        <name>fruit</name>
        <value>apple</value>
        <value>orange</value>
        <value>kiwi</value>
     </preference>
  </preferences>
  

• <security-constraint>
     <policy-permission>
        <unchecked/>
        <action-name>viewrecursive</action-name>
     </policy-permission>
  </security-constraint>

  The security contraint portion is worth taking a look at, in an isolated fashion. It allows you to secure a specific portlet instance based on a user's role.

  Role definition: You must define a role that this security constraint will apply to. Possible values are:

  • <unchecked/> Anyone can view this page.
  • <role-name>SOMEROLE</role-name> Access to this page is limited to the defined role.

  Access Rights: You must define the access rights given to the role defined. Possible values are:

  • view Users can view the page.
  • viewrecursive Users can view the page and child pages.
  • personalize Users are able to view AND personalize the page.
  • personalizerecursive Users are able to view AND personalize the page AND its child pages.

• <portlet-app>...</portlet-app>

  The portlet-app tag, encapsulates the entire document. You may specify more than one portlet, within this tag.

• <portlet>...</portlet>

  The portlet tag is used to define one portlet that is deployed withing this archive.

• <description>...</description>

  A verbal description of tis portlet's function.

• <portlet-name>...</portlet-name>

  The name of this portlet, usually the class name

• <portlet-class>...</portlet-class>

  The fully-qualified-name of this portlet class.

•                         <init-param><name>...</name><value>...</value></init-param>

  Using the init-param tag, you can specify initialization parameters to create initial state inside your portlet class. Normally, they would be used in the portlet's init() method. You can specify more than one init-param.

• <supports>...</supports>

  Here, you would advertise the supported mime-type and supported portlet-modes for this portlet.

• <supported-locale>...</supported-locale>

  Here, you would advertise the supported locales for this portlet. You can specify many.

• <resource-bundle>...</resource-bundle>

  The resource bundle that will back the locales specified.

• <portlet-info><title>...</title></portlet-info>

  The portlet title that will be displayed in the portlet window's title bar.

• <if-exists> Possible values are overwrite or keep . Overwrite will destroy the existing object and create a new one based on the content of the deployment. Keep will maintain the existing objct deployment or create a new one if it does not yet exist.
• <parent-ref> Indicates whether the object should be hooked in to the portal tree.
• <properties> Properties definition specific to this page, commonly used to define the specific theme and layout to use. If not defined, the default portal layouts/theme combination will be used.
• <page> The start of a page definition.
• <page-name> The name of the page.
• <window> The start of a window definition.
• <window-name> The name of the window.
• <instance-ref> The instance reference used by this window. Should correspond with the <instance-name> variable.
• <height> The vertical position of this window within the region defined in the layout.
• <instance> The start of an instance definition. page.
• <instance-name> Maps to the above <instance-ref> variable.
• <component-ref> Takes the name of the application followed by the name of the portlet, as defined in the portlet.xml

• <security-constraint>
     <policy-permission>
        <unchecked/>
        <action-name>viewrecursive</action-name>
     </policy-permission>
  </security-constraint>

  The security contraint portion is worth taking a look at, in an isolated fashion. It allows you to secure a specific page/portal based on a user's role.

  Role definition: You must define a role that this security constraint will apply to. Possible values are:

  • <unchecked/> Anyone can view this page.
  • <role-name>SOMEROLE</role-name> Access to this page is limited to the defined role.

  Access Rights: You must define the access rights given to the role defined. Possible values are:

  • view Users can view the page.
  • viewrecursive Users can view the page and child pages.
  • personalize Users are able to view AND personalize the page.
  • personalizerecursive Users are able to view AND personalize the page AND its child pages.

• Navigational state : this is mainly the state of the different portlet windows that the user will manipulate during its interactions with the portal. For instance a maximized portlet window with specific render parameters.
• WSRP objects : the WSRP protocol can require to provide specific cookies during interactions with a remote portlet.

• jboss-portal.sar/conf/hibernate/user/hibernate.cfg.xml
• jboss-portal.sar/conf/hibernate/instances/hibernate.cfg.xml
• jboss-portal.sar/conf/hibernate/portal/hibernate.cfg.xml
• jboss-portal.sar/conf/hibernate/portlet/hibernate.cfg.xml

• Add in the /WEB-INF/web.xml file of your web application a specific listener class
• Configure your portlet to be distributed in the /WEB-INF/jboss-portlet.xml file.

• You can only replicate portlet scoped attributes of a portlet. The main reason of this is to keep consistency with the session state. If accessing a portlet would trigger replication of application scoped attribute during the rendering of a page then another portlet on the same page could use this attribute for generating its markup. Then the state seen by this second portlet would not be the same according to the order in which the portlets of this page are rendered.
• Mutable objects need an explicit call to setAttribute(String name, Object value) on the portlet session object in order to trigger replication by the container.

• We can provide the URLs for each of the different WSRP interfaces offered by the remote producer via the <endpoint-config> element and its <service-description-url>, <markup-url>, <registration-url> and <portlet-management-url> children. These URLs are producer-specific so you will need to refer to your producer documentation or WSDL file to determine the appropriate values.
• Alternatively, and this is the easiest way to configure your producer, we can provide a URL pointing to the WSDL description of the WSRP web services offered by the producer via <endpoint-wsdl-url>. JBoss Portal will then heuristically determine from the information contained in the WSDL file how to connect appropriately to the remote WSRP services.

  Note

  It is important to note that, when using this method, JBoss Portal will try to match a port name to an interface based solely on the provided name. There are no standard names for these ports so it is possible (though rare) that this matching process fails. In this case, you should look at the WSDL file and provide the endpoint URLs manually, as per the previous method.

There are currently two taglibs, containing tags for different approaches to layouts:

• portal-layout.tld
• theme-basic-lib.tld

Here are the four markup containers and their interface representation:

• Region - RegionRenderer
• Window - WindowRenderer
• Decoration - DecorationRenderer
• Portlet Content - PortletRenderer

A couple of things to know about the theming approach discussed below:

• Main premise behind this approach was to provide a clean separation between the business and presentation layer of the portal. As we go through each selector and explain the relation to the visual presentation on the page, this will become more apparent.
• The flexibility of the selectors used in the theme stylesheet allow a designer to very easily customize the visual aspects of the portal, thereby taking the responsibility off of the developers hands through allowing the designer to quickly achieve the desired effect w/out the need to dive down into code and/or having to deploy changes to the portal. This saves time and allows both developers and designers to focus on what they do best.
• This theme incorporates a liquid layout approach which allows elements on a page to expand/contract based on screen resolution and provides a consistent look across varying display settings. However, the stylesheet is adaptable to facilitate a fixed layout and/or combination approach where elements are pixel based and completely independent of viewport.
• The pieces that make up the portal theme consist of at least one stylesheet and any associated images. Having a consolidated set of files to control the portal look and feel allows administrators to effortlessly swap themes on the fly. In addition, this clean separation of the pieces that make up a specific theme will enable sharing and collaboration of different themes by those looking to get involved or contribute to the open source initiative.

• Red Border - portal-container
• Yellow Border - header-container
• Orange Border - content-container
• Blue Border - regionA/regionB
• Green Border - portlet-container

The following is a list of the selectors used in the theme stylesheet, including a brief explanation of how each selector is used in the portal:

• Portal Body Selector

                       #body {
                       background-image: url(images/portal_background.gif);
                       margin: 0px;
                       padding: 0px;
                       }
                    

  Usage: This selector controls the background of the page, and can be modified to set a base font-family, layout margin, etc. that will be inherited by all child elements that do not have their own individual style applied. By default, the selector pulls an image background for the page.

• Portal Header Selectors

                       #spacer {
                       width: 1024px;
                       line-height: 0px;
                       font-size: 0px;
                       height: 0px;
                       }
                    

  Usage: Spacer div used to keep header at certain width regardless of display size. This is done to avoid overlapping of tab navigation in header. To account for different display sizes, this selector can be modified to force a horizontal scroll in the browser which eliminates any issue with overlapping elements in the header.

                       #header-container {
                       background-image: url(images/portal_background.gif);
                       background-repeat: repeat-y;
                       height: 100%;
                       min-width: 1000px;
                       width: 100%;
                       /* test to reposition header on page
                       position: absolute;
                       bottom: 5px;*/
                       }
                    

  Usage: Wrapper selector used to control the position of the header on the page (see yellow border in screen shot). This selector is applied as an ID on the table used to structure the header. You can adjust the attributes to reposition the header location on the page and/or create margin space on the top, right, bottom and left sides of the header.

  Screenshot:

  

                       #header {
                       background-image: url(images/header.gif);
                       background-repeat: repeat-x;
                       height: 100px;
                       padding: 0px;
                       /*margin: 0 25% 0 25%;*/
                       }
                    

  Usage: This selector applies the header background image in the portal. It can be adjusted to accommodate a header background of a certain width/height or, as it currently does, repeat the header graphic so that it tiles across the header portion of the page.

                       #logoName {
                       background-image: url(images/JBossLogo.gif);
                       background-repeat: no-repeat;
                       width: 187px;
                       height: 35px;
                       position: absolute;
                       left: 15px;
                       top: 16px;
                       z-index: 2;
                       }
                    

  Usage: Logo selector which is used to brand the header with a specific, customized logo. The style is applied as an ID on an absolutely positioned DIV element which enables it to be moved to any location on the page, and allows it to be adjusted to accommodate a logo of any set width/height.

• Portal Layout Region Selectors

                       #portal-container {
                       /*width: 100%;*/
                       
                       /*IE specific approach to preserve min-width for portlet regions 	*/
                       padding: 0 350px 0 350px;
                       }
                    

  Usage: Wrapper for entire portal which starts/ends after/before the BODY tag (see red border in screen shot). The padding attribute for this selector is used to preserve a minimum width setting for the portlet regions (discussed below). Similar to body selector, this style can modified to create margin or padding space on the top, right, bottom and left sections of the page. It provides the design capability to accommodate most layouts (e.g. a centered look such as the phalanx theme where there is some spacing around the content of the portal, or a full width look as illustrated in the Industrial theme).

  Screenshot:

  

                       /* min width for IE */
                       #expander {
                       margin: 0 -350px 0 -350px;
                       position: relative;
                       }
                       
                       /* min width for IE */
                       #sizer {
                       width: 100%;
                       }
                       
                       /* IE min width \*/
                       * html #portal-container,
                       * html #sizer,
                       * html #expander { height: 0; }
                    

  Usage: These selectors are used in conjunction with the above, portal-container, selector to preserve a minimum width setting for the portlet regions. This was implemented to maintain a consistent look across different browsers.

                       /*table that contains all regions. does not include header*/
                       #content-container {
                       height: 100%;
                       text-align:left;
                       max-width: 1600px;
                       min-width: 800px;
                       }
                    

  Usage: Wrapper that contains all regions in portal with the exception of the header (see orange border in screen shot). Its attributes can be adjusted to create margin space on page, as well as control positioning of the area of the page below the header.

  Screenshot:

  

                       #regionA {
                       /* test to swap columns with regionB...
                       float: right; */
                       
                       width: 30%;
                       float: left;
                       margin: 0px;
                       padding: 0px;
                       min-width: 250px;
                       }
                    

  Usage: First portlet region located within the content-container (see blue border in screen shot). This selector controls the width of the region as well as its location on the page. Designers can very easily reposition this region in the portal (e.g. swap left regionA with right regionB, etc.) by adjusting the attributes of this selector.

                       #regionB {
                       /*test to swap columns with regionA...
                       margin: 0 30% 0 0; */
                       
                       /* two column layout*/
                       margin: 0 0 0 30%;
                       padding: 0;
                       width: 69%;
                       
                       /* test to add 3rd region in layout...
                       width: 40%;
                       float: left;*/
                       }
                    

  Usage: Second portlet region located within the content-container (see blue border in screen shot). Similar to regionA, this selector controls the width of the region as well as its location on the page.

                       #regionC {
                       /* inclusion of 3rd region - comment out for 2 region testing
                       padding: 0px;
                       width: 27%;
                       float: left;*/
                       display: none;
                       }
                    

  Usage: Third portlet region located within the content-container (please refer to blue border in screen shot representing regionA and regionB for an example). Used for 3 column layout. Similar to regionA and regionB, this selector controls the width of the region as well as its location on the page.

                       /* give a maximized portlet more space */
                       #regionMaximized {
                       width: 100%;
                       float: left;
                       margin: 0px;
                       padding: 0px;
                       min-width: 400px;
                       }
                    

  Usage: Portlet region located within the content-container (please refer to blue border in screen shot representing regionA and regionB for an example). Used for a one column layout to allow one portlet to take over the entire page. Similar to regionA, regionB, and regionB, this selector controls the width of the region as well as its location on the page.

  Screenshot:

  

                       hr.cleaner {
                       clear:both;
                       height:1px;
                       margin: -1px 0 0 0;
                       padding:0;
                       border:none;
                       visibility: hidden;
                       }
                    

  Usage: Used to clear floats in regionA, regionB and regionC DIVs so that footer spans bottom of page.

                       #footer-container {
                       margin: 30px 25% 0 25%;
                       text-align: center;
                       }
                    

  Usage: Footer region located towards the bottom of the content-container (see above screen shot). This region spans the entire width of the page, but can be adjusted (just like regionA, regionB and regionC) to take on a certain position and width/height in the layout.

                       #navigation-container {}
                    

  Usage: Unused at this time.

                       #sub-navigation-container {}
                    

  Usage: Unused at this time.

• Tab Navigation Selectors for Header

                       UL#tabsHeader {
                       margin: 0;
                       padding-left: 300px;
                       min-width: 550px;
                       }
                    

  Usage: Used to provide position (through padding attribute) of tabbed navigational items in header. A padding-left of 300px gives space for the left hand logo area and can be adjusted as needed to set the desired location for the navigation.

                       UL#tabsHeader li {
                       list-style: none;
                       float: left;
                       margin-left: 0px;
                       margin-top: 74px;
                       margin-right: 0px;
                       line-height: 24px;
                       padding: 0px;
                       border-left: 1px solid #72828E;
                       }
                    

  Usage: Selector used to style list items as horizontal navigation and to set the spacing and position of each nav item that's available.

                       UL#tabsHeader li:hover {
                       background-image: url(images/highlightedTab.gif);
                       background-repeat: repeat-x;
                       }
                    

  Usage: Used to provide hover pseudo class on navigation items so that the tab background will change upon mouseover. Note that currently IE only supports the hover pseudo class on links, so this selector will only affect non-IE browsers (e.g. FireFox, etc.).

                       UL#tabsHeader li.hoverOn {
                       background-image: url(images/highlightedTab.gif);
                       background-repeat: repeat-x;
                       }
                       
                       UL#tabsHeader li.hoverOff {
                       background-image:none;
                       }
                    

  Usage: These two selectors are implemented to account for the fact that IE cannot understand the use of a pseudo class on the LI element. They provide the same mouseover effect as the “UL#tabsHeader li:hover�? selector when hovering the navigation item in IE, and are used in combination with onmouseover/onmouseout event handlers in the header navigation:

                       
                       <li onmouseover="this.className='hoverOn'" onmouseout="this.className='hoverOff'">
                       <a href="#">Tab Nav</a>
                       </li>
                       

                       UL#tabsHeader a {
                       display: block;
                       float: left;
                       padding: 4px 15px 5px 15px;
                       text-decoration: none;
                       font: 13px/normal Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
                       background: 100% 0 no-repeat;
                       color: #596874;
                       }
                    

  Usage: This selector styles the navigational links, indicating padding surrounding the link as well as font family, color and text-decoration.

                       UL#tabsHeader a:hover {
                       text-decoration: underline;
                       }
                    

  Usage: Used to underline navigational links when hovering with mouse. Unlike the li:hover pseudo class, IE does support the hover effect on links, so there is no need for a separate set of selectors to deal with this effect.

                       UL#tabsHeader #current, UL#tabsHeader #current a {
                       font: 13px/normal Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
                       font-weight: 600;
                       color: #EBEAEA;
                       background-image: url(images/activeTab.gif);
                       background-repeat: repeat-x;
                       border-right: 0px;
                       border-left: 0px;
                       }
                    

  Usage: This selector is set on the current/selected navigation item to style both the background of the tab as well as font properties such as color and weight. Example:

                       
                       <li id="current" onmouseover="this.className='hoverOn'" onmouseout="this.className='hoverOff'">
                       <a href="#">Tab Nav</a>
                       </li>
                       

                       /* backslash for IE5-Mac \*/
                       UL#tabsHeader a {float: none;} /* End Mac Hack */
                       html>body UL#tabsHeader a {width: auto;} /* fixes IE issues */
                    

  Usage: Also known in the industry as an example of the “Holly Hack�?, the above is added to the stylesheet to handle certain buggy issues with IE. This section of the stylesheet should be left alone as subsequent changes can effect the way things behave in IE.

                       li.currentTabBackground {
                       background: #fff;
                       }
                       
                       li.currentTabBackgroundSubNav {
                       background: #eeeeef;
                       }
                    

  Usage: The above two selectors are not currently in use. Included to account for future changes to the navigation where multiple tiers/levels might be incorporated.

• Portlet Container Window Selectors

                       .portlet-container {
                       padding: 10px;
                       }
                    

  Usage: Wrapper that surrounds the portlet windows (see green border in screen shot). Currently, this selector is used to create space (padding) between the portlets displayed in each particular region.

  Screenshot:

  

                       .portlet-titlebar-title {
                       font-family: Verdana, Arial, Helvetica, sans-serif;
                       font-size: 11px;
                       font-weight: 500;
                       color: #596874;
                       white-space: nowrap;
                       line-height: 100%;
                       float: left;
                       text-indent: 15px;
                       }
                    

  Usage: Class used to style the title of each portlet window. Attributes of this selector set font properties, indentation and position of title.

                       .portlet-titlebar-decoration {
                       background-image: url(images/portlet-win-decoration.gif);
                       background-repeat: no-repeat;
                       height: 11px;
                       width: 11px;
                       float: left;
                       position: relative;
                       top: 6px;
                       }
                    

  Usage: Used to display top left portlet window decoration (e.g. sphere icon in Industrial theme). Attributes for this selector set position and dimensions of this decoration.

                       .portlet-mode-container {
                       float: right;
                       }
                    

  Usage: Wrapper that contains the portlet window modes that display in the top right section of the portlet windows.

                       .portlet-titlebar-left {
                       background-image: url(images/portlet-top-left.gif);
                       background-repeat: no-repeat;
                       width: 9px;
                       height: 33px;
                       background-position: right;
                       min-width: 9px;
                       }
                    

  Usage: Used to style the top left corner of the portlet window. Each portlet window consists of one table that has 3 columns and 3 rows. This selector styles the first column (TD) in the first row (TR).

  Screenshot:

  

                       .portlet-titlebar-center {
                       background-image: url(images/portlet-top-middle.gif);
                       background-repeat: repeat-x;
                       height: 33px;
                       }
                    

  Usage: Used to style the center section of the portlet title bar. Each portlet window consists of one table that has 3 columns and 3 rows. This selector styles the second column (TD) in the first row (TR).

  Screenshot:

  

                       .portlet-titlebar-right {
                       background-image: url(images/portlet-top-right.gif);
                       background-repeat: no-repeat;
                       width: 10px;
                       height: 33px;
                       min-width: 10px;
                       }
                    

  Usage: Used to style the top right corner of the portlet window. Each portlet window consists of one table that has 3 columns and 3 rows. This selector styles the third column (TD) in the first row (TR).

  Screenshot:

  

                       .portlet-content-left {
                       background-image: url(images/portlet-left-vertical.gif);
                       height: 100%;
                       background-repeat: repeat-y;
                       background-position: right;
                       width: 9px;
                       min-width: 9px;
                       }
                    

  Usage: Used to style the left hand vertical lines that make up the portlet window. Each portlet window consists of one table that has 3 columns and 3 rows. This selector styles the first column (TD) in the second row (TR).

  Screenshot:

  

                       .portlet-content-center {
                       background-color: #f7f7f7;
                       background-repeat: repeat;
                       vertical-align: top;
                       font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
                       font-size: 13px;
                       }
                    

  Usage: Used to style the center, content area where the portlet content is injected into the portlet window (see below screen). Attributes for this selector control the positioning of the portlet content as well as the background and font properties. Each portlet window consists of one table that has 3 columns and 3 rows. This selector styles the second column (TD) in the second row (TR).

  Screenshot:

  

                       .portlet-body {
                       background-color: #f7f7f7;
                       }
                    

  Usage: An extra selector for controlling the content section of the portlet windows (see below screen). This was added to better deal with structuring the content that gets inserted/rendered in the portlet windows, specifically if the content is causing display problems in a portlet.

  Screenshot:

  

                       .portlet-content-right {
                       background-image: url(images/portlet-right-vertical.gif);
                       height: 100%;
                       background-repeat: repeat-y;
                       background-position: left;
                       width: 10px;
                       min-width: 10px;
                       }
                    

  Usage: Used to style the right hand vertical lines that make up the portlet window. Each portlet window consists of one table that has 3 columns and 3 rows. This selector styles the third column (TD) in the second row (TR).

  Screenshot:

  

                       .portlet-footer-left {
                       background-image: url(images/portlet-bottom-left.gif);
                       width: 9px;
                       height: 9px;
                       background-repeat: no-repeat;
                       background-position: top right;
                       min-width: 9px;
                       }
                    

  Usage: Used to style the bottom left corner of the portlet window. Each portlet window consists of one table that has 3 columns and 3 rows. This selector styles the first column (TD) in the third row (TR).

  Screenshot:

  

                       .portlet-footer-center {
                       background-image: url(images/portlet-bottom-middle.gif);
                       height: 14px;
                       background-repeat: repeat-x;
                       }
                    

  Usage: Used to style the bottom, center of the portlet window (i.e. the bottom horizontal line in the Industrial theme). Each portlet window consists of one table that has 3 columns and 3 rows. This selector styles the second column (TD) in the third row (TR).

  Screenshot:

  

                       .portlet-footer-right {
                       background-image: url(images/portlet-bottom-right.gif);
                       width: 10px;
                       height: 9px;
                       background-repeat: no-repeat;
                       min-width: 10px;
                       }
                    

  Usage: Used to style the bottom right corner of the portlet window. Each portlet window consists of one table that has 3 columns and 3 rows. This selector styles the third column (TD) in the third row (TR).

  Screenshot:

  

• Portlet Window Mode Selectors

                       .portlet-mode-maximized {
                       background-image: url(images/maximize.gif);
                       width: 16px;
                       height: 23px;
                       background-repeat: no-repeat;
                       float: left;
                       display: inline;
                       cursor: pointer;
                       }
                    

  Usage: Selector used to display the portlet maximize mode. Attributes for this selector control the display and dimensions of the maximize icon, including the behavior of the mouse pointer when hovering the mode.

                       .portlet-mode-minimized {
                       background-image: url(images/minimize.gif);
                       width: 16px;
                       height: 23px;
                       background-repeat: no-repeat;
                       float: left;
                       display: inline;
                       cursor: pointer;
                       }
                    

  Usage: Selector used to display the portlet minimize mode. Attributes for this selector control the display and dimensions of the minimize icon, including the behavior of the mouse pointer when hovering the mode.

                       .portlet-mode-normal {
                       background-image: url(images/normal.gif);
                       width: 16px;
                       height: 23px;
                       background-repeat: no-repeat;
                       float: left;
                       display: inline;
                       cursor: pointer;
                       }
                    

  Usage: Selector used to display the portlet normal mode (i.e. the icon that when clicked, restores the portlet to the original, default view). Attributes for this selector control the display and dimensions of the normal icon, including the behavior of the mouse pointer when hovering the mode.

                       .portlet-mode-help {
                       background-image: url(images/help.gif);
                       width: 16px;
                       height: 23px;
                       background-repeat: no-repeat;
                       float: left;
                       display: inline;
                       cursor: pointer;
                       }
                    

  Usage: Selector used to display the portlet help mode. Attributes for this selector control the display and dimensions of the help icon, including the behavior of the mouse pointer when hovering the mode.

                       .portlet-mode-edit {
                       background-image: url(images/edit.gif);
                       width: 16px;
                       height: 23px;
                       background-repeat: no-repeat;
                       float: left;
                       display: inline;
                       cursor: pointer;
                       }
                    

  Usage: Selector used to display the portlet edit mode. Attributes for this selector control the display and dimensions of the edit icon, including the behavior of the mouse pointer when hovering the mode.

                       .portlet-mode-remove {
                       background-image: url(images/remove.gif);
                       width: 16px;
                       height: 23px;
                       background-repeat: no-repeat;
                       float: left;
                       display: inline;
                       cursor: pointer;
                       }
                    

  Usage: Currently not available. But here is the intended use: Selector used to display the portlet remove mode. Attributes for this selector control the display and dimensions of the remove icon, including the behavior of the mouse pointer when hovering the mode.

                       .portlet-mode-view {
                       background-image: url(images/view.gif);
                       width: 16px;
                       height: 23px;
                       background-repeat: no-repeat;
                       float: left;
                       display: inline;
                       cursor: pointer;
                       }
                    

  Usage: Selector used to display the portlet view mode. Attributes for this selector control the display and dimensions of the view icon, including the behavior of the mouse pointer when hovering the mode.

                       .portlet-mode-reload {
                       background-image: url(images/reload.gif);
                       width: 16px;
                       height: 23px;
                       background-repeat: no-repeat;
                       float: left;
                       display: inline;
                       cursor: pointer;
                       }
                    

  Usage: Currently not available. But here is the intended use: Selector used to display the portlet reload mode. Attributes for this selector control the display and dimensions of the reload icon, including the behavior of the mouse pointer when hovering the mode.

• Copyright Selectors

                       .portal-copyright {
                       font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
                       font-size: 9px;
                       color: #5E6D7A;
                       }
                       
                       a.portal-copyright {
                       color: #768591;
                       text-decoration: none;
                       }
                       
                       a.portal-copyright:hover  {
                       color: #96A5B1;
                       text-decoration: none;
                       }
                    

  Usage: The above three selectors are used to style copyright content in the portal. The portal-copyright selector sets the font properties (color, etc.), and the a.portal-copyright/a.portal-copyright:hover selectors style any links that are part of the copyright information.

• Element Selectors

                       a {
                       color: #768591;
                       text-decoration: none;
                       }
                       a:hover  {
                       color: #96A5B1;
                       text-decoration: none;
                       }
                    

  Usage: The above two selectors style all anchor elements that do not have their own class/selector applied.

                       INPUT {
                       font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
                       font-size: 10px;
                       }
                    

  Usage: The above selector styles all INPUT elements that do not have their own class/selector applied.

                       SELECT {
                       font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
                       font-size: 10px;
                       }
                    

  Usage: The above selector styles all SELECT elements that do not have their own class/selector applied.

                       FONT {
                       font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
                       font-size: 10px;
                       color: #768591;
                       }
                    

  Usage: The above selector styles all FONT elements that do not have their own class/selector applied.

                       FIELDSET {
                       background-color: #f7f7f7;
                       border:1px solid #BABDB6;
                       padding: 6px;
                       }
                    

  Usage: The above selector styles all FIELDSET elements that do not have their own class/selector applied.

                       LEGEND {
                       background-color: transparent;
                       padding-left: 6px;
                       padding-right: 6px;
                       padding-bottom: 0px;
                       font-size: 14px;
                       }
                    

  Usage: The above selector styles all LEGEND elements that do not have their own class/selector applied.

• Table Selectors

                       .portlet-table-header {}
                    

  Usage: Not currently in use. Intended for styling tables (specifically, the TH or table header elements) that get rendered within a portlet window.

                       .portlet-table-body {}
                    

  Usage: Not currently in use. Intended for styling the table body element used to group rows in a table.

                       .portlet-table-alternate {}
                    

  Usage: Not currently in use. Used to style the background color (and possibly other attributes) for every other row within a table.

                       .portlet-table-selected {}
                    

  Usage: Not currently in use. Used to style text, color, etc. in a selected cell range.

                       .portlet-table-subheader {}
                    

  Usage: Not currently in use. Used to style a subheading within a table that gets rendered in a portlet.

                       .portlet-table-footer {}
                    

  Usage: Not currently in use. Similar to portlet-table-header and portlet-table-body, this selector is used to style the table footer element which is used to group the footer row in a table.

                       .portlet-table-text {}
                    

  Usage: Text that belongs to the table but does not fall in one of the other categories (e.g. explanatory or help text that is associated with the table). This selector can also be modified to provide styled text that can be used in all tables that are rendered within a portlet.

• FONT Selectors

                       .portlet-font {
                       color:#000;
                       font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
                       font-size: 10px;
                       }
                    

  Usage: Used to style the font properties on text used in a portlet. Typically this class is used for the display of non-accentuated information.

                       .portlet-font-dim {
                       color:#888385;
                       font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
                       font-size: 10px;
                       }
                    

  Usage: A lighter version (color-wise) of the portlet-font selector.

• FORM Selectors

                       .portlet-form-label {
                       color:#4A4A4A;
                       text-decoration:none;
                       font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
                       font-size: 9px;
                       }
                    

  Usage: Text used for the descriptive label of an entire form (not the label for each actual form field).

                       .portlet-form-button {
                       font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
                       font-size: 9px;
                       font-weight: bold;
                       color: #270F07;
                       }
                    

  Usage: Used to style portlet form buttons (e.g. Submit).

                       .portlet-icon-label {}
                    

  Usage: Not currently in use. Text that appears beside a context dependent action icon.

                       .portlet-dlg-icon-label {}
                    

  Usage: Not currently in use. Text that appears beside a "standard" icon (e.g Ok, or Cancel).

                       .portlet-form-field-label {
                       font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
                       font-size: 9px;
                       color: #4A4A4A;
                       }
                    

  Usage: Selector used to style portlet form field labels.

                       .portlet-form-field {
                       font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
                       font-size: 9px;
                       color: #4A4A4A;
                       margin-top: 10px;
                       }
                    

  Usage: Selector used to style portlet form fields (i.e. INPUT controls, SELECT elements, etc.).

• LINK Selectors

                       .portal-links:link {
                       font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
                       font-size: 9px;
                       font-weight: bold;
                       color: #242424;
                       text-decoration: none;
                       }
                       
                       .portal-links:hover  {
                       font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
                       font-size: 9px;
                       font-weight: bold;
                       color: #5699B7;
                       text-decoration: none;
                       }
                       
                       .portal-links:active {
                       font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
                       font-size: 9px;
                       font-weight: bold;
                       color: #242424;
                       text-decoration: none;
                       }
                       
                       .portal-links:visited {
                       font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
                       font-size: 9px;
                       font-weight: bold;
                       color: #242424;
                       text-decoration: none;
                       }
                    

  Usage: The above four selectors are used to style links in the portal. Each pseudo class (i.e. hover, active, etc.) provides a different link style.

• MESSAGE Selectors

                       .portlet-msg-status {
                       font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
                       font-size: 10px;
                       font-style: normal;
                       color: #788793;
                       }
                    

  Usage: Selector used to signify the status of a current operation that takes place in the portlet (e.g. “saving results�?, “step 1 of 4�?).

                       .portlet-msg-info {
                       font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
                       font-size: 9px;
                       font-style: italic;
                       color: #000;
                       }
                    

  Usage: Selector used to signify general information in a portlet (e.g. help messages).

                       .portlet-msg-error {
                       color:red;
                       font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
                       font-size: 9px;
                       font-weight: bold;
                       }
                    

  Usage: Selector used to signify an error message in the portlet (e.g. form validation error).

                       .portlet-msg-alert {
                       font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
                       font-size: 9px;
                       font-weight: bold;
                       color: #821717;
                       }
                    

  Usage: Selector used to style an alert that is displayed to the user.

                       .portlet-msg-success {
                       font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
                       font-size: 9px;
                       font-weight: bold;
                       color: #359630;
                       }
                    

  Usage: Selector used to indicate successful completion of an action in a portlet (e.g. “save successful�?).

• SECTION Selectors

                       .portlet-section-header {
                       font-weight: bold;
                       font-family: Verdana, Arial, Helvetica, sans-serif;
                       font-size: 13px;
                       color: #768591;
                       background-color: #f7f7f7;
                       }
                    

  Usage: Table or section header.

                       .portlet-section-body {
                       font-family: Verdana, Arial, Helvetica, sans-serif;
                       font-size: 10px;
                       }
                    

  Usage: Normal text in a table cell.

                       .portlet-section-alternate {
                       background-color: #ececed;
                       font-family: Verdana, Arial, Helvetica, sans-serif;
                       font-size: 9px;
                       }
                    

  Usage: Used to style background color and text in every other table row.

                       .portlet-section-selected {
                       background-color: #89AEC6;
                       font-family: Verdana, Arial, Helvetica, sans-serif;
                       font-size: 9px;
                       }
                    

  Usage: Used to style background and font properties in a selected cell range.

                       .portlet-section-subheader {
                       font-weight: bold;
                       font-size: 10px;
                       font-family: Verdana, Arial, Helvetica, sans-serif;
                       color: #000;
                       }
                    

  Usage: Used to style a subheading within a table/section that gets rendered in a portlet.

                       .portlet-section-footer {
                       font-family: Verdana, Arial, Helvetica, sans-serif;
                       background-color: #f7f7f7;
                       font-size: 8px;
                       }
                    

  Usage: Used to style footer area of a section/table that gets rendered in a portlet.

                       .portlet-section-text {}
                    

  Usage: Not currently used. Text that belongs to a section but does not fall in one of the other categories. This selector can also be modified to provide styled text that can be used in all sections that are rendered within a portlet.

• MENU Selectors

                       .portlet-menu {}
                    

  Usage: Not currently used. General menu settings such as background color, margins, etc.

                       .portlet-menu-item {
                       color: #242424;
                       text-decoration: none;
                       font-family: Verdana, Arial, Helvetica, sans-serif;
                       font-size: 9px;
                       }
                    

  Usage: Not currently used. Normal, unselected menu item.

                       .portlet-menu-item:hover {
                       color: #5699B7;
                       text-decoration: none;
                       font-family: Verdana, Arial, Helvetica, sans-serif;
                       font-size: 9px;
                       }
                    

  Usage: Not currently used. Used to style hover effect on a normal, unselected menu item.

                       .portlet-menu-item-selected {}
                    

  Usage: Not currently used. Applies to selected menu items.

                       .portlet-menu-item-selected:hover {
                       
                       }
                    

  Usage: Not currently used. Selector styles the hover effect on a selected menu item.

                       .portlet-menu-cascade-item {}
                    

  Usage: Not currently used. Normal, unselected menu item that has sub-menus.

                       .portlet-menu-cascade-item-selected {}
                    

  Usage: Not currently used. Selected sub-menu item.

                       .portlet-menu-description {}
                    

  Usage: Not currently used. Descriptive text for the menu (e.g. in a help context below the menu).

                       .portlet-menu-caption {}
                    

  Usage: Not currently used. Selector used to style menu captions.

• WSRP Selectors

                       .portlet-horizontal-separator {}
                    

  Usage: Not currently used. A separator bar similar to a horizontal rule, but with styling matching the page.

                       .portlet-nestedTitle-bar {}
                    

  Usage: Not currently used. Allows portlets to mimic the title bar when nesting something.

                       .portlet-nestedTitle {}
                    

  Usage: Not currently used. Allows portlets to match the textual character of the title on the title bar.

                       .portlet-tab {}
                    

  Usage: Not currently used. Support portlets having tabs in the same style as the page or other portlets.

                       .portlet-tab-active {}
                    

  Usage: Not currently used. Highlight the tab currently being shown.

                       .portlet-tab-selected {}
                    

  Usage: Not currently used. Highlight the selected tab (not yet active).

                       .portlet-tab-disabled {}
                    

  Usage: Not currently used. A tab which can not be currently activated.

                       .portlet-tab-area {}
                    

  Usage: Not currently used. Top level style for the content of a tab.