跳转到主要内容

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件.

当您初次登录到 developerWorks 时,将会为您创建一份概要信息。您在 developerWorks 概要信息中选择公开的信息将公开显示给其他人,但您可以随时修改这些信息的显示状态。您的姓名(除非选择隐藏)和昵称将和您在 developerWorks 发布的内容一同显示。

所有提交的信息确保安全。

  • 关闭 [x]

当您初次登录到 developerWorks 时,将会为您创建一份概要信息,您需要指定一个昵称。您的昵称将和您在 developerWorks 发布的内容显示在一起。

昵称长度在 3 至 31 个字符之间。 您的昵称在 developerWorks 社区中必须是唯一的,并且出于隐私保护的原因,不能是您的电子邮件地址。

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件.

所有提交的信息确保安全。

  • 关闭 [x]

Lotus Forms Designer 3.5 介绍

蔡 炳, 软件工程师, IBM
蔡炳,IBM CSDL 软件工程师,主要从事 Lotus Forms 相关产品的工作。
杨 洁, 软件工程师, IBM
蔡炳,IBM CSDL 软件工程师,主要从事 Lotus Forms 相关产品的工作。

简介: 本文首先介绍 Lotus Forms Designer 3.5 中常用的新功能,然后通过一个典型的表单设计过程来帮助用户快速掌握这些功能,从而使用 Designer 快速设计满足需求的电子表单。

发布日期: 2009 年 9 月 17 日
级别: 初级
访问情况 : 5041 次浏览
评论: 


简介

Lotus Forms 是一套电子表单产品,它可以使用户通过电子表单来收集信息并且把信息发送到其他系统,同时帮助用户解决使用纸质表单的一系列问题,例如降低成本、缩短业务流程时间等等。Lotus Forms 产品套件主要包括三种产品:Lotus Forms Designer、Lotus Forms Viewer 以及 Lotus Forms Server,其中 Lotus Forms Designer 是一个基于 Eclipse 的图形化设计工具,用于创建和编辑 XFDL 表单。


Designer 3.5 新特性

Lotus Forms Designer 3.5 增强了产品可用性以及表单的设计速度,进一步提高了用户工作效率。在 Designer 3.5 中引入的新功能和改进主要有以下几个方面:

  • 支持两种透视图:标准 Lotus Forms Designer 和高级 Lotus Forms Designer。标准 Lotus Forms Designer 提供了设计表单所需的所有视图,高级 Lotus Forms Designer 提供了更多用于设计复杂表单所需的功能模块。用户可以在这两种透视图之间自由切换。
  • 进一步简化选用版的部件布局,使得查找常用部件变得更加方便。
  • 属性窗口。当用户想表单添加新的部件时,会出现对应部件的属性窗口,在这窗口上就可以设置该部件各种属性。
  • 增加 Conversion Tool。可以轻松将 PDF,FileNet 文档转换成 Lotus Forms 格式表单。
  • 改进的签字编辑器。通过签字编辑器指导用户一步步创建和编辑所需的数字签名。
  • 缺省的表单增加 XForms 数据模型支持。
  • 数据模型通过高级 Lotus Forms Designer 透视图查看。
  • 增加 XPath Editor 简化 XPath 表达式的创建和编辑。

如何使用 Designer 设计表单

我们将通过设计一个简单但是能覆盖到所有 Designer 3.5 新功能的表单来展开我们下面的内容。下图就是我们将要设计的表单:


图 1. 例子表单
图 1. 例子表单

下面我们将详细介绍如何快速设计上述这个表单。

布局设计 (Properties Dialog)

