custom theme creation websphere portal 8.5

CUSTOM THEME CREATION WEBSPHERE

PORTAL 8.5 CF1

Michele Buccarello

8/12/2014

This document describe how to create a custom theme for portal 8.5 CF1.

CUSTOM THEME CREATION WEBSPHERE PORTAL 8.5 CF1

Custom Theme Portal 8.5 CF1 Author:Michele Buccarello Page 1

Table of Contents ENVIROMENT CHECK ................................................................................................................................... 2

EXTRACT THEME DYNAMIC AND STATIC PART ............................................................................................. 2

Extract Dynamic part................................................................................................................................ 2

Extract Static part .................................................................................................................................... 3

Preparing RAD 9.1 for theme packaging ....................................................................................................... 4

Preparation for dynamic area................................................................................................................... 4

Create the dynamic war ....................................................................................................................... 4

Preparation for static area ....................................................................................................................... 7

Create the static war ............................................................................................................................ 7

Setting the access in web.xml ............................................................................................................... 9

Preparing the EAR for deployment ........................................................................................................... 9

CREATING DYNAMIC CONTENT SPOTS ......................................................................................................... 9

Changes introduced in Portal 8.5 ............................................................................................................. 9

Create the plugin.xml in the dynamic war ...............................................................................................11

Replace the module in all theme profiles ................................................................................................14

Replace the new Dynamic Content Spots ...................................................................................................14

Deploy Theme and Register in Websphere Portal via xmlaccess .................................................................15

Deploy the ear in console ........................................................................................................................15

Register theme with the xml access below ..............................................................................................17

Use Theme Analyzer Portlet and Validation Report .................................................................................21



ENVIROMENT CHECK

This guide cover the creation of custom theme for websphere Portal 8.5. To package the theme you need:

1) RAD 9.1 (older version are supported but install the suggested version)

2) WebDav Client ( I use CyberDuck )

3) Portal 8.5 cf1 on a local or remote machine ( in my case I have a local installation)

EXTRACT THEME DYNAMIC AND STATIC PART

Websphere Portal 8.5 theme is composed by two area:

- Static Files located in webdav store

- Dynamic Files located in the Default85 theme

You need to copy this two area of files in two separated folders, in my case I create on folder named

Portal_85_theme and in this folder you need to create two folder:

- theme_dynamic

- theme_static

Extract Dynamic part The dynamic part in my case is located in:

C:\IBM85\WebSphere\PortalServer\theme\wp.theme.themes\default85\installedApps\DefaultTheme85.ear

\DefaultTheme85.war

In this folder you see:



You need to copy only the folders :

- skins

- themes

- WEB-INF

In the WEB-INF folder delete the files:

- Web.xml

- ibm-web-bnd.xmi

- ibm-web-ext.xmi

Extract Static part Download via webdav client or via url this folder “themes”, you could use this url

http://localhost:10039/wps/mycontenthandler/dav/fs-type1/themes/?mime-type=application/zip

unzip the file in the theme_static folder

Go inside and delete the folder Toolbar85.

Rename the folder Portal8.5 in CustomTheme85.

http://localhost:10039/wps/mycontenthandler/dav/fs-type1/themes/?mime-type=application/zip



Preparing RAD 9.1 for theme packaging

In these steps we made an EAR with two WAR, one for static area and one for dynamic area.

Preparation for dynamic area

Create the dynamic war

1) Create new Dynamic Web Project and then press next



2) Select as target runtime WebSphere Application Server v8.5, web module version 2.4

Press next next review the context root if is right and then press finish.

3) Now copy the resources located in the dynamic folder in the webcontent directory of the dynamic

war, below you see the screenshot and a map of the file location :

skins → WebContent/skins

themes → WebContent/themes

WEB-INF/ → WebContent/WEB-INF



Preparation for static area In this part you need to create the WAR and setting the access in the web.xml file for static resources.

Create the static war

1) Create new Dynamic Web Project



Press next next and in the final window check the context root and then press finish.

2) Now copy the resources located in the static folder in the webcontent directory of the static war,

below you see the screenshot and a map of the file location :

themes → WebContent/themes



Setting the access in web.xml

In this step you need to add the yellow line to enable the access for anonymous user to the static files and

