• Create a new ADF Skin and check Skin values being used • Change the page background and font family • Update the look and feel for table headers and links • Change the pane body and shape of tabs • Implement dynamic skin change

1. Oracle ADF 11g Developer Lesson 2
Name – Rakesh Gujjarlapudi
Email Address – rakesh_gujj@yahoo.com
IN THIS LAB, YOU LEARN HOW TO CREATE A CUSTOM SKIN (CSS
FILE) FOR AN APPLICATION AND SEE HOW THE CHANGES YOU
MAKE TO THE SKIN AFFECT THE LOOK AND FEEL OF THE
APPLICATION.

2. OVERVIEW
This tutorial shows you how to create a custom skin (.css file) to change the look and feel of an application.
Purpose
In this lesson, you learn how to create a custom skin (css file) for an application and see how the changes you
make to the skin affect the look and feel of the application.
Step 1: Getting Started
1. It assumed that you have an Oracle db installed, with the HR schema also installed.
2. Unzip the adfskin.zip file to a local directory of your choice (i.e. labs).
3. Start JDeveloper by selecting Start > All Programs > Oracle Fusion Middleware 11.1.2.0.0 > JDeveloper
Studio 11.1.2.0.0
4. If prompted for a Role, choose Studio Developer (All Features) and click OK.
5. Close the Tip of the Day window.
Once loaded, the JDeveloper IDE appears.
6. Click the Open Application link in the Application Navigator.
From the predefined application you downloaded, you create a new ADF Skin file (.css) to modify the
look and feel of the sample application.

3. 7. In the Open Application dialog, select the file C:labsADFSkinADFSkinSampleADFSkinSample.jws and
click Open.
If you are prompted to migrate the project, click Yes to confirm.
8. Once the application is loaded in JDeveloper, check the database connection. Right-click the Model
node and select Project Properties from context.
9. In the Project Properties dialog, select the Business Components and if required click Load Extension to
load the appropriated library files.

4. 10. Next to the Connection field, click the Edit icon.
11. In the Edit Database Connection dialog, type the following values. Note that the values provided here as
example may need to be modified to work with your environment.
Property Value
Connection Name hrconn
Username/Password hr / <your hr password>
Save Password Checkbox checked
Driver Thin
Host Name The machine where the schema is installed (e.g. localhost)
SID SID The database where the HR schema is installed (XE,
orcl...)
Your application needs to be able to communicate with the database.

5. 12. Click Test Connection to confirm that you can connect.
Click OK if the connection was successful.
13. Expand the Model project node to review the Business Components created for this application. The
Application Navigator should look like the following:

6. The Model project node contains all the data model Business Components needed for your application.
14. Now expand the ViewController node and feel free to navigate through the nodes to review the existing
components. The Application Navigator should look like the following:
Step 2: Creating a New ADF Skin and Reviewing Skin Configuration
An ADF skin is a type of CSS file where you define CSS style properties based on the Cascading Style Sheet (CSS)
specification for the component for which you want to customize the appearance.
1. In the Application Navigator, Right-click the ViewController project and select New from the context
menu.
2. In the New Gallery, expand the Web Tier node, select JSF/Facelets and in the right hand pane, select
ADF Skin as the item.

7. Click OK.
3. In the Create ADF Skin File dialog, change the file name to MyNewSkin.css. Append MyNewSkin to the
existing skins directory path. Check the Use as the default skin family for this project checkbox and in
the Extends field choose to extend the fusionFx-simple-v2.desktop skin from the list of values.
Click OK.
Oracle ADF provides a set of ADF skins that you can extend...

8. 4. MyNewSkin.css opens by default in the design editor with a selector tree of components that you can
navigate to. When you navigate into the component, the preview will be updated with a view of that
component.
If you click the Source editor tab, you will see that you have a new empty skin file.
5. Scroll down in the Navigator to locate the Home.jspx entry. Right-click and select Run from context to
launch the page in the Firefox browser. This verifies that your application is running and has the look
and feel of the skin you have extended, which is fusionFx-simple-v2.desktop. This is because you have
not yet made any changes to your skin file to override the fusionFx- simple-v2 look and feel.
Note that after a fresh install of JDeveloper, the first time you deploy your application, you need to
create a default domain for WebLogic server.
6. While your page is being loaded, expand the WEB-INF node and double-click trinidad-skins.xml to open
it in the editor.