这部内容中我们将完成向表单中添加所需的表单部件,并且调整表单各个部件的位置,大小以及字体等等。

  1. 首先我们启动 Designer,通过“窗口 > 打开透视图”菜单选择“标准 Lotus Forms Designer”, 新建一个 XFDL 表单(不带数据模型)。

    图 2. 新建表单
    图 2. 新建表单

  2. 在大纲视图中选择 PAGE1 下的 Page Global,右键点击“属性”来启动 Page1 的属性对话框,将页面字体设置成“宋体”。

    图 3. 设置页面字体
    图 3. 设置页面字体

  3. 接着从选用板上选择标签(label),在页面上点击左键,这样我们就添加了一个标签。双击标签,将启动属性对话框,我们可以通过属性对话框设置标签属性。
    1. 文本:更新地址
    2. 宽度:680
    3. 字体:12 宋体 (bold)
    4. 字体颜色:白色
    5. 背景色:#0080FF


    图 4. 设置标签属性
    图 4. 设置标签属性



    图 5. 标签结果
    图 5. 标签结果

  4. 在“更新地址”标签左下方添加三个单选框按钮 (Radio), 通过属性对话框设置属性:
    1. 文本分别是:“客户”,“供应商”,“其他”。
    2. 单选按钮组:New Radio Group
  5. 在“更新地址”标签右下方添加两个复选框按钮 (Check), 通过属性对话框设置属性:
    1. 文本分别是:“更新商务地址”和“更新家庭地址”。
    2. 初始值:“已选中”

    Designer 提供了多种对齐工具,包括绝对对齐,相对对齐,选择需要对齐的部件,通过右键菜单或者工具条上的对齐按钮进行对齐操作;同时在移动部件时,画布上会出现帮助对齐的蓝色线条。

  6. 按下 CTRL 键,点击“客户”单选按钮和“更新地址”标签,然后选择相对左对齐 ( 选‘左边’ ),这样“客户”单选按钮就和“更新地址”标签左对齐。使用对齐方式对齐单选按钮和复选按钮,结果如下图:
  7. 在单选按钮下方添加线条,设置线条的属性:
    1. 长度 :680
    2. 厚度 :3
    3. 线颜色 : #0080FF

    同样与“更新地址”标签对齐,结果如下图:



    图 6. 对齐部件
    图 6. 对齐部件

  8. 接下来我们将添加图 1 中所示的“商务地址”部分所涉及到的部件。我们将添加以下一些部件:
    1. 标签类:商务地址,省份,有效期。
    2. 输入字段:名,姓,公司名称,街道地址,城市名称,邮编
    3. 下拉列表:选择省份
    4. 日期采集器

    下面是各个部件属性:

    商务地址标签:

    • 文本:商务地址
    • 宽度:78
    • 字体:10 宋体 (bold)
    • 字体颜色:#0080FF

    省份标签:

    • 文本:省份:
    • 宽度:45
    • 字体:8 宋体

    有效期标签:

    • 文本:有效期:
    • 宽度:58
    • 字体:8 宋体

    名输入字段:

    • 标签文本:名
    • 标签字体:8 宋体
    • 宽度:216
    • 字体:8 宋体

    姓输入字段:

    • 标签文本:姓
    • 标签字体:8 宋体
    • 宽度:429
    • 字体:8 宋体

    公司输入字段:

    • 标签文本:公司
    • 标签字体:8 宋体
    • 宽度:680
    • 字体:8 宋体

    街道地址输入字段:

    • 标签文本:街道地址
    • 标签字体:8 宋体
    • 宽度:680
    • 字体:8 宋体

    城市输入字段:

    • 标签文本:城市
    • 标签字体:8 宋体
    • 宽度:216
    • 字体:8 宋体

    邮编输入字段:

    • 标签文本:邮编
    • 标签字体:8 宋体
    • 宽度:245
    • 字体:8 宋体

    日期采集器:

    • 所有使用默认设置

    下拉列表:

    • 标签文本:选择省份
    • 标签字体:8 宋体
    • 宽度:164
    • 字体:8 宋体

    通过下拉列表的属性对话框添加选项,如下图:



    图 7. 添加选项
    图 7. 添加选项

    最后通过对齐工具参考图 1 调整部件位置如下图。



    图 8. 添加商务地址
    图 8. 添加商务地址

  9. 接下来我们通过复制功能来创建家庭地址部分部件。

    通过点击然后拖动鼠标来选择商务地址部分下的所有部件,包括上面的线条,然后按下 Shift 键,选择”公司”输入字段,因为我们不需要复制这个字段。如下图:



    图 9. 复制多个部件
    图 9. 复制多个部件

  10. 通过 Ctrl+C 和 Ctrl+V 来复制和粘贴这些部件。复制完成后,在新生产的部件处于选中状态下,移动鼠标,当鼠标变成十字状态时,拖动部件,调整到所需位置。如下图:

    图 10. 调整多部件位置
    图 10. 调整多部件位置

  11. 使用同一方法调整没有复制”公司”输入字段产生的空白区域。最终将得到图 1 所示结果。
  12. 最后我们来添加这一页上的工具栏。选择页面空白区域,右键选择属性,选中工具栏复选框,工具栏将出现在页面上部。
  13. 添加打印按钮,保存按钮,提交表单按钮以及页面导航按钮到工具栏上,并调整相应位置。设置属性如下:

    打印按钮:

    • 文本:打印
    • 宽度:42
    • 字体:10 宋体 (bold)
    • 字体颜色:白色
    • 背景色:#0080FF

    保存按钮:

    • 文本:保存
    • 宽度:42
    • 字体:10 宋体 (bold)
    • 字体颜色:白色
    • 背景色:#0080FF

    提交按钮:

    • 文本:提交
    • 宽度:42
    • 字体:10 宋体 (bold)
    • 字体颜色:白色
    • 背景色:#0080FF

    页面导航按钮:

    • 文本:下一页 >>
    • 宽度:90
    • 字体:10 宋体 (bold)
    • 字体颜色:白色
    • 背景色:#0080FF

    这样我们就完成了一页的设置。

    表单的第二页中包括一个工具栏,输入字段以及数字签名按钮,从选用板中添加它们,并设置对应属性:

    工具栏:和第一页工具栏基本一致,只有上面的页面导航按钮的”浏览至页面”属性设置为 PAGE1

    注释输入字段:

    • 标签:注释
    • 标签字体:8 宋体
    • 宽度:680
    • 高度:185
    • 字体:8 宋体

    签字按钮:

    • 签署技术:点击生效
    • 文本:签名
    • 宽度:286

    表单第二页的结果如下图所示:



    图 11. 设置表单第二页
    图 11. 设置表单第二页