remove the green line. The web.xml is located in CustomThemeStatic\WebContent\WEB-INF\web.xml

<?xml version="1.0" encoding="UTF-8"?>

<web-app id="WebApp_ID"

version="2.4"

xmlns="http://java.sun.com/xml/ns/j2ee"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-

app_2_4.xsd">

<display-name>CustomThemeStatic</display-name>

<welcome-file-list>

<welcome-file>index.html</welcome-file>

<welcome-file>index.htm</welcome-file>

<welcome-file>index.jsp</welcome-file>

<welcome-file>default.html</welcome-file>

<welcome-file>default.htm</welcome-file>

<welcome-file>default.jsp</welcome-file>

</welcome-file-list>

<context-param>

<description>A regular expression that defines which of the resources in the WAR file

can be served by the portal war datasource. </description>

<param-name>com.ibm.portal.whitelist</param-name>

<param-value>.*</param-value>

</context-param>

<context-param>

<description>A regular expression that defines which of the resources in the WAR file

cannot be served by the portal war datasource.</description>

<param-name>com.ibm.portal.blacklist</param-name>

<param-value>WEB-INF/.*</param-value>

</context-param>

</web-app>

Preparing the EAR for deployment

Right-click on the EAR project (in my case is Custom8001ThemeCF5) and select Java EE -- Prepare for deployment.

CREATING DYNAMIC CONTENT SPOTS

Changes introduced in Portal 8.5 In the portal 8 to create dynamic content spot people log on to the WebSphere Integrated Solutions

Console and follow this steps:

- Go to Resources -> Resource Environment -> -> Resource environment providers -> WP

DynamicContentSpotMappings.

- Select Custom Properties.

- Select New



- Add the “custom properties”

At the link below you find the official documentations for creating the dynamic content spots in portal 8

http://www-

10.lotus.com/ldd/portalwiki.nsf/xpDocViewer.xsp?lookupName=V8+Update%3A+Supplemental+Document

ation#action=openDocument&res_title=Creating_a_dynamic_content_spot_wp8001&content=pdcontent

http://www-

10.lotus.com/ldd/portalwiki.nsf/xpDocViewer.xsp?lookupName=V8+Update%3A+Supplemental+Document

ation#action=openDocument&res_title=Working_with_dynamic_content_spots_wp8001&content=pdcont

ent

From portal 8.0.0.1 also is possibile to register via plugin.xml all dynamic content spot but you must reboot

portal to register the dynamic content spot in the plugin.xml.

In portal 8.5 the resources aggregation framework is able to dynamically load every dynamic content spot

or module registered via plugin.xml, to load the changes simply use the theme analyzer portlet ( THANKS

FOR THIS GREAT TOOL!!!!) go in control center and click invalidate cache link.

http://www-10.lotus.com/ldd/portalwiki.nsf/xpDocViewer.xsp?lookupName=V8+Update%3A+Supplemental+Documentation#action=openDocument&res_title=Creating_a_dynamic_content_spot_wp8001&content=pdcontent



http://www-10.lotus.com/ldd/portalwiki.nsf/xpDocViewer.xsp?lookupName=V8+Update%3A+Supplemental+Documentation#action=openDocument&res_title=Working_with_dynamic_content_spots_wp8001&content=pdcontent






Create the plugin.xml in the dynamic war

Replace the content of plugin.xml file with the xml below

<?xml version="1.0" encoding="UTF-8"?> <plugin id="customTheme_dynamicContentSpots_85" name="8.5 Custom Theme Modules" provider-name="IBM" version="1.0.0"> <extension id="customTheme_dynamicContentSpots_85" point="com.ibm.portal.resourceaggregator.module"> <module id="customTheme_dynamicContentSpots_85"> <title lang="ar" value="8.5 الرئيسي النسق الى الديناميكية المحتويات نقاط"/> <title lang="ca" value="Àrees de contingut dinàmic per al tema 8.5"/> <title lang="cs" value="Dynamický obsah pro motiv 8.5"/> <title lang="da" value="Dynamiske indholdsspot for 8.5-tema"/> <title lang="de" value="Dynamische Inhaltsbereiche für das 8.5-Motiv"/> <title lang="el" value="Σημεία δυναμικού περιεχομένου για το θέμα έκδοσης 8.5"/> <title lang="en" value="Dynamic Content Spots for the 8.5 Theme"/> <title lang="es" value="Áreas de contenido dinámico para tema 8.5"/> <title lang="fi" value="Dynaamiset sisältöpisteet version 8.5 teemaan"/> <title lang="fr" value="Zones de contenu dynamique pour le thème 8.5"/> <title lang="he" value="8.5 ערכה עבור דינמית תוכן נקודת"/> <title lang="hr" value="Dinamičke točke sadržaja za 8.5 temu"/> <title lang="hu" value="Dinamikus tartalomhelyek a 8.5 témához"/> <title lang="it" value="Content spot dinamico per il tema 8.5"/>

