【Foxit PDF SDK for Web】如何自定义按钮组件？

介绍

Foxit PDF SDK for Web 有一个功能齐全的查看器演示。但有时，您可能希望定制演示 UI 以加载您所需的功能。您可能只想加载带有自定义事件跟踪的按钮。本文将指导您逐步完成所有阶段。

1. 添加一个简单的按钮到工具栏

1.1. xbutton 组件属性

常用按钮属性

属性名称	描述
name	用于定义组件的名称
text	显示按钮文本
icon-class	设置按钮的图标样式
disabled	按钮禁用状态
isVisible	按钮可见性状态

更详细的信息请参考 API Reference 的 Component 和 Button Component。

1.2. 通过xbutton组件创建自定义按钮

基于 xbutton 组件创建自定义按钮模板。代码如下：

const newButton = `<xbutton name="xbtn-1" icon-class="fv__icon-toolbar-hand">simple button 1</xbutton>`;

1.3. 将按钮模板放入 PDFViewer 模板

创建 PDFViewer 模板

将自定义按钮放入 PDFViewer 模板

代码如下：

const template = `

<open-file-dropdown></open-file-dropdown>

<!– here, xbtn-1 button –>

${newButton}

</div>

</toolbar>

<div>

</div>

</webpdf>

1.4. 使用Fragments管理模板中按钮的配置项和交互逻辑

Fragments属性

属性名称	描述
目标	目标按钮的名称
配置	配置该按钮的调用功能

代码如下：

const fragments = [

{

target: 'xbtn-1', // button name

config: {

callback: function () {

alert('click xbtn-1!');

}

}]

1.5. 构建 PDF 查看器

创建一个自定义的Appearance类，并在该类中创建PDF Viewer模板/Fragments的回调函数

初始化PDFUI，完成一个简单的PDF Viewer

代码如下：

var CustomAppearance = PDFViewCtrl.shared.createClass({

getLayoutTemplate: function () {

return template;

getDefaultFragments: function () {

return fragments;

}

}, UIExtension.appearances.Appearance);

var PDFUI = UIExtension.PDFUI;

var Events = UIExtension.PDFViewCtrl.Events;

var pdfui = new PDFUI({

viewerOptions: {

libPath: '../../../lib',

jr: {

readyWorker: readyWorker

defaultScale: 1

renderTo: '#pdf-ui',

appearance: CustomAppearance,//UIExtension.appearances.adaptive,

fragments: [],

addons: UIExtension.PDFViewCtrl.DeviceInfo.isMobile ?

'../../../lib/uix-addons/allInOne.mobile.js' :

'../../../lib/uix-addons/allInOne.js'

});

window.pdfui = pdfui;

2. 使用 Controller对 UI和业务逻辑进行分离

2.1. 控制器常用方法

方法名称	描述
prelink	在组件预链接生命周期中调用
postlink	在组件链接后生命周期中调用
mounted	在组件插入DOM tree之后调用，在DOM tree中，您可以向组件添加一些事件侦听器或处理任何其他任务
destroy	在组件销毁后销毁此控制器
handle	由组件在用户交互期间触发。例如，单击按钮或用户通过文件选择器组件而选择的文件

2.2. 创建一个简单的控制器

通过承袭UIExtension.Controller;创建自定义的CustomController类

创建一个名为moduleA的模块；

将CustomController注册到moduleA；

代码如下

class CustomController extends UIExtension.Controller {

static getName() {

return 'CustomController';

}

handle() {

alert('click in CustomController')

}

// create a module

const module = PDFUI.module('moduleA', []);

// Register Controller to moduleA

module.registerController(CustomController);

2.3. 清理1.4. 中xbtn-1 Fragments配置项

清除fragments中关于xbtn-1的配置项，代码如下：

fragments = [];

2.4. 附加CustomController 到自定义按钮

通过 @controller 指令将控制器类附加到组件。代码如下：

const newButton = `<xbutton name="xbtn-1" icon-class="fv__icon-toolbar-hand" @controller="moduleA:CustomController">simple button 1</xbutton>`;

3. 为什么要使用Controller来管理组件

3.1. 跟踪应用程序运行时事件

在Controller中配置事件跟踪更容易，比如：添加按钮点击的事件跟踪等。

3.2. 通过Controller处理UI与Data的复杂交互

Web SDK PDF UI是一个基于MVC构建的UI框架

控制器可用于响应视图组件生命周期函数和用户操作

比如：

按钮组件接收到点击事件时，默认会调用Controller的handle方法，在handle方法中会调用模型（PDFViewer）的方法更新模型上的数据

模型数据更新后，会发出事件通知

最后，视图组件在监听到模型的数据变化后更新页面的显示

3.3. Demos

代码如下：

class ButtonController extends UIExtension.Controller {

static getName() {

return 'ButtonController';

}

prelink() {

// send an event to server

}

postlink() {

// send an event to server

}

mounted(){

// send an event to server

}

async handle() {

// send an event to server

alert('click in ButtonController')

// get document object

doc = await pdfui.getCurrentPDFDoc();

….

}