数据绑定 (XPath Editor)

在上述内容中,我们实现如何设计一个表单的表面布局,而电子表单最重要的作用是收集和提交数据,这部分内容中我们将介绍如何将表单中填入的数据和表单界面背后的数据实例绑定起来以便于对数据的提交以及处理。

在这一表单中,我们需要将用户更新的数据提交,我们先需要将用户填入的更新数据绑定到数据实例上。

  1. 首先,我们需要将 Designer 切换到高级视图。通过 窗口 > 打开透视图 > 高级 Lotus Forms Designer.
  2. 在实例视图中,点击“创建新的空数据实例”。结果如下图:

    图 12. 创建新的空数据实例
    图 12. 创建新的空数据实例

  3. 我们需要绑定的数据包括更新的商务地址,家庭地址或者两者,以及更新的是客户,供货商还是其他别的地址。
  4. 在实例视图中,选中 data 节点,在属性视图中,修改 常规 > 名称 为“updateddata”,结果如下图:

    图 13. 修改实例节点名称
    图 13. 修改实例节点名称

  5. 根据表单内容在“updateddata”节点下添加如下图所示元素。“businessadd”,“homeadd”上添加元素来加入相应地址信息元素。

    图 14. 数据实例结构
    图 14. 数据实例结构

  6. 接着需要将数据实例和表单部件绑定起来,Designer 提供了拖拽的方式来进行数据绑定。在实例视图中选中 ”公司”元素,按住鼠标左键将元素拖拽到 ”公司”输入字段上方,然后释放鼠标,这样我们就将数据实例和表单部件进行了绑定,当用户填入公司名称后,相应值将被填入 ”公司”元素这一数据实例中。
  7. 我们还可以通过 Designer 提供的 XPath Editor 来选择需要绑定的数据。

    选择一个部件,比如”公司”, 在属性视图中选择 Xforms(textarea) > ref, 我们可以看到这里的值就是实例视图中公司节点对应的 xpath 值,”instance('INSTANCE')/ 商务地址 / 公司”. 点击右边的 XPath 图标 图标来启动 XPath Editor,如下图:



    图 15. XPath Editor
    图 15. XPath Editor

    通过 XPah Editor 我们可以方便的进行数据绑定的相关操作,这里将不做详细介绍。

添加计算 (Compute Editor)

表单中的动态行为,例如自动计算输入字段和文本标签的值,或者控制某些部分是否显示等等都是通过计算来实现的。由于大部分计算功能都需要参照表单中存在的其他数据,因此计算通常使用 XFDL 参考来实现。在本表单中我们将使用 Compute 编辑器来创建计算功能,并不需要通过自己写 XFDL 参考来完成。