<title lang="ja" value="8.5 テーマ用の動的コンテンツ・スポット"/> <title lang="kk" value="8.5 тақырыбына арналған Динамикалық мазмұн орындары"/>

<title lang="ko" value="8.5 테마를 위한 동적 컨텐츠 스팟"/>

<title lang="nl" value="Dynamische contentspots voor het 8.5-thema"/> <title lang="no" value="Dynamic Content Spots for the 8.5 Theme"/> <title lang="pl" value="Dynamiczne obszary danych dla kompozycji w wersji 8.5"/> <title lang="pt" value="Pontos de conteúdo dinâmico para o Tema 8.5"/> <title lang="pt_BR" value="Pontos de Conteúdo Dinâmico para o Tema 8,5"/> <title lang="ro" value="Spoturi de conţinut dinamice pentru tema 8.5"/> <title lang="ru" value="Динамические области информации для темы 8.5"/> <title lang="sk" value="Miesta dynamického obsahu pre tému 8.5"/> <title lang="sl" value="Točka dinamične vsebine za temo 8.5"/> <title lang="sv" value="Dynamiska innehållspunkter för 8.5-temat"/> <title lang="th" value="จุดแสดงเนื้อหาไดนามกิส าหรบั 8.5 Theme"/> <title lang="tr" value="8.5 Teması İçin Dinamik İçerik Noktaları"/> <title lang="uk" value="Області динамічного вмісту для теми 8.5"/>

<title lang="zh" value="8.5 主题的动态内容点"/>

<title lang="zh_TW" value="8.5 佈景主題的動態內容點"/> <description lang="ar" value="الرئيسي للنسق الديناميكية المحتويات نقاط كل تعريف يتم الل ذلك يسمح .8.5 الل من ديناميكية محتويات نقطة أي باح </".أخرى برامج وحدات خ<description lang="ca" value="Defineix totes les àrees de contingut dinàmic per al tema 8.5. Això permet superposar fàcilment les àrees de contingut dinàmic a través d'altres mòduls."/> <description lang="cs" value="Definuje veškerý dynamický obsah pro motiv 8.5. To umožňuje snadno překrýt libovolný dynamický obsah prostřednictvím jiných modulů."/> <description lang="da" value="Definerer alle dynamiske indholdsspot for 8.5-temaet. Herved bliver det nemt at overlejre et hvilket som helst indholdsspot via andre moduler."/>



<sub-contribution type="markup" ref-id="customTheme85_head"> <uri value="res:{war:context-root}/themes/html/dynamicSpots/head.jsp"/> </sub-contribution> <sub-contribution type="markup" ref-id="customTheme85_status"> <uri value="mc:wp_status_bar@res:{war:context-root}/themes/html/dynamicSpots/status.jsp"/> </sub-contribution> </contribution> </module> </extension> </plugin>

Replace the module in all theme profiles

In the static war go in the profiles folder and replace in all profiles wp_dynamicContentSpots_85 with

customTheme_dynamicContentSpots_85

Replace the new Dynamic Content Spots

Change the dynamic content spots in every file in the NLS folder.