9. The trinidad-skins.xml file is a registry file of all custom skins available to an application.
7. The source shows that your skin file, MyNewSkin has been added to other existing skins. These skins are
registered skins and available for use by your project.
Click the cross on the right hand corner of the current tab to close the editor.
8. Double-click the trinidad-config.xml file. It shows that the current skin for your application is
MyNewSkin, the skin you just created.

10. Click the cross on the right hand corner of the current tab to close the editor.
The family name is used to configure the custom skin that is applied to the running application.
9. Switch to the Firefox window, now the Home page should be loaded in the browser.
10. From the main menu toolbar, select View > Firebug.

11. An easy way to find the CSS class is by using a free add-on for Mozilla Firefox called Firebug.
To install Firebug, in Firefox, select Tools | Add-ons from the Firefox menu and type firebug in the
search field. (Download, install and reload firefox).
11. Move the Debug pane at the bottom of your page to make it visible. It should display the HTML tab by
default.
12. In the right hand pane, the Style tab shows that you're using MyNewSkin . Hover over the MyNewSkin
link, it displays the location of the skin file used. Confirm that it is the one you've added to your
application.
Notice that for now, the look and feel of the page is still using the default fusion style.
13. From the main menu toolbar, re-select View > Firebug to hide the Debug pane.
14. Return to JDeveloper without closing the browser window.

12. Step 3: Changing the UI - Page Background and Font Family
The ADF skin defines rules that determine how to apply CSS style properties to specific components or groups of
components.
1. In the Design editor of MyNewSkin, select the Faces Component Selectors > Document > af|document
entry.
2. In the Property Inspector (use View | Property Inspector from the main menu if the pane is not visible),
change the background color for a yellowish one. Click the down arrow at the right of the Background
Color field and select Edit.
3. In the Background Color dialog, type #fcfacb in the RGB Hex filed.

13. Click OK.
4. Using the drop down list, set the Background Image property to none.
5. Click the Save All button in the toolbar to save your work.

14. 6. Switch to the Firefox window and reload the page.
7. Notice the change of the background now reflected in your browser.
8. You are now going to change the font of the application text.
Without closing the browser window, switch back to JDeveloper and in the Skin editor, expand the
Global Selector Aliases | Font nodes, and select the .AFDefaultFontFamily entry.

15. Each category may include one or more of these types of ADF Faces skin selectors.
9. In the Property Inspector in the Font/Text section, from the drop down list on the Font Family attribute,
select Times New Roman.
10. In the Navigator, select the .AFDefaultFont:alias.
The :alias pseudo-class is a special type of class that serves as a syntax aid to organize code in your skin
file.
11. In the Font/Text section, set the Font Size to 12 px.

16. 12. In the Line Box section, set the Line Height to 18 px.
13. Click the Save All button in the toolbar to save your work.
14. Switch to the browser window and reload the page.
15. Notice the font changes in the page.

17. Don't close the browser window. You are now going to make changes to the look and feel of the Panel
Header.
16. Switching back to JDeveloper, collapse the Global Selector Aliases node and in the Faces Component
Selectors, expand the
Panel Header | Pseudo-Elements nodes and update three of the components. Select the title0 node.
Pseudo-elements are used to denote a specific area of a component that can have styles applied.
17. In the Property Inspector, for the title0 component set the Background Color to #fff27e. (Enter the value
and press Return)

18. 18. Set the title-text0 > Font/Text > Color component to Red.
19. Set the content0 component to the following properties:
Section Property Value
Common Background Color White (from LOV)
Common Border 1px solid
Common Border Color #fff27e
20. The new rendering in the design editor should display like this:

