Working With Global Selector Aliases 8-9
Figure 8–8 Global Selector Alias Applied to inputText Component
8.5 Referencing a Property Value from Another Selector
Rather than set a specific style property for each selector to which you want to apply the style property, you can reference the value of a property using the
-tr-property-ref ADF skin property. You can configure this ADF skin property for global selector aliases and component-specific selectors. For example, you could
define a value for the background-color property in a global selector alias and reference this value from multiple other selectors. If you decide at a later time to
change the value of the background-color property, you change the value in the global selector alias. All selectors that reference the background-color property
using the -tr-property-ref ADF skin property update to use the change you make. The -tr-property-ref ADF skin property can also be used with compact
CSS properties like, for example, border.
8.5.1 How to Reference a Property Value from Another Selector
You reference the property value that you want to use for a selector using the -tr-property-ref ADF skin property.
To reference a property value from another selector: 1.
In the Selector Tree of the visual editor, select the selector that you want to reference a property value from another selector.
For example, if you want the content area of the panelWindow component to reference a style property defined in another selector, select content under the
8-10 Skin Editor Users Guide for Oracle Application Development Framework
Pseudo-Elements node of the panelWindow component, as illustrated in Figure 8–9
.
Figure 8–9 Panel Window Component’s content Pseudo-Element
2.
In the Property Inspector, specify the property value that you want to reference as a value for the selector’s property using the -tr-property-ref ADF skin
property.
For example, assume that you created the following global selector alias: .MyColor:alias {
color: rgb255,181,99; font-weight: bold;
}
and that you want to reference the color property from this global selector alias for the background-color property of the content pseudo-element that you
selected in step 1. In this scenario, enter the following value for the background-color property of the content pseudo-element,
-tr-property-ref.MyColor:alias,color; If you want to use the -tr-property-ref in compact values, enter syntax
similar to the following: border: 10px solid -tr-property-ref.AFDefaultColor:alias, color;
8.5.2 What Happens When You Reference a Property Value from Another Selector
The Property Inspector shows that the property for which you set a value using the -tr-property-ref ADF skin property to reference a value from another selector
inherits its value, as illustrated in Figure 8–10
.
Working With Global Selector Aliases 8-11
Figure 8–10 Selector Property Referencing a Property Value from Another Selector
Syntax similar to Example 8–2
appears in the source file of the ADF skin.
Example 8–2 -tr-property-ref ADF Skin Property
ADFFaces_Skin_File DO NOT REMOVE namespace af http:xmlns.oracle.comadffacesrich;
namespace dvt http:xmlns.oracle.comdssadffaces; .MyColor:alias {
color: rgb255, 181, 99; font-weight: bold;
} .AFDefaultColor:alias {
color: Red; }
af|panelWindow::content { background-color: -tr-property-ref.MyColor:alias, color;
border: 10px solid -tr-property-ref.AFDefaultColor:alias, color; }
8-12 Skin Editor Users Guide for Oracle Application Development Framework
9
Working with Style Classes 9-1
9
Working with Style Classes
This chapter describes how to work with style classes. This chapter includes the following sections:
■
Section 9.1, About Style Classes
Kategori