Dorado 5 : a.制作登录界面 (T1A)

制作登录界面

概述

在实际开发这个项目的基本功能页面之前，我们需要先设计这个项目的登录界面。界面效果如下:

实现思想：利用AJAX技术通过dorado的RPCCommand组件完成登录验证。并根据验证结果由RPCCommand负责页面的跳转或显示错误信息提示。

视图模型配置

添加视图模型对象

首先，在src中添加目录com\bstek\dorado\demo\hr，并在hr目录下新建Login视图模型，视图模型添加办法如下：

图表 4 1
选择hr并打开右键菜单，选择new中的View图标。并将该View命名为Login。
视图模型的详细说明参考附录三：视图模型基本概念说明以及视图模型实现类说明。

添加dataset对象

在Login视图模型中的Datasets节点下创建一个FormDataset（dsLogin）来保存用户登录时输入的用户名和密码信息，添加方法如下，选择Datasets节点，并利用鼠标右键选择FormDataset：

图表 4 2
该快捷按钮会自动在datasets节点下添加FormDataset类型的Dataset对象。我们修改新增的dataset的id为dsLogin。并展开dsLogin节点，选择Fields节点，利用快捷按钮添加两个新的Field对象。快捷按钮如下：
新加的field对象的属性设置分别为用户名id和密码 pwd,数据类型(dataType)都设置为string。
最终结果如下：

图 2

添加AutoForm

选择Controls节点对象，并利用左侧快捷工具栏上的快捷按钮添加AutoForm组件：

将新增的AutoForm对象的id属性修改为frmLogin。并设定frmLogin的dataset属性为dsLogin。frmLogin的基本属性设置如下：

图表 4 3
该菜单会自动的利用dsLogin的字段生成其内部元素，展开frmLogin对象，可以看到一个<FormGroup>元素，这是自动生成的对象，我们设定自动生成的FormGroup的columnCount属性为"1"，title属性为"登录"。如下图：

图表 4 5

添加label和button

重新选择Controls节点，并利用左侧的快捷按钮添加Label组件，如下：

增加一个Label组件，并设定id为labelDesc,text属性为"* 用户名 : admin 密码 : admin *"。
同上方式添加一个Button组件.
并设定新增按钮的id为btnLogin,width为60,value为"登录"。添加后系统效果如下.

AutoForm引入label和button

下一步我们利用AutoForm的容器功能，使将新增的两个组件对象引入到AutoForm中。选择frmLogin的<FormGroup>节点，并利用快捷按钮添加两个Custom Element：

设定新增的两个Custom Element的属性如下:

图表 4 6
其中的controlId属性分别设定为btnLogin，labelDesc，使得这两个自定义的元素与前面添加的Label以及按钮绑定。

添加RPCCommand对象

增加一个RPCCommand（cmdLogin），设置method属性为loginRPC,表示该RPCCommand要调用的远程方法名为loginRPC。如下图:

图表 4 7
选择cmdLogin对象，并选择右侧的事件列表中的beforeExecute事件：

图表 4 8
双击打开事件编辑器，并从dsLogin中取出用户名id和密码pwd放到cmdLogin的parameters中。

var id = dsLogin.getValue("id"); 
var pwd = dsLogin.getValue("pwd"); 
command.parameters().setValue("id",id); 
command.parameters().setValue("pwd",pwd);

并选择cmdLogin的onSuccess事件，打开事件编辑器输入如下的代码：

open('main.jsp','_self');

该事件在登陆校验成功之后触发。通过open方法我们将当前的页面跳转到主界面上，main.jsp会在第五章实现。
前面我们把输入参数（用户名和密码）保存在RPCCommand中，并设定按钮对象(btnLogin)的command属性为cmdLogin。其他属性设定如下图：

图 3
这样按钮被单击时，会自动地执行cmdLogin的执行命令，并执行beforeExecute方法实现参数赋值操作，并利用Dorado提供的远程方法调用与服务器交互，下一步我们就是要在服务器定义一个java类，接受该远程调用并实现登陆验证。

添加视图模型实现类

切换到Properties Inspector标签页，并选择Login视图模型的根节点，并利用右键的快捷菜单生成ViewModel的实现类，
命名为LoginViewModel。
这样向导会自动地在com.bstek.dorado.demo中生成LoginViewModel.java文件，并同时修改Login视图模型的clazz属性为com.bstek.dorado.demo.LoginViewModel，使的新增的java类与Login视图模型相关联：

该类在dorado中的术语是视图模型实现类。基本概念参考附录三：视图模型基本概念以及实现类说明。
在新生成的视图模型实现类中将Sample_PRC_Method方法名称修改为loginRPC。然后通过下列代码实现用户名和密码的验证。
代码示范：

public void loginRPC(ParameterSet parameters, ParameterSet outParameters)
        throws Exception {
    // 从输入参数中取出用户名和密码
    String user = parameters.getString("id");
    String password = parameters.getString("pwd");
    // 验证用户名和密码
    if (StringHelper.isNotEmpty(user)) {
        if (!"dorado".equals(password)) {
            throw new Exception("password failure !");
        }
    } else {
        throw new Exception("ID failure !");
    }
}

