Custom NoSkin skin with portlet action menu for an IBM WebSphere Portal 7.0.0.2 theme

Overview

The IBM® WebSphere® Portal 7.0.0.2 theme has several available skins:

• Standard skin. Shows a portlet title bar that has the portlet action menu on the right-hand side. The portlet action menu provides access to different actions at different times. In view mode the action menu allows users with the appropriate permission to edit, tag, or rate the portlet.

In page edit mode the action menu allows users with the appropriate permission to also move the portlet, edit wires, delete the portlet, and edit the portlet properties. The title bar also acts as a drag handle in page edit mode, to allow editors to move the portlet on the page.

• NoSkin skin. This not only has no title bar or action menu but also has no borders, no margins, and no padding. This allows Portal administrators to position portlets on the page that have no space in between, so the edges of the portlets touch.

• Hidden skin. This is very much like the Standard skin, with borders and margins, and shows the portlet title bar in page edit mode but does not show the portlet title bar in view mode.

The situation that many Portal customers face is that they use the NoSkin skin with one or more IBM Web Content Manager (WCM) rendering portlets on a page because they want no extra space around or in between the portlets. In view mode this works well because the end user has no need for the portlet action menu.

The challenge with this, however, is that administrators have no action menu, so they cannot edit the configuration of the WCM rendering portlet to set the library or content for that portlet to display.

If the Hidden skin is used, then there is an action menu in edit mode, but the Hidden skin has a margin and padding. In addition, when the title bar is displayed the portlet is pushed down so the portlet is no longer in the same place on the page. For example, it may not line up with portlets in other columns.

The solution to this challenge is the NoSkinPlus skin, which in edit mode will display its title bar super-imposed over the existing portlet. This gives the user access to both the title bar for dragging and the action menu for many other actions.

The NoSkinPlus skin

The NoSkinPlus skin is a new custom skin that is a copy of the Standard skin with some changes. All the files associated with the NoSkinPlus skin are in a single directory named NoSkinPlus. The directory includes the skin.html, the nls directory containing the translated versions of the skin.html, a new CSS file, and a new JavaScript^TM (JS) file, as follows:

• NoSkinPlus

• skin.html
• nls (directory)
• noSkinPlus.css
• noSkinPlus.js

The CSS file and the JS file are registered as a new module in the modular theme and are included in the single, consolidated CSS file and JavaScript file requests. See the section below for more information on how this new module is defined.

When the Portal page is in view mode the NoSkinPlus looks just like the NoSkin skin (see figure 1).

Figure 1. View mode



When the Portal page is in edit mode and the mouse pointer is within the bounds of the portlet, the NoSkinPlus skin superimposes the portlet title bar and action menu icon over the upper part of the portlet (see figure 2).

Figure 2. Edit mode

Adding the NoSkinPlus skin to your custom theme

To add the NoSkinPlus skin to your existing custom theme, follow the steps below.

NOTE:

• The NoSkinPlus skin should only be added to a theme derived from the Portal 7.0.0.2 theme.
• The following steps also assume that you have not already modified the theme.json file or any of the .json files in the profiles directory. If you have, then you should compare your copy of the file with the copy of the file here and make the appropriate changes to your file.
• The copy actions should be performed via your favorite WebDAV client, using the “http://<host>:<port>/wps/mycontenthandler/dav/fs-type1” entry point. Example WebDAV clients include AnyClient and WebDrive.

1. Copy the 7002.NoSkinPlus/skins/NoSkinPlus directory to <your_theme>/skins directory.
2. Copy 7002.NoSkinPlus/contributions/theme.json to <your_theme>/contributions directory (this replaces your existing theme.json file).
3. Copy 7002.NoSkinPlus/profiles/*.json to <your_theme>/profiles directory (this replaces all the .json files in your profiles directory).
4. Edit the “register.NoSkinPlusSkin.xml” file, replacing:

5. Import the “register.NoSkinPlusSkin.xml” file via the “Import XML” link in the Portal Administration user interface.

You can now change the skin of a portlet to the NoSkinPlus skin, if that portlet is on a page that has your custom theme assigned to it.

The NoSkinPlus theme

As an alternative we have also provided a complete custom theme, based on the Portal 7.0.0.2 theme, that already includes the NoSkinPlus skin. You can install this theme onto your Portal environment, using the steps below.

NOTE:

• The copy actions should be performed via your favorite WebDAV client, using the “http://<host>:<port>/wps/mycontenthandler/dav/fs-type1” entry point (not the “themelist” entry point). Example WebDAV clients include AnyClient and WebDrive.
• This custom theme is based on the Portal 7.0.0.2 theme from a Portal install that includes Cumulative Fix 14 and reuses all the dynamic content spots from the default 7.0.0.2 Portal theme.

1. Copy the 7002.NoSkinPlus directory to <fs-type1>/themes directory. Or, you can compress the 7002.NoSkinPlus directory and deploy it via the ConfigEngine webdav-deploy-zip-file task.
2. Import the “register.NoSkinPlusTheme.xml” file via the “Import XML” link in the Portal Administration user interface.

You can now assign the NoSkinPlus theme to a page and assign the NoSkinPlus skin to a portlet on that page.

Conclusion

This article has presented an enhancement for the NoSkin skin, called NoSkinPlus, that shows a portlet title bar in edit mode when the user hovers over the portlet. This makes it possible to configure and edit wires, edit portlet parameters, and drag the portlet, instead of having to rely on the old legacy administration portlets to accomplish these tasks.

The NoSkinPlus skin can either be added to your custom theme, if your custom theme is based on the 7.0.0.2 theme, or you can install the NoSkinPlus custom theme onto your Portal. This has also been reviewed by the Portal development team and is expected to be included in the product in the near future.

Tell us what you think

Please visit this link to take a one-question survey about this article:

Resources

WebSphere Portal Family wiki:
http://www-10.lotus.com/ldd/portalwiki.nsf/

developerWorks® WebSphere Portal zone
http://www.ibm.com/developerworks/websphere/zones/portal/

WebSphere Portal forum:
http://www.ibm.com/developerworks/forums/forum.jspa?forumID=168

Author biography

John De Binder joined IBM's Federal Systems Division in 1979 after graduating from Auburn University and worked on the Space Shuttle launch system for five years. Since joining Software Group (SWG) in 1984 he has worked on a Graphics Design Product, and on parts of IBM's OS/2® operating system and the Distributed Smalltalk Product. In 1996 he was one of a small group that started the SWG Services consulting team, first on IBM Smalltalk, then with WebSphere Application Server, Java, and then WebSphere Portal with IBM Software Services for Lotus® (ISSL). He is currently on the WebSphere Portal development team working on special projects and still helping clients. You can reach John at debinder@us.ibm.com.