大道至简，新一代企业应用无栈开发

平台之上，一种语言，可视化、脚本化、全端一体化开发

开发平台
Location: 开发平台 开发参考 前端框架

JS扩展开发规范

直接使用js/html/css开发前端

虽然我们推荐采用后端Python来开发前端，但是一些非常个性化的界面还是需要传统的Javascript/html/css开发。

平台的前端JS框架基于JQuery构建，利用handlebars做前端模板。

内容列表

资源文件的存放

存放在应用软件包的“静态文件”区域，可以新建或者上传：

 

动态加载资源文件

在Python脚本里面，这样加载静态资源：

 view.load(['zopen.tests:js/custom.js', 'zopen.tests:css/custom.css', 'http://baidu.com/aaa.js'])

其中：

  • 'zopen.tests:js/custom.js' 表示软件包 zopen.tests 中的资源文件 js/custom.js

    • 在浏览器会自动以软件包版本来缓存软件包的资源

    • 如果资源文件发生变化，应该更改所在软件包的版本号以便更新缓存

  • http://baidu.com/aaa.js 是一个外部的资源文件

在js中，采用类似的方法加载资源文件：

load(['zopen.tests:js/custom.js'])

load(['zopen.tests:css/custom.css'])

load(['http://baidu.com/aaa.js'])

编写javascript

如果js代码量大，可以在软件包里面用静态资源文件编写js，然后通过view.load来加载。

如果js代码量不大，可以直接在python脚本中加载:

   view.append_script("""....""")

模板全局变量 EDO

EDO对象下有一组站点参数的全局变量，如：EDO.lang 系统当前系统语言，EDO.loaded 动态加载的文件。

可在浏览器控制台查看全部变量：

请求Python脚本

使用jquery的一些 $.get $.post 就可以请求后端的数据。

但是如果需要通过js调用请求后端包含view.xxx这种指令的脚本，调用之后直接改变界面行为，应该如下：

$(this).kss("xxx.xxx:xx") 
$(this).kss("xxx.xxx:xx?a=1") 
$(this).kss("xxx.xxx:xx", {"a":1, "b":2}, "GET")
$(this).kss("xxx.xxx:xx", {"test": "123"})
$(this).kss("xxx.xxx:xx?c=3", {"a": 1, "b":2})

使用handlebar前端模板

handlehar模板必须以hb结尾，加载后会自动进行编译，存放在EDO.templates变量中，如下使用方法：
load("zopen.test:notification.hb",
       function() {
             var data =  {};
             var html = EDO.templates['zopen.test:notification.hb'](data);
      });

国际化翻译

系统支持如下语言：

  • zh      中文简体
  • zh-tw 中文繁体
  • en 英文
  • ja  日文

JS国际化

可以采用如下方法来自动加载所需的语言包：
   load("zopen.tests:i18n/{lang}.js")
也可以直接根据 EDO.lang 自行处理。
这个 {lang}.js 可以通过工具自动生成，方法为：
  1. 按照应用的标准翻译方法，统一在应用中定义翻译资源
  2. 在翻译js所在的文件夹中，创建一个 msgids.js.txt 的文件，里面包含需要生成的翻译项id，支持前缀通配，比如：
    mention_in_group
    chat_message
    msg_*
    notify_channel_*
  3. 点击生成js翻译文件按钮：

Handlebar模板国际化

使用i18next的资源文件语法 （https://www.i18next.com/），先加载资源文件（文件名必须以.i18n.json结尾）：
     load("zopen.tests:i18n/{lang}.i18n.json")
handlebar支持扩展的i18n，在模板中使用翻译资源:
   <script id="my_template" type="x-handlebars-template">
      <div>{{i18n myVar}}</div>
   </script>

handlerbar的翻译json文件，也可以采用类似js的方法自动生成，区别是创建一个名字为 msgids.json.txt 的文件

触发事件

触发全局事件

TODO

触发组件事件

TODO

易开发，新一代企业应用开发平台

注册开发账号