福昕开发者文档中心

外观 (Appearance) ​

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

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

typescript
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

<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>
json
{
  "iframeOptions": {
    "style": "height: 500px"
  }
}

设备自适应 ​

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

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

html

<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>
json
{
  "iframeOptions": {
    "style": "height: 500px",
    "injectCss": [
      "/lib/UIExtension.vw.css"
    ]
  }
}

内置外观 ​

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