| |||||||
FRAMES NO FRAMES |
Use the webuijsf:image
tag to display an inline image
in the rendered HTML page. The url
attribute is used to
specify the URL to the image file that is to be displayed.
The webuijsf:image
tag can be used to display a
theme-specific image in the rendered HTML page. The icon
attribute used in the webuijsf:image
tag is a key value
that is mapped to a URL in theme properties file. The key is used to
look up the appropriate image source and related attributes from the
current theme. By specifying a key, you avoid the need to specify
predefined constants such as height and width. The image can also be
seamlessly changed when a different theme is selected.
Note:
- Currently the list of icons that you can use is not publicly
supported, but the icon names are specified in the/com/sun/webui/jsf/suntheme/SunTheme.properties
file. The names are listed as resource keys of the format image.ICON_NAME
.
Use only the part of the key that follows image. For example, if the
key isimage.ALARM_CRITICAL_SMALL
, you should specifyALARM_CRITICAL_SMALL
as the value of the icon attribute of thewebuijsf:icon
tag. A list of supported icon values will be published in the near
future.
- If you use an image that is a PNG type, this component will output
the correct format for an <img> tag to display a PNG correctly in
Internet Explorer. In order to use this feature you must set the height
and width properties of the image. If you do not specify a height or
width property, a generic default value will be used for each
unspecified property. The default height and width may produce an
unsatisfactory image in IE.
<img>
element with any applicable element attributes. The attributes can be
specified through the <webuijsf:image>
tag
attributes.
document.getElementById(id).setProps({title:
"My Image"})
.getProps() |
Use this function to get widget properties. Please see setProps()
function for a list of supported properties. |
refresh(execute) |
Use this function to
asynchronously refresh the component.
|
setProps(props) |
Use this function to change any of the following supported
properties:
|
When the component is manipulated client side, some functions may
publish event topics for custom AJAX implementations to listen for.
Using the Dojo event system, listen for the refresh event topic using:
<webuijsf:script>
var processEvents =
{
update: function(props) {
//
Do something...
}
}
// Subscribe to refresh event.
dojo.subscribe(webui.suntheme.widget.image.event.<eventname>.endTopic,
processEvents, "update");
</webuijsf:script>
webui.suntheme.widget.image.event.refresh.beginTopic | Event topic published before asynchronously refreshing the
component. Supported properties include:
|
webui.suntheme.widget.image.event.refresh.endTopic | Event topic published after asynchronously refreshing the
component. Supported properties include: See setProps() function.
|
<webuijsf:image id="image1" url="../images/dot.gif" />
This will generate the following markup: <img src="../images/dot.gif" alt="" />
<webuijsf:image id="image2" icon="
ALARM_CRITICAL_SMALL
"
/>
<webuijsf:radioButton id="rb1" name="rb1" label="Toggle Image Visible" onClick="toggleVisible()"/><webuijsf:image id="image1"
url="../images/dot.gif"
/>
<webuijsf:script>
function toggleVisible() {
var domNode = document.getElementById("form1:image1
"); // Get image
return domNode.setProps({visible: !domNode.getProps().visible}); // Toggle visible state
}
</webuijsf:script>
<webuijsf:radioButton id="rb1" name="rb1" label="Refresh Image" onClick="refreshImage()"/><webuijsf:image id="image1"
url="
#{MyBean.imageSrc}"
/>
<webuijsf:script>
function refreshImage() {
var domNode =
document.getElementById("form1:image1"); // Get image
return domNode.refresh(); //
Asynchronously refresh image
}
</webuijsf:script>
Note that the refresh function can optionally take a list of
elements
to execute. Thus, a comma-separated list of ids can be provided to
update components server-side: refresh("form1:id1,form2:id2,..."). When
no parameter is given, the refresh function acts as a reset.
That is, the component will be redrawn using values set
server-side, but not updated.<webuijsf:image id="image1"
url="
#{MyBean.imageSrc}"
/>
<webuijsf:textField id="field1" text="#{MyBean.imageSrc}" label="Change Image Source"
onBlur="refreshImage()"/> // Field used to asynchronously update image.
<webuijsf:script>
function
refreshImage
() {
var domNode =
document.getElementById("form1:image1"); // Get image
return
domNode.refresh("form1:field1"); // Asynchronously refresh while
submitting field value
}
</webuijsf:script>
Note that the refresh function can optionally take a list of
elements
to execute. Thus, a comma-separated list of ids can be provided to
update components server-side: refresh("form1:id1,form2:id2,...")Tag Information | |
Tag Class | com.sun.webui.jsf.component.ImageComponentTag |
TagExtraInfo Class | None |
Body Content | JSP |
Display Name | None |
Attributes | ||||
Name | Required | Request-time | Type | Description |
binding | false | false | java.lang.String | A ValueExpression that resolves to the UIComponent that corresponds to this tag. This binding allows the Java bean that contains the UIComponent to manipulate the UIComponent, its properties, and its children. |
onDblClick | false | false | java.lang.String | Scripting code executed when a mouse double click occurs over this component. |
width | false | false | java.lang.String | Image width override. When specified, the width and height attributes tell web browsers to override the natural image or object size in favor of these values, specified in pixels. Some browsers might not support this behavior. |
rendered | false | false | java.lang.String | Use the rendered attribute to indicate whether the HTML code for the component should be included in the rendered HTML page. If set to false, the rendered HTML page does not include the HTML for the component. If the component is not rendered, it is also not processed on any subsequent form submission. |
id | false | true | java.lang.String | No Description |
onMouseUp | false | false | java.lang.String | Scripting code executed when the user releases a mouse button while the mouse pointer is on the component. |
styleClass | false | false | java.lang.String | CSS style class(es) to be applied to the outermost HTML element when this component is rendered. |
height | false | false | java.lang.String | Image height override. When specified, the width and height attributes tell web browsers to override the natural image or object size in favor of these values, specified in pixels. Some browsers might not support this behavior. |
icon | false | false | java.lang.String | The identifier of the desired theme image. |
align | false | false | java.lang.String | Specifies the position of the image with respect to its context. Valid values are: bottom (the default); middle; top; left; right. |
vspace | false | false | java.lang.String | Specifies the amount of white space in pixels to be inserted above and below the image. The default value is not specified but is generally a small, non-zero size. |
style | false | false | java.lang.String | CSS style(s) to be applied to the outermost HTML element when this component is rendered. |
border | false | false | java.lang.String | Specifies the width of the img border in pixels. The default value for this attribute depends on the web browser. |
url | false | false | java.lang.String | Absolute or relative URL to the image to be rendered. |
onClick | false | false | java.lang.String | Scripting code executed when a mouse click occurs over this component. |
onMouseDown | false | false | java.lang.String | Scripting code executed when the user presses a mouse button while the mouse pointer is on the component. |
toolTip | false | false | java.lang.String | Sets the value of the title attribute for the HTML element. The specified text will display as a tooltip if the mouse cursor hovers over the HTML element. |
onMouseOut | false | false | java.lang.String | Scripting code executed when a mouse out movement occurs over this component. |
alt | false | false | java.lang.String | Alternative textual description of the image rendered by this component. The alt text can be used by screen readers and in tool tips, and when image display is turned off in the web browser. |
onMouseOver | false | false | java.lang.String | Scripting code executed when the user moves the mouse pointer into the boundary of this component. |
onMouseMove | false | false | java.lang.String | Scripting code executed when the user moves the mouse pointer while over the component. |
htmlTemplate | false | false | java.lang.String | Alternative HTML template to be used by this component. |
longDesc | false | false | java.lang.String | A verbose description of this image. |
hspace | false | false | java.lang.String | Specifies the amount of white space in pixels to be inserted to the left and right of the image. The default value is not specified but is generally a small, non-zero size. |
visible | false | false | java.lang.String | Use the visible attribute to indicate whether the component should be viewable by the user in the rendered HTML page. If set to false, the HTML code for the component is present in the page, but the component is hidden with style attributes. By default, visible is set to true, so HTML for the component HTML is included and visible to the user. If the component is not visible, it can still be processed on subsequent form submissions because the HTML is present. |
Variables | No Variables Defined. |
| |||||||
FRAMES NO FRAMES |