前言
@bentley/presentation-components 是 Bentley 基于 TypeScript 和 React 开发的一套前端组件库。这个库主要用于处理与 Bentley 的 iModel.js 相关的任务，包括从 iModel 中读取数据以及根据数据生成对应的 UI 界面。
本篇文章将会详细介绍如何使用 @bentley/presentation-components 这个 npm 包，并给出一些实用代码示例。
安装 @bentley/presentation-components
@bentley/presentation-components 已经发布到 npm 上，因此可以直接通过 npm 安装：
npm install @bentley/presentation-components
安装完成后，你就可以在你的项目中引入这个库了。
使用示例
初始化 IModelConnection
在使用 @bentley/presentation-components 的时候，首先需要创建一个 IModelConnection 对象，这个对象用于与 iModel.js 的后端数据服务通信。以下是一个通过 Bentley 的线上数据服务创建 IModelConnection 的示例：
-- -------------------- ---- ------- ------ - ---------- ---------------- - ---- ----------------------------- -- -- ---------------- -- ----- -------- ------------------------- ------------------------- - ----- --------- - ------- ----- -------- - ------- ---- -- -- ------- ------- ----- -------------------- -- -- ---------------- -- ----- ---------------- - ----- ------------------------------------ ---------- -------- --- ------ ----------------- -展开代码
初始化 PresentationManager
PresentationManager 是 @bentley/presentation-components 的核心组件之一，它主要用于从 iModel 中读取数据，这些数据可以被用于生成 UI 界面。以下是一个初始化 PresentationManager 对象的示例：
-- -------------------- ---- ------- ------ - ------------- ------------------- - ---- --------------------------------- ------ - ---------------- - ---- ----------------------------- ----- -------- --------------------------------- ------------------ ---------------------------- - -- --- ------------------- ----- ------- - --- ---------------------- -- -- ------- ------ ----- ------------------------- ------------- -------- ------- ------- ----------------------- ---------------------------------------------------------------------------------- ------------------- ----------------------- --- ------ -------- -展开代码
其中 presentationAssetsRoot 和 rulesetDirectories 是从 Bentley 的在线资源库中获取的数据。
使用 ControlledTree 访问树形数据
ControlledTree 是 @bentley/presentation-components 的另一个核心组件，它可以将 iModel 中的数据表示成一组嵌套的树形结构（但并不是所有的数据都可以这样表示）。以下是一个通过 ControlledTree 访问树形数据的示例：
-- -------------------- ---- ------- ------ - -- ----- ---- -------- ------ - --------------- ------------ ------------ - ---- ------------------------- ------ - ---------------- - ---- ----------------------------- ------ - ------------- ------------------------ - ---- --------------------------------- --------- --------------------- - ------- ----------------- ---------- ------- ------------------ ------- --------------- -- ----- - --------- --------------------- - ------------- --------------------------- - ------ ----- ---------------- ------- -------------------------------------- ---------------------- - ------------------ ---------------------- - ------------- ---------- - - ------------- --- --------------------------------------------- ---------------------- -- - ------- ------------------ - ------ -------------------------- ---- -- - -- ------------------------- --- ---------------- - ------- - -- ----------------------------- - ---------------------------------------- - -- -------- - ------ - ---- -------- ------ ------- ------- ---------- - ------ --- --------------- ------------------------------------ --------------------------------------------- -------------------------------------------- -- ------ -- - - ----- -------------------------- ------- ---------------------------- ---------- ---------------- - ------ ----------------- - --- ----------------------------- ------ ------------------ - --- ----------------------------- ------ ------------------- - --- ----------------------------- ------------------- ----------------- ---------- ------- - ------------- ----------- - ------ ----- ---------------------- -------------- --------------- - --- ----- - ----- -------------------- --------- ---------- --- ------ ------ - ------ ----- ----------------- -------------- ----------------------- - --- ----- - ----- ------------------------ ------ ------ - ------ ----- ------------------------- -------------- --------- ------ --------------- ------ ------ -- - --- ------------- - ----- -------------------------------- ------ -------------- - -展开代码
在上面的代码中，我们定义了一个名为 PresentationTree 的组件，这个组件基于 ControlledTree 组件实现。我们在 PresentationTree 组件的构造函数中初始化了一个名为 dataProvider 的对象，这个对象基于 ControlledTreeDataProvider。
ControlledTreeDataProvider 是一个自定义的类，它继承了 PresentationTreeDataProvider 这个类，并同时实现了 TreeDataProvider 接口中定义的三个函数 getNodesCount、getNodes 和 getNodesAndCount。这些函数用于从 iModel 中获取数据，并把数据转换为树形结构。
生成 PropertyGrid
PropertyGrid 是 @bentley/presentation-components 的另一个核心组件，它可以将 iModel 中的数据生成一个类似表格的界面，每行的名称是一个属性名，对应的单元格的内容则是该属性在 iModel 中的值。以下是一个生成 PropertyGrid 的示例：
-- -------------------- ---- ------- ------ - -- ----- ---- -------- ------ - ---------------- - ---- ----------------------------- ------ - --------------------- ------------------------- - ---- ----------------------------------- ------ - ------------ - ---- ------------------------- --------- ----------------------------- - ------- ----------------- --------- -------------------------- ------------------ ------ --------- -- ----- ------------------------- ------ - --------------- --------------- -------------------- ------------- -- -- ----- - --------- ----------------------------- - ------------- -------------------------- - ------ ----- ------------------------ ------- ---------------------------------------------- ------------------------------ - ------------------ ------------------------------ - ------------- ---------- - - ------------- -------------------- -- - ------- ------------------ - ------ --------------------- ---- -- - ----- ------ - -------------------- ----- ----- - -------------------------------- -- ------------------------------------ - ------------------------------------ --------------- ------- -------------------- ----- --- - -- ------- ------------------- - ----------- ------------------------------------- -- - -- ----------------------------- - ----- ---- - ----------------- -- --------------------- ---------------------------------- - -- ---------------------- - ------------------------------ - -------- - -- -------------------- - ------ ----- - ------ - ---- -------- ------ ------- ------- ------ --- ------------- -------------------------------------- ------------------------------------------- --------------------------------------------- -- ------ -- - - ------ ----- -------- ---------------------------------- ----------------- -------- ------- ------------- -------- ---------------------------------- - ----- ------- - --- ----------------------- ----- -------- - ----- ------------------------------------ ------- ------- -------- ------------ ------------------ ----- --- ----- ---------------------- ----- ------- - ----- ------------------------------- -------------------------------------- ---------------- ----- ------------------------------- ------ --------- - -------- ------------------------------------- ------- ----------- -------- ------- - ------ - ----- --------------------------------- ------------ - --- ----------- ---------- -------- -- -- -展开代码
在上面的代码中，我们定义了一个名为 PresentationPropertyGrid 的组件，这个组件基于 PropertyGrid 组件实现。在组件的构造函数中，我们初始化了一个 dataProvider 对象，这个对象基于 IPresentationDataProvider 接口，我们后面会详细介绍这个接口。在组件的 render 函数中，我们将使用这个 dataProvider 对象渲染 PropertyGrid。
在 createPropertyDataProvider 函数中，我们定义了一个名为 provider 的对象，这个对象用于从 iModel 中读取数据，并生成 IPresentationDataProvider 类型的对象，makeTopMostECInstanceNodeKey 函数用于将我们要查看的数据标记出来。这里，我们将 IPresentationDataProvider 对象提供给 PresentationPropertyGrid 组件，这样，PresentationPropertyGrid 就可以正确地显示我们要查看的数据了。
总结
本文详细地介绍了如何使用 @bentley/presentation-components 这个 npm 包来访问和展示 iModel 数据，我们使用了 ControlledTree、PropertyGrid 这两个核心组件，以及 PresentationManager 对象来初始化 iModel 数据。这些知识点可以帮助开发者快速上手基于 iModel 数据的前端开发，具有很好的学习和指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/155450
