Skinning BPM Worklist & Humantasks

In this post I will describe how to create a custom skin and how to apply this skin to the BPM Worklist and the accessory humantasks.

Before I start explaining how to do this, I will first explain the relation between the worklist and humantasks. The BPM WorklistApp is a ‘stand-alone’ application that is deployed on the WebLogic Application Server. The same is true for the different Humantask projects. This means the Humantask projects are also deployed as ‘stand-alone’ application on the WebLogic Application Server. Every application is using a skin on it’s one. Using a custum skin means you have to apply the skin to every application separately.

I will first describe how to create a Custom skin and how to apply it to the BPM worklist.  After that I will describe how to re-use this skin in the separate Humantask projects.

Skinning the BPM Worklist

To get the best tooling help currently available use JDeveloper 11.1.2.1. This version has full skinning support, while 11.1.1.x does not. You can use the Studio Edition Version or the Skin Editor Version.

         

 

In the rest of this post I describes the steps using the Studio Edition Version (I think this version is used more often because of it’s richer functionality). If you use the Skin Editor Version the step are more or less the same.

 

Create a new Skin

For a start, create a New Application (or extend an existing application with the project).

 

Specify the application name and the associated package prefix. Press Next.

 

Give the project a name (MidOfficeSkin). Press Next.

 

Define the default package. Press Finish.

 

The next step will be the creation of the ADF Skin.

Choose New from the ‘File Menu’ and select ADF Skin in de ‘New Gallery’.

 

Specify a name for the Skinning StyleSheet.

At this point, you have to pick the skin you like to extend. I choose for the default BPM Worklist skin

(fusionFx-v2.desktop). Press OK.

 

After pressing OK a number of files is generated.

For now only the both trinidad files and the css file are interesting.

The trinidad-config.xml file contains the name of the new ‘skin-family’.

<?xml version="1.0" encoding="windows-1252"?>
<trinidad-config xmlns="http://myfaces.apache.org/trinidad/config">
  <skin-family>MidOfficeArnhem</skin-family>
</trinidad-config>

 

trinidad-skins.xml contains the implementation of this new ‘skin-family’.

<?xml version="1.0" encoding="windows-1252"?>
<skins xmlns="http://myfaces.apache.org/trinidad/skin">
  <skin>
    <id>MidOfficeArnhem.desktop</id>
    <family>MidOfficeArnhem</family>
    <extends>fusionFx-v1.desktop</extends>
    <render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
    <style-sheet-name>skins/MidOfficeArnhem/MidOfficeArnhem.css</style-sheet-name>
    <bundle-name>resources.skinBundle</bundle-name>
  </skin>
</skins>

 

The css file contains the customizations. Initially this file is empty because no custom changes are made.

 

By default taskfield labels are aligned to the right side and taskfield values to the left. We will align both to the left by making a custom change to the skin.

Open the css file. Select the ‘Panel Form Layout’ component underneath the ‘Faces Component Selectors’. Open the component and select ‘label-cell’.

Our customization: Change ‘Text Align’ to ‘left’ in the property window at the right side of the screen.

 

Deploying the new Skin

From JDeveloper, deploy the Skin to a Jar file (create a deployment profile if this is not done already).

 

 

After that, deploy the jar file to WebLogic. For this: Logon into the WebLogic Console. Select Deployments in the ‘Domain Structure’. After that, select Install.

 

Upload the jar file and then press Next.

 

WebLogic assumes you want to deploy a library. This is correct. Press Next.

 

The ‘Install Application Assistant’ appears. Leave all defaults and press Finish.

 

Congratulations, the new skin is installed.

But to actually use it in the BPM Worklist we need to do one more thing. Restart the WorklistApp. Yoe can do this also from the WebLogic console (Deployments –> worklistapp).

And the final result in the Worklist (left versus right alignment):

 

 

Skinning Humantasks

To re-use this skin in Humantask projects is very easy. You only need to copy a number of directories and files from the skinning project to the Humantask project.

– directory         public_html\skins

– directory         public_html\META-INF

– file                  public_html\WEB-INF\trinidad-config.xml

– file                 public_html\WEB-INF\trinidad-skins.xml

 

After deploying the Humantask the new skin is used.