使用 Dojo 将业务流程扩展到移动领域（2）构建一个 Dojo 表单来调用业务流程

论坛元老

Rank: 8 Rank: 8

UID: 1066743

1^#

打印

字体大小: tT

look_w发表于 2018-10-17 19:05 | 只看该作者

使用 Dojo 将业务流程扩展到移动领域（2）构建一个 Dojo 表单来调用业务流程

构建一个 Dojo 表单来调用业务流程一种创建可移植移动用户界面的简单方法是使用开放标准（比如 HTML5、CSS3）和一个关联的 JavaScript™ 框架（比如 Dojo）。Dojo 提供了针对移动设备优化的、具有原生外观的丰富的部件，使您能够创建强大的移动用户界面。IBM 通过 WebSphere Application Server Feature Pack for Web 2.0 and Mobile 提供了对 Dojo 的支持（WebSphere Application Server 用户可免费使用）。一些集成开发环境现在包含一个支持 Dojo 的 WYSIWYG 编辑器，包括 Maqetta 和 IBM Rational Application Developer。
图 9. 使用 Rational Application Developer 创建一个 Dojo 移动用户界面

从用户的角度讲，样例应用程序包含 4 个简单页面：

Main 页面：一个占满页面的列表，包含 Create subscription 页面的链接和 My tasks 页面的链接。
Create subscription 页面：一个表单，用于输入订阅详细信息并通过公开的 Web 服务启动流程。
My tasks 页面：显示当前用户正在运行的任务。
Task details 页面：My tasks 列表中的每一行都指向这里，显示订阅详细信息并使当前的用户能够接受或拒绝该案例。

最后两页将使用 Business Process Manager REST API，稍后就会看到。
在传统的 Web 应用程序中，这些页面通常通过 4 个不同的动态 Web 页面（比如 JSP 页面）构建，每一次在服务器与浏览器之间同时传输演示层和数据。在富 Internet 应用程序中，编程模型有所不同：演示层仅加载一次，用户在各个状态之间导航，同时使用 Ajax 异步调用动态加载数据。在本示例中，只有一个 HTML 文件使用 Dojo 部件来定义视图和它们的交互。
清单 1 展示了如何创建一个简单视图，使您能够使用流畅的滑块过渡在应用程序中进行导航。在 Android 设备上，前面的代码的渲染结果如图 10 所示。
清单 1. 主要视图的 HTML 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

图 10. Android 设备所显示的主要页面

为了调用业务流程，需要使用相同技术创建一个表单视图：标准 HTML5 标记和 data-dojo-xxx 属性，如清单 2 所示。在运行时，Dojo 分析器识别这些属性并生成额外的 DOM、CSS 和 JavaScript 元素，具体取决于目标浏览器。
清单 2. 用于提交合同数据的表单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

<div data-dojo-type="dojox.mobile.ScrollableView"
id="CreateView"
data-dojo-props="selected:false">
  <h1 data-dojo-type="dojox.mobile.Heading"
   data-dojo-props="label:'Subscribe contract',back:'Home',moveTo:'MainView',
fixed:'top'">
  </h1>
  <h2 data-dojo-type="dojox.mobile.RoundRectCategory"
   data-dojo-props="label:'Applicant'">
  </h2>
  <ul data-dojo-type="dojox.mobile.RoundRectList">
   <li data-dojo-type="dojox.mobile.ListItem">
      <label class="itemText" for="ctnameField">Last name:</label>
      <input class="itemInput" id="ctnameField" type="text" value="Doe"/>
   </li>
   <li data-dojo-type="dojox.mobile.ListItem">
      <label class="itemText" for="ctfirstnameField">First name:</label>
      <input class="itemInput" id="ctfirstnameField" type="text" value="John"/>
   </li>
   <li data-dojo-type="dojox.mobile.ListItem">
      <label class="itemText" for="ctaddressField">Address:</label>
      <input class="itemInput" id="ctaddressField" type="text"
   value="avenue des champs Elysees, 75000 Paris"/>
   </li>
  </ul>
  <h2 data-dojo-type="dojox.mobile.RoundRectCategory"
      data-dojo-props="label:'Contract'">
  </h2>
  <ul data-dojo-type="dojox.mobile.RoundRectList">
   <li data-dojo-type="dojox.mobile.ListItem">
      <label class="itemText" for="cttypeField">Contract type:</label>
      <select id="cttypeField">
            <option value="Life insurance" selected>Life insurance</option>
            <option value="Retirement savings" >Retirement savings</option>
      </select>
   </li>
   <li data-dojo-type="dojox.mobile.ListItem">
      <label class="itemText" for="ctamountField">Amount:</label>
      <input class="itemInput" id="ctamountField" type="number" />
   </li>
  </ul>
  <h2 data-dojo-type="dojox.mobile.RoundRectCategory">
   <div align="center">
<button data-dojo-type="dojox.mobile.Button"
         class="mblButton greyBtn baseBtn normalBtn"
         onclick="subscribe()">Subscribe</button>
</div>
  </h2>
  <div id="responseStatus" class="itemText"></div>
</div>

图 11. 在 Android 设备上渲染的表单

在清单 2 的末尾，请注意在按钮的 onclick 事件上对 subscribe() 方法的调用。此方法需要写入到一个 JavaScript 代码块中，以管理对 Web 服务的调用。除了提供一组丰富的部件，Dojo 还包含一个用来处理异步调用的完整的库。一个执行 Web 服务调用的简便方法是：手动创建 SOAP 信封，动态附加表单中包含的数据，使用 dojo.xhrPost() 执行异步调用并管理响应，如清单 3 所示。
清单 3. 一个执行 Web 服务调用的 Dojo Javascript 方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

在上面的示例中，如果 Web 服务返回一个正确的响应，则会在表单末尾使用 <div id="responseStatus".../> 标记动态显示一条状态消息。

收藏分享评分

回复引用

订阅 TOP

返回列表