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 184.108.40.206.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: http://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 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. 220.127.116.11 or 18.104.22.168). Simply set the target version on the project creation dialog. I will be trying this shortly.
- Using ADF Faces 11g Skinning for setting the styles of specific component instances or groups of instances
- Using a rich editor in ADF applications
- ADF 11g – Why use skinning? Why not use simple external CSS stylesheets?
- CSS editor in JDeveloper
- ADF Faces 11g – Rich Text Editor: editing WYSIWYG HTML text in JSF Web Applications
This entry was posted by Luc Bors on June 7, 2011 at 8:34 pm, and is filed under ADF & JHeadstart, Devel. + PL/SQL tools, General, Oracle, Oracle Development Tools, Web/Java. Follow any responses to this post through RSS 2.0.You can skip to the end and leave a response. Pinging is currently not allowed.
- Oracle ADF Virtual Developer Day 2013
- The AMIS Summary of Oracle OpenWorld 2013 is available for download – 60-page white paper
- OOW13: summarizing one week and 2000 sessions in 3 hours and a bit – the yearly AMIS OOW Review session – 10th October
- Case Study: A Case of Fusion Middleware
- Het Oracle OpenWorld Preview Evenement (5 september 2013) – 15 sprekers & sessies
- ADF 12c: Using WebSockets to implement client to client push (in a scalable manner)
- ADF 12c – The Hierarchical Mystery Tour – Treemap, Sunburst, Treetable, Hierarchy Viewer and Thematic Map
- ADF DVT: Sunburst to quickly inspect the hierarchical composition
- JDeveloper 12c & ADF 12c: Launch of the next generation
- Live match report using JMS, BAM, ADF Push and Data Visualization