Bentley Communities
Bentley Communities
  • Site
  • User
  • Site
  • Search
  • User
  • Welcome
  • Products
  • Support
  • About
  • More
  • Cancel
中国BDN社区
  • Welcome to Bentley Communities
  • Bentley's Communities
  • 中国BDN社区
  • Cancel
中国BDN社区
中国BDN社区-威客 iModel.js.UI开发基本介绍
    • Sign In
    • 中国BDN社区-威客
    • -iTwin.js编程
      • iModel.js Front-End简介
      • iModel.js 样例项目配置与运行
      • iModel.js.UI开发基本介绍
      • iModel.js前端统一选择一致性机制
      • iModel.js基本查询
      • iModel.js若干前端功能开发样例
      • imodel图形显示简单介绍
      • iModel文件的合并等操作
      • Redux基本使用
      • simple-viewer-app源码简单分析
      • TypeScript基本介绍及环境配置
      • 下载视口截图
      • 关于imodel测量单位的转换
      • 关于如何导入与导出imodel中schema文件
      • 基于PresentationRules个性化显示iModel的内容
      • 如何在视窗内添加自定义装饰
      • 如何将2个bim中的图形模型显示在一个视图中
      • 用户选择保存感兴趣的视图
    • +MicroStation CONNECT版SDK的新变化
    • +MicroStation编程技巧
    • +OpenRoads中国版平台开发指南
    • +ORD SDK二次开发编程
    • +一步步学习ABD-CE开发
    • +一步步学习MicroStation CE Addin开发
    • 一步步学习MicroStation CE MDL开发
    • +一步步学习ProjectWise编程
    • 中国优先社区二次开发精华帖汇总
    • +学习Microstation交互式工具开发
    • +过期帖,留存仅供参考
    • +非Bentley社区分享的文章
    • C#、C/C++相关的编程知识汇总

     
     Questions about this article, topic, or product? Click here. 

    iModel.js.UI开发基本介绍

    简介

    iModelJs.UI是Bentley针对iModel行业基于React和Redux基础上推出的一个开源UI框架,并包括大量的组件及控件,并兼容其他的前端UI控件库。目标是限制使iModel内容模糊的UI组件的数量,以及确保Extensions可以扩展主机提供IModelApp提供的UI。

    (附github源码地址https://github.com/imodeljs/imodeljs)。

    官方文档详见https://www.imodeljs.org/learning/ui/

     

    用户基于此UI框架可以快速的定制与开发自己的iModelJs前端应用APP。

     

    库组织:

    iModel.js UI库在@bentley范围内分为以下NPM软件包:

    包名

    描述

    ui-abstract

    UI控件及其他,例如工具栏,按钮,菜单,Backstage,StatusBar和Widget。

    ui-core

    通用React组件,例如Dialog,MessageBox,SearchBox,RadialMenu等。

    ui-components

    React面向数据的组件,例如PropertyGrid,Table,Tree和Breadcrumb等。

    ui-ninezone

    按照Bentley 9-Zone模式为应用程序用户界面布局的React组件。

    ui-framework

    用于登录,项目,iModel和视图选择以及应用程序UI的配置,包括Backstage,Frontstage,Zones和小部件(Widgets)等。

     

    只要理解如下2个内容即Frontstage,Backstage,基本可以了解该套UI框架的主体。

    Frontstage

    Frontstage是一个铺面全屏的页面,将页面分为9格,如下所示:

    推荐功能分类与总结如下所示:

    Toos

    工具类

    Tool Settings

    工具设定

    Navigation

    导航

    App Specific

    特定于应用

    Radial Hub & Context Bar

     

    Browse

    浏览

    App specific

    特定于应用

    Status

    状态

    Properties

    属性

     

    最简单的一个Frontstage定义如下所示(其定义了一个imodel浏览视口):

    public get frontstage() {
    
        return (
    
         <Frontstage
    
        id="SampleFrontstage"
    
        defaultTool={CoreTools.selectElementCommand}
    
        defaultLayout={this._contentLayoutDef}
    
        contentGroup={this._contentGroup}
    
        isInFooterMode={true}
    
        />
    
        );
    }

    效果如下所示:

    一个常见的Frontstage定义如下所示:

     

    public get frontstage() {
    
    //定义页面布局;
    
    const _contentLayoutDef = new ContentLayoutDef({
    
    horizontalSplit: { percentage: 0.75, top: 0, bottom: 1 },
    
    });
    
    //定义页面内容组;
    
    const _contentGroup = new ContentGroup({
    
    contents: [
    
    {
    
    classId: IModelViewportControl,
    
    applicationData: {
    
    viewState: this.viewStates[0],
    
    iModelConnection: UiFramework.getIModelConnection(),
    
    },
    
    },
    
    {
    
    classId: TableContent,
    
    applicationData: {
    
    iModelConnection: UiFramework.getIModelConnection(),
    
    },
    
    },
    
    ],
    
    });
    
    
    
    return (
    
    <Frontstage
    
    id="SampleFrontstage"
    
    defaultTool={CoreTools.selectElementCommand}
    
    defaultLayout={_contentLayoutDef}
    
    contentGroup={_contentGroup} //定义页面呈现主内容;
    
    isInFooterMode={true}
    
    topLeft={
    
    <Zone
    
    widgets={[
    
    <Widget isFreeform={true} element={<SampleToolWidget />} />,
    
    ]}
    
    />
    
    }
    
    topCenter={<Zone widgets={[<Widget isToolSettings={true} />]} />}
    
    topRight={
    
    <Zone
    
    widgets={[
    
    /** Use standard NavigationWidget delivered in ui-framework */
    
    <Widget
    
    isFreeform={true}
    
    element={
    
    <IModelConnectedNavigationWidget
    
    suffixVerticalItems={
    
    new ItemList([this._viewSelectorItemDef])
    
    }
    
    />
    
    }
    
    />,
    
    ]}
    
    />
    
    }
    
    centerRight={
    
    <Zone
    
    defaultState={ZoneState.Minimized}
    
    allowsMerging={true}
    
    widgets={[
    
    <Widget
    
    control={TreeWidget}
    
    fillZone={true}
    
    iconSpec="icon-tree"
    
    labelKey="NineZoneSample:components.tree"
    
    applicationData={{
    
    iModelConnection: UiFramework.getIModelConnection(),
    
    }}
    
    />,
    
    ]}
    
    />
    
    }
    
    bottomCenter={
    
    <Zone
    
    widgets={[
    
    <Widget isStatusBar={true} control={AppStatusBarWidget} />,
    
    ]}
    
    />
    
    }
    
    bottomRight={
    
    <Zone
    
    defaultState={ZoneState.Open}
    
    allowsMerging={true}
    
    widgets={[
    
    <Widget
    
    id="Properties"
    
    control={PropertyGridWidget}
    
    defaultState={WidgetState.Closed}
    
    fillZone={true}
    
    iconSpec="icon-properties-list"
    
    labelKey="NineZoneSample:components.properties"
    
    applicationData={{
    
    iModelConnection: UiFramework.getIModelConnection(),
    
    }}
    
    syncEventIds={[SyncUiEventId.SelectionSetChanged]}
    
    stateFunc={this._determineWidgetStateForSelectionSet}
    
    />,
    
    ]}
    
    />
    
    }
    
    rightPanel={<StagePanel allowedZones={[6, 9]} />}
    
    />
    
    );
    
    }

    效果如下所示:

     

    Backstage

    Backstage以创建和管理BackStage菜单项的显示,BackStage是用于打开前台(frontStage)以及启动任务和命令的菜单,它还可以打开全局覆盖或者模态(Modal Stages)向用户显示应用程序设置和数据管理。

    一个基本的BackStage定义如下所示:

    public get backstageItems(): ReadonlyArray<BackstageItem> {
    
    if (!this._backstageItems) {
    
    this._backstageItems = [
    
    BackstageItemUtilities.createStageLauncher(
    
    "SampleFrontstage",
    
    100,
    
    10,
    
    IModelApp.i18n.translate("NineZoneSample:backstage.sampleFrontstage"),
    
    undefined,
    
    "icon-placeholder"
    
    ),
    
    BackstageItemUtilities.createStageLauncher(
    
    "SampleFrontstage2",
    
    100,
    
    20,
    
    IModelApp.i18n.translate(
    
    "NineZoneSample:backstage.sampleFrontstage2"
    
    ),
    
    undefined,
    
    "icon-placeholder"
    
    ),
    
    ];
    
    }
    
    return this._backstageItems;
    
    }

    其效果如下所示:

    补充

    更多UI框架使用详情,请参见iModel.js样例项目ninezone-sample-app。

    附github源码地址:

    https://github.com/imodeljs/imodeljs-samples/tree/master/interactive-app/ninezone-sample-app

    项目配置及运行方式请参见:

    https://communities.bentley.com/communities/other_communities/bdn_other_communities/w/chinabdn-wiki/50995/imodel-js-2-0

    • Share
    • History
    • More
    • Cancel
    • Devin Liu Created by Devin Liu
    • When: Mon, Aug 17 2020 2:05 AM
    • Devin Liu Last revision by Devin Liu
    • When: Mon, Aug 17 2020 2:21 AM
    • Revisions: 3
    • Comments: 0
    Recommended
    Related
    Communities
    • Home
    • Getting Started
    • Community Central
    • Products
    • Support
    • Secure File Upload
    • Feedback
    Support and Services
    • Home
    • Product Support
    • Downloads
    • Subscription Services Portal
    Training and Learning
    • Home
    • About Bentley Institute
    • My Learning History
    • Reference Books
    Social Media
    •    LinkedIn
    •    Facebook
    •    Twitter
    •    YouTube
    •    RSS Feed
    •    Email

    © 2023 Bentley Systems, Incorporated  |  Contact Us  |  Privacy |  Terms of Use  |  Cookies