Tuesday, December 20, 2011

Custom ADF Skin: Consume as Library

Tested with JDeveloper: 11.1.2.1.0
Main purpose of this post is for me to have a reference project and proof of concept using an ADF Skin as Library.
Part 1: Skin Application
So first the ADF Skin project should be created. Since JDevR2 this process has been simplified by new ADF Skin wizard.
0000@2728_2728-41266a37beff9ee9
In the next screen just give your skin a name and extend from the fusionFx-simple-v2.desktop Oracle Skin. It is specially designed with extensibility in mind for cusom skins. Fortunataly the recommended skin is selected. (It is not with every ADF/Jdeveloper feature ;). So well done Oracle!
0001@2728_2728-41266a37bfbbbbbc
The following bunch of things is created on the fly
0002@2728_2728-41266a37c0ee2cc1
Now lets create a "green" skin with smallest amount of modifications. This is achieved by opening the CSS file and
go to the "Images" View. Just change some of the colors.
0003@2728_2728-41266a37c2b9d648
And afterwards click "Apply to Skin"
=> This will generate a lot of images according to your color schema.
0004@2728_2728-41266a37c3487043
In order to support versioning of skin I am adding the following to the trinidad-skins.xml
   <version>
     <name>v1</name>
     <default>true</default>
   </version>
=>
0005@2728_2728-41266a37c41b4e82
Now we are ready to bundle the custom skin as ADF library. There is nothing special here. Create the Deployment profile, keep defaults and deploy.
Next step is to test the provisioning of the ADF Skin through ADF Library through File System connection. To do that we create a filesystem connection in the resource pallete
0006@2728_2728-41266a37c59fab0c
The Skin shows up as expected
0007@2728_2728-41266a37c5c8a0ce
Part 2: Consume ADF Skin
a) Create an pure empty Fusion ADF Application by wizard.
b) Select the ViewController project
c) Select adflib-myskin.jarm Right Click and Click add to Project
0008@2728_2728-41266a37c70bc1cd
The Message Pane should output something like
These ADF Library jar items are now in ViewController.jpr
{
  file:/C:/ak/JDeveloper/mywork/TestADFSkin/MySkin/deploy/adflib-myskin.jar
  These are in the project as a result of your ADF jar imports:
  Resource Bundle Variable Resolver from .../TestADFSkin/MySkin/MySkin.jpr
}
d) Apply custom ADF Skin as default in Project Properties>ADF View
0009@2728_2728-41266a37c7b425ed
e) Create a simple JSF Page based on the threeColumnTemplate and  take a look
0010@2728_2728-41266a37c94320ff
At Design-Time there seem to be some problems.
At Runtime it looks as expected
0011@2728_2728-41266a37cb518a6e
Is it a Bug at Design Time?
Using just a QuickLayout everything is as expected also in design time
0012@2728_2728-41266a37cd2f684c
Download Sample Workspaces: http://www.box.com/s/h8mggth460ntujhg7o3r

3 comments:

  1. Did you tried to consume this skin in JDeveloper 11.1.1.x?
    I must do, But I cannot consume the skin in JDev 11.1.1.x

    ReplyDelete
  2. Hi

    in a current project I am building the ADF skin JAR with the Skin Editor 11.1.2 and consume the JAR file 11.1.1.6 based ADF project.

    So, this works for me actually.

    Andreas.

    ReplyDelete
  3. You have to build the JAR in the skin editor, not Jdeveloper.

    My issue is that the skin (skin2) from the JAR is extending a skin (skin1) from another JAR. Loading a test page on the app that contains the skin2 files works fine, and it extends skin1 fine, but when I try to import the JAR containing skin2, skin2 fails to extend skin1.

    ReplyDelete