0

NIIF国际化开发方案

已有 90 阅读此文人 - - 想写就写 -

1.前端架构以及主要技术实现

命名空间:使用ES5标准,命名空间使用匿名函数自调用避免全局变量污染,全局变量window.nf,angular.js在nf下面,是window.nf.ng,如需查看可在console输入window.nf.ng。未使用前端自动化和工程化技术,JSP页面使用传统的src方式加载所需js文件。

路由:页面之间组织方式实现在后端,使用JSP,右侧子栏目使用iframe加载不同栏目页面,页面使用angular.js渲染数据。

数据渲染:数据渲染使用mvvm的框架angular.js(1.0),

数据交互:前后端数据交互采用jquery的ajax方法,文件是nf-ajax-setup.js。

第三方库:前端第三方库目录写在frontend/package.json下面,编译使用maven并下载对应的源码在frontend-working-directory下面。

2.NIFI WEB开发环境(LINUX)

源码目录: 下载相对应的NIFI版本,WEB界面相关的源码目录在 /nifi/nifi-1.2.0/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/。

目录内容:里面3个文件夹frontend,resources,webapp和一个pom.xml文件,frontend存放npm的package.json,用于加载第三方插件js,resources下的fliter下存放打包的js路径加载片段文件,由后端在jsp页面实现,webapp存放前端文件,主要在js文件和web-inf下的JSP文件.pom.xml文件用于管理前端页面的文件打包依赖等,有时候会把几个js文件打包成为一个js文件,类似前端打包工具,如果新增js,jsp文件,需要修改此文件,相当于针对maven打包的注册。

开发编译:当你修改完代码后在  /nifi/nifi-1.2.0/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/下执行mvn clean package -Dmaven.test.skip=true(可以在nifi-web-ui中单独打包一个模块,假设你已完成NIFI的安装编译过程),这时候会生成一个target目录,复制nifi-web-ui-1.2.0.war放入到(二进制码)

nifi-1.1.0/work/nar/framework/nifi-framework-nar-1.1.0.nar-unpacked/META-INF/bundled-dependencies(生产环境)路径下替换原本的文件,然后在执行./nifi.sh restart重启NIFI,即可看到修改后的效果。

3.国际化开发

由于NIFIWEB前端的页面采用JSP渲染,如果熟悉jsp的朋友可以采用jstl标签去实现国际化,整体逻辑放在后端,也可以自己在前端用key:value方式自己开发国际化模块,由于页面采用angular.js,这里我们论述采用angular.js的translate插件实现方法。

这里主要陈述前端实现方法,虽然NIFI页面采用jsp页面,但大部分需要国际化的内容是静态文本,这里使用angular.js的国际化插件来实现,主要有2块需要开发,第一是如何实现多语言,第二是如果注册当前语言

A使用angular的translate插实现多语言

Step1.在frontend下面的package.json文件的dependencies中添加“angular-translate”: “*”,maven打包时会自动把translate插件下载到对应的目录下(target/nifi-web-ui-1.2.0/assets/angular-translate/)

Step2.在对应的jsp页面中以src方式加载JS文件<script type=”text/javascript” src=”assets/angular-translate/dist/angular-translate.min.js”></script>,由于每个JSP页面是单独的,所以需要分别加上。

Step3. 找到对应页面的js文件,在确保已引入angular变量后,在你的angular应用中必须将angular-translate声明为一个加载依赖(var app = angular.module(‘myApp’, [‘pascalprecht.translate’]);),将它声明为应用的依赖。

Step4.提供翻译数据,这一步可以通过使用最新的$translateProvider服务配置$translate服务实现。

app.config(function($translateProvider) {                    $translateProvider.translations(‘en’, {                                         HEADLINE: ‘Hello!’,                                         INTRO_TEXT: ‘And it has i18n support!’                    })   .translations(‘zh’, {                                         HEADLINE: ‘你好!’,                                         INTRO_TEXT: ‘支持国际化!’                    });$translateProvider.preferredLanguage(‘en’);});

要设置首选语言,你可以使用$translateProvider.preferredLanguage()方法

 

Step5.输出翻译内容,两种情况,一种在视图中输出,如下:<h2>{{‘HEADLINE’ | translate }}</h2><p>{{‘INTRO_TEXT’ | translate}}</p>一种在js中动态输入内容:找到angular渲染数据对应的模块方法,并且添加注入依赖$translate,使用$translate.instant(‘HEADLINE’)来输出对应的语言内容。

Step6:动态切换语言,我们可以使用$translate服务和它的use()方法在控制器上实现一个方法以便在运行时改变语言。例如:app.controller(‘TranslateController’, function($translate, $scope) {                    $scope.changeLanguage = function(langKey) {                                         $translate.use(langKey);                    }});

B:通过url添加hash并使用localstorage 注册当前语言

当我们切换语言的时候,给url加上?lan=en 或者zh,并使用reload方法重载当前页面,当页面接收到语言的标识时候,写入window.localstorage.lan注册,    var curUrl = window.location.href;

var lan = window.localStorage.lan||’zh’;

if(curUrl.indexOf(“?”)!=-1) {

lan = curUrl.substring(curUrl.indexOf(“?”)+1,curUrl.length);

localStorage.lan = lan;

}

当获取到已注册的语言标识,就可以使用可以使用$translate服务和它的use()方法进行语言的实时切换了。

期待你一针见血的评论,Come on!