Inserting StyledText

To insert a styledText component:

In the Design Structure Window of the desired file, locate the node in which you wish to insert a styledText component.
In the Component Palette, select Simple Components from the dropdown list, and then drag and drop the styledText component to the parent node of your choice.
The styledText node is inserted and highlighted under the expanded parent node.
In the Property Inspector, set the following attributes for the styledText component:
- text - Enter the text to display.
- accessKey - Enter the character to use for quick access to the text if the text component contains a link (i.e., if either destination or labeledNodeId is set). The character must exist in the text attribute of the component, otherwise no visible indication of the access key will be presented in the UI. If the same access key appears in multiple locations in the same page of output, the rendering user agent will cycle among the elements accessed by the similar keys.
- destination - Enter the URI that this component references. The same effect can be achieved by wrapping the text inside of a link; this is only a shortcut.
- inlineStyle - Enter the inline CSS style for this component. In the right column, click the icon to open a dialog, then click New to enter the CSS property values. The property element defines a single name/value pair. The name is defined by the Name attribute, and the Value by the plain-text contents of the element. For example, you can enter 'color' for Name, and 'red' for Value. In the Advanced tab, you can enter an EL syntax data binding expression or use the Bind to Data dialog to select a data source for this complex attribute.
- labeledNodeId - Enter the ID of the component that this text component is acting as a label for. When used in conjunction with the accessKey attribute, the user pressing the access key will move the keyboard focus to the component specified by labeledNodeId. In addition, even when access keys are not used, using this attribute to specify the logical relationship between a component and its label can improve the accessibility of your UI.
- primaryClientAction - Enter the client action to fire on the client when the text is clicked. In the right column, click the icon to enter a ClientAction. See Editing the PrimaryClientAction Attribute for details. Alternatively, use the Advanced tab to enter an EL syntax data binding expression or use the Bind to Data dialog to select a data source for this complex attribute.
- textAndAccessKey - Use this attribute to set both the text and access key, using conventional ampersand ('&') notation. For example, setting this attribute to 'T&ext' will set the text to "Text" and the access key to "e".
- truncateAt - This is the length at which the text should be automatically truncated. Enter a value greater than or equal to 13. ADF UIX does not truncate strings that are shorter than 13 characters. Default is zero (no truncation).
- styleClass - Enter the CSS style for this element, e.g. OraInstructionTextStrong, OraBGAccentLight, etc.

Note: To use data binding, see Data Binding a Component Attribute.

Examples (UIX XML)


...
<styledText text="OraInstructionTextStrong"
            styleClass="OraInstructionTextStrong"/>
...
<styledText text="Destination has accessKey"
            destination="http://www.example.org"
            accessKey="d"
            styleClass="OraInstructionText"/>
...
<flowLayout>
  <contents>
    <checkBox name="checkbox1" value="1" id="checkme"/>
    <styledText textAndAccessKey="&amp;Toggle the &lt;checkBox&gt;"
                labeledNodeId="checkme"
                styleClass="OraHeaderSubSub"/>
  </contents>
</flowLayout>
...