准备工作
在sample项目的src目录下新建ViewModel,命名commandRegist。新建FormDataset命名datasetRegist,在datasetRegist下新建3个Field对象并设置其label属性。
name | label | dataType | defaultValue |
---|---|---|---|
userName | 登陆用户 | string |
|
password | 登录密码 | string |
|
cmnt |
| string | 请输入登录用户名,如果没有登录用户名请先注册。 |
表15-01
图15-01
在【Controls】节点下新建AutoForm控件,绑定datasetRegist。
图15-02
删除formRegist中元素类型为TextEditor的cmnt,新建DataLabel控件命名cmnt。步骤:【formRegist】—>【Form Group】—>【Insert】—>【Label Element】。
图15-03
设置新建的cmnt绑定datasetRegist,然后设置其他属性值。
name | value |
---|---|
formRegist.width | 50% |
formRegist.group.columnCount | 2 |
formRegist.group.title | 注册信息 |
cmnt.controlValign | bottom |
cmnt.showLabel | false |
表15-02
图15-04
新建RPCCommand控件
在【Controls】下新建RPCCommand命令控件。步骤:【Controls】—>【Insert】—>【Commands】—>【RPCCommand】。
图15-05
设置RPCCommand的id为cmdRegist。
图15-06
点击cmdRegist中method属性的超链接。
图15-07
由于RPCCommand是调用ViewModel的实现类中的方法进行后台调用的处理,点击method属性时的提示则是因为没有找到实现类。因此我们需要新建commandRegist的实现类。步骤:【veiw】—>【Open implementation】。
图15-08
通常,dorado会自动生成一个实现类名CommandRegistViewModel。一般情况下,我们只需要使用默认类名就可以了。
图15-09
新建实现类CommandRegistViewModel.java之后,我们就可以设置cmdRegist的method属性值了。在commandRegist中点击cmdRegist的method属性的超链接。在【Add command method】窗口输入方法名regist。
图15-10
点击【OK】完成配置之后,regist命名的方法会自动在实现类中被添加。
public void regist(ParameterSet inParams,ParameterSet outParams) throws Exception{ }
图15-11
前台验证触发事件
在执行后台调用之前,通常数据需要首先在客户端被验证。因此我们首先在客户端编写JavaScript脚本代码进行客户端验证。本例采用静默后台验证的方式,因此最恰当的做法是在datasetRegist的afterChange()事件中编写代码。实现当数据输入完成后调用处理代码。
图15-12
双击afterChange()事件,进入事件编辑器编写JavaScript代码。
switch (field.getName()) { case "userName": if(dataset.getCurrent()){ var username=record.getValue("userName"); if(username!=""&&username!=null){ cmdRegist.parameters().setValue("userName",username); cmdRegist.execute(); } } break; }
图15-13
编写后台验证代码
客户端验证编码完成之后,我们接下来需要完成执行了cmdRegist.execute()方法之后调用的后台实现类中的regist方法执行部分的Java代码。
public void regist(ParameterSet inParams,ParameterSet outParams) throws Exception{ String userName=inParams.getString("userName"); String message=null; if(StringHelper.isNotEmpty(userName)){ if(userName.equals("BSTEK")){ message="该用户名存在,请输入密码。"; }else{ message="该用户名不存在,请注册用户。"; } outParams.setValue("message", message); } }
图15-14
前台接受验证后信息
完成后台编码之后,我们还需要在客户端接收服务器端处理完成之后的反馈信息并进行提示。提示信息应该是在执行后台验证结束之后,因此这部分实现我们在cmdRegist执行完成之后会触发的OnSuccess()事件中完成。
进入在commandRegist中cmdRegist控件的OnSuccess()事件编辑器。
图15-15
双击打开OnSuccess()事件编辑器,编写处理成功之后需要执行的JavaScript脚本代码。
var message=command.outParameters().getValue("message"); datasetRegist.setValue("cmnt",message); datasetRegist.postRecord();
图15-16
生成页面测试功能
打开commandRegist,调整formRegist中的cmnt控件的顺序,将cmnt拖动至userName和password之间。
图15-17
保存全部修改,重新编译sample项目。新建commandRegist相关的JSP页面,通过【Browse】查看页面效果。
图15-18
分别输入"BSTEK"、"dorado",查看执行结果:
(登陆用户为BSTEK)
图15-19
(登陆用户为dorado)
图15-20
本例中,在服务器端的验证处理中,我们假设已经存在"BSTEK"用户,因此该用户登录信息提示已经存在,而"dorado"用户提示未被注册。
Parameters和outParameters
在RPCCommand命令控件中,不论是客户端控件还是在实现类中调用的远程处理方法参数,都有Parameters和outParameters两个对象。Parameters参数集对象主要的作用是客户端发起AJAX机制的请求时,客户端设置的parameter参数值对象会被传递至服务器端接受并处理。由于AJAX的处理机制,处理完成后需要返回一些信息至客户端,那么我们就可以把在服务器端处理结束后的一些自定义信息封装在outParameters参数集中一并返回,实现服务器端数据返回客户端,并在RPCCommand命令控件的onSuccess事件或onFailure事件中处理。
(图:Parameters和outParameters原理说明图)
- 在ViewModel中的RPCCommand发起客户端请求,调用由method属性中指定方法名的对应在该ViewModel实现类中编写的同名处理方法(图①)。
- 请求提交至服务器端时,客户端设置的RPCCommand命令控件的parameter参数值对象也同时被提交至服务器端处理处理(图②)。
- 服务器端处理完成后,可以将一些自定义的信息封装至实现类中的远程调用方法中提供的outParameters参数集对象中,并被一起返回至客户端的RPCCommand命令控件的outParameters对象中,然后可以取出封装的值进行客户端的处理(图③)。
客户端使用Parameters时,可以写成RPCCommand.parameters().setValue(key,value)的方式,在实现类的远程方法中以函数的参数方式存在,通过直接使用parameter.getValue(key)即可取出。服务器端封装自定义信息时可以写成outParameters.setValue(key,value)的方式,返回至客户端后,可以在onSuccess事件或onFailure事件中直接使用RPCCommand.outParameters().getValue(key)即可以取出值进行数据处理。特别地,不论哪种情况,其中的客户端设置的key和服务器端处理的key必须保持一致,反之亦然。
开发步骤
RPCCommand远程访问命令控件主要是通过由客户端发起的页面无刷新的AJAX机制的请求,达到调用服务器端指定的Java类(通常是Servlet,在dorado中是ViewModel的实现类)接受请求并处理的目的。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Attachments:




























