从Web浏览器的角度，客户端代码组成为： 表 web 客户端代码组成 |应用程序主页面 |index.html(1) | |-------|------------------| |第三方库 |tp/angular.js、tp/angular-route.js、tp/angular-cookies.js、tp/d3.js (v3.4.12)、tp/topojson.v1.min.js| |框架代码 |onos.js(2)、app/directives.js、app/mast/mast.js、app/mast/mast.html、app/nav/nav.js、nav.html(3)| |支持框架的组件 |app/fw/util/*.js、app/fw/svg/*.js、app/fw/remote/*.js、app/fw/widget/*.js、app/fw/layer/*.js| |核心视图(与ONOS一起安装)|app/view/app/*.js、app/view/settings/*.js、app/view/cluster/*.js、app/view/topo/*.js、app/view/device/*.js、app/view/flow/*.js、app/view/port/*.js、app/view/group/*.js、app/view/link/*.js、app/view/host/*.js、app/view/intent/*.js| 另外还有一系列*.css 样式表。 注意：对于如下注释，关于具体结构可以通过查看`web.xml`配置文件。 * `index.html`是由`MainIndexResource`类动态产生的。`index.html`文件是一个模板，包括javascript的`<script>`元素，和样式表的`<link>`元素。这些内容通过查询注册在`UiExtensionService`的所有 `UiExtensions `。 * onos.js由 `MainModuleResource` 类动态产生。该文件是一个模板，包括视图IDs。视图IDs列表通过遍历由每个注册的`UiExtension`的UiViews产生。 * nav.html是一个HTML片段，由`MainNavResource`类动态生成。该文件是一个模板，包含导航类头部和连接。头部和连接是通过遍历类别值产生，并对每个类别内，遍历每个注册的 `UiExtension`定义的`UiViews`。 ### 注入视图 额外的视图可以在运行时注入到GUI中。每个视图具有唯一的标识(例如，“myviewid”)。以下约定用于布局客户端资源到`.oar`文件。 ~~~ | +-- resources | +-- <UiExtId> | +-- css.html | +-- js.html | +-- webapp +-- app +-- view +-- <viewid1> | +-- *.css | +-- *.html | +-- *.js | +-- <viewid2> +-- *.css +-- *.html +-- *.js ~~~ 其中， `<UiExtId>`是` UiExtension`实例的唯一ID(在构建时，作为“path”参数传递)，`<viewid1>` 和`<viewid2>`是该扩展提供的视图的唯一IDs。