HowTo: Create the Slider Control

Official Content
This documentation is valid for:
Deprecated.
Note: If you want to create a user control, since GeneXus 16, it is strongly recommended to create a User Control object.

This article describes how 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.

1UserControl

2. In the New dialog box, select the Control Name and the Folder.

2UserControl

3. The main things you have to describe when developing a User Control are the following:

  • Properties
  • Design Time
  • Runtime behavior

3UserControl

  • 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 main Javascript is specified in the Runtime Render textbox, and it has at least 2 parts: Constructor for the control and Show, because they are needed by GeneXus.

Defining Properties:

The property bound to the attribute must be called "Attribute".

The Definition:

4UserControl

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:

5UserControl

Writing the JavaScript Interface

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:

6UserControl

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.