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.

image1

image2

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

image3

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

image4

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

image5

Define the default package. Press Finish.

image6

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

image7

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.

image8

After pressing OK a number of files is generated.

image9

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.

image10

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

image11

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

image12

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.

image13

Upload the jar file and then press Next.

image14

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

image15

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

image16

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

image17

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.

image18

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s