Work with Page Builder theme templates (theme.html)
You can use static HTML to write portal themes.
The static theme template is named theme.html. There is a theme.html file located in the root directory of the theme on WebDAV (/fs-type1/themes/<theme-name>/) as well as localized theme.html files located within the "nls" directory under the theme (/fs-type1/themes/<theme-name>/nls/). The theme.html includes the full HTML structure of the page including <html> ,<head> , and <body> sections. It can include both static and dynamic content.
Note: Within the "nls" folder
there is a file named "theme.html" without a locale associated with it,
this file is not used and can be ignored.
It is important to remember that you should modify the theme
template files by using the "fs-type1" WebDAV entry point. By using this
entry point changes to the theme template will be immediately
reflected upon a browser refresh.
Root Theme Template
Out-of-box the theme.html located in the root directory of the theme is
not rendered. This theme.html file links to the localized
templates. These links to the locaized templates are within the
<head> section of the template in the form:
<link rel="alternate" href="nls/theme_<locale code>.html" hreflang="<locale code>">
An example of a link to the English template file is:
<link rel="alternate" href="nls/theme_en.html" hreflang="en">
If you have no desire to use localized theme templates, you
can remove these links from the head section and this will now be the
template rendered.
This theme template also includes Apache ANT scripting in the form:
${<bundle name>:<bundle key>:<character encoding>} The "character encoding" will replace special characters with the escape sequence determined by the encoding specified. The encodings available are "xml" or "json".
Note: You can chain the encodings, such as:
${<bundle>:<key>:json:xml} or ${<bundle>:<key>:xml:json} The
Apache ANT scripting is to be used when generating the localized
templates based on this root template using the ANT build tool. The
benefit to this is you can update one template during development and
then generate the localized templates by using the ANT build process.
If you are only going to use this root template then you should
replace the ANT scripting with the preferred text to be rendered.
You can learn more about the ANT build tool here: http://ant.apache.org/
Localized Theme Templates
Out-of-box Page Builder renders the locaized theme templates located within the "nls" directory under the theme on WebDAV. These files have the locale code concatenated on the end of the template name, i.e. theme_en.html. These templates will have translated static text inline within the template.
When using the
localized theme templates, update the one being rendered by
the browser to view changes. If preferred language is
English, then you should update the theme_en.html file.
Add static content to the theme.html
You can add static content to the theme.html in the following ways:
Add content directly:
You can add static content, such as HTML markup and images directly to the file theme.html .
Add content from WebDAV:
You can add content that is located in WebDAV relative to the theme.html file with a relative URL reference.
Add content by relative URLs:
You can use relative URLs to reference static content located in the /common-resources/ folder in the WebDAV file store. If the relative path does not successfully resolve to a file within the theme folder, the /common-resources/ folder is used as a fallback location to locate the resource. This way the theme can reference common resources and still preserve the ability to override a file in that folder with a resource of the same name in the theme folder.
Add server-side dynamic content to the theme.html
Dynamic content changes per user, or per page, or per some other server state. Therefore you cannot define it statically in the file theme. Instead, you insert it into the response at runtime. To do this, you edit the theme.html and identify these dynamic content spots. Then at runtime a server side theme parser identifies and resolves dynamic content spots, and streams their output into the final response to the browser.
The format of a dynamic content spot is as follows:
<a rel="dynamic-content" href="{path to dynamiccontent}"></a>
rel="dynamic-content"
The theme template parser recognizes the element rel="dynamic-content" . It resolves the href attribute and inserts its output into the response.
href
The href can point to any URI that is resolved by the resource addressability framework.
Examples:
- The following example is a special content spot that renders the referenced layout template and content of the current page:
<a rel="dynamic-content" href="lm:template"></a>
- The following example includes a dynamic content spot from the mapping, specified in the WP_DynamicContentSpotMappings REP or theme metadata:
<a rel="dynamic-content" href="dyn-cs:tabNav"></a>
- The following example includes the output of a theme JSP using a resolver POC URL:
<a rel="dynamic-content" href="res:/PageBuilder2/themes/html/PageBuilder2.0/tabNav.jsp"></a>
Add client-side dynamic content to the theme.html
Dynamic content can also be added to the theme after the browser receives the response. To do this, you use JavaScript, AJAX, iWidget components, or other client-side technologies. You can add iWidget components by either of the following options:
- You can add an iWidget definition directly to the theme.html. When the portal loads the page, it parses the entire markup of the page for iWidgets and instantiates the widgets.
- You can add the iWidget to a server-side JSP dynamic content spot. This allows the JSP to return the initial markup for the iWidget in the initial browser response, while the widget is parsed at page load and handles subsequent user interactions. This avoids the rendering flicker caused by the small time delay between the browser receiving the response and the widget parsing, loading and rendering.
Learn more about Dynamic Content Spots: Work with dynamic content spots: wp7
Change the theme template location
The theme contains a metadata parameter that stores the theme template (theme.html) location. The parameter is named "com.ibm.portal.theme.template.ref" and can point to some external location if desired. This parameter's value can be a POC URI or point to some external server, so it is not required that the theme template is stored on WebDAV. Out-of-box the metadata parameter for the Page Builder theme looks like this:<parameter name="com.ibm.portal.theme.template.ref" type="string" update="set"><![CDATA[dav:fs-type1/themes/PageBuilder2/]]>
</parameter>
Parent: Elements of a theme: wp7
June 13, 2011
11:33:01 AM