First off this post is not a guide to skinning but an advanced overview of WebCenter skins; how they are put together and my recommended best practise for creating a new skin in PS5.
Oracle ADF has always had a number of skin families that you could choose; I believe when I started skinning WebCenter Spaces PS1 there were around 10 to choose extending from blafplus-rich.
ADF uses hierarchical relationship to skinning with its base skin family called “Simple” (which contains minimal ADF formatting) all skins inherit this base and may extend from it or another skin or set of skins.
To give you a better understanding of this current hierarchy here is the Inheritance Relationship diagram of ADF Skin Families Provided by Oracle ADF Docs
With WebCenter Spaces PS1/2 blafplus-Rich was the default skin with the other skins extending from it.
Here are some examples of those skins that can still be used today.
skinFamily: default
skinId: default.desktop
skinExtends: blafplus-rich.desktop
skinFamily: monochrome
skinId: monochrome.desktop
skinExtends: default.desktop
skinFamily: olive
skinId: olive.desktop
skinExtends: default.desktop
skinFamily: white
skinId: white.desktop
skinExtends: default.desktop
skinFamily: onyx
skinId: onyx.desktop
skinExtends: default.desktop
skinFamily: storm
skinId: storm.desktop
skinExtends: default.desktop
skinFamily: bluesky
skinId: bluesky.desktop
skinExtends: default.desktop
skinFamily: deepsea
skinId: deepsea.desktop
skinExtends: default.desktop
BlafPlus Overview
As you can see above blafplus-rich extends from blafplus-medium which extends from the Simple family.
The skins I list above all extend from blafplus-rich.
The main difference between blafplus-medium, blafplus-rich is that Rich provides more styling than the blafplus-medium skin adding graphics and improving the overall look and feel.
A word of warning as of PS3 blafplus has now been depreciated in favour of the new fusion skin family.
This includes the WebCenter Portal that was released with PS3.
So lets take a look at Fusion..
The fusion family (fusion-base) now defines the default styles for the ADF Faces components.
You can see the tree splits into 2 paths one path to fusionFX and the other to fusionFX-simple.
Fusion FX is the latest and greatest skin; if your not interested in skinning, colour schemes branding and want your site/app to look good this is the skin to use.
As of ADF 11g Release 2 (11.1.2.0.0) there are a few additional skins not listed in the diagram (fusionFx-v1.1, fusionFx-v2) these are not yet in WebCenter Spaces as of PS5, maybe PS6 OR 7 we’ll see. (Reading the docs V1.1 is included as part of PS4 but I couldn’t find it in my install)
Spaces/Portal PS5 has only 2 built in skins (Fusion FX, Spaces FX)
FusionFX Skin Extends from:
fusionFx-v1.desktop
-webcenter-fusion-internal.desktop
–webcenter-fusion.desktop
SpacesFX Skin Extends from:
fusionFx-v1.desktop
-webcenter-fusion-internal.desktop
–webcenter-fusion.desktop
—webcenterfx.desktop
skinFamily: webcenter-fusion-internal
skinId: webcenter-fusion-internal.desktop
skinExtends: fusionFx-v1.desktop
skinFamily: webcenter-fusion
skinId: webcenter-fusion.desktop
skin Extends: webcenter-fusion-internal.desktop
skinFamily: webcenterfx
skinId: webcenterfx.desktop
skin Extends: webcenter-fusion.desktop
Note:: SpacesFX (fusionFx-v1.desktop) is currently the most common skin to extend from.
So you can see Fusion FX V1 is currently being used for Portal/Spaces with SpacesFX extended from FusionFX (webcenterfx.desktop) applying its own look/feel customisations.
Some of the other skins you may want to try out that I dont believe are listed..
skinFamily: deepseafx
skinId: deepseafx.desktop
skinExtends: webcenter-fusion.desktop
skinFamily: duskfx-internal
skinId: duskfx-internal.desktop
skinExtends: webcenter-fusion-internal.desktop
skinFamily: monochromefx
skinId: monochromefx.desktop
skinExtends: duskfx-internal.desktop
skinFamily: mistfx-internal
skinId: mistfx-internal.desktop
skinExtends: webcenter-fusion-internal.desktop
skinFamily: whitefx
skinId: whitefx.desktop
skinExtends: mistfx-internal.desktop
skinFamily: wccollabfx
skinId: wccollabfx.desktop
skinExtends: webcenterfx.desktop
Recomendations
With PS1/2 I create new skins based off the Simple Skin Family; as there were minimal amounts of customisation providing a lightweight skeleton structured framework to work from. The problem with using BlafPlus or FusionFX and extending a skin from here is there is a lot of overhead and rewriting of styles which aren’t stripped by the ADF Skin renderer.
For example; I have a adf style af|showDetailFrame::header-start & end with medium chrome applied. By default the fusion fx skin provides corner graphics in the header of the show detail frame. If I want to get rid of this I have to overwrite the style within my extended stylesheet by adding background-image:none; as this style is featured lower in the stylesheet it overrides the property background-image.. This causes alot of unnecessary bloatware, especially if your skinning to a design agencies requirement. It also wastes a lot of time as you are constantly reviewing which styles have to be overwritten or normalised.. The simple skin provides a lightweight framework so you no longer need to concentrate on the vast styles that may need overwriting.
Now I find it strange that WebCenter doesn’t include FusionFX-Simple skin. As of PS3 you could still use the Simple Skin Family but if you’ve tried the Simple skin with an out of the box template you will see some issues for example the af|decorativeBox container requires additional skinning and a bit of cleanup is required for the ADF to look clean.
So first thing is to create your FusionFX-Simple skin for WebCenter Portal/Spaces. Head over to Java.net
http://java.net/projects/jdev-extensions/downloads/directory/skins
If you are using PS3 download and install Fusion ADF Simple Skin otherwise PS4+ download and install Fusion ADF Simple Skin v1.1.
Package and deploy this to your environment.
Update your trinidad files (a good guide can be seen here).
Now you should have a lightweight easy to skin skeleton CSS framework for WebCenter to extend from –
skinFamily: skeleton
skinId: skeleton.desktop
skinExtends: fusionFx–simple –v1.1.desktop
