Official Content
  • This documentation is valid for:

Under the JScript Runtime Render tab of the User Control Editor you will use javascript to program how your control should be displayed at runtime. 

By default, the UCE generates some code according to the information you have been entering at the Control Definition and Properties tabs. 

That code is the following:

1. A javascript class is created using the name you entered in the constructor field under the Control Definition tab. For the HelloWorld example, the UCE generates:

function HelloWorld()
{}

2. Within the previous class a javascript property will be generated for each property defined under the properties tab.
For the HelloWorld example which has 3 properties (font face, color and size) the following javascript code is generated.

this.Height;
this.FontFace;
this.FontColor;
this.FontSize;

Note that a Width and Height property is generated also if "Resize supported" is checked under the control definition tab.

Besides, you will also find 2 auto generated methods for each data bound property. The names of these methods are generated according to the information you entered for the "GetValueMethod" and "SetValueMethod" (in the property definition).
For example the GxChart control uses a property named GxChart which has data binding. This property has:

GetValueMethod = GetData
SetValueMethod = SetData

GXChart UC properties - UCE

Consequently, the UCE generates the following methods:

// Databinding for property GxChart
this.SetData = function(data)
{
///UserCodeRegionStart:[SetData] (do not remove this comment.) 
///UserCodeRegionEnd: (do not remove this comment.)
}
 // Databinding for property GxChart
this.GetData = function()
{
///UserCodeRegionStart:[GetData] (do not remove this comment.)
 
///UserCodeRegionEnd: (do not remove this comment.)
}

These methods will be used to set the property value (SetValueMethod) and get the property value when posting back the page (GetValueMethod). See How does a User Control work? for further information.

Within the class generated at 1., the UCE will also generate a method which will be responsible for displaying the control. This method will be named using the name you entered in the "Show method" field under the Control Definition tab. By default, the name of this method is "show".

Gxchart UC - Control Definition

this.show = function()
{
///UserCodeRegionStart:[show] (do not remove this comment.)
 
///UserCodeRegionEnd: (do not remove this comment.)
}

As explained before, inside this method you will use javascript code to program how your control should be displayed.

Examples

User Control - Hello World Runtime Render File shows the complete jscript runtime render file for the Hello World example which is quite simple because is just displays a HelloWorld message (see the show method) and only has 5 properties without any data bind (so no set and get methods are generated).

The jscript runtime render file for the GxChart control can be found here. You will notice that this is a more complete example as it has data bind properties (see the SetData and GetData methods).

 

 

 

 

 



Last update: February 2024 | © GeneXus. All rights reserved. GeneXus Powered by Globant