Skip to content

How Components Gets Initialized

The initialization of a component always follows the same scheme:

  1. A component factory method will be called with an start definition object:
1
2
3
4
5
{
   id,   //Optional
   type, //Optional (Used in Stage and Widget)
   on,   //Optional
}
  1. The component factory create a generic or specific instance of the component class with the environment object:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
{
   system,     //Points to base System. In all cases this.env.system except inside of a System
               //instance.
   parent,     //Points to the parent component instance.
   start,      //The origin start definition object.
   init,       //The cloned start definition object merged with default values (id, type).
   on,         //Optional additionally defined "on" binds to avoid merging with "start.on". Will
               //binded before "start.on" callbacks.
   container,
   $container, //Checked and normalized container pointers.
}

  1. The prepare method receives this object and after some basic checks, the super prepare method will be called with the same environment object. The super prepare method:

  2. Saves the environment object.

  3. Initialize the event methods.
  4. Merge the settings and options from start object with default values.
  5. Binds callbacks defined in on to events.
  6. Prepare the visibility event chain.

The super prepare method use the following properties:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
{
   //Used:
   system,  //Get default settings.
   parent,  //Get parent settings.
   start,   //Get override settings, Get options and merge with defaults, Get "on" bindings.
   on,      //Get "on" bindings defined by prepare method.
   init,    //Not really used in prepare method, but the getter "id" will retreive the id from
            //here.

   //Not used:
   container,
   $container,
}
  1. Then the prepare method of the component prepares container, element and scroll elements. From here it is important to use "this.id" (or "this.env.init.id") instead of "this.env.start.id" and "this.init.type" instead "env.start.type". The method complements the environment object with the final element pointers:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
{
   //Left untouched:
   system,
   parent,
   start,
   init,
   on,

   //Modify or add:
   container,
   $container, //Checked and normalized container pointers.
   scroll,
   $scroll, //In case of a widget the scrolling container.
   element,
   $element, //Points to the main element of the component.

}

  1. Block or Splash will be started. After this point individual steps will be carried out.

  2. After the prepare method the user defined init method will be called and then the finalize method. If needed inside the finalize method sometimes await start or await start and await boot will be called. This call should be done as last one. if only start defined then this is the last call, if start and boot then is boot the last call. After that only unblock the component (or close splash).

The System class do not have a component factory method. Step 1 and 2 will be processed inside of the prepare method.

The steps in a component factory in detail:

  1. Check if id is used already. Widgets and Stages will throw an error. Application will return the running instance with this id.

  2. The start definition object will be cloned to the init definition object. This is supplemented with additional or default values:

  3. Set a random id if not set.

  4. Set a default type (in Widget and Stage)

  5. Prepare values for the environment object:

  6. Check if container is valid. The container will be specified here or in the override methods of the facytory methods. System do not execute this step, because System do not have a container.

  7. Create generic or specific instance of the component class with the environment object.

  8. Wait for initialization

  9. Add instance to the internal registry.