An important part of the control to create will be the rendering process. This process consists of the generation of HTML elements used by the control and then the initialization of those generated DOM Elements. The df.WebBaseUIObject class defines a set of methods that are called during this rendering process. Most subclasses augment these methods that are called by the render function that is usually not augmented. Below is an overview of the three important functions.
The openHtml method is the first method that is called while generating the HTML. It gets passed an array object by reference that is used as a string builder. Strings containing HTML can be added to this array and will later be added to the DOM. It is important to call the openHtml method of the base class because it will add elements as well. The cWebBaseControl adds some wrapping div elements and a label.
openHtml(aHtml){
// Forward Send
super.openHtml(aHtml);
aHtml.push('<button class="SpinDecr"><</button>');
aHtml.push('<span class="SpinVal">');
}
The closeHtml method is called after the openHtml method. Not all controls will implement it but it provides a flexible way to generate HTML within the inheritance structure. The df.WebBaseControl uses it to close the wrapping div elements. Note that the base class is usually called at the end of this function (while openHtml does this first).
closeHtml(aHtml){
// Forward Send
super.closeHtml(aHtml);
aHtml.push('</span>');
aHtml.push('<button class="SpinIncr">></button>');
}
The afterRender method is called after the generated HTML is placed into the DOM. Its purpose is to get references to the DOM elements and to do further initialization. The _eElem already contains a reference to the outermost div element and can be used to get references to our generated elements. The framework has a function called df.dom.query that is used to obtain references to DOM elements. Examples of other actions performed from afterRender are attaching event handlers and calling setter methods.
afterRender(){
// Get references to DOM elements
this._eBtnDecr = df.dom.query(this._eElem, "button.SpinDecr");
this._eBtnIncr = df.dom.query(this._eElem, "button.SpinIncr");
this._eControl = df.dom.query(this._eElem, "span.SpinVal");
// Forward Send
super.afterRender();
// Attach DOM event listeners
df.events.addDomListener("click", this._eBtnDecr, this.onDecrClick, this);
df.events.addDomListener("click", this._eBtnIncr, this.onIncrClick, this);
// Execute setters to finish initialization
this.set_piSpinValue(this.piSpinValue);
}
The framework uses the column layout system to size controls. All subclasses of WebBaseControl should respond properly to match this behavior. The WebBaseControl class already adds some div elements around the controls that get sized using CSS properties (float, margin, width). So if possible it is advised to horizontally size the control by using 100% of the available width. The control itself is responsible for vertically sizing the control. If the control is capable of stretching horizontally the setHeight method can be implemented to set the height on one of the DOM elements.
setHeight(iHeight){
if(this._eControl){
if(iHeight > 0){
// Set the height
this._eControl.style.height = iHeight + "px";
}else{
// If a negative value is given we should size 'naturally'
this._eControl.style.height = "80px";
}
}
}
The code sample above shows a possible implementation the setHeight function that sets the height directly on one of the DOM elements.
Previous Topic: Lifecycle
Next Topic: Framework DOM Functions