Exercise 2 on Spinner with Up and Down Buttons

This example describes how to create a spinner control that includes up and down buttons.

I. Define the control

This exercise adds up and down image buttons to increment or decrement the value of the input box. The control otherwise remains unchanged.

II. Define the class

All controllers remain the same for this class. This is an important point that reflects the flexibility provided by an MVC architecture. Because this exercise merely adds features to the view, there is no need to modify any of the existing controller methods. Only the view template and a few additional model defaults need to be changed, because the updated spinner widget must define more HTML elements to create the up and down images.

The following steps show how to add the up and down controls.

1. Add two additional model defaults. The new spinner control will use up and down images borrowed from the jsx3.gui.TimePicker class. The URL for the up and down images is saved as a complex object (this.arrow.up and this.arrow.down). The General Interface serializer ignores this property when the object is serialized as XML, because there is no need to save it, as it is only used when painting the arrows at runtime. The class appears as follows:

   jsx3.require("jsx3.gui.Template","jsx3.gui.Form");
   
   jsx3.lang.Class.defineClass("my.Spinner1"
   ,jsx3.gui.Template.Block
   ,[jsx3.gui.Form]
   ,function(SPINNER,spinner) {
   
     spinner.init = function(strName) {
       this.jsxsuper(strName);
     };
   
     spinner.jsxvalue = 1;
     this.arrow = {};
     this.arrow.up =   "url(" + jsx3.resolveURI("jsx:///images/jsxtimepicker/" +
   			  "spin_up.gif") + ")";
     this.arrow.down = "url(" + jsx3.resolveURI("jsx:///images/jsxtimepicker/" +
   			  "spin_down.gif") + ")";
   
   	  spinner.getTemplateXML = function() {
    	    return ['<transform xmlns="http://gi.tibco.com/transform/" ' ,
   	    '	 xmlns:u="http://gi.tibco.com/transform/user" version="1.0">' ,
    	    '  <model/>' ,
   	    '  <template/>' ,
   	    '</transform>'].join("");
    	  };
   
   });

2. Expand the definition for the HTML template. Note that the input box is nested inside a special box, inlinebox. This is an adapted SPAN object provided by the template engine that allows the GUI control to have layout (width and height) even if it is relatively positioned or flowed inline with text. This enables you to position the control either relatively or absolutely without having cross browser differences corrupt the layout.

   <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};" />
   		<span onclick="{up}"
   			style="position:absolute;right:11px;top:0px;
   			width:11px;height:8px;overflow:hidden;cursor:\pointer;
   			background-image:{*arrow.up*};"></span>
   		<span onclick="{down}"
   			style="position:absolute;right:11px;top:8px;
   			width:11px;height:8px;overflow:hidden;cursor:\pointer;
   			background-image:{*arrow.down*};"></span>
   </inlinebox>

Note the following items:

• Use simple dot notation when referring to complex fields. For example, to reference the instance/prototype field, arrow.up, use a variable named {arrow.up}. In general any field can be referenced this way.
• The up and down events were defined in the previous exercise when the controller methods were declared. These methods already existed and were used by other methods, such as onkeydown and onmousewheel. Simply referring to these by name (for example, onclick="{up}") makes them callable when a click event occurs in the view.