FoxitPDFSDKforWeb  v10.0.0
Foxit PDF SDK for Web
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:
Disposable AddCirclePathObjectController AddImageAdvController AddImageController AddLinePathObjectController AddRoundRectPathObjectController AddShapesController AddSquarePathObjectController AddTextController AddTextStateController AnnotOperationController BoldStyleController CancelCreatingDrawingController CancelCreatingMeasurementController CompleteCreatingDrawingController CompleteCreatingMeasurementController DownloadFileController EditAllObjectsController EditObjectController EditTextController FindReplaceController GotoFirstPageController GotoLastPageController GotoNextPageController GotoPageController GotoPrevPageController ItalicStyleController JoinSplitController OpenLocalFileController OpenRemoteFileController ShowAnnotFormPropertiesController ShowAnnotPropertiesController ShowSearchPanelController SignPropertyController StatefulController TotalPageTextController ViewModeController

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
componentComponent

◆ extend()

static Controller::extend (   proto,
  statics 
)
inlinestatic

Extends from Controller class and generates a new Controller class!

Parameters
prototypeobject - Controller.prototype -
staticsobject - static members

◆ getComponentByName()

Controller::getComponentByName (   name)
inline

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

See also
Component.getComponentByName
Parameters
namestring

◆ 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

Foxit Software Corporation Logo
@2024 Foxit Software Incorporated. All rights reserved.