Suggested skin editor workflow

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

Comments:

Post a Comment:
Comments are closed for this entry.
About

The Oracle JDeveloper forum ranks in the Top 5 of the most active forums on the Oracle Technology Network (OTN).



The OTN Harvest blog is a summary of selected topics posted on the OTN Oracle JDeveloper forum.



It is an effort to turn knowledge exchange into an interesting read for developers who enjoy little nuggets of wisdom





Frank Nimphius

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today