X

The blog for hints & tips about Oracle Application Development Framework and Mobile Application Framework

  • ADFv
    August 2, 2011

Suggested skin editor workflow

Frank Nimphius
Master Principal Product Manager

Following the work flow outlined below helps you to create
a custom skin for your AD Faces application using the integrated or stand alone
skin editor.

Integrated Skin Editor

The integrated skin editor is good to use for projects that
are migrated or newly created in Oracle JDeveloper 11g R2.

1. Create a skin
project
. Skins are reusable components and as such should be created in
their own project or workspace.

2. Create a
new skin by extending an existing skin
. Oracle ADF Faces provides simplified
default skins, like fusionFx-simple-v2.desktop, that are specifically designed to
be extended by custom skins. Note that Fx-simple-v2 is not available for releases
before Oracle JDeveloper 11g R2. If you are on an 11.1.1.x version of Oracle
JDeveloper, use the stand-alone editor. The stand-alone editor helps with which
default skins are available for the target version you build the skin for.

3. Analyze
the application for the components to skin
. Identify the components in a
page that you want to skin and map them to skin selectors using the ADF Faces
skin editor.

4. Identify
global alias selectors to skin first
. Alias selectors are the 20% of work
that color 80% of the components in an application.

5. Define
custom :alias definitions:
Custom :alias definitions simplify maintenance
of style definitions used on multiple components. Custom :alias definitions are
applied using the –tr-rule-ref
selector,

6. Generate
images and icons
. Use the ADF Faces skin editor to generate custom colored
versions of ADF Faces component images and icons.

7. Edit the
skin CSS file using the skin editor
. Use the skin editor to discover skin
selectors for the components and behavior you want to skin and apply the
changes using the Properties Inspector.

8. Deploy
the skin in an ADF library
. Skins can and should be reused. For this,
create an ADF library deployment profile from the skin project and deploy the skin
in a JAR file.

9. Frequently
test your custom skin in a browser
. Reference the skin JAR file from the ViewController
project of the target application. Set the custom skin family name in the
skin-family element of the target application trinidad-config.xml file.

10. Deploy
the skin as a shared library to WebLogic server
. Optionally, if a custom
skin is shared across applications, deploy the skin ADF library JAR file as a
shared library to Oracle WebLogic server and edit the applications' weblogic-application.xml
file to reference it.

Stand-alone Skin Editor

The stand-alone skin editor allows you to build custom
skins for projects build with Oracle JDeveloper 11.1.2, 11.1.1.5 and 11.1.1.4. If
you build sins for JDeveloper versions prior to 11.1.1.4, just make sure you
either don't extend an existing skin or extend one that exists in the target JDeveloper
version. Note that the FusionFx simple skin is not available for all version of
JDeveloper.

You could extend the "fusion" skin instead, which
however is more difficult to skin as it isn't reduced to using global alias
selectors as the simple skins do.

The work flow to follow for the stand alone editor is
comparable to using the integrated editor

1. Create a skin
project
. Skins are reusable components and as such should be created in
their own project or workspace. Never open a JDeveloper 11.1.1.x project
directly in the stand alone skin editor as it is JDeveloper 11.1.2 based and
thus will migrate the project to JDeveloper 11.1.2 and JSF 2.0.

2. Create a
new skin by extending an existing skin
. Oracle ADF Faces provides simplified
default skins, like fusionFx-simple-v2.desktop, that are specifically designed to
be extended by custom skins. When creating a new skin project, select the
target version of Oracle JDeveloper you build the skin for, which then
automatically updates the list of available default skins for this platform.

3. Analyze
the application for the components to skin
. Identify the components in a
page that you want to skin and map them to skin selectors using the ADF Faces
skin editor.

4. Identify
global alias selectors to skin first
. Alias selectors are the 20% of work
that color 80% of the components in an application.

5. Define
custom :alias definitions:
Custom :alias definitions simplify maintenance
of style definitions used on multiple components. Custom :alias definitions are
applied using the –tr-rule-ref
selector,

6. Generate
images and icons
. Use the ADF Faces skin editor to generate custom colored
versions of ADF Faces component images and icons.

7. Edit the
skin CSS file using the skin editor
. Use the skin editor to discover skin
selectors for the components and behavior you want to skin and apply the
changes using the Properties Inspector.

8. Deploy
the skin in an ADF library
. Skins can and should be reused. For this,
create an ADF library deployment profile from the skin project and deploy the skin
in a JAR file.

9. Frequently
test your custom skin in a browser
. Reference the skin JAR file from the ViewController
project of the target application. Set the custom skin family name in the
skin-family element of the target application trinidad-config.xml file.

10. Deploy
the skin as a shared library to WebLogic server
. Optionally, if a custom
skin is shared across applications, deploy the skin ADF library JAR file as a
shared library to Oracle WebLogic server and edit the applications' weblogic-application.xml
file to reference it.

You can take this work flow as a starting point to refine and build your own. I am sure there is a lot more to add, like skin debugging, before this laundry list can become an idiots-guide. Anyway, I am interested in hearing back from you of what you think would be a valuable addition to this work flow. I opened a thread on the JDeveloper forum on OTN for this:.

http://forums.oracle.com/forums/thread.jspa?threadID=2262307&tstart=0

At the end of the month, I'll then put it all together in the monthly OTN harvest for August published on the ADF Code Corner Website:

http://www.oracle.com/technetwork/developer-tools/adf/learnmore/index-101235.html 

You can download the stand-alone ADF Faces Skin Editor from here: http://www.oracle.com/technetwork/developer-tools/adf/downloads/index.html

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.