前言
@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