loginRPC方法通过该函数的参数parameters获取cmdLogin发送过来用户登录时输入的id以及pwd信息。该处的用户名以及密码校验我们采用比较简单的判断处理。实际开发可灵活变通。

JSP设计

登录逻辑处理完成之后，还需要生成登录的JSP页面。下面我们利用视图模型提供的JSP生成向导生成登陆页面，方式如下：
Login视图模型中选中view（根节点），鼠标右键点选择Generate a sample左边的工具按钮（Generate a sample JSP）

图 6
选择JSP的生成位置，我们选择web，点OK按钮确定。
此时系统会自动生成JSP页面，再编写代码如下:

 <%@ page contentType="text/html; charset=UTF-8" %> 
 <%@ taglib uri="http://www.bstek.com/dorado" prefix="d" %> 
 <html> 
 <head> 
 <title></title> 
 </head> 
 <body> 
 <d:View config="com.bstek.dorado.demo.hr.Login"> 
 <d:AutoForm id="frmLogin" /> 
 <d:Button id="btnLogin" /> 
 </d:View> 
 </body> 
 </html>

JSP中通过如下的代码使它与我们创建的Login视图模型建立关联关系：

 <d:View config="com.bstek.dorado.demo.hr.Login">

删除标签<d:Button id="btnLogin" />，并调整JSP的页面布局如下:

 <%@ page contentType="text/html; charset=UTF-8" %> 
 <%@ taglib uri="http://www.bstek.com/dorado" prefix="d" %> 
 <html> 
 <head> 
 <title></title> 
 </head> 
 <body> 
 <d:View config="com.bstek.dorado.demo.hr.Login"> 
 <d:Layout type="vflow" height="100%"> 
 <d:Pane align="center"> 
 <d:AutoForm id="frmLogin" /> 
 </d:Pane> 
 </d:Layout> 
 </d:View> 
 </body> 
 </html>

其中的Layout为dorado提供的辅助布局的标签对象，该标签对象的详细说明可以参考<<dorado5 组件使用详解.doc>>。
重新启动服务。利用jsp右键的Brower功能在浏览器地址中访问login.jsp页面:

或者再浏览器中输入如下地址:

http://localhost:8180/hr/login.jsp

得到如下的界面：

图 8
这样我们就完成了一个简单的登录界面制作。

功能增强

为了使登录界面的使用更为人性化，下面我们再来处理一些细节，比如：登陆界面支持快捷键处理：

如输入用户名和密码之后按回车就直接执行登录操作；
登录失败弹出错误提示信息；
登陆成功就进入系统主界面；

快捷键处理

下面我们利用编辑框的onKeyDown事件实现回车登陆：
onKeyDown事件在DHTML中的解释为：当用户按下键盘按键时触发。
下面我们直接获得frmLogin的编辑框，并定义onKeyDown事件，同时判断键盘码是否为13，表示回车事件，如果为回车事件则执行登陆RPCCommand命令。
AutoForm拥有自动生成界面元素的机制，这些界面元素细化到最终就是一些编辑框和Label或按钮对象。
上例中frmLogin中的pwd对象，最终在页面上生成的是一个id为：frmLogin_editor_pwd的编辑器。在这儿我们可以看到AutoForm生成界面编辑器的命名规范：

AutoForm的ID+"editor"+element的name

在Login视图模型中选中view（根目录），切换到事件视图：

在view节点对应的事件列表中找到onLoad事件，并双击打开该事件的事件编辑器：

其中加入如下的代码，用以给密码编辑框增加一个onKeyDown事件。

//frmLogin_editor_pwd为密码编辑框对象 
frmLogin_editor_pwd.onKeyDown = function(event){ 
	 //当按下回车键时 
	 if (event.keyCode == 13){ 
 		//调用postRecord()将编辑框中的数据更新到dsLogin中 
 		dsLogin.postRecord(); 
 		//执行RPCCommand 
 		cmdLogin.execute(); 
 	 } 
}

验证成功或失败的处理

用户登录成功后需要转到系统的主页面，失败后则要给出提示。
切换到Login的Events Inspector视图中：

选择cmdLogin对象，并找到事件列表中的onSuccess事件，双击打开事件编辑器，在其中增加跳转代码：

//命令执行成功后进行页面跳转 
window.location.href = "hr/main.jsp";

失败后给出错误提示，该怎么处理呢？
其实前面我们已经在视图模型的实现类(com.bstek.dorado.demo.hr.LoginViewModel)中的loginRPC方法的验证逻辑中处理过了，我们再次查看代码：
如果用户名验证失败，则在loginRPC方法中直接抛出Exception，并在构造参数中设定自定义的异常信息：

throw new Exception("ID failure !");

界面执行效果如下：

图 9
Dorado自动地将用户自定义的异常信息在客户端抛出。
如果密码验证失败，则也抛出一个自定义的Exception

throw new Exception("Password failure !");

如果后台抛出Exception，则前台自动会弹出抛出的异常信息。

图 10