19. 21. Click the Save All button in the toolbar to save your work.
22. Reload the page in Firefox.
23. Notice the changes in the UI. Also observe that only the Home tab is selectable at the moment. You
need to login to make other tabs accessible.

20. Step 4: Updating the Look & Feel for Table Headers and Links
1. To see the current look and feel of the table headers, you need to login to the application. Click the
Login link.
2. In the Login dialog, enter sking/Welcome1234. and click OK.
3. The tabs are now selectable. Click the Employees Overview tab.

21. Notice the rendering of the Employees table headers.
4. In the next few steps, you are going to change the headers of the table to yellow with red font.
Switch back to JDeveloper. In the Faces Component Selectors, collapse the PanelHeader node and
expand the Column | Pseudo-Elements node and select the column-header-table entry.
5. In the Property Inspector, in the Common section set the following properties:
Property Value
Background Color #fff27e
Background Image none

22. 6. In the Font/Text section set the Color attribute to Red from the drop down list.
The rendering pane should look like the following:
7. Click the Save All button in the toolbar to save your work.
8. Reload the page in Firefox.
9. Click the Employees Overview tab and notice the changes in the table headers.

23. 10. You are now going to change the look and feel of the links in the panel list. Observe the panel list under
the Welcome to Our Site message. Hover your mouse over the hyperlink text, and note that then the
text becomes underligned.
11. Switch back to JDeveloper, collapse the Column node and expand the Panel List > Pseudo-Elements one.
Select the link entry.
12. Notice the two sections in the rendering pane, the top one for link properties and the bottom one for
the link hover properties.

24. 13. For the link properties, in the Property Inspector, in the Font/Text section, set the following properties:
Property Value
Color Red (from LOV)
Font Weight bold (from LOV)
Text Decoration underline (from LOV)

25. 14. Click the link:hover section in the rendering pane and in the Property Inspector, in the Font/Text
section, set the following properties:
Property Value
Font Weight bold (from LOV)
Text Decoration none (from LOV)
15. Click the Save All button in the toolbar to save your work.
16. Reload the page in Firefox.

26. 17. Observe the UI changes in the panel list. The links are now red and the underline state works the other
way around when hovering over.
Step 5: Updating the Pane Body and the Shape of the Tabs
You are now going to change the look and feel of the tabs, using different images for the tab shape, and defining
different fonts and colors. For this, you use image files provided with the application.
1. Don't close the browser window. Switch back to JDeveloper and collapse the Panel List node.
2. Navigate to the Global Selector Aliases Folder and expand the node Component Group Tabs. (NEW
SCREEN)

27. Notice that there are a lot of existing components to define tabs.
3. Select the AFTabAboveEndSelectedBackground:alias:ltr entry.
4. In the Property Inspector in the Common section, click the right-most down arrow next to the
Background Image property and select Edit from context.
5. In the Edit Property dialog, navigate to skins | NewImages | af_panelTabbed where existing images are
already provided and select the t3_above_end_a.png.

28. Click OK. The value should now be:
Alias component Background Image
AFTabAboveEndSelectedBackground:alias t3_above_end_a.png
6. Repeat the above step for the following End tab parameters:
Alias component
Background Image
.AFTabAboveEndUnselectedBackground:alias:ltr t3_above_end_n.png
.AFTabAboveEndUnselectedDisabledBackground:alias:ltr t3_above_end_d.png
You could repeat the operation for the Middle and the Start components.
7. Populate the Middle and Start values from a prepared file, in the Application Navigator, locate the
readme.txt file and double-click to open it in the source editor.

29. 8. Select and copy all the text with the exception of the first 2 lines.
Close the readme.txt.
9. With the MyNewSkin.css file displayed, click the Source tab at the bottom of the editor pane. Scroll
down at the bottom of the file to find the first image uses defined, then select all of these related
component definitions. Right-click and Paste from context.

30. 10. The clipboard text in the file to replace the selected statements.

