This class is a custom tag that renders the Swapper UI widget. A Swapper
has two boxes separated by four buttons, one button to swap an element from
the left box to the right, one to swap from right to left, one to swap all
items from the left to the right and one to swap all from right to left.
It also has two buttons next to the right box that allows items to be moved
up or down in the list. The left box is considered the "source" box and
it is meant for the user to construct a list on the right from the items
on the left.
This tag renders all necessary HTML and Javascript for this widget, including
the function JWP_UIWT_getList(), which can be called to retrieve the list
on either side of the swapper. Pass it the ID that you set in the tag
iteself, and optionally the constant JWP_UIWT_LEFT or JWP_UIWT_RIGHT to
specify which side you want (if you don't pass a second parameter you will
get the list on the right). This function returns an array of strings.
Here is an example to simply display the list on the right:
alert(JWP_UIWT_getList("swapper1"));
The contents of the tag (i.e., between the opening and closing tag) is for
you to fill out. It should be the HTML for the <option> elements
of a <select> tag. These options will be populated in the left box
of the swapper initially. You can use whatever techniques you like to
generate this markup, or it can of course be static. See the usage example
below for an illustration of how this all fits together (this is the same
usage example demonstrated in the sample app).
This tag uses the following attributes:
id - Required - The Swapper widget is envlosed in a <div>
tag, and this is the ID that *lt;div*> will be known as.
boxWidth - Optional - This is the width of the two boxes of the
swapper, measured in pixels. If you do not specify anything, the default
value of 100 pixels will be used. It is your responsibility to ensure that
the size you specify is large enough to accomodate any content you may add
to the swapper.
boxHeight - Optional - This is the height of the two boxes of the
swapper, measured in items (i.e., a value of 10 means it will be tall enough
to show 10 items at a time). If you do not specify anything, the default
value of 10 items will be used.
divStyle - Optional - This is an inline stylesheet specification
to be applied to the <div> surrounding the swapper. Note that the
value "width:1px;" will be prepended to whatever you put here. You can
override this with specification if you wish. If you do not specify
anything, just the width specification will be rendered.
boxStyle - Optional - This is an inline stylesheet specification
to be applied to the two boxes of the swapper. Note that the
value "width:100px;" will be prepended to whatever you put here. You can
override this with specification if you wish. If you do not specify
anything, just the width specification will be rendered.
buttonStyle - Optional - This is an inline stylesheet
specification to be applied to the buttons of the swapper. Note that the
value "width:30px;" will be prepended to whatever you put here. You can
override this with specification if you wish. If you do not specify
anything, just the width specification will be rendered.
divClass - Optional - This is an CSS classname to apply to the
<div> surrounding the swapper. It you do not specify anything then
the class attribute will not be rendered at all. Note that the class
attribute comes before the style attribute, if both are present, so you can
apply a class to this element and override it with the divStyle attribute.
boxClass - Optional - This is an CSS classname to apply to the
two boxes of the swapper. It you do not specify anything then
the class attribute will not be rendered at all. Note that the class
attribute comes before the style attribute, if both are present, so you can
apply a class to this element and override it with the boxStyle attribute.
buttonClass - Optional - This is an CSS classname to apply to the
buttons of the swapper. It you do not specify anything then
the class attribute will not be rendered at all. Note that the class
attribute comes before the style attribute, if both are present, so you can
apply a class to this element and override it with the buttonStyle attribute.
Here is a usage example:
<uiwidgets:swapper id="swapper1" boxWidth="150"
divStyle="border:2 solid #017fff;"
boxStyle="color:#ff0000;">
<option value="value1">
Value 1 Text</option>
<option value="value2">
Value 2 Text</option>
<option value="value3">
Value 3 Text</option>
<option value="value4">
Value 4 Text</option>
<option value="value5">
Value 5 Text</option>
</uiwidgets:swapper>
The width, in pixels, of the two boxes of the Swapper. This value should
be set to a value large enough to ensure that any value you may add to
the boxes will fit. This will default to 100 if not present.
boxHeight
private java.lang.String boxHeight
The height, in number of items, of the two boxes of the Swapper. This
is the same thing as the size attribute of a