| FoxitPDFSDKforWeb v11.1.0 Archives Foxit PDF SDK for Web

Public Member Functions | Static Public Member Functions | Protected Member Functions | Static Protected Member Functions | Protected Attributes | List of all members
Controller Class Reference
UIExtension » controllers

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)
| Add a function to destroyHooks list, which will be called during destroy. More...
| destroy ()
| ownsTo (owner)
| Establishes an ownership relationship where this instance will be destroyed when the owner is destroyed. Additionally, the owner will be automatically removed from the destroyHooks list when this instance is destroyed. More...

## 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
| ) |  |
| inline static

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 | ( |  | ) |
| inline static

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 | ( |  | ) |
| inline protected

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 | ( |  | ) |
| inline protected

This method is called during component postlink lifecycle.

See also
  Component.postlink

## ◆ prelink()

Controller::prelink | ( |  | ) |
| inline protected

This method is called during component prelink lifecycle.

See also
  Component.prelink

## ◆ services()

static Controller::services | ( |  | ) |
| inline static protected

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

@2026 Foxit Software Incorporated. All rights reserved.