npm 包 @bentley/presentation-components 使用教程

阅读时长 14 分钟读完

前言

@bentley/presentation-components 是 Bentley 基于 TypeScript 和 React 开发的一套前端组件库。这个库主要用于处理与 Bentley 的 iModel.js 相关的任务,包括从 iModel 中读取数据以及根据数据生成对应的 UI 界面。

本篇文章将会详细介绍如何使用 @bentley/presentation-components 这个 npm 包,并给出一些实用代码示例。

安装 @bentley/presentation-components

@bentley/presentation-components 已经发布到 npm 上,因此可以直接通过 npm 安装:

安装完成后,你就可以在你的项目中引入这个库了。

使用示例

初始化 IModelConnection

在使用 @bentley/presentation-components 的时候,首先需要创建一个 IModelConnection 对象,这个对象用于与 iModel.js 的后端数据服务通信。以下是一个通过 Bentley 的线上数据服务创建 IModelConnection 的示例:

-- -------------------- ---- -------
------ - ---------- ---------------- - ---- -----------------------------

-- -- ---------------- --
----- -------- ------------------------- ------------------------- -
  ----- --------- - -------
  ----- -------- - ------- ----

  -- -- ------- -------
  ----- --------------------

  -- -- ---------------- --
  ----- ---------------- - ----- ------------------------------------ ---------- -------- ---

  ------ -----------------
-

初始化 PresentationManager

PresentationManager 是 @bentley/presentation-components 的核心组件之一,它主要用于从 iModel 中读取数据,这些数据可以被用于生成 UI 界面。以下是一个初始化 PresentationManager 对象的示例:

-- -------------------- ---- -------
------ - ------------- ------------------- - ---- ---------------------------------
------ - ---------------- - ---- -----------------------------

----- -------- --------------------------------- ------------------ ---------------------------- -
  -- --- -------------------
  ----- ------- - --- ----------------------

  -- -- ------- ------
  ----- -------------------------
    ------------- --------
    ------- -------
    ----------------------- ----------------------------------------------------------------------------------
    ------------------- -----------------------
  ---

  ------ --------
-

其中 presentationAssetsRootrulesetDirectories 是从 Bentley 的在线资源库中获取的数据。

使用 ControlledTree 访问树形数据

ControlledTree 是 @bentley/presentation-components 的另一个核心组件,它可以将 iModel 中的数据表示成一组嵌套的树形结构(但并不是所有的数据都可以这样表示)。以下是一个通过 ControlledTree 访问树形数据的示例:

-- -------------------- ---- -------
------ - -- ----- ---- --------
------ - --------------- ------------ ------------ - ---- -------------------------
------ - ---------------- - ---- -----------------------------
------ - ------------- ------------------------ - ---- ---------------------------------

--------- --------------------- -
  ------- -----------------
  ---------- -------
  ------------------ ------- --------------- -- -----
-

--------- --------------------- -
  ------------- ---------------------------
-

------ ----- ---------------- ------- -------------------------------------- ---------------------- -
  ------------------ ---------------------- -
    -------------
    ---------- - -
      ------------- --- --------------------------------------------- ----------------------
    --
  -

  ------- ------------------ - ------ -------------------------- ---- -- -
    -- ------------------------- --- ---------------- -
      -------
    -
    -- ----------------------------- -
      ----------------------------------------
    -
  --

  -------- -
    ------ -
      ---- -------- ------ ------- ------- ---------- - ------ ---
        ---------------
          ------------------------------------
          ---------------------------------------------
          --------------------------------------------
        --
      ------
    --
  -
-

----- -------------------------- ------- ---------------------------- ---------- ---------------- -
  ------ ----------------- - --- -----------------------------
  ------ ------------------ - --- -----------------------------
  ------ ------------------- - --- -----------------------------

  ------------------- ----------------- ---------- ------- -
    ------------- -----------
  -

  ------ ----- ---------------------- -------------- --------------- -
    --- ----- - ----- -------------------- --------- ---------- ---
    ------ ------
  -

  ------ ----- ----------------- -------------- ----------------------- -
    --- ----- - ----- ------------------------
    ------ ------
  -

  ------ ----- ------------------------- -------------- --------- ------ --------------- ------ ------ -- -
    --- ------------- - ----- --------------------------------
    ------ --------------
  -
-

在上面的代码中,我们定义了一个名为 PresentationTree 的组件,这个组件基于 ControlledTree 组件实现。我们在 PresentationTree 组件的构造函数中初始化了一个名为 dataProvider 的对象,这个对象基于 ControlledTreeDataProvider

ControlledTreeDataProvider 是一个自定义的类,它继承了 PresentationTreeDataProvider 这个类,并同时实现了 TreeDataProvider 接口中定义的三个函数 getNodesCountgetNodesgetNodesAndCount。这些函数用于从 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