作者： M.S-Group.皮皮熊，M.S-Group组织主要成员之一，数通行业老兵，精通传统数通网络技术，SDN/NFV新技术的狂热拥护者！

一、文章目标

1.1 目标

随着SDN技术的逐步成熟，大量的传统数通厂家和新型的IT厂家，都投入了一定的人员进行相关的产品技术预研。而ODL作为SDN控制器的主要开源项目，自然也成了多数人学习和搭建模拟环境试验的首选。但是，从本人切入了解、学习以及在此上面，完成产品预研的经历看，由于文档缺失、网上各种文章质量不等，从搭建环境、理解框架工作机制到完成模块扩展定制，花了大量的时间，因此特整理此文，希望从代码组织、工作原理及扩展实践几个维度，系统的说明相关步骤，以方便后续人员了解、少走弯路、节省时间！

另外，开源系统自带的DLUX相关组件，由于界面比较简约，个人认为主要价值是示例性质、各团队若在ODL基础上，进一步研发自己的产品，势必会进行组件扩展，因此也希望本扩展用例能再这方面也产生一定的推进作用。

1.2 文章环境及版本

Linux：ubuntu 4.15.0-34-generic
Java ：1.8.0_144
ODL ：release/carbon-sr4
代码下载：
git clone –b release/carbon-sr4 https://git.opendaylight.org/gerrit/dlux
git clone –b release/carbon-sr4 https://git.opendaylight.org/gerrit/dluxapps

1.3 所需背景知识

1.3.1 dlux web框架

Angular.JS
AngularJS诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

DLUX各Feature主要组成部分，主要是由AngularJS进行组织的，以拓扑(topology)组件为例：

对应模块的x.module.js/x.controller.js/x.directives.js/x.services.js是典型的AngularJS前端架构文件。

Require.js
RequireJS 是一个JavaScript模块加载器。使用RequireJS加载模块化脚本将提高代码的加载速度和质量。

Dlux的框架和各组件中，使用大量的requireJS的语法，典型如首页Index.html的加载（红色标注部分，首页从自动加载main.js展开)：

1.3.3 工程构建

Gulp.js
Gulp.js 是一个自动化构建工具，开发者可以使用它在项目开发过程中自动执行常见任务。Gulp.js 是基于 Node.js 构建的，利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。
如：topology src下工程文件：

对应的build.config.js/gulpfile.js/package.json是典型的gulp.js构建配制文件。

Blueprint
ODL使用OSGI模型，采用Blueprint管理模块的加载、服务依赖和配置：
如： topolopy bundle的工程文件blueprint.xml：

Maven工程
Maven是一个跨平台的项目管理工具，它可以帮助开发者完成以下工作: 构建、依赖、发布、分发以及测试报告等等；

如topolopy 组件的工程配置文件pom.xml:

二、DLUX运作机制

2.1 加载顺序

2.1.1Base Load说明

整个DLUX的基础依赖’app.core’，通过加载Core.module.js实现。
文件位置：(dlux\modules\core-resources\src\main\resources\core)，文件中通过建立

