Dorado 9 : 8.3.1 创建视图并添加控件

步骤1:在com.bstek.dorado.sample.standardlesson.junior目录下新建View,将View命名为Login.view.xml。

 

步骤2:新建并配置Dialog控件

在【ViewConfig】节点下的【View】节点下添加一个Dialog控件,设定Dialog的属性如下:

属性说明
iddialogLogin控件的id
caption系统登录Dialog控件的标题
width450Dialog控件的宽度
height200Dialog控件的高度
closeablefalseDialog控件是否显示关闭按钮
visibletrueDialog控件直接显示
efalseDialog控件是否可以改变尺寸

如下图所示:

info

Dialog控件是一个容器控件,可以在其内部加入子控件,同时默认是个不可见控件,如果需要显示请设置visible属性为true

接下来需要调整Dialog控件的布局,让其子控件全部都纵向显示,鼠标选中dialogLogin控件,在右侧工作区中切换到第二个标签页即layout工作区,设置属性如下

属性说明
Layoutvbox布局设置为纵向布局
aligncenter容器控件中子控件对齐方式采取居中

最后如下图所示:

info

我们可以发现Dialog控件下有3个节点,分别是Buttons,Children和Tools,

Buttons节点下用于放置Button控件,它们会布局到Dialog控件的下方居中

Children节点用于放置在Dialog中的子控件,子控件的布局将依据Dialog的布局

Tools节点用于放置Dialog右上角的工具按钮

另外从三个节点的图标也能看出它们具体作用。

 

步骤3:新建并配置Label

新建一个Label作为提示信息,展开Dialog控件,在【Children】节点下添加Label控件,如下图所示:

设置Label控件的属性如下:

属性说明
textDorado9实战必修课“企业通讯录”初级教程标签控件显示的文本

为了让标签显示的更美观些,我们需要调整Label的css样式,找到控件的【style】属性,点击下方的【Add】按钮,给控件增加样式属性,并输入属性值,如下图所示:

【style】属性设置如下

属性说明
font-size20px字体大小
text-aligncenter字体居中

note

可以通过Add按钮,给控件增加多个样式属性以达到显示需求

接下来我们需要设置标签的内边距,让其周围空出距离,显得更美观些,鼠标选中label控件,在右侧工作区中切换到第三个标签页即layoutConstraint工作区,设置padding属性为10,如下图所示:

 

步骤4:新建并配置AutoForm

我们需要新建一个AutoForm以供用户输入用户名密码,展开Dialog控件,在【Children】节点下添加AutoForm控件,如下图所示:

设置AutoForm控件属性如下:

属性说明
idautoformLogin控件的Id
cols*表单布局采取单列布局
createPrivateDataSettrue是否要在AutoForm没有实际绑定DataSet时自动创建一个私有的DataSet用于管理表单数据。
labelSeparatorAutoForm Element中标签和输入框间的分隔符
width250表单控件的宽度

鼠标选中autoformLogin控件,在左侧的【Dorado ToolBox】工作区的【AutoForm】分类中双击【AutoFormElement】将表单元素加入autoformLogin控件中,新建2个AutoForm Element,分别设置其属性为:

AutoForm Element
name
label
AutoForm Element1username用户名
AutoForm Element2password密码

最终如下图所示:

由于安全原因,我们需要将【password】输入框类型修改为密码域,鼠标选中【password】,修改其属性如下:

属性说明
editorTypePasswordEditor表单项输入框类型

 

步骤5:新建并配置Button

鼠标选中【dialogLogin】控件下的【Buttons】节点,在此节点下添加2个Button控件,分别设置控件属性如下:

Button1

属性说明
idbuttonLogin控件的Id
caption登录Button控件显示的名称
iconClassfa fa-gearButton控件显示的图标

Button2

属性说明
idbuttonCancel控件的Id
caption重置Button控件显示的名称
iconClass fa fa-closeButton控件显示的图标

最终显示如下图所示:

 

步骤6:新建并配置AjaxAction

我们需要添加一个AjaxAction用以前后台交互,验证用户名密码是否正确,决定是否允许当前用户登录,在【ViewConfig】节点下的【Vierw】节点下添加一个AjaxAction,配置控件属性如下:

