Skinning BPM Worklist & Humantasks fig1

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.

Skinning BPM Worklist & Humantasks fig4

          Skinning BPM Worklist & Humantasks fig14

 

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).

Skinning BPM Worklist & Humantasks fig1

 

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

Skinning BPM Worklist & Humantasks fig2

 

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

Skinning BPM Worklist & Humantasks fig3

 

Define the default package. Press Finish.

Skinning BPM Worklist & Humantasks fig8

 

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’.

Skinning BPM Worklist & Humantasks fig9

 

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.

Skinning BPM Worklist & Humantasks fig10

 

After pressing OK a number of files is generated.

Skinning BPM Worklist & Humantasks fig11

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.

Skinning BPM Worklist & Humantasks fig12

 

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’.

Skinning BPM Worklist & Humantasks fig13

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).

 

Skinning BPM Worklist & Humantasks fig17

 

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.

Skinning BPM Worklist & Humantasks fig18

 

Upload the jar file and then press Next.

Skinning BPM Worklist & Humantasks fig19

 

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

Skinning BPM Worklist & Humantasks fig20

 

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

Skinning BPM Worklist & Humantasks fig21

 

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 BPM Worklist & Humantasks fig24

 

 

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.

Skinning BPM Worklist & Humantasks fig25