在本表单中有商务地址和家庭地址两部分,但是大部分人并不需要同时更新这两部分,因此在这里我们设计一个逻辑来控制商务地址或家庭地址部分是否需要显示。

  1. 在布局设计部分中我们已经在表单中添加了两个复选框按钮:更新商务地址和更新家庭地址,在这里分别定义他们的 sid 属性为“Bus_Update”和“Home_Update”。

    图 16. 定义 sid 属性
    图 16. 定义 sid 属性

  2. 选中商务地址部分的所有内容,包括输入字段和相应的文本标签。

    图 17. 选中商务地址部分
    图 17. 选中商务地址部分

  3. 单击右键,从右键菜单中选择 Compute 编辑器 ...,在 Compute 编辑器窗口会列出所有选中的内容。然后从选项下拉列表中选择“active”,如下图:

    图 18. 选择 active 属性
    图 18. 选择 active 属性

  4. 由于 active 属性的合法值与复选框按钮的值是相同的,或者是“on”或者是“off”,因此只需要把 active 属性的值设置为更新商务地址复选框按钮的属性值即可。在菜单中选择“表单项”表单项,从选择表单项窗口的可用表单项中选择“Bus_Update”,并添加到右边窗口中。
  5. 然后我们从“Bus_Update”的属性下拉框中选择“value”属性,如下图:

    图 19. 选择表单项
    图 19. 选择表单项

  6. 点击确定后,在 compute 输入框中会显示“PAGE1.Bus_Update.value”,然后单击 OK。
  7. 重复 1~6 步,为家庭地址部分添加计算功能。

    现在预览表单,如果更新商务地址或更新家庭地址复选框按钮不被选中的话,相应部分内容会灰掉,不允许用户输入。

安全功能 (Signature)

在上面几部分中我们已经设计好了一个具有基本功能的表单,下面我们要对这个表单加入安全功能,即签名。签名并不能阻止恶意用户篡改表单数据(例如从源数据中直接修改),但是它可以在数据被篡改后显示签名被破坏,数据不可靠。签名的原理是存储一个对表单进行 hash 算法后得到的数据(sha1 或 Md5),当下次打开表单时同样做一次 hash 算法,如果两次结果不同即为签名被破坏。

Lotus Forms Designer 可以对全部表单或者部分表单进行签名,在本表单中,我们要在第二页注释后面添加一个签名按钮,对除更新商务地址和更新家庭地址两个复选框按钮以外的全体表单进行签名。Designer 支持多种签名方式,包括 Netscape,加密 API,已认证的点击生效,点击生效,签名版,通用 RSA,在这里我们选择简单的点击生效方式进行签名。这种方式不需要签署者拥有任何数字证书,多用于面向大众的软件,在签名时,用户可能需要回答一些预先设置的问题,或者选择某些选项表示自己认可待签署的文件,比如许可协议。下面,我们就在表单中添加这个按钮:

  1. 在大纲视图中选择 PAGE2,表单第二页显示在界面中。
  2. 在布局设计部分中 我们已经在表单中添加了签名按钮,它可以通过拖拽选用板中的签名项 签名项图标来添加,点击确定。

    图 20. 添加签名按钮
    图 20. 添加签名按钮

  3. 单击右键,从右键菜单中选择签名编辑器,在签署技术下拉框中选择点击生效,其签署页面会显示在下方,如下图:

    图 21. 默认签署页面
    图 21. 默认签署页面

  4. 单击签署页面的任一文本框,可以根据自己需要修改页面信息,在本例中我们修改以下几项:

    图 22. 修改签署页面
    图 22. 修改签署页面

  5. 切换到标签页“签署内容”,在此页面中选择我们所需要签署的内容。在本表单中,我们要对除更新商务地址和更新家庭地址两个复选框按钮以外的所有内容进行签名。首先在页面导航器中点击“PAGE1”按钮,选择“请勿签署选定项”,然后在右边表单演示中选择更新商务地址和更新家庭地址两个复选框按钮,此时两按钮为绿色表示未签署,表单其余部分为蓝色表示已签署,如下图:

    图 23. 修改签署页面
    图 23. 修改签署页面

  6. 在页面导航器中点击“PAGE2”按钮,并选择签署页面,表示第二页全部签名。
  7. 切换到“外观”标签页,将签名按钮的文本修改为“签名”,然后单击确定。

