Changing ADF Data Visualization Components’ Selectors

5-4 Skin Editor Users Guide for Oracle Application Development Framework

5.3 Changing ADF Data Visualization Components’ Selectors

The ADF Data Visualization components are a set of components that provide functionality to represent data in graphical and tabular formats. Examples of the ADF Data Visualization components include the following: graph, gantt, pivot table, and hierarchy viewer. For more information about ADF Data Visualization components and the functionality that they provide, see the Oracle Fusion Middleware Web User Interface Developers Guide for Oracle Application Development Framework. You can change the runtime appearance of ADF Data Visualization components by editing the properties that each ADF Data Visualization component selector exposes. The number of selectors exposed by an ADF Data Visualization component varies by component. Figure 5–4 shows an ADF skin with the nodes expanded to show the selectors that you can customize for the ADF Data Visualization gauge component. Figure 5–4 ADF Data Visualization Component Selectors You customize the appearance of ADF Data Visualization components by defining style properties for the selectors that each ADF Data Visualization component exposes. Using the tools provided by the ADF Skin Editor, you customize the appearance of the ADF Data Visualization components. For more information, see Chapter 3, Working with the Oracle ADF Skin Editor. To achieve the appearance you want, you need to become familiar with the selectors that the ADF Data Visualization component exposes, the global selector aliases that the component may reference and which are defined in the ADF skin that you extend when you create an ADF skin. You also need to become familiar with the component itself and how it relates to other components. For example, customizing the appearance of the ADF Data Visualization pivotTable component shown in Figure 5–5 requires you to define style properties for this selector’s pseudo-elements. You may also need to modify the style properties for one or more of the global selector aliases that the ADF skin you extend defines. Working with Component-Specific Selectors 5-5 Figure 5–5 ADF Data Visualization pivotTable Component Many ADF Data Visualization component selectors, such as the selectors for the graph and hierarchyViewer components, expose pseudo-elements for which you configure ADF skin properties. These ADF skin properties modify the appearance of the area specified by the pseudo-element. The characters -tr- preface the names of ADF skin properties. For example, Figure 5–6 shows the properties of the hierarchy viewer’s lateral-navigation-button selector, all of which are prefaced by -tr-. Figure 5–6 Properties for the hierarchyViewer Component lateral-navigation-button Pseudo-Element In contrast, the gantt components summary-task-left selector, shown in Figure 5–7 , exposes only two ADF skin properties -tr-rule-ref and -tr-inhibit- as the majority of the properties that you configure for this selector are CSS properties. For more information about ADF skin properties, see Section 2.3, Properties in the ADF Skinning Framework. 5-6 Skin Editor Users Guide for Oracle Application Development Framework Figure 5–7 Properties for the gantt Component summary-task-left Pseudo-Element Reference information about the selectors, pseudo-elements, and pseudo-classes that ADF Data Visualization components expose can be found in the Oracle Fusion Middleware Data Visualization Tools Tag Reference for Oracle ADF Skin Selectors.

5.4 Changing a Component-Specific Selector