Inserting an Image

To insert an image component:

In the Design Structure Window of the desired file, locate the node in which you wish to insert an image component.
In the Component Palette, select Simple Components from the dropdown list, and then drag and drop the image component to the parent node of your choice.
The image node is inserted and highlighted under the expanded parent node.
In the Property Inspector, set the following attributes for the image component:
- source - (Required) Enter the URI that specifies the location of the image resource.
- accessKey - Enter the character to use for quick access to the image if the image contains a link. 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.
- autoflip - Select true to attempt to flip the image given by the source attribute when LocaleContext().getReadingDirection() indicates a right to left reading direction. Images can only be flipped if they are under the current servlet context. If an image cannot be found, the unflipped version will appear.
- borderWidth - Enter the width of the border to draw around the image. Default is zero.
- destination - Enter the URI this image should reference. The same effect can be achieved by wrapping the image inside a link; this is only a shortcut.
- hAlign - Select the horizontal alignment of the image. Supported values are "center", "left", "right", "start", and "end".
- height - Enter the height of the image.
- imageMapType - If a server-side image map is desired, select "server" and use in conjunction with the destination attribute or when the image is wrapped inside a link. Default is "none".
- 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.
- longDescURL - Enter the URL that specifies a link to a long description of the image. This description should supplement the short description.
- primaryClientAction - Enter the client action to fire on the client when the image 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.
- text - Enter the text to display if there is no image.
- width - Enter the width of the image.

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

Example (UIX XML)


...
<image source="images/globalhelp.gif"
       shortDesc="help"
       hAlign="center"
       destination="http://www.oracle.com"
       height="50"
       width="50"/>
...