We are going to create a Slider control based on the Yahoo Slider Control, which will have the following features:
It can be associated with a numeric Attribute or Variable;
It can be selected in the control info for attribute or variable;
It supports resizing at design time;
It supports adding an Orientation property with Vertical | Horizontal values.
The steps to create the Slider Control are as follows:
1- Start the User Control Designer.
2- In the New dialog box, select the Control Name and the Folder.
3- The main things you have to describe when developing a User Control are the following:
In our case we must check "Include in control info" so that the control can be selected in the control info of Attributes and Variables.
We also need to check the "Resize supported" checkbox.
At Design Time GeneXus uses an Icon for the toolbox, an XSL in order to render the control so you can specify it in the Design Time section.
At Runtime the control needs some references to additional files like js, css, so you should specify what these files are. In this case we need to support files from Yahoo. The supported files are copied automatically for GeneXus when a Panel is using our control.
The property bound to the attribute must be called "Attribute".
In the DataBinding section we should define what functions are called when a Set or Get is called from GeneXus. This means that when somebody sets the attribute value in GeneXus, it needs to know how the control value is going to be set.
Next we define the Orientation property as follows:
The User Control Designer will create the skeleton of the main jscript. You should write your specific code for the Constructor, Show, and Get and Set methods.
See the gxSlider.js file for the sample code. It looks similar to the following:
The main work was done for Yahoo Slider code, the code written in the UserControl is just a wrapper that implements the interface that GeneXus needs.