Copyright © Bentley Systems, Inc. 2019
This iModel.js sample application uses the Bentley 9-Zone UI layout pattern and demonstrates opening an iModel and viewing its data. For an overview of the 9-Zone UI layout pattern, see 9-Zone UI Pattern.
The user interface is structured using nine zones located in the corners and along the edges of the screen. Each zone contains one or more widgets. The entire screen contains the main content. There may be multiple content views in this area separated by splitters.
- The zone in the top left contains tool buttons and a Backstage button.
- The zone in the top center contains tool settings.
- The zone in the top right contains navigation buttons and a 3d cube navigation aid.
- The zone in the center right contains the Tree component.
- The zone in the bottom right contains the Property Grid component.
- The zone across the bottom contains a status bar.
- The main content contains two views: the Viewport component rendering geometric data, and the Table component.
The data is presented using the following components:
- Viewport: Renders geometric data onto an HTMLCanvasElement.
- Tree: Displays a hierarchical view of iModel contents.
- Property Grid: Displays properties of selected element(s).
- Table: Displays element properties in a tabular format.
There is also a panel on the right edge that is empty initially. The widgets in the center right and bottom right zones can be dragged to this panel by dragging their tabs. The widgets can also be dragged back to the zones.
A second frontstage may be activated from the backstage (opened by pressing the Home button). This frontstage displays two viewports side-by-side and uses panels to display the 3 data components. The view layout may also be switched to display a single viewport by clicking the button below the Home button.
This app serves as a guide on how you can develop your own 9-zone application. See http://imodeljs.org for comprehensive documentation on the iModel.js API and the various constructs used in this sample.
Follow the App Development Setup section under Sample Interactive Apps to configure, install dependencies, build, and run the app.
The purpose of this application is to demonstrate the following:
- Dependencies required for iModel.js-based frontend applications.
- Scripts recommended to build and run iModel.js-based applications.
- How to set up a simple backend for web and electron.
- How to set up a simple frontend for web and electron.
- How to implement unified selection between a viewport, tree, property grid and a table.
- How to implement a Frontstage with multiple Zones and Toolbars, Widgets ( Property Grid, Tree ), Content views ( Table, Viewport ), a Status Bar and a Backstage.
- How to implement a Frontstage with multiple Viewports
For more information about developing a 9-Zone app, see Learning ui-framework Package.