This is intended to briefly explain how the User Control works for a better understanding of the topic.
The questions that we address here are:
- how does a user control work?
- how does GeneXus render a user control at runtime?
The answers are covered in the next 3 steps which take place when generating a page that uses a user control.
When rendering the page that has a user control, GeneXus will first insert a DIV (in the place where the user control is located) and will then assign the code generated by the control (see step 3) as the innerHtml of the DIV.
After placing the DIV, GeneXus will create an instance of the class defined in the runtime render class. Then, the control properties will be assigned according to the values set at design time. In the case of data bound properties, GeneXus will call its "SetValueData" method passing the attribute, variable or SDT bound to that property.
Finally, after all the properties have been initialized, the show method of your control will be invoked. This method will be in charge of producing all the necessary HTML code to display your control. This HTML code must then be assigned to the DIV that GeneXus created in step 1 using the "setHtml" function:
//Hello World runtime render file sample
this.show = function(data)
///UserCodeRegionStart:[show] (do not remove this comment.)
var buffer= '<font face="' + this.FontFace + '" color="' + this.FontColor + '" size="' + this.FontSize + '">Hello World!!!</font>';
///UserCodeRegionEnd: (do not remove this comment.)
It is important to remark that the steps described above are automatically "executed" by GeneXus, that is to say, the programmer is only responsible for generating the HTML code of the control (inside the show method). After that, the programmer must assign this code to the DIV as explained above.
Check the User Controls samples for more details.