Websphere Portal has seen many changes in terms of portal theme in recent times,following is are few points which describe different generations of portal theme.Article include details of theme starting for portal 6.1.
Basic portal theme which was present in portal 6.x is known as simple portal theme,Default.jsp is the main file of this theme which creates the whole structure of theme.Each section of theme like head,side nav,top nav are constituted using different jspf files like head.jspf,ext_js.jspf etc. All these jspf files are included in default.jsp which is responsible to aggregate all the components of theme .
Following libraries and there tags can be used for reference
Basic Portal theme was followed by web2 theme,web 2 theme followed the concept of CSA (clien side aggregation) i.e when the page renders at all the dynamic spots on the page only the placeholder is placed and when the page is completely loaded these placeholders are filled with data.It means for example we need to render a imagein the banner of theme at first a place holder for the img like a div will be placed which will be filled with an image after page load.
Web2 theme also make sure that when there are multiple portlets on a single page and only one of the portlet needs to be refreshed then whole portal page is not refreshed but only the portion of the portlet is refreshed.Earlier to web 2 theme if we had to achieve this only was to send ajax call from the portlet which needs to be refreshed but in case of web 2 theme even if there is no ajax calls only one portlet is refresh on a page is possible without reloading other portlets and theme.
Portal 7 introduced the concept of page builder theme,this theme provides the logical separation of static content and dynamic content within theme.All the static content of theme like js,css etc are kept in a different logical place than the jsp and jspf's which represent dynamic content.Benefit of this logical separation is that if you just need to add a new js to theme or change a css you now dont need to change it into your theme project of RAD and redeploy theme on WAS.
Static content of theme can be directly accessed by a tool like webdev where you just need to provide the url of logical separation where static content is located and access the folders of static content directly.Also the role of Default.jsp has been degraded in this type of theme,because now all the structure where all things aggregate happens in theme.html file which is located in Static content.
Now for example if you just need to add a new js file to the theme you can just add the new js file using webdev to static content and then refer this new js file in theme.html as its already present in static content folder which can be directly accessed through web dev,thus it saves developer to add the js in theme project,refer js in head.jspf and redeploy the whole war again.
Note : While development its recommended that the js files should be added to js folder and referenced in respective jspf files,above technique is best suited when project is ready and you want to do simple quick change.It must be also noted that in page builder theme default.jsp points to theme.html.
Theme Policy: theme policy is an xml file which have attributes in the form of name value pair,you can copy the default theme policy of portal and change the value of attributes as per you need and apply the theme policy on to the portal page page.We can create multiple theme policy for a portal theme,theme policy tells the theme what needs to be rendered on to the page.For example if in a portal theme we have created a top nav,side nav and a banner,using theme policy we can control what all things from theme are loaded on a particular portal page,i.e on page "xx"if I just want a top nav of theme I will first create a theme policy and set value to top nav as true while values to side nav and banner will be set to false,then I will apply the theme policy on to the portal page "xx" and portal will ensure that only top nav is rendered from theme in page "xx".
We must ensure that all the theme policies for a particular theme must have same set of attributes while the value of each attribute can be different in each of the theme policy.If you need to add a new attribute in theme policy which not present by default in portal theme policy them you will have to also create a bean in theme project and getter and setters of that attribute within the bean apart from adding the attribute to the theme policy.If you are adding your own custom attribute then you will also have to register the theme policy using xml access (only is you have added a custom attribute to theme policy).
Note: Page builder theme of portal 7 do not support theme policy
Color Palette: As mentioned above theme policy allows us to select what all sections of theme are to be loaded on which portal page,likewise color palette allows developers to change the rendering of each section of theme.For example if I have a banner in theme and I want to show this banner in 2 different colors on 2 different portal pages.I will set the different value of color palette in both the portal pages by going into the page properties.
Thus if for page x if I will set in page property value of color palette as red on this page the banner of theme will appear red while on other page property if I will set the value of color palette as blue on this page the banner will apper as blue.
Important thing to note over there is that theme reads these values set in page properties using metadata and use it accordingly.
Code is as follows
<portal-logic:pageMetaData varname="pageMetaData">
<c:set var="headerHostDefault"><c:out value='${pageMetaData["header.host.default"]}'/></c:set>
<c:set var="headerHostSecure"><c:out value='${pageMetaData["header.host.secure"]}'/></c:set>
<c:set var="headerConnectionsUrl"><c:out value='${pageMetaData["header.connections.url"]}'/></c:set>
<c:set var="headerStyle"><c:out value='${pageMetaData["header.style"]}'/></c:set>
</portal-logic:pageMetaData>
Following are few important tags with respect to theme
Basic portal theme which was present in portal 6.x is known as simple portal theme,Default.jsp is the main file of this theme which creates the whole structure of theme.Each section of theme like head,side nav,top nav are constituted using different jspf files like head.jspf,ext_js.jspf etc. All these jspf files are included in default.jsp which is responsible to aggregate all the components of theme .
Following libraries and there tags can be used for reference
- <portal-core/> tags - Used to provide portal core functionality such as entering the main render flow as well as URL-related aspects of the page.
- <portal-dynamicui/> tags - Used to enable dynamic user interface features such as closing dynamic portlets and pages.
- <portal-fmt/> tags - Used to provide enhanced portal formatting capabilities.
- <portal-logic/> tags - Used to provide conditional logic.
- <portal-navigation/> tags - Used to implement navigation tasks such as generating URLs and traversing the portal navigation model.
- <portal-showtools/> tags - Used to provide administrative tools on the theme and skin level.
- <portal-skin/> tags - Used to build a portlet title bar as well as make various functional icons available in the title bar.
- <portal-theme-ext/> tags - Used to provide extended functionality to enhance the portal themes.
Basic Portal theme was followed by web2 theme,web 2 theme followed the concept of CSA (clien side aggregation) i.e when the page renders at all the dynamic spots on the page only the placeholder is placed and when the page is completely loaded these placeholders are filled with data.It means for example we need to render a imagein the banner of theme at first a place holder for the img like a div will be placed which will be filled with an image after page load.
Web2 theme also make sure that when there are multiple portlets on a single page and only one of the portlet needs to be refreshed then whole portal page is not refreshed but only the portion of the portlet is refreshed.Earlier to web 2 theme if we had to achieve this only was to send ajax call from the portlet which needs to be refreshed but in case of web 2 theme even if there is no ajax calls only one portlet is refresh on a page is possible without reloading other portlets and theme.
Portal 7 introduced the concept of page builder theme,this theme provides the logical separation of static content and dynamic content within theme.All the static content of theme like js,css etc are kept in a different logical place than the jsp and jspf's which represent dynamic content.Benefit of this logical separation is that if you just need to add a new js to theme or change a css you now dont need to change it into your theme project of RAD and redeploy theme on WAS.
Static content of theme can be directly accessed by a tool like webdev where you just need to provide the url of logical separation where static content is located and access the folders of static content directly.Also the role of Default.jsp has been degraded in this type of theme,because now all the structure where all things aggregate happens in theme.html file which is located in Static content.
Now for example if you just need to add a new js file to the theme you can just add the new js file using webdev to static content and then refer this new js file in theme.html as its already present in static content folder which can be directly accessed through web dev,thus it saves developer to add the js in theme project,refer js in head.jspf and redeploy the whole war again.
Note : While development its recommended that the js files should be added to js folder and referenced in respective jspf files,above technique is best suited when project is ready and you want to do simple quick change.It must be also noted that in page builder theme default.jsp points to theme.html.
Theme Policy: theme policy is an xml file which have attributes in the form of name value pair,you can copy the default theme policy of portal and change the value of attributes as per you need and apply the theme policy on to the portal page page.We can create multiple theme policy for a portal theme,theme policy tells the theme what needs to be rendered on to the page.For example if in a portal theme we have created a top nav,side nav and a banner,using theme policy we can control what all things from theme are loaded on a particular portal page,i.e on page "xx"if I just want a top nav of theme I will first create a theme policy and set value to top nav as true while values to side nav and banner will be set to false,then I will apply the theme policy on to the portal page "xx" and portal will ensure that only top nav is rendered from theme in page "xx".
We must ensure that all the theme policies for a particular theme must have same set of attributes while the value of each attribute can be different in each of the theme policy.If you need to add a new attribute in theme policy which not present by default in portal theme policy them you will have to also create a bean in theme project and getter and setters of that attribute within the bean apart from adding the attribute to the theme policy.If you are adding your own custom attribute then you will also have to register the theme policy using xml access (only is you have added a custom attribute to theme policy).
Note: Page builder theme of portal 7 do not support theme policy
Color Palette: As mentioned above theme policy allows us to select what all sections of theme are to be loaded on which portal page,likewise color palette allows developers to change the rendering of each section of theme.For example if I have a banner in theme and I want to show this banner in 2 different colors on 2 different portal pages.I will set the different value of color palette in both the portal pages by going into the page properties.
Thus if for page x if I will set in page property value of color palette as red on this page the banner of theme will appear red while on other page property if I will set the value of color palette as blue on this page the banner will apper as blue.
Important thing to note over there is that theme reads these values set in page properties using metadata and use it accordingly.
Code is as follows
<portal-logic:pageMetaData varname="pageMetaData">
<c:set var="headerHostDefault"><c:out value='${pageMetaData["header.host.default"]}'/></c:set>
<c:set var="headerHostSecure"><c:out value='${pageMetaData["header.host.secure"]}'/></c:set>
<c:set var="headerConnectionsUrl"><c:out value='${pageMetaData["header.connections.url"]}'/></c:set>
<c:set var="headerStyle"><c:out value='${pageMetaData["header.style"]}'/></c:set>
</portal-logic:pageMetaData>
In case of page builder theme since theme policy do not
work even to rendering of different sections of theme is done by providing the
values through page parameters and theme reads them from page metadata
and renders the sections like top nav,side nav accordingly.Color palette is default
attribute of portal.If you need to provide your own custom as well as page
parameters you need to also define these values in properties file within theme
apart from adding them to the page,so in the above code the values like
"header.host.default" are set as page properties and defined in
theme's property file as well.
Following are few important tags with respect to theme
