JSF Twisties, while simple looking, have an advantage over using a pre-defined graphic in that the twisties can be sized and colored to match a page's style, that is, you can specify that you want to 22 pixel hot pink twistie.
Note that this component is used internally (by other JSF components). We don't expect this to be a general-use component.
The JSFTwistie component is used to draw a "twistie hinky" (a triangle) on a button. When applied to an <input> tag, it draws the hinky centered in the tag and clears the background color. When applied to a <button> tag, it draws the hinky as part of the content of the tag (positioned via text-align) without clearing the background. In other words, when used with an <input> tag it's assumed to be part of a more complex component (such as the pager of a data table) while when used with a <button> tag it's assumed to be part of the tag's content.
The advantage of the twistie component over an image is that the twistie can be styled (notably sized and colored) while an image cannot be. For example, you can draw the twistie in any size (up to 999 pixels wide) in any color. All aspects of the twistie, except its direction, can be styled either via an attribute provided when the twistie is created or via CSS applied to the twistie.
<hx:pagerDeluxe>
<input type="image" id="id">
or
<input type="submit" id="id">
or
<input type="reset" id="id">
or
<input type="button" id="id">
or
<button id="id" />
When applied to an input tag, JSFTwistie makes the tag's background-color transparent (which by implication may modify the border style on Windows® XP). It does not do this when applied to a button tag.
All attributes associated with the base tag are supported.
All event handlers associated with the base tag are supported.
hX_5.addComponent("id", new X_5.JSFTwistie(attributes)); where
id |
The ID of the HTML tag to which the component is attached. |
attributes |
Comma separated list of attributes where each attribute is a quoted string consisting of the attribute name and value separated by a colon, for example "label:MyLabel". |
Attribute name |
Description |
---|---|
bar-style |
list-style-position. A value of "inside" adds a 1 line bar, any other value does not draw a line. |
color-edge |
Color of the border. If omitted, derived from the tag it is associated with. |
color-fill |
If no color is in the style, black is used. Note that if the base tag is disabled, the twistie will always draw in "disabled" colors. |
direction |
Direction for the twistie: 0 points up, 1 points down, 2 points left, 3 points right. |
size |
Width (in pixels) of the triangle part of the twistie. If omitted, the twistie is sized to the tag it's associated with (that is it "fits" the input or button tag it's associated with). |
style |
Style for the twistie: 0 means long solid triangle, 1 means stubby solid triangle, 2 means "v", 3 means solid triangle. |
For all optional attributes, if the attribute is not supplied, the value for the attribute is derived from the CSS class name assigned to the base tag with the suffix _twistie appended to it. For example, if color-fill is not supplied, and the base tag has the class name "foo", then the color property of the class named foo_twistie defines the color.
CSS class name |
Description |
---|---|
style |
list-style-type. A style type of "square" is treated as twistie style 3, of "circle" as twistie style 1, of "decimal" as twistie style 0. Any other value (including none) is treated as twistie style 2. |
bar-style |
list-style-position. A value of "inside" adds a 1 line bar, any other value does not draw a line. |
size |
height. The twistie is sized to the computed (effective) height of the tag it's associated with. Note that this attribute is not derived from base_twistie class but directly from the style of the base tag. |
color-fill |
If no color is in the style, black is used. Note that if the base tag is disabled, the twistie will always draw in "disabled" colors. |
color-edge |
Color of the border. If omitted, derived from the tag it is associated with. |
API call |
Description |
---|---|
redraw() |
Redraw the component taking into account any changes made to the attributes/properties of the base tag. |
uirelease() |
Releases any active UI associated with the component. |
setValue(string) |
Sets the value of the component and ensures that the value provided is valid. |
object = getValue(boolean) |
Retrieves the value of the component. If the boolean is false, this is equivalent to getting the value of the base tag. If the boolean is true, the value is returned as a JavaScriptâ„¢ date/time object instead of as a string. |
object = setAttribute(attribute) |
Sets an attribute or changes its value (if it was set previously). |
string = getAttribute(attribute-name) |
Retrieves the current value of an attribute. |
Draw a blue, right-facing, stubby triangle twistie 19 pixels wide in an input tag, styled by the constructor.
<input style="width:32px;height:32px" type="submit" id="form1:button1" value=""> <script> hX.addComponent("form1:button1", new hX.JSFTwistie("direction:3", "color-fill:blue", style:0", "bar-style:0", "size:19")); </script>
Draw a light-blue, gray-edged, right-facing, triangle twistie with a bar, sized to fit in a button tag, styled by the CSS.
<style> .twistie3B_twistie { color:#8080ff; border-left-color:silver; list-style-type: square; list-style-position:inside; } </style> <button class="twistie3B" style="width:32px;height:32px" type="submit" id="form1:button23B"></button> <script> hX.addComponent("form1:button23B", new hX.JSFTwistie("direction:1")); </script>