iModel.js Front-End简介

iModel.js应用程序的前端主要与数据显示和用户交互有关，其以TypeScript实现。前端代码始终在网络浏览器中运行，通过向后端发出请求来访问iModel中的数据。

支持在浏览器网页应用，桌面应用，移动应用。

应用程序的前端脚本需要@ bentley / imodeljs-frontend npm软件包。通用软件包也将是必需的。这些软件包提供前端所需的以下功能：

1. 登录并获取AccessToken。
2. 打开与iModel的“连接”，类似于数据库连接。
3. 通过IModelApp类进行前端应用程序的管理。
4. 字符串和用户界面的本地化工作。
5. 编写用于处理用户事件的工具。通过RpcInterface与后端通信。
6. 显示iModel的视图。
7. 在iModels上执行ECSQL查询。
8. 存储应用程序，项目和iModel的设置。
9. 实施扩展。

iModel.js Front-End核心接口

Front-End主要包含2个核心接口：IModelApp和IModelConnection。其中，IModelApp主要负责前端界面管理与交互工作，IModelConnection主要负责与后端数据的请求与查询等工作。

IModelApp

IModelApp如下所示:

IModelConnection

IModelConnection如下所示:

其中IModelConnection是一个抽象类，我们根据需要使用其适当的子类。

注意：IModelConnection类层次与后端的IModelDb类层次是相互对应的。

其中，IModelConnection包含如下数据类接口:

严格而言，这里的数据集合不是指真正意义上的数据集合，因为其只是包含了操作查询数据的API，而不是包含真正的数据。不过，其概念上是一致的，因此，在此处使用集合一词。

关于ViewManager

ViewManager是iModel.js Front-End最重要的类之一，大部分开发工作都是围绕着该类展开，有关更多了解，请参考前端WebGL的渲染帧循环。

ViewManager包含已打开视图的列表以及当前选定的视图，其还提供有关视图打开/关闭/挂起/继续的更多的操作，有关更多了解，请参考前端API文档，此处，只是简单介绍一下相关的数据结构。

从上图可以清晰的看出，ViewManager包含一个Viewport（视口）集合和一个Decorator（集合），其中每个Decorator会应用于所有的Viewport，Decorator是一个抽象类，更多的时候是由用户根据需要去实现其子类，然后将子类对象添加到ViewManager中，从而在下一帧循环中，出现在每个视口中。

每个Viewport（视口）都包含一个ViewState，ViewState包含Viewport显示的内容，样式等诸多内容，例如，该视口要显示的模型，背景色，网格，阴影等设置。我们一般通过Viewport提供的API设置其视口的属性（这些动作将转发给Viewport），而不是直接操作ViewState，以保证视口内容的同步。注意，ViewState类对应于后端的ViewDefinition。

其中ViewState是一个抽象类，将会根据视口内容2D，3D等而选择使用合适的子类。

其中ViewState类层次如下所示：