现在签名按钮已经添加成功,我们可以通过 Viewer 或者 Webform Server 来预览表单,并尝试对表单签名。

提交表单 (Actions)

用户与 Lotus Forms 表单进行交互的方式并不仅仅是在输入框中填入信息,或者选择单选 / 复选框按钮等,Lotus Forms 还通过按钮或者自动执行的事件提供一系列可以添加到表单中的功能,例如提交、打印、保存、取消、刷新等等,这些功能也可以称为事件(actions)。这些事件可以在点击按钮时触发,在指定的某个时间间隔后触发,或者基于表单某个指定的状态触发。在本表单示例中我们以提交表单按钮为例介绍简单的按钮触发事件。

  1. 在布局设计部分中我们已经在表单工具栏添加了打印、保存和提交三个按钮,它们也可以通过拖拽选用版中的打印 打印按钮、保存 保存按钮 和提交表单 提交表单按钮 三项来实现。
  2. 双击提交表单按钮打开属性窗口,填入将表单提交到的 url,例如:

    图 24. 填入将表单提交到 URL
    图 24. 填入将表单提交到 URL

  3. 下一项“提交时关闭表单”默认为选中,我们也可以不选中此项,即表单在提交之后不会被关闭。

现在提交按钮添加成功,在预览表单时点击提交按钮,表单就会被提交到之前在 URL 中定义好的网址。


结束语

在本文中我们简单介绍了 Lotus Forms Designer 3.5 的新功能,然后通过设计实现一个表单事例来介绍在表单设计过程中如何运用这些新功能来简化和加快表单的设计,提高工作效率。希望同过本文使读者对 Desinger 的功能有更多的了解,并通过具体实例,提高 Designer 设计技巧并能根据具体需求灵活运用 Designer 各项功能。



下载

描述名字大小下载方法
样例代码sample.zip5 KBHTTP

关于下载方法的信息


参考资料

学习

获得产品和技术

作者简介

蔡炳,IBM CSDL 软件工程师,主要从事 Lotus Forms 相关产品的工作。

蔡炳,IBM CSDL 软件工程师,主要从事 Lotus Forms 相关产品的工作。

关于报告滥用的帮助

报告滥用

谢谢! 此内容已经标识给管理员注意。


关于报告滥用的帮助

报告滥用

报告滥用提交失败。 请稍后重试。


developerWorks:登录


需要一个 IBM ID?
忘记 IBM ID?


忘记密码?
更改您的密码

单击提交则表示您同意developerWorks 的条款和条件。 使用条款

 


当您初次登录到 developerWorks 时,将会为您创建一份概要信息。您在 developerWorks 概要信息中选择公开的信息将公开显示给其他人,但您可以随时修改这些信息的显示状态。您的姓名(除非选择隐藏)和昵称将和您在 developerWorks 发布的内容一同显示。

请选择您的昵称:

当您初次登录到 developerWorks 时,将会为您创建一份概要信息,您需要指定一个昵称。您的昵称将和您在 developerWorks 发布的内容显示在一起。

昵称长度在 3 至 31 个字符之间。 您的昵称在 developerWorks 社区中必须是唯一的,并且出于隐私保护的原因,不能是您的电子邮件地址。

(长度在 3 至 31 个字符之间)


单击提交则表示您同意developerWorks 的条款和条件。 使用条款.

 


为本文评分

评论

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=10
Zone=Lotus, XML
ArticleID=428881
ArticleTitle=Lotus Forms Designer 3.5 介绍
publish-date=09172009
author1-email=caibing_cnnew1@cn.ibm.com
author1-email-cc=
author2-email=yangjcdl_cnnew1@cn.ibm.com
author2-email-cc=

标签

Help
使用 搜索 文本框在 My developerWorks 中查找包含该标签的所有内容。

使用 滑动条 调节标签的数量。

热门标签 显示了特定专区最受欢迎的标签(例如 Java technology,Linux,WebSphere)。

我的标签 显示了特定专区您标记的标签(例如 Java technology,Linux,WebSphere)。

使用搜索文本框在 My developerWorks 中查找包含该标签的所有内容。热门标签 显示了特定专区最受欢迎的标签(例如 Java technology,Linux,WebSphere)。我的标签 显示了特定专区您标记的标签(例如 Java technology,Linux,WebSphere)。