The Ultimate Guide for Beautiful Skinning in ADF and WebCenter - Using SASS

ADF & SASS

Prologue:

Long time no posts, I’ve been busy coding in the last couple of months, and as the life always do, I really didn’t have much time writting posts, instead I was busy rocking ADF and WebCenter projects.

The Problem:

As all of you ADFers know, skinning in ADF has been pain in the butt, and as Skinning and style is a crucial part for any ADF application, there has to be some way in order to make this work easier.

So Oracle -thankfully- made JDeveloper 11.1.2.x and/or the ADF Skinning application in order to make it easier for ADF developers to write skins effectively with all electors, images editor, preview pane and all this good stuff.

Did it become easier?

No -well a little bit, but not to that extent-, as the selectors of ADF is overwhelming, and as you needed to structure your skin in a prober way but instead you are forced to stay with the one skinning file, so you end up having a css file that has not less than 800 line of styles without comments ofcourse!!!

If you interested in how to make this easier, and if you already know css well and not afraid to learn a new couple of things, then keep reading, you will enjoy it…I guarantee

The Idea:

The idea is simple, using one of Dynamic CSS Languages like LESS or SASS

Ok, So which one to use?
Unfortunately you don’t have much choices in here, as ADF require special syntax, we have to make sure that this syntax doesn’t interfere with the language own syntax!! 

Ok, so which one plays nicely with ADF?
SASS does…unfortunately for me, and any LESS lovers, LESS fails miserably when trying to add the ADF syntax to the LESS syntax, specially when it contains the | character, like you would normally require in any regular ADF css file :\ 

But how, and both language has to be compiled first by using Ruby or external Javascript file?
Actually you don’t have to, all you need to know is to install an application called Scout, and follow the instructions here and you are good to go.

Prerequisites:

In order to pull this off you will need the following:

  • JDeveloper (11.1.1.x or 11.1.2.x)
  • Scout (Can be installed on windows or macs)

Environment Used in this guide:

The following:

The Guide:

  1. After installing the prerequisites we first make changes to JDeveloper Preferences to be able to view the extension of SASS files .scss as normal stylesheet file in JDeveloper, in order to have it all colored and shiny in JDeveloper, after doing this restart JDeveloper.
     
  2. We then create an ADF Application from JDeveloper.
     
  3. Then we Create our skin, I’ll call it sass-skin
     
  4. Then create our SASS file, the SASS file extension is .scss so, I’ll create it in a separate folder called sass but you are free to choose your own location if you want.
     
  5. Next we open scout, and add the ADF Application, I pointed to the sass-skin folder not the application folder itself -this is important or else scout wouldn’t successfully compile! -.
     
  6. We Choose the Input Location in my case it’ll be the /sass folder, and output location which will be the / folder, and other choices optionally you can compress the css generated from the SASS and then hit the start button.
     
  7. From now on, we won’t go to edit the css file anymore, we will be using the .scss file in all our skinning, We First create our initial .scss file with the first three lines of the css code and then start with the main variables, adding variables to our aliases will make aliases much more easier to mentain in the future.
     
  8. And the generated code will be 
     
  9. Then start nested rules - The most powerful thing that you shall use in all of your ADF / WebCenter applications
     
  10. As you can see it’s so understandable, and so easy to mentain, and also focused so that you can have one block per tag (isn’t this wonderful) and the output will be
     
  11. Continue adding styles…

Final Word:

For more information of how to use SASS effectively, check here or here for full documentation.

You can see from the visual guide that the generated content is so big, and so SASS make it easier to wrap everything together in a very good way.

Now we are one step closer of having a better looking ADF UX design, with this guide you are now able to write beautiful ADF skinning, without comprimising writting a beautiful understandable css styles.

Hopefully in some future release, we can see this prebuilt in JDeveloper!!!

Comments