Skin layout templates (skin.html)

The portal provides a base skin template and localized skin templates. The static skin template is named skin.html .

The skin.html file is located in the root directory of the skin on WebDAV /fs-type1/skins/skin-name/, and there are localized skin.html files located within the nls directory under the skin /fs-type1/skins/skin-name/nls/ . The skin.html provides the full markup for decoration around a portlet or iWidget. Just as with theme templates, you can use dynamic content spots to add dynamic elements to the skin template at runtime.
Notes:

• The folder nls contains a file named skin.html without a locale associated with it. This file is not used. You can ignore it.

• Remember to modify the skin template files by using the WebDAV entry point fs-type1 . When you use this entry point, changes to the skin template are immediately reflected upon a browser refresh.

Root skin template

In a default WebSphere Portal installation, the portal does not render the template file skin.html located in the root directory of the theme. Instead, this file links to the localized templates, and the portal renders the appropriate localized template. The links to the localized templates are at the top of the root template. They have the following form:

<a rel="alternate" href="nls/skin_locale_code.html" hreflang="locale_code" class="ibmHideTemplate"></a>

An example of a link to the English template file is as follows:

<a rel="alternate" href="nls/skin_en.html" hreflang="en" class="ibmHideTemplate"></a>

You can place the class ibmHideTemplate on these links so that the browser does not expose the anchor element in the user interface. This class makes sure that accessible technologies, such as screen readers, do not encounter these links in the tabbing order.

If you do not want to use localized skin templates, you can remove these links from the top section of the skin.html template in the root directory. If you do this, the portal renders this root template.

This skin template also includes Apache ANT scripting in the following form:

 ${bundle_name:bundle_key:character_encoding}

The character_encoding replaces special characters with the escape sequence determined by the specified encoding. The available types of encoding are xml or json . You can chain multiple instances of encoding by or as follows:

${bundle:key:json:xml} or ${bundle:key:xml:json}

You can use the Apache ANT build framework to generate localized templates based on this root template. This can be useful if you want to update one template during development and then generate the localized templates by using the ANT build process. To use only the root template, replace the ANT scripting with the preferred text that you want to be rendered. You can learn more about the ANT build tool here at the web link to the Apache Ant Welcome page given below.

Localized skin templates

In a default WebSphere Portal installation, Page Builder renders content by using the localized skin templates. These templates are located in the nls subdirectory under the skin directory on WebDAV. These files have the locale code appended to the end of the template name, for example skin_en.html for English. These templates have translated static text inline within the template.

When you use the localized skin templates and want to view changes, update the template that the portal renders in the browser. For example, if preferred language is English, update the fileskin_en.html .

Server-side dynamic content spots

<a rel="dynamic-content" href="lm:title">

This inserts the portlet title into the skin.

<a rel="dynamic-content" href="lm:control">

This renders the content of the portlet.

Client-side dynamic content spots

Client-side content spots are replaced at page load time or at runtime via JavaScript by the RuntimeSkinModel and live text service.
class='lm-dynamic-icon'

This provides a client-side way for changing the icon for the portlet or iWidget in the skin dynamically.

For example, to set the icon, the second parameter is a URL that is the src of the icon img tag.

skinNode.setDynamicContent(skinConstants.DYNAMIC_CONTENT_ICON, "http://www.mysite.com/icon.gif")

Where:

• var controlId = the string ID of the layout node for which the title or icon is changed

• var runtimeSkinModel = com.ibm.mashups.enabler.runtime.skin.Factory.getRuntimeSkinModel()

• var skinNode = runtimeSkinModel.find(controlId)

• var skinConstants = com.ibm.mashups.enabler.runtime.skin.Constants

However, the skins starting in Mashups 2.4 (and therefore in portal V 7) do not contain the lm-dynamic-icon spot. If you want support for a dynamic icon, you need to add an image tag to the titlebar markup in the skin HTML template:

<span class="lotusLeft">
<img class="lm-dynamic-icon" src=""/>
<span class="lm-dynamic-title asa.portlet.title decoration-title"><a rel="dynamic-content" href="lm:title"></a></span>
</span>

Where:

• var controlId = the string ID of the layout node for which the title or icon is changed

• var runtimeSkinModel = com.ibm.mashups.enabler.runtime.skin.Factory.getRuntimeSkinModel()

• var skinNode = runtimeSkinModel.find(controlId)

• var skinConstants = com.ibm.mashups.enabler.runtime.skin.Constants

class='lm-dynamic-title'

This provides a client-side way for changing the title of the skin dynamically at runtime.

For example, to set the title, the second parameter is a string which is inserted as the new title.

skinNode.setDynamicContent(skinConstants.DYNAMIC_CONTENT_TITLE, "My new title")

Where:

• var controlId = the string ID of the layout node for which the title or icon is changed

• var runtimeSkinModel = com.ibm.mashups.enabler.runtime.skin.Factory.getRuntimeSkinModel()

• var skinNode = runtimeSkinModel.find(controlId)

• var skinConstants = com.ibm.mashups.enabler.runtime.skin.Constants

Skin decorator

You can use the skin decorator to inject dynamic JavaScript into the template. A common use case for the decorator is to be able to name space elements with the control ID. In the skin template for a layout control, you can include a marker that contains the resource name of the decorator module. The portal creates an instance of the decorator at the root DOM node for each layout control for which such a marker is included in the skin template. The portal passes the ID of the layout control and the root DOM in the constructor to the decorator.
Example of a decorator definition:

<span style="display:none" class="decoration">com.ibm.portal.example.object</span> 

You can define decorations on the skin template by placing a class on an element with the prefix decoration- . Your code can then retrieve this element by using the layout control root node and add the dynamic JavaScript.

Example of decoration:

<div class="decoration-customElement"></div>

After you have added the decoration class to the element, code can retrieve it within the decorator module by using dojo.query in the scope of the control root DOM node. You can manipulate the retrieved element or add additional dynamic JavaScript to the template.

Examples of adding dynamic JavaScript to template elements:

Namespace an ID of an element:

var element = dojo.query(".decoration-customElement", rootNode) [0]; // rootNode is the control root DOM node
dojo.attr(element, "id", id+".customElement"); // id is the control oid

Add onclick handler to element:

this.contextMenu = dojo.query(".decoration-contextMenu", rootNode) [0]; // rootNode is the control root DOM node
if(this.contextMenu) {
this.connect(this.contextMenu, "onclick", "openContextMenu");
}

For more examples, review the decoration modules located within the file skin.js on WebDAV. This file is located at /fs-type1/skins/skin_name/skin.js .

Parent

Elements of a theme

Related tasks

http://ant.apache.org/

  typos, grammar, exposed <> names that were hidden

+

Search Tips   |   Advanced Search