A number of people have asked me about how to create skins in iRecruitment in order to get iRecruitment to look like their corporate site. I thought it would be best to do a worked example, based on the contents of notes 268969.1 and 269138.1.
A skin consists of two components. The first are the Renderers, which define where on the screen items are placed, and the html around the core items. The second are the styles, which define how the common components on the screen actually look, e.g. the appearance of the tabs and the buttons.
Renderer
First
of all we will create a Renderer for our pages. This defines the layout
of the actual pages. To create this, we need to create a new directory
for the skin in the $OA_HTML/cabo/templates
directory. In this example, I am going to create an example based on
the OTN web site (http://otn.oracle.com/), so I create a directory
called
$OA_HTML/cabo/templates/otn-desktop
In
that directory, I create a file called
pageLayout.uit. This is the file which is
going to define the layout of the page, and add the html components
that I want around the dynamic parts of the screen. There is a good
description of the contents of this file at http://www.oracle.com/technology/products/jdev/howtos/10g/adf_uix_laf_ht/index.html.
The pageLayout.uit file defines the overall
layout of your page in uix format. Here is my example based on OTN. I
created it by going to the http://otn.oracle.com/ web site, and doing a
View Source from my browser. I then edited the html to make it XHTML
compliant (uit documents need to be valid xml), and adding in the
markers for the rendered components on the page, for example the xml
string <ui:rootChild name="contents"/>
tells the page where to put the core contents of the page. The file I
created can be found here.
It
is not necessarily trivial to make your file xml compliant, and if it
is not, your template file will not be used, and the system will revert
to the default template. If this happens, you can check your
jserv.log file for any errors in the template
file.
The next step I took is to log in to the applications and in the Custom Look And Feel Administrator responsibility, I create a new Look and Feel, with the following parameters;
Name: otn-desktop
Family: otn
Description: sample otn skin
Base Look and Feel: simple.desktop
I then navigate through the rest of the flow without changing any of the parameters, to set up the skin with just the layout changed.
Finally, we need to
tell this new skin to use the pageLayout.uit
renderer that we created. When the skin was created, a file called
otn-desktop.xml will have been created in
$OA_HTML/cabo/lafs. I edited that file to have
the following content. Basically I just added the renderers content to
tell it to use the pageLayout.uit file.
<look-and-feel style-sheet-name="otn-desktop.xss"
xmlns:otn-desktop="http://xmlns.example.org/laf/otn"
xmlns="http://xmlns.oracle.com/uix/ui/laf"
family="otn" extends="simple.desktop" id="otn-desktop"> <renderers>
<renderer name="pageLayout">
<template name="pageLayout.uit">
</template>
</renderer>
</renderers>
</look-and-feel>
To test the skin,
I create a new user, and change the Oracle Applications Look and Feel profile
option at user level for my new user to have a value of
otn-desktop. I then bounce the application
server, and log in as the new user. I see the layout of the
responsibility page as follows;
Styles
This looks OK, but I also want to change some of the colours and the font size, so I go back in to the Custom Look And Feel Administrator responsibility, and I update the otn-desktop style to set some properties against the global component as follows;
Style: DefaultFont
Property: font-size
Value: 9pt
Style: DarkBackground
Property: background-color
Value: #000033
After doing this, log out, then I delete the stylesheet cache as follows;
rm $OA_HTML/cabo/cache/otn*
and then log back in
again, and the new styles get picked up, making the screen look as
follows;
Finally, I want to change
some of the graphics on the screen. In particular, I want to change the
way that the tabs are rendered, to make them look like boxes, so in the
Custom Look And Feel Administrator responsibility, and I update the
otn-desktop style to set the following
properties against the tabBar component's
Icons;
tabBarSelectedEnabledJoin,
tabBarEnabledSelectedJoin,
tabBarEnabledJoin,
tabBarSelectedEnd,
tabBarSelectedStart,
tabBarEnabledEnd,
tabBarEnabledStart
URI: join.gif
Height: 30
Width: 1
tabBarSelectedBackground
URI: selected_middle.gif
Height: 30
Width: 1
tabBarEnabledBackground
URI: enabled_middle.gif
Height: 30
Width: 1
I then create a directory,
$OA_HTML/cabo/images/otn_desktop, and I upload
my gifs to use for the tabs to that directory. I then bounce the
application server, and I see tabs like this;
Using the simple techniques
shown here, you should be able to create a skin for iRecruitment which
closely matches your corporate look and feel - setting the page layout
the same, as well as the colours and graphics. If you create a nice
skin, please post a URL to your recruiting site so that we can see it
in action.
Comments (18)
Hi,
WoW!!! This is a wonderful article.
Will be helpfull to many.
I am not to find the template directory in the $OA_HTML/cabo.
How to proceed now?
Regards
Jujaar
Posted by Jujaar Singh | May 30, 2007 12:32 PM
Posted on May 30, 2007 12:32
What is in your $OA_HTML/cabo directory?
Have you tried simply creating the $OA_HTML/cabo/templates directory to see if it still works?
Martin
Posted by Martin Millmore | May 31, 2007 7:26 AM
Posted on May 31, 2007 07:26
Hi,
I was not able to find the lafs directory on external DMZ node which has only Apache.
However after defining a custom laf and setting the profile i can see the changes on the internal node.
Please advise.
Thanks,
Kavya
Posted by Kavya | August 8, 2007 4:28 PM
Posted on August 8, 2007 16:28
Kavya,
sounds like you have done a good job if it works.
Martin
Posted by Martin Millmore | August 9, 2007 2:52 AM
Posted on August 9, 2007 02:52
Martin,I've finally got round to having a go at following your example and it looks quite good. My biggest issue with custom look-and-feel is that you have to base your new LAF on "simple", rather than "blaf".The resulting screens lose the nice generated graphical buttons and other such screen "furniture" that give a superior "finish".Is there any way that you can either base the new LAF on "blaf", or get the buttons to be generated in the same manner?Barry.
Posted by Barry Goodsell | August 28, 2007 8:32 AM
Posted on August 28, 2007 08:32
Hi Barry,
I hit some problems when I tried to base my skin on BLAF as opposed to Simple, but they may have been just issues in the pre-production environment. I suggest you give it a go - after all, if it doesn't work, you just don't use it.
Martin
Posted by Martin Millmore | September 3, 2007 7:40 AM
Posted on September 3, 2007 07:40
I'm working with a client who is interested in implementing a custom skin. Has anyone successfully implemented this for a client? Anyone aware of any IRC sites that are available to view with custom skins? Also, if its been implemented - what is the level of effort? And has the custom skin created any additional complexity in troubleshooting with Oracle support? Thanks, in advance, for any feedback!
- Valerie
Posted by Valerie Caprigno | September 25, 2007 9:51 AM
Posted on September 25, 2007 09:51
Valerie,
take a look at the post with the subject "Network Rail iRecruitment site skin". it gives details of one site, and there are others in the comments too.
With Oracle Support, you can very easily run your system without a skin, simply by changing a profile option or a session parameter, so it's trivial to reproduce any issues without the skin. That means that you can easily eliminate skins from any issues that you find, which should mean you have no additional complexity with support.
Martin
Posted by Martin Millmore | September 25, 2007 4:01 PM
Posted on September 25, 2007 16:01
Hi Martin,
have you tried to change rendering of buttons as image using buttonStart, buttonEnd, buttonTop and buttonBottom icons of simple-desktop laf?
thanks
Posted by Francesco | September 26, 2007 12:01 PM
Posted on September 26, 2007 12:01
Francesco,
I haven't specifically changed the buttons in this example - I did the more complex example of the tabs, however the buttons work in exactly the same way.
Martin
Posted by Martin Millmore | September 27, 2007 5:30 AM
Posted on September 27, 2007 05:30
thanks a lot, Martin
Posted by Francesco | September 27, 2007 11:35 AM
Posted on September 27, 2007 11:35
Hi Martin,
As you said we can extend blaf instead of simple or base desktop. Do you mean to say in xxxlaf-desktop.xml change extends tag to blaf-desktop?
Please clearify? More over will it take blaf look and feel as defualt then will override made changes in xxxlaf-desktop.xss
Thanks,
Jack
Posted by Abhishek | October 10, 2007 4:45 PM
Posted on October 10, 2007 16:45
Jack,
I did some checking, and either I mis-remembered, or it has been removed. Either way though, you can't use blaf as the stating point for your skin. Sorry for getting your hopes up there.
Martin
Posted by Martin Millmore | October 11, 2007 9:47 AM
Posted on October 11, 2007 09:47
HI Martin,
Here i followed all steps mentioned by you but my new layout is not picking up.
1) I created new skin using Customizing Look and Feel Responsibility by extending base.desktop. I simply created it without modifying.
2) I created payLayout.uit based on the link you provided and put into $OA_HTML/cabo/templates/vircoaflaf-desktop directory
3) Here i modified my vircoaflaf-desktop-metadata.xml and vircoaflaf-desktop.xml file, As there were two files present so i edited both files and put like this
<renderers>
<renderer name="pageLayout">
<template name="templates/vircadflaf-desktop/pageLayout.uit"></template>
</renderer>
</renderers>
Here i tried both without giving path and path also.
4) Now created user and put profile option Oracle Look and Feel to vircoaflaf-desktop
I stopped and started apache and deleted files from $OA_HTML/cabo/styles/cache.
I can not see any new layout.
Any suggestion.
Posted by Abhishek | October 11, 2007 4:49 PM
Posted on October 11, 2007 16:49
Abhishek,
If it's not working for you, I suggest you follow my steps exactly to the letter, i.e. do things in the same order that I did and so on - I note you did the steps in a different order and used different files, which may have an effect. Once you get that working, you can adjust it to be what you want. If that doesn't work, take a look at the metalink notes I mentioned, and if that still doesn't help, contact support.
Thanks
Martin
Posted by Martin Millmore | October 12, 2007 7:10 AM
Posted on October 12, 2007 07:10
Hi Martin,
I just followed same steps you mentioned. Just a quick qs. Layout is not appearing and getting error on jserv.log that td, tr, table tags are not identified in namespace http://xmlns.oracle.com/uix/ui.
So any idea how we can remove this error?
Thanks,
Abhishek
Posted by Abhishek | October 16, 2007 12:52 PM
Posted on October 16, 2007 12:52
Abhishek,
You will get that error if you try to include html tags without changing the default namespace (e.g. <div xmlns="http://www.w3.org/TR/REC-html40"
xmlns:ui="http://xmlns.oracle.com/uix/ui"> to start a region with a new default namespace). You should have a look at the example file. If you are following my instructions exactly and using the example file and it still fails, contact support for more guidance.
Thanks
Martin
Posted by Martin Millmore | October 16, 2007 1:00 PM
Posted on October 16, 2007 13:00
Hi Martin,
I would like to understand more about how you created pageLayout.uit , when i look at the how to of ADF UIX , it assume i already have a uix .My requirement is to have the irecruitment have the same look and feel as of a corporate site . Now can i take the same approach mentioned in "How To create a Look and Feel for ADF UIX" in that case how will i get the base UIX .
Please put some more light on how you created
pageLayout.uit
Thanks
PrasaD CP
Posted by Prasad CP | November 6, 2007 3:19 AM
Posted on November 6, 2007 03:19