Using Skins in iRecruitment
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.