31. 11. Click the Design tab at the bottom of the editor and select the Panel Tabbed | af|panelTabbed to see
the rendering for the new tab definitions.
12. Click the Save All button in the toolbar to save your work.
13. Switch to Firefox browser window.

32. 14. To be able to see the new look and feel defined for the tabs, you need to press the Ctrl key and click the
reload button at the same time (In case the [Ctrl] + [Reload] action does not refresh the page, re-run the
home page from JDeveloper). Observe the new rendering of your page. Click the Employees Overview
tab to see the look and feel of active versus unselected tabs.
15. Switch back to JDeveloper. Now you need to update the text color of the link in the tabs to better match
our styling. Navigate to the af|panelTabbed node and click the Source tab.
16. Enter the following statements at the bottom of the code to define the new tab aspect.
af|panelTabbed::header-center
{ background-image: url("../NewImages/af_panelTabbed/ptt.png"); }
af|panelTabbed::tab af|panelTabbed::tab-text-link
{ color: white; font-weight: bold; }
af|panelTabbed::tab:selected af|panelTabbed::tab-text-link { color:red; font-weight: bold; }
af|panelTabbed::tab:hover af|panelTabbed::tab-text-link { color:white; }
af|panelTabbed::tab:selected:hover af|panelTabbed::tab-text-link { color:red }

33. 17. Click the Save All button in the toolbar to save your work.
18. Switch back to Firefox.
and reload the page.
19. Observe the new rendering of your page. Click the Employees Overview tab to see the look and feel of
active versus unselected tabs.

34. Step 6: Implementing Dynamic Skin Change
To be able to implement a Dynamic Skin UI change, perform the following steps:
1. For this new section, you need to re-deploy the application, so close the browser window this time and
switch back to JDeveloper.
2. In the Log window, click the arrow within the Stop red icon and select ADFSkinSample to stop the
running application. Notice that you don't need to stop WebLogicServer.
3. Now enable the skin drop down list so you can switch the skin dynamically. Do this by updating the
trinidad-config file with the reference to the dynamic code. Select the trinidad-config file editor.
The Source looks like the following:

35. 4. Copy the comment line of code with the skin-family tag, and paste it in place of the active skin-family
MyNewSkin tag.
<skin-family>#{sessionScope.skinFamily!=null?sessionScope.skinFamily : 'fusion'}</skin-family>
5. In the Application Navigator, double-click the Home.jspx entry to open the page in the Design editor.
6. In the Design editor, click within the panel group layout component underneath myCompanyLogo. This
selection highlights the corresponding component in the Structure pane.
7. Click the Source tab at the bottom of the editor pane. The panelGroupLayout should be highlighted.

36. 8. Notice the commented section.
9. Cut the end of comment tag (-->) and paste it at the end of the start comment tag line:
<!-- Uncomment once you have updated trinidad-config to enable dynamic loading of skins-->
10. Click the Save All button in the toolbar to save your work.
11. Right click the Home.jspx page and select Run to restart the page.

37. 12. The page loads up in the browser window.
13. Use the Choose a Skin field and select MyNewSkin from the list of values.
14. The new UI is dynamically changed. Use the Choose Skin field and select another Skin flavor from the list
(i.e. princess-skin).

38. 15. The UI is dynamically changed.
16. Experiment with other look and feel choices from the list.

39. You've now completed the skin tutorial.
Summary
In this tutorial you saw how to change the look and feel of components such as panels, panel tabs, fonts,
table headers and links by creating your own skin (.css file) in JDeveloper. Finally, you updated your
application so that the UI can be dynamically changed at run time. You learned how to:
 Create a new ADF Skin and check Skin values being used
 Change the page background and font family
 Update the look and feel for table headers and links
 Change the pane body and shape of tabs
 Implement dynamic skin change
To learn more about ADF skins, refer to:
 Skin Editor User's Guide for Oracle ADF
 Customizing the Appearance Using Styles and Skins" in Web User Interface Developer's Guide for
Oracle ADF
 Creating and Managing Skins" in Developer's Guide for Oracle WebCenter
 Selectors for Skinning ADF Faces Components