简介

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软件包:

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

Frontstage

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

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

最简单的一个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