Exercise 3 on Spinner with Up and Down Image Buttons

This example describes how to create the same spinner control as in Exercise 2 on Spinner with Up and Down Buttons using the attach tag.

I. Define the control

The use case for this control is exactly the same as for Exercise 2; however, in this exercise the up and down image buttons are generated using the attach tag.

II. Define the class

The template for this class requires fewer HTML tags than the previous example to render its up and down buttons. Instead, it uses the attach tag to paint the HTML for a specific set of descendant objects. (Refer to Control Statements for a list of all statements that you can use in your template.)

The next figure shows the Component Hierarchy palette in GI Builder and how the spinner uses the ImageButton children to render its arrows.

Component Hierarchy with Spinner Controls

The following template can render the above DOM structure.

<inlinebox style="position:{$position};left:{jsxleft};
			top:{jsxtop};width:{jsxwidth|60};height:{jsxheight|20};
margin:{jsxmargin};border:{jsxborder|solid 1px gray};
vertical-align:middle;">
		<input type="text" value="{jsxvalue}" onchange="{onchange}"
			onkeydown="{onkeydown}" onkeyup="{onkeyup}"
			onmousewheel="{onmousewheel}"
				style="position:absolute;left:0px;top:0px;
				width:100%-12px;height:100%;
border:{iborder|0px;solid 1px gray;0px;0px;};
				font-name:{jsxfontname};font-size:{jsxfontsize};" />
		<attach select="new jsx3.util.List(this.getChildren()).iterator()">
			<drawspace boxtype="'box'" position="'absolute'"
				top="$$target.getChildIndex() * 8"
left="$$parentwidth - 11" width="11" height="8"/>
		</attach>
</inlinebox>

Every attach tag requires a select statement that returns an instance of jsx3.util.Iterator. This provides flexibility when deciding which descendant objects should paint. In the above example the select statement returns all child objects (these are the two child ImageButtons shown in the DOM). No error checking is in place; however, you can implement error checking to ensure that the control only paints children of type jsx3.gui.ImageButton.

When attaching descendants, you can use a drawspace tag to send additional sizing and processing directives to the children. This provides a way for a parent control to force the position and content of any painted descendants. Although this is not always necessary, it is a useful convenience. All fields on the drawspace tag are calculated. This means that strings should be escaped where appropriate:

boxtype="'box'"

Because all fields are calculated, any valid JavaScript can be used. For example, the top value is calculated based upon the child index of the target child.

top="$$target.getChildIndex() * 8"

The $$target variable is always available within attach and for-each tags and points to the current object in the iteration. In this case, the child at index 0 will render at position 0, the child at position 1 will render at position 8. Contextual Variables lists all contextual system variables (those beginning with $$). You can embed these variables within your own code and use them for your own calculations. For example, the variable $$parentwidth defines the width of the drawspace into which the given HTML tag will paint. In the above markup, it determines where to draw the left position of the ImageButton children:

left="$$parentwidth - 11"