1
About Skinning a Web Application 1-1
1
About Skinning a Web Application
This chapter introduces you to skinning, the ADF skinning framework, and the ADF skins that Oracle ADF provides to apply to your web application or to help you get
started creating your own ADF skin.
This chapter includes the following sections:
■
Section 1.1, Introduction to Skinning a Web Application
■
Section 1.2, Overview of Developing an ADF Skin
■
Section 1.3, Taking a Look at an ADF Skin
■
Section 1.4, Inheritance Relationship of the ADF Skins Provided by Oracle ADF
1.1 Introduction to Skinning a Web Application
Skinning refers to the task of developing an ADF skin to apply to a web application that uses ADF Faces and ADF Data Visualization components in the user interface. An
ADF skin is a special type of cascading style sheet CSS that allows you to customize the appearance of these components. Instead of providing a CSS file for each
component, or inserting a style sheet on each page of the application, you create one ADF skin for the web application. Every component that renders in the user interface
automatically uses the styles defined by the ADF skin. This means you do not have to make design-time changes to individual pages to change their appearance when you
use an ADF skin.
Using an ADF skin also makes it easy for you to maintain a consistent appearance for all the pages that the application renders. Changes to the appearance of your
application can easily be made should you decide to do so. You might decide, for example, to change colors to make your application adhere to your companys
corporate brand. Additionally, you may want to define a style property for a component to make your application more usable. For example,
Figure 1–1 shows an
ADF Faces inputText component.
Figure 1–1 Writable inputText Component
Figure 1–2 shows another ADF Faces inputText component where the background
color is grayed out by the ADF skin to indicate to the end user that the inputText component is read only.
1-2 Skin Editor Users Guide for Oracle Application Development Framework
Figure 1–2 Read-Only inputText Component with Grayed-Out Background Color
Other benefits of skinning include the ability to easily change the default text labels that ADF Faces components render at runtime. For example, the default text for the
dialog component’s labels are OK and Cancel if you set the component’s type property to okCancel. You cannot modify the values of these labels by specifying
properties for the dialog component. Instead, if you want to change OK to Submit, for example, you make changes in the ADF skin that references a resource bundle with
the string value, Submit. For more information, see
Chapter 7, Working With Text in an ADF Skin.
The previous examples illustrate some of the use cases for ADF skins plus the benefits of creating an ADF skin. Note that you do not have to define all the changes that you
want for your application in one ADF skin. You can create different ADF skins to serve different purposes. For example, you might create ADF skins with different color
schemes to adhere to the corporate brand of different companies. In addition, you can configure an application so that end users can dynamically change the ADF skin at
runtime. For more information, see the Enabling End Users to Change an Application’s ADF Skin section of the Oracle Fusion Middleware Web User Interface
Developers Guide for Oracle Application Development Framework.
Note that this guide makes the following assumptions:
■
You are familiar with the ADF Faces and ADF Data Visualization components that you can skin. The usage and functionality of these components is beyond the
scope of this guide. For more information about these components, see the Oracle Fusion Middleware Web User Interface Developers Guide for Oracle Application
Development Framework.
■
You are familiar with CSS. It is beyond the scope of this guide to explain CSS. For extensive information about CSS, including the official specification, visit the
World Wide Web Consortium W3C web site at:
http:www.w3.org
1.2 Overview of Developing an ADF Skin
