Changing Skin Version using ADF Shared Library

Using Andrejus's blog about Deploying ADF Applications as Shared Libraries on WLS, I tried to make a shared skin library. I'll try to make this blog quick as Andrejus's blog already says it all.

The only thing I'm trying to figure out though, is how to make the main Running Application change or point to the new Library version without having the need to stop it.

To start with, I created a simple application which already utilizes shared taskflow libraries.

MainApplication - Default

Next I'll create a separate application which contains the CSS file as well as the Trinidad definition (trinidad-skins.xml). We need to create a separate project mainly so that we can deploy it as a shared library which requires it to be a WAR.

sharedDefault.css - Let's keep it simple and obvious, for testing anyway hehe.

Default Shared Skin Project

trinidad-skins.xml

MANIFEST.MF

Shared Skin Library - Deployment Profiles

I created a WAR for my shared library, and an ADF Jar for the application using it. Just a key thing needed for the WAR to work correctly as a shared library, you'll need to configure the MANIFEST as well as the ContextRoot.

WAR Context Root to Empty

MANIFEST.MF Included

So, after running our main application through JDeveloper, we'll get as expected our green screen.

Integrated Run

So that we can see what we could expect when things go wrong, let's try deploying our shared library and deploy our application as well as an EAR without configuring the library reference.

Filter the skin library as part of deployment files

Deployment in Weblogic Console

Here's our FAILED attempt #1.

Console Warning

Failed Attempt

So as you can see, worst thing that could happen is that your application will use simple skin because it can't find the skin you want.

So for this, what we're missing is the weblogic.xml entry for the library-ref. Let's add it now and re-run our page.

weblogic-xml

SUCCESS

Setting-up your Project for Skinning

I'd like to share my workflow whenever i have a requirement to quickly test/skin a certain component in ADF.

First of all, install firebug plugin to your mozilla firefox. Don't worry, this will only help us debug our skinning tags for later.

Create two files which you'll need for skinning on your ViewProject.
1. CSS file (of course) - ( eg. MySimpleSkin.css )
2. trinidad-skins.xml - This is where we will define the Skin name which the css file will be linked.

Let's initially configure the trinidad-skins.xml file to link our css file and also configure trinidad-config.xml to use the skin we defined in trinidad-skins.

By this time we can already create a page to test what we got so far. Any page will do, and since we are now extending to blafplus-rich.desktop then you should notice some major skin change from the fusion skin.

Not exactly the coolest of page but what I'd like you to see is the tags applied when i highlighted the component. Getting a hint yet? Yes those are the tags and no that's not what we want to skin. So to configure the tags to show during debug in firefox, we will need to do a little more configuration.

Configure your web.xml to disable the tag compression.

<context-param>
    <param-name>
                 org.apache.myfaces.trinidad.DISABLE_CONTENT_COMPRESSION
    </param-name>
    <param-value>true</param-value>
  </context-param>

While you're in the web.xml file, let's also set an extra parameter to be true for the time being that we are designing.

  <context-param>   
    <param-name>
            org.apache.myfaces.trinidad.CHECK_FILE_MODIFICATION
    </param-name>
    <param-value>true</param-value>
  </context-param>

Both these settings will help us during our skinning procedure. Take NOTE that these settings needs to be turned off once you're done to save some processing time. More info on these in the Fusion Developers guide.

After running your app the 2nd time around, FireBug should now show you these tags.

I'm guessing by now you're already curious what each tag means, and yes there are a lot. Help document in JDeveloper is your bestfriend on this one as well as skinning tag guides in rea.oracle.com website and of course, practice will let you know and discover how to skin tags.

Some tips while skinning though.

1. If you're unsure that your skin is being applied, try coloring something that will notice you. I usually color the document green.

2. If you're wondering why your skin isn't taking effect, then clear your internet cache.
3. If you're still not sure, then make sure that you skin files (trinidad-config, trinidad-skins) are pointing correctly to the correct css file.
4. Lastly, if you want to merge skin files (css.files) the best way i found to do this is by using the skin addition in trinidad skins.

Example for #4 is if I'd like to let's say split css files depending on the component or for themes.

Hope that helps in setting your skinning project.