ContentHelper/NavHelper/TopBarHelper三个Provide，并通过依赖’core.services’（对应文件为：当前目录下Core.services.js对外提供AddToView/addControllerUrl/addToMenu(仅NavHelper提供）三个service服务，以方便模块扩展及动态注册！

2.1.2 首页Index.html

A: 加载主体页面框架

说明①： Global variable随着dlux模块在karaf中的install/uninstall动态变化。类似如下效果。

<script type="text/javascript">
var module = ['angular','ocLazyLoad','angular-ui-router','angular-translate', 
'angular-sanitize', 'angular-translate-loader-static-files', 
'angular-translate-loader-partial', 'angular-css-injector'];
var deps = ['common/config/env.module','app/core/core.module',
'common/login/login.module','common/authentification/auth.module',
'common/navigation/navigation.module','common/topbar/topbar.module',
'common/general/common.general.module','app/yangui/main',
'common/yangutils/yangutils.module',
'common/sigmatopology/sigmatopology.module','app/topology/topology.module',
'common/layout/layout.module'];
var e = ['oc.lazyLoad', 'ui.router', 'pascalprecht.translate', 'ngSanitize', 
'angular.css.injector', 'app','app.core','app.common.login','app.common.auth',
'app.common.nav','app.common.topbar','app.common.general','app.yangui',
'app.common.yangUtils','app.common.sigmatopology','app.topology',
'app.common.layout'];
        // global variables
    </script>

var module = ['angular','ocLazyLoad','angular-ui-router','angular-translate',

'angular-sanitize', 'angular-translate-loader-static-files',

'angular-translate-loader-partial', 'angular-css-injector'];

var deps = ['common/config/env.module','app/core/core.module',

'common/login/login.module','common/authentification/auth.module',

'common/navigation/navigation.module','common/topbar/topbar.module',

'common/general/common.general.module','app/yangui/main',

'common/yangutils/yangutils.module',

'common/sigmatopology/sigmatopology.module','app/topology/topology.module',

'common/layout/layout.module'];

var e = ['oc.lazyLoad', 'ui.router', 'pascalprecht.translate', 'ngSanitize',

'angular.css.injector', 'app','app.core','app.common.login','app.common.auth',

'app.common.nav','app.common.topbar','app.common.general','app.yangui',

'app.common.yangUtils','app.common.sigmatopology','app.topology',

'app.common.layout'];

// global variables

</script>

负责动态生成的模块是：DluxLoaderIndexServlet.java
文件位置： (dlux\loader\impl\src\main\java\org\opendaylight\dlux\loader\implementation)

说明②： require.js 的加载入口，导入main.js文件。
说明③： css文件也会根据feature加载情况，动态添加完成。见①。
说明④： ui-view=MainContent，AngularJS，后续页面会动态替换。注意该名字后续的替换引用，见2.1.3 B。

B: 基于require.js导入main.js

C: 导入依赖./App/app.module.js

D：设置默认显示状态/Topology

E: 设置默认语言En

2.1.3 界面三大组成

通过加载Layout模块，文件名：Layout.module.js
文件位置：dlux\modules\common-layout-resources\src\main\resources\layout
达到如下作用目标：
A：web界面路由设置

上述是典型Angular.JS语法，对于”main”状态下，ui-view 为mainContent的视图，
通过”src/common/layout/index.tpl.html”进行替换；ui-view为navigation的视图，通过NavHelperProvider.getViews获取到的对应URL进行替换；如此等等。

B：index首页ui-view=MainContent替换
指向layout当前目录下：src/common/layout/index.tpl.html文件：

导入界面三大UI-VIEW： topbar/navigation/content，如上图所示。

2.1.4 各视图切换管理
整体dlux web界面的组成部分，如下图所示：

A：topbar ui-view 展开
Topbar通过加载Topbar.tpl.html进行替换，具体见topbar.module.js:

其中，在topbar.tpl.html文件中：

指定TopBar的四个组成部分：logo_opendaylight/Page_logo/ToggleMenu/user-menu。
Page_logo，引用变量{{section_logo}}，指定不同feature view选择的时候切换对应的图标；
ToggleMenu，是用来控制左侧NavSideMenu的隐藏和显示。

B：navigation ui-view动态注册及展开

Navigation ui-view通过加载Navigation.tpl.html进行替换，具体见navigation.module.js:

其中，在navigation.tpl.html文件中：

使用变量{{navList}}，重复加载SubMenu，并导入nav_item_template.tpl.html文件。

C：content ui-view展开及切换
Content是根据dlux的feature list动态注册和加载的，本节以topolopy为例，其它模块原理一致。参考Topology.module.js文件，如下：

模块注册，添加NavMenu：

主要需要关注：active状态，用于点击状态标记。见uiRoute模块使用。

状态设置，设置对应状态的URL：

① 说明：状态标记
② Content：呼应ui-view=content，进行对应内容切换
③ TemplateUrl：网页URL，替换content内容

Control中，进行section_logo及相关函数设置

2.2 Web服务

2.3.1 目录结构

A：Dlux web 服务的目录架构

B：文件打包及构建
工程主要利用gulp.js进行对应打包及构建，以topolopy模块的gulp.js文件为例(基本上所有的gulp.js文件都是统一模板），如下：
Gulpfile.js (dluxapps\applications\topology\topology-module\src\main\resources\topology)

将less文件生成对应css文件：

调用build的相关task

对应的配置见同目录下的Build.config.js内容：

2.3.2 加载顺序

在FireFox浏览其中，打开http://20.0.0.22:8181/index.html其中20.0.0.22是运行ODL的服务器地址。使用F12调试，查看网络加载顺序：

三、总结

本文经过详细的ODL DLUX/DLUXAPPS的相关模块的工作原理关联分析，给出初学者一个比较清晰的视图，以便了解整体系统是如何动态注册并关联运转起来，希望能让大家少走弯路。

文中难免有笔误或细节地方理解偏差，希望有发现的朋友，不吝赐教，谢谢！