Control life cycle

The control life cycle describes which system function of the control is called by the system at which time. In the control life cycle, a distinction is made as to whether the control is on an HMI page for which preloading is activated.

The basic control life cycle is described in the following diagram:

Control life cycle 1:

Explanations:

  1. The constructor is called during control instantiation.
  2. The PrevInit function is called after the constructor and before the attribute setter functions are called.
  3. The attribute setter functions are called after the PrevInit function.
  4. The init function is called after the attribute setter functions. At this point, the control attributes are initialized by the attribute setter functions and have valid values.
  5. The Attach function is called after the Init function, once the control has been added to the DOM on the HMI page.
  6. The Detach function is called after a control has been removed from the DOM of the HMI page (e.g. during page switching).
  7. The Destroy function is called after the control has been removed from the DOM of the HMI page, so that the system can destroy the controls. In addition, the Destroy function can be called explicitly at another point (for example, when subordinate controls elements are destroyed).

HMI page: Preload disabled

Normally, preloading of an HMI page is disabled ("Preload this partial: false" as setting for a content file), which means that the controls are not stored in the browser cache. This increases the speed of the initial HMI loading process, but it can lead to a reduction in the loading speed of individual HMI pages on which many controls are instantiated. Memory consumption is also reduced because the pages are no longer in memory when they are not active.

In this case, the constructor of the control is called when the page is loaded (for example, when switching to the page or when loading the start page). This is followed by the PrevInit function, the attribute setter functions, the Init function and the Attach function. As soon as the page is unloaded (e.g. when switching to another page), the Detach function is called, followed by the Destroy function. The life cycle of the controls starts again when the HMI page is loaded.

Control life cycle 2:

HMI page: Preload enabled

If preloading is enabled for an HMI page ("Preload this partial: true" as setting for a content file), the controls are stored in the browser cache. This increases the loading speed of a single HMI page, but it can lead to a reduction in the initial loading process of the HMI. Furthermore, memory consumption is increased because all preloaded pages are always in memory, even if they are never activated.

In this case, the constructor of the control is called as soon as the HMI is initially loaded. This is followed by the PrevInit function, the attribute setter functions and the init function. The Attach function of the control is not called until the HMI page on which the control is instantiated is loaded. The Detach function is called as soon as the HMI page is unloaded. The Destroy function is not called automatically subsequently. The control remains in the browser cache. When the HMI page is reloaded, the Attach function is called directly.

Control life cycle 3:

HMI page: KeepAlive enabled

If KeepAlive is enabled for an HMI page ("KeepAlive this partial: true" as setting for a content file), the controls are kept in the browser cache. This increases the loading speed of a single HMI page if it is called several times. The controls of a page are created when the page is accessed for the first time. They are retained when the page is exited. This only slightly increases memory consumption, since only those pages remain in memory that were enabled once.

Pages with KeepAlive are therefore kept in memory similar to preload when they are no longer needed. In contrast, these pages are not loaded initially. This ensures fast loading of the entire application.

In this case, the constructor of the control is called when the page is loaded (for example, when switching to the page or when loading the start page). This is followed by the PrevInit function, the attribute setter functions and the init function. The Attach function of the control is not called until the HMI page on which the control is instantiated is loaded. The Detach function is called as soon as the HMI page is unloaded. The Destroy function is not called automatically subsequently. The control remains in the browser cache. When the HMI page is reloaded, the Attach function is called directly.

Control life cycle 4: