# # 布局模板

## # 示例

在 Foxit PDF SDK For Web 中，模板由包含 UIExtension 特定元素、属性和指令的 HTML 编写。UIExtension 将布局模板与来自组件、控制器和指令的信息相结合，以在浏览器中渲染 UI。以下代码段展示了带有 UIExtension 组件和指令的模板。

    <webpdf>
        <div class="toolbar" style="display:flex;flex-direction:row;padding:6px">
            <print:print-ribbon-button></print:print-ribbon-button>
            <ribbon-button name="freetext-typewriter" @tooltip tooltip-title="toolbar.tooltip.typewriter.title" @controller="states:CreateTypewriterController" icon-class="fv__icon-toolbar-typewriter" >toolbar.create.typewriter</ribbon-button>
        </div>
        <div class="fv__ui-body">
            <viewer @touch-to-scroll></viewer>
        </div>
        <template name="template-container">
            <print:print-dialog></print:print-dialog>
        </template>
    </webpdf>

点击 `run` 按钮来查看运行结果：

    <html>
        <template id="layout-template-container">
            <webpdf>
                <div name="mytoolbar" class="toolbar" style="display:flex;flex-direction:row;padding:6px">
                    <print:print-ribbon-button></print:print-ribbon-button>
                    <ribbon-button name="freetext-typewriter" @tooltip tooltip-title="toolbar.tooltip.typewriter.title" @controller="states:CreateTypewriterController" icon-class="fv__icon-toolbar-typewriter" >toolbar.create.typewriter</ribbon-button>
                </div>
                <div class="fv__ui-body">
                    <viewer @touch-to-scroll></viewer>
                </div>
                <template name="template-container">
                    <print:print-dialog></print:print-dialog>
                </template>
            </webpdf>
        </template>
    </html>
    <script>
        var CustomAppearance = UIExtension.appearances.Appearance.extend({
            getLayoutTemplate: function() {
                return document.getElementById('layout-template-container').innerHTML;
            },
            beforeMounted: function(root) {
                this.toolbarComponent = root.getComponentByName('mytoolbar')
            },
            disableAll: function() {
                this.toolbarComponent.disable();
            },
            enableAll: function() {
                this.toolbarComponent.enable();
            }
        });
        var libPath = window.top.location.origin + '/lib';
        var pdfui = new UIExtension.PDFUI({
                viewerOptions: {
                    libPath: libPath,
                    jr: {
                        licenseSN: licenseSN,
                        licenseKey: licenseKey
                    }
                },
                renderTo: document.body,
                appearance: CustomAppearance,
                addons: [
                    libPath + '/uix-addons/print'
                ]
        });
    </script>

    {
        "iframeOptions": {
            "style": "height: 500px"
        }
    }

## # 布局模板格式说明

    <!-- 布局模板必须以 <webpdf> 为根组件 -->
    <webpdf>
        <!-- 布局模板支持所有 html 标签和属性 -->
        <div class="toolbar" style="display:flex;flex-direction:row;padding:6px">
            <!-- 冒号前缀是组件模块的名字，组件名字和模快名必须是小写 -->
            <print:print-ribbon-button></print:print-ribbon-button>

            <!-- @开头的参数用于标记指令，@后面跟随的是指令的名称，如果指令注册在非根模快中，则指令名需要以 @module-name:directive-name 的格式编写 -->
            <ribbon-button name="freetext-typewriter" @tooltip tooltip-title="toolbar.tooltip.typewriter.title" @controller="states:CreateTypewriterController" icon-class="fv__icon-toolbar-typewriter" >toolbar.create.typewriter</ribbon-button>
        </div>
        <div class="fv__ui-body">
            <!-- Viewer 是用来显示 PDF 的区域，布局模板中必须有一个 viewer 组件 -->
            <viewer @touch-to-scroll></viewer>
        </div>
        <!-- template 是被重写以后的 html template 标签, 通常用来容纳不需要立即显示的组件，比如对话框、右键菜单以及浮动框等 -->
        <template name="template-container">
            <print:print-dialog></print:print-dialog>
        </template>
    </webpdf>

## # 如何指定布局模板和实现设备自适应

请参阅 Appearance 小节。

## # 动态插入布局模板

请点击 `run` 按钮运行如下的示例：

    <script>
        var libPath = window.top.location.origin + '/lib';
        var pdfui = new UIExtension.PDFUI({
                viewerOptions: {
                    libPath: libPath,
                    jr: {
                        licenseSN: licenseSN,
                        licenseKey: licenseKey
                    }
                },
                renderTo: document.body,
                addons: [
                    libPath + '/uix-addons/print'
                ]
        });
        pdfui.getComponentByName('home-tab-group-change-color')
        .then(component => {
            // after this component, insert a new group component.
            component.after(`
                <group>
                    <xbutton name="alert-btn" class="fv__ui-toolbar-show-text-button">Alert</xbutton>
                </group>
            `, [{
                target: 'alert-btn',
                config: {
                    callback: function() {
                        alert('Hello world')
                    }
                }
            }])
        })
    </script>

    {
        "iframeOptions": {
            "style":"height: 500px"
        }
    }

支持插入模板的接口有：

- Component
  - #after(component|template, fragments)
  - #before(component|template, fragments)
- ContainerComponent
  - #append(component|template,fragments)
  - #prepend(component|template,fragments)
  - #insert(component|template, index, fragments)

有关这些接口的详细信息，请参考 API Reference: Component 和 ContainerComponent

## # 初始化时插入布局模板

请参阅 UI Fragments 小节。