The location of this files is “CustomThemeStatic/WebContent/themes/CustomTheme85/nls/* “

This change must be done for all theme_*.html files , for a fast replace I use notepad++ I open every

theme_xx.html and I do a find replace in all opened document, and in the find replace box I put:

- FIND: 85theme_

- REPLACE: CustomTheme85_



Deploy Theme and Register in Websphere Portal via xmlaccess In this part is described the installation process of the theme and the registration process in websphere

portal via xmlaccess.

Deploy the ear in console

Export the ear from rad and install in portal via the integrated solution console:

Press NEXT



Register theme with the xml access below

Save the xml below in a file and import via portal administration.



<?xml version="1.0" encoding="UTF-8"?>

<request xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:noNamespaceSchemaLocation="PortalConfig_8.0.0.xsd" type="update" >

<portal action="locate">

<skin action="update" active="true" context-root="/CustomThemeDynamic" default="false"

domain="rel" resourceroot="custom" type="default"

uniquename="com.ibm.portal.custom.theme.skin85.hidden">

<localedata locale="en">

<title>Custom Hidden Skin</title>

</localedata>

<parameter name="com.ibm.portal.skintype" type="string"

update="set"><![CDATA[template]]></parameter>

<parameter name="com.ibm.portal.skin.template.file.name.html" type="string"

update="set"><![CDATA[skin.html]]></parameter>

<parameter name="com.ibm.portal.skin.template.ref" type="string"

update="set"><![CDATA[war:CustomThemeStatic/themes/CustomTheme85/skins/Hidden/]]></parameter>

</skin>





uniquename="com.ibm.portal.custom.theme.skin85.hiddenplus">


<title>Custom Hidden Plus Skin</title>

</localedata>






update="set"><![CDATA[war:CustomThemeStatic/themes/CustomTheme85/skins/HiddenPlus/]]></parame

ter>

</skin>



uniquename="com.ibm.portal.custom.theme.skin85.noskin">


<title>Custom NoSkin Skin</title>

</localedata>






update="set"><![CDATA[war:CustomThemeStatic/themes/CustomTheme85/skins/NoSkin/]]></parameter>

</skin>



uniquename="com.ibm.portal.custom.theme.skin85.standard">


<title>Custom Standard Skin</title>



</localedata>






update="set"><![CDATA[war:CustomThemeStatic/themes/CustomTheme85/skins/Standard/]]></paramete

r>

</skin>

<theme action="update" active="true" context-root="/CustomThemeDynamic" default="false"

defaultskinref="com.ibm.portal.custom.theme.skin85.noskin" domain="rel" resourceroot="dynamicSpots"

uniquename="com.ibm.portal.custom.theme.theme85">


<title>Custom Theme</title>

<description/>

</localedata>

<allowed-skin skin="com.ibm.portal.custom.theme.skin85.hidden" update="set"/>

<allowed-skin skin="com.ibm.portal.custom.theme.skin85.hiddenplus" update="set"/>

<allowed-skin skin="com.ibm.portal.custom.theme.skin85.noskin" update="set"/>

<allowed-skin skin="com.ibm.portal.custom.theme.skin85.standard" update="set"/>

<parameter name="com.ibm.portal.friendly.name" type="string"

update="set"><![CDATA[CustomThemeDynamic]]></parameter>

<parameter name="com.ibm.portal.layout.template.href" type="string"

update="set"><![CDATA[war:CustomThemeStatic/themes/CustomTheme85/layout-

templates/TopColumn2ColumnUnequal/]]></parameter>

<parameter name="com.ibm.portal.theme.template.ref" type="string"

update="set"><![CDATA[war:CustomThemeStatic/themes/CustomTheme85/]]></parameter>

<parameter name="com.ibm.portal.theme.aggregationmodes" type="string"

update="set"><![CDATA[ssa]]></parameter>

<parameter name="resourceaggregation.profile" type="string"

update="set"><![CDATA[profiles/profile_deferred.json]]></parameter>

</theme>



</portal>

</request>

Use Theme Analyzer Portlet and Validation Report In WebSphere Portal 8.5 in the portal administration there is a new portlet that help theme analysis.

In this portlet there are many useful reports and utilities, below the steps to run the theme validation

report:



If you want to add new dynamic content spot in the plugin after the first deploy, to load the new dynamic

content spot you must invalidate the cache via Theme Analizer Portlet, below the steps to do the

invalidation:



After click to the link



And in the SystemOut.log you should see something like this

custom theme creation websphere portal 8.5

Software

dynamic theme

cf1 custom theme portal

creation of custom theme

theme packaging

default85 theme

theme profiles

dynamic area

static extract dynamic