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是一个铺面全屏的页面，将页面分为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是用于打开前台（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