福昕开发者文档中心

使用配置文件自定义 UI ​

福昕 PDF SDK 鸿蒙版提供简洁友好的内置 UI，开发者无需耗费过多时间进行界面设计，即可快速构建功能完善的 PDF 应用。此外，SDK 还支持两种灵活的 UI 自定义方式，满足开发者个性化需求：

  1. UI Extensions 组件源代码： 提供即用型 UI 模块，支持深度定制。
  2. JSON 配置文件 (uiextensions_config.json)： 高效灵活地修改内置 UI 元素。

以下介绍如何通过配置文件自定义功能模块、权限管理和 UI 元素：选择功能模块、设置权限、修改 UI 元素属性，无需编写额外代码或重新设计界面。

配置项说明（查阅方式） ​

完整配置项、默认值与可选值已单独成文，请按场景参阅：

场景文档位置
在线开发者文档站点配置项说明
发版 SDK 包本地查阅解压包根目录 docs/uiextensions_config.md（与 API 手册同级）

样例配置文件路径：

samples/complete_pdf_viewer/entry/src/main/resources/rawfile/uiextensions_config.json

提示

未在 JSON 中写出的字段使用 SDK 内置默认值。建议在完整样例配置上修改取值，勿随意删减嵌套子对象中的键，详见配置说明文档中的「使用注意」。

通过配置文件实例化 UIExtensionsManager 对象 ​

在快速构建中，我们介绍了如何使用 UI Extensions 组件实例化 UIExtensionsManager 对象，并默认加载所有内置 UI 框架。本节介绍如何使用配置文件实例化 UIExtensionsManager ，以便按需求自定义 UI。

前提条件：

  • 您已将名为 uiextensions_config.json 的 JSON 配置文件放置于工程 entry/src/main/resources/rawfile 目录下。

操作步骤：

  • 在入口页面（如 entry/src/main/ets/pages/Index.ets）中添加以下代码：
ts
import { UIExtensionsManager, UIExtensionsComponent, ConfigModel } from 'uiextensions';

// ...

// @State uiextensionsManager: UIExtensionsManager = new UIExtensionsManager(getContext(this));
@State
uiextensionsManager: UIExtensionsManager = new UIExtensionsManager(
    getContext(this),
    new ConfigModel(getContext(this), 'uiextensions_config.json')
);

通过配置文件自定义 UI 示例 ​

以下以发版包 samples/complete_pdf_viewer 为例演示常见修改。

打开示例步骤：

  1. 在 DevEco Studio 中打开 complete_pdf_viewer 示例工程。
  2. 在 samples/complete_pdf_viewer/entry/src/main/resources/rawfile 目录下找到 uiextensions_config.json。

示例 1：禁用 search 和 pagenavigation 功能模块 ​

在 JSON 配置文件中，将 search 和 pagenavigation 的值设置为 false：

json
"search": false,
"pagenavigation": false

重新编译并运行示例，对比效果如下：

sample_1.pngsample_2.png

示例 2：禁止执行 JavaScript ​

将 permissions 对象的 runJavaScript 属性设置为 false：

json
{
  "permissions": {
    "runJavaScript": false
  }
}

重新编译并运行示例，此时点击包含 JavaScript 脚本的按钮将无任何响应。

示例 3：将高亮颜色从黄色设置为红色 ​

在 uiSettings.annotations 下将 highlight 的 color 设置为 #ff0000（红色）：

json
{
  "highlight": {
    "color": "#ff0000",
    "opacity": 1.0
  }
}

重新编译并运行示例，对比效果如下：

sample_3.pngsample_4.png