Control

The Control class

The base class of all MindFusion.UI controls is the Control class. It exposes a set of methods, properties and events, that are shared by all controls.

An instance of the InputDialog class, which also derives from Control.

1. Methods

Importand methods of the Control class are the ones, determining its lifecycle - draw, attach, render and dispose.

2. Properties

• visible - a boolean property, that controls the Control's visibility. Setting the visible property to false will change its css display value to "none".
• enabled - a boolean property, indicating whether user interactions are allowed for this Control. Setting the enabled property to false will create a disabled overlay over the Control's element.
• sizing and positioning properties - width, height, top and left. The type of these properties is Unit. Units represent a length measurement, which can be specified in number of pixels or as a percentage value.
  
  

  JavaScript

  // create a new instance of the WindowHost control
  var host = new ui.WindowHost(document.getElementById("host"));
  host.width = host.height = new ui.Unit(100, ui.UnitType.Percent);
  host.theme = "standard";
  host.render();

  
  
• styling properties - theme and cssClass. MindFusion.UI offers a set of predefined themes, which can be used to style the appearance of all controls uniformly.

3. Events

Importand events of the Control class are controlLoad - raised when the control is loaded and ready for interaction, and controlUnload - raised upon disposing.

JavaScript

host.controlLoad.addEventListener(handleControlLoad);
host.render();function handleControlLoad(sender, args)
{
     if(sender == host)
     {
         //event handling code comes here
     }
}

Control lifecycle

The lifecycle of a Control is determined by the following phases:

1.Initialization

Initialization is handled by the constructor function. A parameter, which can be passed to the constructor function is the DOM element,
with which the control will be associated. If the parameter is omitted, a new HTML element (most commonly a DIV element) will be created.2.

2.Rendering

Firstly, the control's internal HTML structure is created, which is done by the draw method.
Then, event handlers are attached, which is done by the attach method.
The render method handles both of these processes and can be used as a shortcut method if the DOM element of the control has already been specified in the constructor.
Otherwise, the dynamically created element, returned by the draw method should be first added to the page DOM and then the attach method should be called.
When the rendering phase is finished the controlLoad event is raised.

3 Disposing

Firstly, event handlers are detached, which is done by the detach method and the controlUnload event is raised.
Then, if the control's element was dynamically created, it is removed from the page DOM.