# # Appearance

`Appearance` 是一个用来定义 UI 外观的类，它需要提供一个布局模板来指定UI布局以及提供 fragments 来修改布局和控制组件逻辑。

以下是 `Appearance` 类的声明，继承该类的子类需要重写这些方法来定义新的外观：

    class Appearance {
        constructor(pdfui);
        // 布局模板
        public getLayoutTemplate: () => string;
        // 返回fragments配置
        public getDefaultFragments: () => UIFragmentOptions[];
        // 组件被插入到DOM树之前触发
        public beforeMounted: (root: Component) => void
        // 组件被插入到DOM树之后触发
        public afterMounted: (root: Component) => void
        // PDF文档关闭后，这个方法会被调用来禁用组件
        protected disableAll: () => void;
        // PDF文档关闭后，这个方法会被调用来启用组件
        protected enableAll: () => void;
    }

## # 自定义 Appearance 示例

    <html>
        <template id="layout-template">
            <webpdf>
                <div name="toolbar" style="display: flex; flex-direction: row; padding: 6px;">
                    <open-localfile-button></open-localfile-button>
                    <download-file-button></download-file-button>
                </div>
                <div class="fv__ui-body">
                    <viewer @touch-to-scroll></viewer>
                </div>
            </webpdf>
        </template>
    </html>
    <script>
        var CustomAppearance = UIExtension.appearances.Appearance.extend({
            getLayoutTemplate: function() {
                return document.getElementById('layout-template').innerHTML;
            },
            getDefaultFragments: function() {
                return [{
                    target: 'toolbar',
                    action: 'append',
                    template: `<xbutton style="margin: 0 10px">appended via fragment configuration</xbutton>`
                }];
            },
            beforeMounted: function(root) {
                this.toolbarComponent = root.getComponentByName('toolbar')
            },
            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: []
        });
    </script>

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

## # 设备自适应

如果UI布局需要根据设备的不同来实现自适应，就需要根据当前设备特征值判断设备类型，并传给PDFUI不同的appearance实例，参考下面的示例。

以下代码可以使用桌面端Chrome浏览器 Chrome DevTool 的 device mode 来模拟（simulate）不同设备运行。

    <html>
    </html>
    <script>
        var mobileAppearance = UIExtension.appearances.MobileAppearance;
        var desktopAppearance = UIExtension.appearances.RibbonAppearance;
        var tabletAppearance = UIExtension.appearances.RibbonAppearance;

        var isDesktop = PDFViewCtrl.DeviceInfo.isDesktop;
        var isMobile = PDFViewCtrl.DeviceInfo.isMobile;

        var libPath = window.top.location.origin + '/lib';

        var pdfui = new UIExtension.PDFUI({
                viewerOptions: {
                    libPath: libPath,
                    jr: {
                        licenseSN: licenseSN,
                        licenseKey: licenseKey
                    }
                },
                renderTo: document.body,
                // Provide different appearance depending on the device type.
                appearance: isDesktop? desktopAppearance : isMobile ? mobileAppearance : tabletAppearance,
                addons: []
        });
    </script>

    {
        "iframeOptions": {
            "style": "height: 500px",
            "injectCss": [
                "/lib/UIExtension.vw.css"
            ]
        }
    }

## # 内置外观

    // 桌面端外观
    UIExtension.appearances.RibbonAppearance
    // 移动端外观
    UIExtension.appearances.MobileAppearance
    // 根据设备类型选择功能区或移动外观 (支持桌面端和移动端)
    UIExtension.appearances.AdaptiveAppearance