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

前言

@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 对象的示例：

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

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

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

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

其中 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

阅读全文

猜你喜欢

  • npm 包 @ngtools/webpack 使用教程

    前言 在前端开发中，使用 Webpack 是必不可少的一部分。特别是在 Angular 开发中，@ngtools/webpack 是非常重要的依赖包。 本文将介绍 @ngtools/webpack 的...

    5 年前
  • npm 包 @angular/tsc-wrapped 使用教程

    介绍 Angular 是一款广泛使用的前端框架，它提供了一组强大的工具和库，帮助开发人员快速构建高质量的 Web 应用程序。其中之一就是 TypeScript ，是一个面向对象的编程语言，它扩展了 J...

    5 年前
  • npm 包 @types/html-webpack-plugin 使用教程

    介绍 html-webpack-plugin 是一款可以根据模板生成 HTML 文件的插件，能够自动处理 HTML 文件中 CSS 和 JavaScript 的引入、压缩、代码注入等一系列操作，使得前...

    5 年前
  • npm 包 @types/extract-text-webpack-plugin 使用教程

    简介 在前端开发中，Webpack 是一个非常流行的打包工具。Extract Text Webpack Plugin 是一个可以将 Webpack 打包后生成的 JS 和 CSS 分离的插件。

    5 年前
  • npm 包 @t2ym/polymer-cli 使用教程

    简介 如果您是一名前端开发人员，并且熟悉 Polymer 技术栈，那么您就会发现 @t2ym/polymer-cli 是一个非常有用的 npm 工具包。本文将介绍如何使用 @t2ym/polymer-...

    5 年前
  • npm 包 @nuxt/typescript-edge 使用教程

    介绍 在前端开发中，使用 TypeScript 非常流行。Nuxt.js 提供了使用 TypeScript 的解决方案，但是官方文档中的 TypeScript 版本可能会滞后于最新版本。

    5 年前
  • NPM 包 @nuxt/typescript 的使用教程

    Nuxt.js 是一个基于 Vue.js 的通用应用框架，可以帮助我们快速搭建 SSR 项目。在前端开发过程中，我们经常需要使用 TypeScript 来提高代码可读性和可维护性，因此 @nuxt/t...

    5 年前
  • npm 包 @nuxt/types 使用教程

    在前端项目中，构建工具是必不可少的。其中，Nuxt.js 是一个基于 Vue.js 的轻量级服务端渲染框架，它可以帮助我们快速搭建高性能、SEO 友好的应用。而 @nuxt/types 就是 Nuxt...

    5 年前
  • npm 包 @gitzone/tsbundle 使用教程

    简介 @gitzone/tsbundle 是一款 TypeScript 应用打包工具，旨在优化 TypeScript 应用构建速度及打包体积。它基于 Rollup 打包引擎封装，提供了多种压缩策略以及...

    5 年前
  • npm 包 @erect/server 使用教程

    简介 @erect/server 是一种快速搭建前端开发服务器的 npm 包，可以通过简单的配置快速搭建一个本地开发服务器，支持自动刷新、HMR 等功能，适用于前端开发、模板制作、静态页面展示等场景。

    5 年前
  • npm 包 @types/relateurl 使用教程

    在前端开发中，处理 URL 地址是必不可少的操作。在 JavaScript 中，我们通常使用一些库来完成这项工作，其中之一便是 relateurl。但是，由于 TypeScript 和 JavaScr...

    5 年前
  • npm 包 @types/clean-css 使用教程

    在前端开发中，常常需要使用 CSS 压缩工具，以便减少 CSS 文件的大小、提升页面加载速度。其中，clean-css 是一个非常流行的开源的 CSS 压缩工具，它可以大幅度减小 CSS 文件的体积，...

    5 年前
  • NPM包img-switcher使用教程

    介绍 img-switcher是一个轻量级的前端库，可以帮助开发者在网页上实现图片不同状态间的切换。它可以构建一个图片数组，通过调用方法来控制显示不同图片，可以用于动态显示网页上的图片，如以下示例： ...

    5 年前
  • npm 包 gulp-web-build 使用教程

    作为一个前端开发者，必须要掌握一些自动化构建工具，而 gulp.js 是其中最为流行的一个。而 gulp-web-build 这个 npm 包则提供了一些方便快捷的方法来构建前端项目。

    5 年前
  • npm 包 gulp-me 使用教程

    简介 在前端开发中，自动化构建工具是不可或缺的一部分。Gulp 是一个流式构建工具，基于 Node.js 平台构建，可以帮助开发者简化前端构建流程。gulp-me 是一个 Gulp 插件，它可以帮助我...

    5 年前
  • npm 包 @neo-one/react-common 使用教程

    前言 在前端开发中，我们常常需要使用一些通用的工具和组件来实现我们的功能和页面效果。而 npm 是一个非常方便和强大的包管理器，可以让我们轻松地使用这些工具和组件。

    5 年前
  • npm 包 @neo-one/react 使用教程

    @neo-one/react 是一个用于搭建分布式应用程序的 React 库。它提供了一些强大的工具和组件，可以帮助你开发高质量的 Dapp（分布式应用）。在本文中，我们将介绍如何使用 @neo-on...

    5 年前
  • npm 包 @neo-one/node-rpc 使用教程

    简介 在以太坊网络中，Node.js 客户端可以通过 RPC（远程过程调用）与链上节点进行通信，实现数据查询、交易发送等操作。@neo-one/node-rpc 是 NeoOne 提供的 Node.j...

    5 年前
  • npm 包 @neo-one/node-protocol 使用教程

    简介 @neo-one/node-protocol 是一款针对 NEO 区块链的客户端库，它可以让开发者更加便捷地通过 Node.js 进行 NEO 区块链的开发和交互。

    5 年前
  • npm 包 @neo-one/driver 使用教程

    简介 @neo-one/driver 是一款 Node.js 模块，它是 NEO 区块链的 JavaScript 驱动程序，提供了一组 API，使得开发者可以轻松地在 JavaScript 中使用 N...

    5 年前

相关推荐

    暂无文章