Modularization

A module is an isolated namespace. UIExtension places components, controllers, and directives in modules to reduce name collisions. Modules are used in:

• Root module: built-in components and directives live here; no module prefix in templates.
• Business modules: your components and controllers.
• Modules created by addons

See the Components chapters for more detail.

Create a module

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

Module names must be unique or registration fails.

The second argument lists dependencies (names or module objects). Pass [] if there are none; the argument is required.

Get a module

1. Root module

   The root module is the base for all modules and includes built-in components and layout.

   const root = PDFUI.root();

2. Custom module

   Same API as creation, without the dependency array. An error is thrown if the name does not exist.

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

Module API

1. Register a 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 in a 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 in a template:

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

3. Register a controller

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

   Or:

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

   Use in a template:

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