CodeConer: NTT DATA开源系列

主站 http://maskat.sourceforge.jp

Maskat是NTT DATA针对富客户端Ajax做的一套综合开发环境，属于NTT DATA Group Open Source Square系列。
主要由三个主要部分组成：

客户端JavaScript框架
服务端Terasoluna for Rich版（参见NTT DATA开源系列 - Terasoluna）
Maskat IDE for Eclipse

以上内容的Source、例子和文档（日文）均可从顶端的URL地址下载到。
由于客户端的JS框架与服务端以XML方式交互，所以服务端可以选用任意开发语言，比如官网给出的PHP、Ruby等
优点：

JavaScript框架部分可根据需要灵活的将Google/Dojo等JS框架以插件部分注入进来，扩展性极强，还很美观哦；
服务端借助Terasoluna的成熟框架体系，达到开发效率和质量的双重保障；
在IDE的帮助下，可由需求和UE人员直接生产出HTML样式及Layout定义，开发者只要配合Event定义及服务端开发即可完成项目，优化并缩短开发流程；
避免写大量JS，降低学习成本，降低Bug发生几率，缩短开发时间
更多内容，试了就知道 :-)

运行原理

画面自动生成 - 客户端首次访问页面时，加载静态资源文件HTML、布局及事件定义XML，通过maskat的js框架在客户端构建UI元素
Event事件管理 - 用户触发事件，根据事件定义XML中的配置，进行本地js或远程服务器调用；根据XML所配置，将画面相应数据元素发往服务端
服务端根据接收到请求信息，使用Castor将XML映射成JavaBean做业务逻辑处理，并将结果同样以XML方式发回。（我已用Jackson做了个适配器，实现了JSON格式的收发 :-)
客户端的JS框架根据Event定义XML中的配置，将服务响应数据更新到页面指定元素

并且，客户端提供输入值有效性检查，远端调用时是否同步等设置。

Maskat应用的主要构成文件

Container HTML页面

<html>
  <head>
    <title>Maskat | 四则运算应用</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../../maskat/core/maskat.js"></script>
  </head>
  <body>
    <div id="divMaskat"></div>
  </body>
</html>

画面迁移定义XML

<?xml version="1.0" encoding="UTF-8"?>
<transitionDef>
  <init>
    <loadJS fileName="calculation" />
    <loadLayout xmlFile="layout.xml" target="divMaskat" show="true" />
  </init>
</transitionDef>

Layout定义文件

<?xml version="1.0" encoding="UTF-8"?>
<layoutDef>
  <layout name="calculation">
    <frame name="calculationFrame" left="12" top="24" width="577" height="157" title="四则运算应用">
      <text name="leftOperandText" left="23" top="23" width="85" tabIndex="1" datatype="N"/>
      <combo name="operatorCombo" left="119" top="23" width="50" tabIndex="2">
        <comboItem text="+" value="+"/>
        <comboItem text="-" value="-"/>
        <comboItem text="*" value="*"/>
        <comboItem text="/" value="/"/>
      </combo>
      <text name="rightOperandText" left="179" top="23" width="85" tabIndex="3" datatype="N"/>
      <label name="equalLabel" left="275" top="23" text="="/>
      <text name="resultText" left="299" top="23" width="85" tabIndex="4" datatype="N" disable="true"/>
      <button name="localCalculateButton" left="23" top="83" title="本地调用"/>
      <button name="remoteCalculateButton" left="23" top="107" title="远程调用"/>
    </frame>
  </layout>
</layoutDef>

Event定义XML

<?xml version="1.0" encoding="UTF-8"?>
<eventDef>
  <component id="localCalculateButton">
    <event id="onclick" finish="calculate" type="local"/>
  </component>
  <component id="remoteCalculateButton">
    <event id="onclick" remoteUrl="./calculate.php" async="false">
      <param rootNode="request">
        <source obj="leftOperandText" node="leftOperand" type="byte" desc="参数1"/>
        <source obj="rightOperandText" node="rightOperand" type="byte" desc="参数2"/>
        <source obj="operatorCombo" node="operator"/>
      </param>
      <result rootNode="response">
        <target out="resultText" in="result"/>
      </result>
    </event>
  </component>
</eventDef>

JavaScript文件

function calculate(){
 var left = Number(leftOperandText.getValue());
 var right = Number(rightOperandText.getValue());
 var result = NaN;

 switch (operatorCombo.getValue()) {
 case "+":
  result = left + right;
  break;
 case "-":
  result = left - right;
  break;
 case "*":
  result = left * right;
  break;
 case "/":
  result = left / right;
  break;
 }

 resultText.setValue(result);
}

这里有几个Demo http://maskat.sourceforge.jp/index.php?Demo
计算器
展示最基本原理，本地事件及远端事件调用
水果商店
展示复杂页面布局，列表，数据提交验证等
宠物商店
宠物商店应用的Maskat实现，展示富客户端的交互性
商店查询
展示使用插件机制注入GoogleMap的地图应用

关于更详细的内容，可以去官网下载Source和案例把玩一番
如果语言有障碍，记得Google翻译XD
Note: 示例中的Java案例使用的是Jaxb做的XML解析和绑定，并未使用Terasoluna for RICH。有关Terasoluna RICH内容，可参考地址http://sourceforge.jp/projects/terasoluna/releases/46867/

标签： Ajax, NTT

CodeConer

我的简介

2010年11月22日星期一

NTT DATA开源系列 - Maskat

0 条评论:

CodeConer

我的简介

2010年11月22日 星期一

NTT DATA开源系列 - Maskat

0 条评论:

2010年11月22日星期一