Modular

Modules are equivalent to a separate namespace, and UIExtension places all components, controllers and directives in different modules, which can avoid name conflicts. Currently, the modules are used in the following scenarios:

• Root module: The basic components and directives are placed in the root module. Root module does not have module name, and does not need to add module name prefix when using it.

• Business module: Business components and controller.

• The module created by Addon.

Detailed information will be introduced in the related sections of Components.

Create a new module

const module = PDFUI.module('module-name', [
    // ...dependencies
]);

The module name cannot be repeated, otherwise it will report errors.

The second parameter is a dependent module that you can pass a name or module object. If it has no dependent module, you can pass an empty array.

Get module object

1. Get root module object

   The root module is the foundation of all modules, and it contains the information of all built-in components and layouts.

   const root = PDFUI.root();
   

2. Get a custom module object

   As with the method of creating module, but it does not have the second parameter. It will report errors when the module name does not exist.

   const module = PDFUI.module('module-name');
   

The methods of the module object

1. Register new component

   // Register a custom component.
   module.registerComponent(class ComponentClass extends UIExtension.Component{
       static getName() {
           return 'custom-component';
       }
   });
   // Or
   module.registerComponent(UIExtension.Component.extend('custom-component', {
       //
   }));
   module.getComponentClass('custom-component');
   

   Use the custom component in the template:

   <module-name:custom-component></module-name:custom-component>
   

2. Register a pre-configured component

   module.registerPreConfiguredComponent('pre-configured-btn', {
       template: '<xbutton name="pre-configured-btn"></xbutton>',
       config: [{
           target: 'pre-configured-btn',
           callback: function() {
               alert('button click')
           }
       }]
   })
   

   Use the component in the template:

   <module-name:pre-configured-btn></module-name:pre-configured-btn>
   

3. Register Controller

   module.registerController(class CustomController extends Controller {
       static getName() {
           return 'CustomController';
       }
       handle() {
           alert('')
       }
   });
   

   Or

   module.controller('CustomController', {
       handle: function() {
           alert('')
       }
   });
   

   Use the controller in the template:

       <module-name:custom-component @controller="module-name:CustomController"></module-name:custom-component>