Controller Class Reference

Controller is a base class used to implement UI component business logic. It contains the entire life cycle process of UI components. In these lifecycle methods, you can implement style adjustments to UI components, event monitoring, and destruction. The Controller provides a special handle method. The triggering behavior of the handle is defined by the component itself. It is suitable for simple component event processing, such as the click event of the xbutton and the change event triggered after the file-selector selects a file; Controller provides a special method: handle, The triggering behavior of handle is defined by the component itself, for example: the <xbutton> triggers handle on mouse click and the <file-selector> triggers handle on change event. There's two ways to reference a Controller to a Component: More...

Inheritance diagram for Controller:

Public Member Functions
	constructor (component)
	destroy ()
	Destruction this controller instance after component destroyed.
	getComponentByName (name)
	handle (...args)
Public Member Functions inherited from Disposable
	addDestroyHook (...hooks)
	destroy ()

Static Public Member Functions
static	extend (proto, statics)
	Extends from Controller class and generates a new Controller class! More...
static	getName ()
	Name of the controller class used in @controller directive. More...

Protected Member Functions
	mounted ()
	This method is called after the component is inserted into DOM tree, where you can add some event listeners to the component or handle any other tasks. More...
	postlink ()
	This method is called during component postlink lifecycle. More...
	prelink ()
	This method is called during component prelink lifecycle. More...

Static Protected Member Functions
static	services ()

Protected Attributes
Component	component
	The component of this controller. More...

Detailed Description

Controller is a base class used to implement UI component business logic. It contains the entire life cycle process of UI components. In these lifecycle methods, you can implement style adjustments to UI components, event monitoring, and destruction. The Controller provides a special handle method. The triggering behavior of the handle is defined by the component itself. It is suitable for simple component event processing, such as the click event of the xbutton and the change event triggered after the file-selector selects a file; Controller provides a special method: handle, The triggering behavior of handle is defined by the component itself, for example: the <xbutton> triggers handle on mouse click and the <file-selector> triggers handle on change event. There's two ways to reference a Controller to a Component:

Since

7.0.0

1. Use @controller directive in layout-template:

   <!-- When the 'ControllerClassNameRegisteredInRootModule' controller is registered in root module and without instance name: -->
   <xbutton @controller="ControllerClassNameRegisteredInRootModule"></xbutton>
   <!-- When the 'ControllerClassName' controller is registered in specific module and without instance name: -->
   <xbutton @controller="module:ControllerClassName"></xbutton>
   <!-- When the 'ControllerClassName' controller is registered in specific module and with an instance name: -->
   <xbutton @controller="module:ControllerClassName as alias"></xbutton>
   <!-- When the 'ControllerClassNameRegisteredInRootModule' controller is registered in root module and with an instance name： -->
   <xbutton @controller="ControllerClassNameRegisteredInRootModule as alias2"></xbutton>

   The following code is an example about creating and registering a controller to a module:

   var module = UIExtension.modular.module('your-module', []);
   module.controller('CustomControllerClass', {
     handle: function(){
            console.info('button click!!');
          }
   });

   and then this is how to use that controller in layout-template:

   <xbutton @controller="your-module:CustomControllerClass">Click me!</xbutton>

   If you use a custom layout template, it is recommended to use this method to specify the controller, which can well manage the components of the module, avoid conflicts, and even allow the template to work normally without load the module, which is conducive to loading components on demand. for example, the following example uses -modules to specify that this div and subcomponents only work if both of the dependent modules are loaded:

   <div @require-modules="your-module,your-another-module">
       <xbutton @controller="your-module:CustomControllerClass">Click me!</xbutton>
   </div>

2. To overwrite the origin controller of a component by fragment config. The purpose of this is to facilitate the change of the original logic of the component. This method does not require registering the controller any more, as the following example:

   new PDFUI({
      fragments:[{
              target: 'hand-tool',
              config: {
                      callback: PDFViewCtrl.shared.createClass({
                              handle: function(){
                                      console.info('hand button clicked!')
                              },
                              // The other methods please refer to the 'protected member functions' part.
                      }, UIExtension.Controller)
              }
      }]
   })

   For a controller with only a handle method, it can be write shortening:

   new PDFUI({
           fragments:[{
                   target: 'hand-tool',
                   config: {
                           callback: function(){
                                   console.info('hand button clicked!')
                           }
                   }
           }]
        })

   Fragment config can also supports to add several proxy hook functions for the controller without affecting the original logic:

   new PDFUI({
      fragments:[{
              target: 'hand-tool',
              config: {
                      callback: {
                              before: function(args){
                                      console.info('called before handle')
                              },
                              after: function(returnValue, args){
                                      console.info('called after handle returned', returnValue)
                              },
                              thrown: function(error, args){
                                      console.error('called if an error thrown from handle', error);
                              }
                      }
              }
      }]
   })

   The above three hooks can be written into a round hook at the same time:

   new PDFUI({
      fragments:[{
              target: 'hand-tool',
              config: {
                      callback: {
                              round: function(_this, handleFn, args){
                                      console.info('before call the handle function');
                                      try{
                                              var returnValue = handleFn.apply(_this, args);
                                              console.info('after the handle function returned');
                                              return returnValue; // you can rewrite the returning value here
                                      } catch(e) {
                                              console.error('an error thrown', e);
                                              throw e; // throw the error upwards if you want do.
                                      }
                              }
                      }
              }
      }]
   })

Member Function Documentation

constructor()

Controller::constructor (   component )

inline

Parameters

component

Component

extend()

static Controller::extend (   proto,   statics  )

inlinestatic

Extends from Controller class and generates a new Controller class!

Parameters

prototype	object - Controller.prototype -
statics	object - static members

getComponentByName()

Controller::getComponentByName (   name )

inline

Find a component which name matches the specific string from root comonent.

See also

Component.getComponentByName

Parameters

name

string

getName()

static Controller::getName ( )

inlinestatic

Name of the controller class used in @controller directive.

Returns

string

handle()

Controller::handle (   args )

inline

This method is triggered by the component during user interaction. Such as click button or a file selected by user via file selector component.

mounted()

mounted ( )

inlineprotected

This method is called after the component is inserted into DOM tree, where you can add some event listeners to the component or handle any other tasks.

See also

Component.mounted

postlink()

Controller::postlink ( )

inlineprotected

This method is called during component postlink lifecycle.

See also

Component.postlink

prelink()

Controller::prelink ( )

inlineprotected

This method is called during component prelink lifecycle.

See also

Component.prelink

services()

static Controller::services ( )

inlinestaticprotected

Returns

Record<string, new<T>(...args:unknown[])=>T> -

Member Data Documentation

component

Component Controller::component

protected

The component of this controller.

Since

7.0.0