大家好,又见面了,我是你们的朋友全栈君。
YUI3是一个重量级的前端框架库,它提供了单元测试(YUITest),生成文档(YUIDoc),自动化编译(YUI Build)等工具,在代码组织方面有统一的微件(widget)框架,完整的模块管理,插件机制等等,是一整套完整 且严谨的技术体系.这些都是大团队开发所需要的。 alloyUI 是基于YUI3创建的一个UI库,提供了许多常用的UI组件和简单的api.我的例子也是在alloyUI基础上做出 来的.
因为时间仓促,以及本人也是刚刚接触YUI的缘故.所以这个例子非常简单. 主要展示了一个表单的布局,校验,加载和提交数据.以及一些比较常用的UI组件. 但这个小示例中已经展示了一些与其它前端框架相比难得的一些特性:
示例中,加载数据时会发一个ajax请求,服务器端返回一个json字符流,前端在回调方法里将其转化为json对象, 并将它绑定到表单里面;提交数据时有二种,一种是原生的表单提交,另外一种就是发起一个数据处理的请求. 将表单的数据组成一个json字符串发送到后端处理.这种方式有个好处,就是前后台的交互只围绕一个业务数据对象(bussinessData)来展开. 可以达到标准的前后台分离并行开发.TB在这方面积累了丰富的经验.
页面调整(页面导航)常用的有三类,一类就是菜单,包括工具栏菜单和树型菜单.另外一类就是界面导航和链接.还有一类就是后 台创建一个分发器,根据相关的业务逻辑来决定界面的跳转方向. 异常处理也有二只方式,一种是捕捉服务器端抛出的异常,在前端以对话框的方式弹出来.另外一种发生异常后,导航到一个特定的 友好的错误界面.比如404界面
可以,alloyUI有许多UI组件,基本能满足绝大多数互联网应用.而且它只是YUI上的一个扩展(gallery),YUI上的扩展接近200来个.还有许许 多多的公司和开发者在为其贡献代码.我们自己也可以动手,在YUI3的基础上来扩展.
有一定的学习门槛,但它的文档是非常丰富的.如果部门能定期组行培训和技术分享,要上手还是不难的.
(备注)Web Widget : 中文译名被称作是微件,是一小块可以在任意一个基于HTML的Web页面上执行的代码, 它的表现形式可能是视频,地图,新闻,小游戏等等。它的根本思想来源于代码复用,通常情况下, Widget的代码形式包含了DHTML,javascript以及Adobe Flash。
<!DOCTYPE html>
<html>
<head>
<script src="../../build/aui/aui.js" type="text/javascript"></script>
<script src="index.js" type="text/javascript"></script>
<link rel="stylesheet" href="../../build/aui-skin-classic/css/aui-skin-classic-all-min.css" type="text/css" media="screen" />
<style type="text/css" media="screen">
body {
font-size: 12px;
}
.aui-form-content{
}
.aui-field-label{
float : left;
width : 50px;
display: inline;
}
.aui-field-content {
margin : 0px 0px 5px 0px;
}
.fl{
float : left;
display : inline;
margin-right : 5px;
}
#wrapper {
margin: 20px auto;
width: 960px;
}
.aui-form-validator-stack-error {
color: red;
display: block;
font-weight: normal;
font-style: italic;
margin: 3px 0;
}
.aui-form-validator-error-container {
}
.aui-form-validator-valid-container {}
.aui-form-validator-error {
/* border: 1px dotted red;*/
background: lightPink;
}
.aui-form-validator-valid {
/* border: 1px solid green;*/
background: lightGreen;
}
</style>
</head>
<body>
<div id="wrapper">
<h1>表单演示</h1>
<div id="demo">
</div>
</div>
</body>
</html>
AUI().use('aui-form', 'aui-io-request', 'aui-loading-mask', 'node', function(A) {
var form = new A.Form({
id: 'fm1',
name: 'fm1',
action: 'xx'
}).plug(A.LoadingMask, {
background: "#000"
}).render('#demo').set('nativeSubmit', false);
A.mix(A.Form, {
load_data: function(url) {
if (!url) return;
var this_obj = this;
var io = new A.io.request(url, {
method: 'post',
dataType: 'json',
on: {
success: function(event, id, xhr) {
var data = this.get('responseData');
var o = eval("(" + data + ")");
this_obj.bind_data(o);
this_obj.loadingmask.toggle();
}
}
});
this.loadingmask.toggle();
io.start();
},
bind_data: function(json_data) {
this.fields.each(function(f) {
var index = f.get('name');
f.set('value', json_data[index]);
});
validator1.validate();
}
},
true, null, 4, true);
// Adding fields to the form via script
form.add([{
name: 'name',
//type : 'password',
labelText: '姓名 :'
},
{
name: 'code',
labelText: '编号 :'
},
{
name: 'age',
labelText: '年龄 :'
},
{
name: 'dept',
labelText: '部门 :'
},
{
name: 'tel',
labelText: '电话 :'
},
{
name: 'addr',
labelText: '地址 :'
}], true);
// Checking if the form fields have been changed
form.isDirty(); // returns true
// Resetting the values to their original values
form.resetValues();
var btn = new A.ButtonItem({
label: '加载数据',
icon: 'refresh'
}).render('#demo').set('class', 'fl');
var btn2 = new A.ButtonItem({
label: '提交数据',
icon: 'submit'
}).render('#demo');
btn.on('click', function() {
form.load_data('user.json');
});
btn2.on('click', function() {
//form.submit();
});
var validator1 = new A.FormValidator({
fieldContainer: 'span',
showAllMessages : false,
showMessages : true,
boundingBox: '#fm1',
rules: {
age: {
customRule: true,
digits: true,
range: [18, 50]
},
name: {
required: true,
rangeLength: [2, 50]
}
}
});
});
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/154285.html原文链接:https://javaforall.cn