# # Introduction to addons

In the /lib/uix-addons directory, Foxit PDF SDK for Web provides a set of rich addons that can be freely combined. The following structure lists the currently supported addons. Each addon can be loaded individually or in combination as needed.

    uix-addons
        ├── aria                    ----- Make components support ARIA standards
        ├── comparison              ----- Provides the function of comparing PDF documents
        ├── edit-graphics           ----- Edit page objects
        ├── export-form             ----- Export form
        ├── file-property           ----- Used to display PDF file
        ├── form-designer           ----- Provides form editing function
        ├── form-to-sheet           ----- Provides functionality for form-to-sheet conversion
        ├── full-screen             ----- Full screen
        ├── h-continuous            ----- Horizontal continuous page mode
        ├── h-facing                ----- Horizontal facing mode for the cover
        ├── h-single                ----- Horizontal single page mode
        ├── import-form             ----- Import form
        ├── javascript-form         ----- Add, modify and test JavaScript within the document
        ├── manage-comments         ----- Provides a series of functions to control the list of comments
        ├── multi-media             ----- Provides the function of adding audio and video annotations
        ├── page-template           ----- Provides the function of editing page templates
        ├── password-protect        ----- Password protection
        ├── path-objects            ----- Edit path objects
        ├── preview                 ----- Supports output preview feature
        ├── print                   ----- Print PDF pages function
        ├── range-input             ----- Provides range-input component.
        ├── read-aloud              ----- Read aloud UI components
        ├── recognition-form        ----- Form field recognition
        ├── redaction               ----- Redaction
        ├── rotate-pages            ----- Rotate pages
        ├── search                  ----- Text search function
        ├── text-object             ----- Edit text objects
        ├── thumbnail               ----- Provides the function of thumbnail sidebar
        ├── undo-redo               ----- Undo and redo
        ├── xfa-form                ----- Provides the function of editing static XFA form
        ├── dynamic-xfa             ----- Provides the function of editing dynamic XFA form
        ├── allInOne.js             ----- Collection of all add-ons
        └── allInOne.mobile.js      ----- Collection of all add-ons that support mobile

## # Dependency Hierarchy

In order to avoid repeating registration and execution of the same functions in different addons, the functions will be extracted into separate addons, and then passively loaded as dependencies.

    edit-graphics
        ├── path-objects
        └── text-object

When the application loads `path-objects` or `text-object`, `edit-graphics` will also be loaded and only loaded once.

## # Load Addons

### # Load addons individually

You can load all available addons or a few specific addons individually.

Code Example:

    <script src="path/to/UIExtension.full.js"></script>
    <script>
        var pdfui = new UIExtension.PDFUI({...
        addons:[
            "path/to/customized-addon/addon.info.json",
            "path/to/lib/multi-media/addon.info.json",
            ...
        ],
        ...
        })
    </script>

The file `/examples/UIExtension/complete_webViewer/index.html` also provides an example to show how to load all addons individually.

### # Load addons in combination

In the network environment, downloading too many addons would increase the HTTP requests. To minimize the number of HTTP requests, you may prefer loading all addons in a single file. We provide two script files `allInOne.js` (for PC) and `allInOne.mobile.js` (for mobile) which are a combination of all addons. Besides, you can use our merge addons tools to tailor addons.

## # The addon's structure

### # The entry file -- addon.info.json

The `addon.info.json` is the addon entry file, which includes the addon's library name, i18n sources and css files.

Example:

    {
        "library": "ExampleUIXAddon",
        "i18n": {
            "ns": "example",
            "sources": {
                "en-US": "./locales/en-US.json",
                "zh-CN": "./locales/zh-CN.json"
            }
        },
        "css": [
            "./index.css"
        ]
    }

### # The "i18n" sources

This item is used to configure localization. "ns" specifies namespace. "sources" specifies files.

After configuration, you can use `[i18n-namespace]: i18n-key` to implement localization.

In the case below, i18n namespace is "example", "i18n-key" could be "toolbar.title", "dialog.title" or "buttons.addText"(Refer to zh-CN.json for details).

    <h6>example:dialog.title</h6>

will be translated to

    <h6>Dialog title</h6>

and

    <h6>对话框标题 Dialog title</h6>

### # The "css" field

This item specifies style sheets("index.css" is the output of style-loader). Currently only CSS is supported.

## # allInOne.js and allInOne.mobile.js

The `allInOne.js` is a script file that contains all currently supported addons for PC, and the `allInOne.mobile.js` is for mobile. They are provided for your convenience to load addons in a combination way. The difference between them is that `form-designer` and `text-object` addons are not available in mobile.

### # Load allInOne.js and allInOne.mobile.js

    <script src="path/to/UIExtension.full.js"></script>
    <script src="path/to/allInOne.js"></script>
    <script src="path/to/allInOne.mobile.js"></script>
    <script>
        var pdfui = new UIExtension.PDFUI({...
        addons:UIXAddons, // UIXAddons is the library name in allInOne.js
        ...
        })
    </script>

### # Loading custom addInOne.js and allInOne.mobile.js

The default `allInOne.js` (for PC) and `allInOne.mobile.js` (for mobile) combine all currently supported addons into a single script. You can detach the unwanted addon by `UIXAddons(UIExtension).filter` and then load them to web viewer.

For example:

    <script src="path/to/UIExtension.full.js"></script>
    <script src="path/to/allInOne.js"></script>
    <script>
        UIXAddons = UIXAddons(UIExtension).filter(addon=>addon.getName()!= 'editTextObject')
        var pdfui = new UIExtension.PDFUI({...
        addons:UIXAddons,
        ...
        })
    </script>

## # Merge addons

If you want to merge addons by yourself or rebuild `allInOne.js` or `allInOne.mobile.js` to merge your selected addons, you can use our merge addon tools `addon loader` and `gulp plugin`. Check out the links below for details.

- addon-loader for webpack
  (opens new window)
- addon merge tool for gulp
  (opens new window)

You can also refer to `/examples/UIExtension/use-merged-addon` for usage.

## # Develop custom addons

The /examples/UIExtension/scaffoldDemo/ is a scaffold project that contains an open source addon example. You may refer to the /examples/UIExtension/scaffoldDemo/readme.md file in that directory to start developing your own addons.