介绍
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 = `
<webpdf>
<toolbar name="toolbar">
<div style="display: flex; flex-direction: row; padding: 6px;">
<open-file-dropdown></open-file-dropdown>
<!– here, xbtn-1 button –>
${newButton}
</div>
</toolbar>
<div>
<viewer></viewer>
</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();
….
}
}
