ADF 11g R2 : Skin Editor First Impressions

With JDeveloper 11gR2 the skineditor is finally there. I share my first impressions in this post. When you need a skin for your application in previous versions, some configuration was needed. With 11gR2 it is much easier.
So what are the skinning features included in 11gR2 and in the skin editor ? The new JDeveloper editor is available starting in 11.1.2.0.0 for creating and editing ADF skin files. The core features include:
* ability to extend from one of the ADF skins as a starting point
* selector tree listing all the possible skin selectors for ADF Faces and DVT including style classes, global aliases, and pseudo-elements
* preview pane that renders components and reflects changes made to their skin selectors in real-time
* inheritance information showing where existing, default properties values are coming from in the skin hierarchy
* support for seeing which set of components and selectors are utilizing a particular global alias
* support for editing skin selectors for a particular theme
* image generation capabilities based on color aliases when extending a fusionFx-simple skin
How does this work ?
When you need to create a new skin, from within the new gallery you can now pick create “ADF Skin” .

It will create a new css file, define a skinfamily and use that family as the default skinfamily. It is also possible to extends your new skin from existing ones.

All configuration files (trinidad-config and trinidad-skins) are created for you and even a skinBundle is created (more info on what this does: https://technology.amis.nl/blog/8254/adf-11g-skinning-three-ways-to-change-look-and-feel).

<?xml version="1.0" encoding="windows-1252"?>
<skins xmlns="http://myfaces.apache.org/trinidad/skin">
  <skin>
    <id>MyCustomSkin.desktop</id>
    <family>MyCustomSkin</family>
    <extends>fusionFx-simple-v2.desktop</extends>
    <render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
    <style-sheet-name>skins/MyCustomSkin/MyCustomSkin.css</style-sheet-name>
    <bundle-name>nl/amis/technology/view.skinBundle</bundle-name>
  </skin>
</skins>

But that is only initial creation and configuration. What about actually editing the skin ? When you open the css file, you will immediately see the skin editor. Lets look at an example. The commandbutton component. The defaults (that is the once inherited from the skin that your skin extends from) are displayed.

Now lets change the color to Fuchsia. Not because I like that, but because this is what we can see easy.

Now that is simple, and because we now what we just did, it is easy to find the changes. But what if we were to open this skin after a couple of months and need to examine the changed selectors ? Did you notice the dropdownbox in the upperleft corner of the skineditor ?

Here you can select Update Selector. When you do that, you will only see the ones that were actually changed (Duh). But still, imagine that you need to find jus this single one in the whole bunch of existing selectors.

Not only for all ADF Components, but also for all DVT Components there is now the possibity to change skins and see what the result is before you deploy the application. For the gauge for instance you can skin it, and also see the effects in the different display types for the gauge (see image below).

Only for 11gR2 ?
No, the skinm editor is also available as a standalone product. I allready downloaded it, but didn’t get to installing it. According to documentation, the standalone version allows creation of skins for earlier versions of ADF web applications (ie. 11.1.1.4 or 11.1.1.5). Simply set the target version on the project creation dialog. I will be trying this shortly.

Related links:

ADF and JDeveloper downloads
Oracle® Fusion Middleware Installation Guide for Oracle Application Development Framework Skin Editor