属性说明
idajaxactionLogin控件的Id
serviceloginService#doLogin用于调用后台服务,login为注册到beanFactory中的beanId,doLogin为方法名

接下来我们需要为ajaxactionLogin绑定相关事件:

  1. 在Action控件执行以前需要将用户输入的用户名、密码作为参数传递到后台
  2. 在Action控件执行成功以后需要跳转到主页,如果用户名密码有误则需要提示用户

因此我们需要为ajaxactionLogin绑定【beforeExecute】和【onSuccess】这2个事件。

给ajaxactionLogin绑定beforeExecute事件,切换到Client Events事件列表,在onClick事件上增加autoformLogin参数,如下图所示:

在beforeExecute事件编辑区中输入如下代码:

//获取表单绑定的实体对象
var entity = autoformLogin.get("entity");
//获取用户名
var username = entity.get("username");
//获取密码
var password = entity.get("password");
//判断是否输入用户名密码,是则将对象作为参数传递到后台,否则提示用户
if(username && password){
    self.set("parameter",entity);
}else{
    dorado.MessageBox.alert("用户名密码不允许为空");
    arg.processDefault=false;
}

info

arg.processDefault参数用于通知系统是否要继续完成后续动作,因为未输入用户名或者密码,则应中断AjaxAction控件接下来的操作,因此将参数设置为false

鼠标移动到左侧Client Events事件列表,双击onSuccess事件,在onSuccess事件编辑区中输入如下代码:

//获取返回值
var result = self.get("returnValue");
//如果用户名密码正确,则跳转到返回值中的url
if(result.result){
    location.href = result.url;
}else{
//否则弹出返回值中的异常消息提示
    dorado.MessageBox.alert(result.errormsg,{title:"提示",icon:"WARNING"});
}

note

我们可以发现在dorado.MessageBox.alert这个方法中增加了json格式的参数,这个参数用于修改提示框的标题和显示的图标,具体描述请参考Dorado js doc中这个静态工具类中对于alert方法和show方法的描述。

 

步骤7:为Button绑定Action和事件

点击【buttonLogin】按钮时需要执行Action操作。

设置buttonLogin控件的action属性为ajaxactionLogin,如下图所示:

点击【buttonCancel】按钮需要清空输入的用户名和密码。

鼠标选中【buttonCancel】控件,切换到Client Events事件列表,在onClick事件上增加autoformLogin参数,如下图所示:


在onClick事件编辑区中输入如下代码:

autoformLogin.set("entity",{});


步骤8:优化页面体验

  1. 在页面加载时,键盘光标能直接定位到【username】表单项中以便直接输入用户名
  2. 在输入完密码后,可以直接回车执行Action操作

第一步为【username】表单项绑定onReady事件

鼠标展开【autoformLogin】控件,选中【username】表单项,切换到Client Events事件列表,在onReady事件编辑区中输入如下代码:

//获取当前控件的dom对象
var dom = self.getDom();
var inputs = dom.getElementsByTagName("INPUT");
//获取用户名输入框
var inputUsername = inputs[0];
window.setTimeout(function(){
    //对其设置焦点
    inputUsername.focus();
},500);


第二步为【password】表单项绑定onKeyDown事件

鼠标展开【autoformLogin】控件,选中【password】表单项,切换到Client Events事件列表,onKeyDown事件上增加ajaxactionLogin参数,如下图所示:


onKeyDown事件编辑区中输入如下代码:

//获取按键对应的keyCode
var keyCode = arg.keyCode;
//如果是回车键则直接执行Action操作
if(13 == keyCode){
    ajaxactionLogin.execute();
}

info

onReady事件:当组件被激活(即真正可用时)时触发的事件。

onKeyDown事件:当控件拥有焦点并且有按键被按下时触发的事件。

到目前为止,View部分设置完毕,接下来我们需要准备后台服务。

Attachments:

image2020-4-26 17:51:28.png (image/png)
8.3.1-1.png (image/png)
8.3.1-0.png (image/png)
8.3.1-2.png (image/png)
8.3.1-4.png (image/png)
8.3.1-2 (1).png (image/png)
8.3.1-5.png (image/png)
8.3.1-6.png (image/png)
8.3.1-7.png (image/png)
8.3.1-8.png (image/png)
8.3.1-9.png (image/png)
8.3.1-10.png (image/png)