Although
zoomTool and
panTool components provide basic user
interaction, you can also set client actions to image buttons to
achieve similar results. The advantage is that image buttons are
more customizable, as the user can define the action to be set.
The following example shows how to declare image buttons and
associate them with client-side actions.
<!-- Create a 2 columns grid -->
<h:panelGrid columns="2">
<!-- Declare a button for zooming in -->
<jv:imageButton onclick="myEquipment.zoomIn(true)"
image="images/zoom.gif"
rolloverImage="images/zoomh.gif"
selectedImage="images/zoomd.gif"
title="Zoom In"
message="Zoom In" />
<!-- Declare a button for zooming out -->
<jv:imageButton onclick="myEquipment.zoomOut(true)"
image="images/unzoom.gif"
rolloverImage="images/unzoomh.gif"
selectedImage="images/unzoomd.gif"
title="Zoom Out"
message="Zoom Out" />
</h:panelGrid>
<jvtf:equipmentView id="myEquipment"
context="#{contextBean}"
style="width:740;height:550"
project="data/myProject.itpr" />
This example declares two image buttons:
one
for zooming in
one
for zooming out
Each button declaration defines the
following attributes:
onclick
: The JavaScriptâ„¢ action to be triggered when the button is
pressed.
image
: The main button image.
rolloverImage
: The image to be displayed when the mouse pointer rolls over
the button.
selectedImage
: The image to be displayed when the button is pressed.
title
: The tooltip message displayed when the mouse pointer stays
over the button.
message
: The message displayed in the
messageBox
component when the mouse pointer stays over the button.
The
onclick
tag attribute is the most important as it defines the action
associated with the button. Note that it uses the JavaScript API
of the
equipmentView
component to perform the desired action:
onclick="myEquipment.zoomIn(true)"
: This uses the
zoomIn
JavaScript call to zoom in the equipment view component.
onclick="myEquipment.zoomOut(true)"
: This uses the
zoomOut
JavaScript call to zoom out the equipment view component.
The
onclick
attribute can be set with any valid JavaScript code, which will
be executed when the button is pressed. The other tag attributes
define the look and feel of the button, with corresponding images
and tooltip text.