Intraweb之EasyUI篇

Intraweb一直是Delphi快速开发web应用的首选工具，但自带的控件较少，样式比较难看，TMS与IW倒是可用，可是要收费，对于我们这些习惯用免费的用户来说，想找个破解也比较费劲。EasyUI是基于JQuery开发的框架，内置的控件完全可以满足我们开发一般web程序的需求，而且是免费的，用起来也心安理得。下面我就IW如何结合EasyUI开发程序谈谈自己的一些心得，与大家交流一下。主要有以下几种方法：
　　一、使用模板
　　在IWForm内使用模板引入做好的html文件，结合IW自身的控件进行操控。这种方法虽说比较方便，但模板也有自身的缺点，内部不支持中文引用是一大Bug，目前IW都没有要解决的迹像。如果一定要用模板，也有方法规避，即汉字全部用网页转义“&#”加汉字的十进制编码。模板的使用有很多文章可供参考，也不是本章的重点，不做具体讲解。
　　二、MVC设计模式
　　IW使用MVC方式结合EasyUI设计程序，是本文的重点。我们知道IW与HTML静态页面的交互，可以通过javascript接口来实现，可以使用AddToInitProc('alert("欢迎")')这样的语句，也可以在控件的JavascriptEvent属性内添加js语句。本文介绍的方法完全将界面与数据处理分开，一律使用EasyUI来实现界面（完全不用IW的可视控件，数据库控件还是需要的），数据处理交给IW后台做。我们以开发一个简单的应用程序来一步步实现这些功能，同时会使用一定篇幅介绍EasyUI部分控件的使用（本文必须要有一定的javascript基础）。
　　第一步：实现登陆界面。

　　首先引入以下文件，后面其它页面也一样这样引用，直接贴代码：

 <span style="white-space:pre">	</span><link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
	<script type="text/javascript" src="easyui/jquery.min.js"></script>
	<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>

　　 这些文件是必须引用的，easyui.css是自带的样式，icon.css是使用中的各种图标，easyui-lang-zh_CN.js是汉化文件（EasyUI对中文支持还是很不错的，如果觉得汉化得不够好，可以打开这个文件自行修改）。界面部分：

<form id="ff" class="easyui-form" method="post" data-options="novalidate:true">
<!--form提供了各种方法来操作执行表单字段，比如：ajax提交, load, clear等等。当提交表单的时候可以调用validate方法检查表单是否有效。
“data-options”控件的各种属性，form有以下属性：
属性名	类型	描述	默认值
novalidate	boolean	    定义是否验证表单的字段，true:验证,false:不验证。	false
ajax	boolean	    定义是否使用ajax提交表单，true:使用,false:不使用。	true
queryParams    	object	    当表单被提交到服务器的时候增加的额外参数列表。	{}
url	string	    提交表单动作的URL地址	null
-->
	    	<table cellpadding="5">
	    		<tr>
	    			<td>用户名：</td>
	    			<td><input class="easyui-textbox" type="text" name="username" data-options="required:true" style="width:150px"/></td>
 <!--
TextBox(文本框)是一个增强的输入字段组件， 它允许用户非常简单的创建一组表单。它是一个用于构建其他组合控件的基础组件，如：combo，databox、spinner等
 required:true表示文本框不能为空，下同。
-->
	    		</tr>
	    		<tr>
	    			<td>密　码：</td>
	    			<td><input class="easyui-textbox" type="password" name="passw" data-options="required:true" style="width:150px"/></td>
	    		</tr>
	    	</table>
	    </form>
	    <div style="width:216px;padding:5px 0px;height:30px">
	    	<a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px;float:left">登陆</a>
<!--easyui-linkbutton按钮组件，使用超链接按钮创建，提示：不要将它改为button类别，IE9以下浏览器会不正常，submitForm()提交数据，clearForm()清空数据-->
	    	<a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px;float:right">取消</a>
	    </div>
	    </div>
	</div>

　　登陆界面基本完成，有些简陋，当然可以自行修改。下面实现提交数据和清空数据，用Javascript：

		function submitForm(){
			$('#ff').form('submit',{//这是EasyUI的Form自带功能，就是提交数据
				url:'Login.php', //需要把数据提交到的页面
				onSubmit:function(){//验证数据是否为空，如果为空就返回。
					return $(this).form('enableValidation').form('validate');
				},
				success: function(data){
//提交成功后的回调函数，data就是返回的数据
					if(parseInt(data)==1)
//我们在这里返回1和0，1表示成功登陆，在后台实现
					{
						window.location='main.html';
//登陆成功后，跳转到主程序
					}
					else
					{
						$.messager.alert('错误','用户名或密码错误!','error');
/*EasyUI消息提示框，就是alert的改进用法，显示警告窗口。
参数(依次调用)：
title：在头部面板显示的标题文本。
msg：显示的消息文本。
icon：显示的图标图像。可用值有：error,question,info,warning。
fn: 在窗口关闭的时候触发该回调函数。 */
						$('#ff').form('clear');//清空数据，下同。
					}
				}    

				
			});
		}
		function clearForm(){
			$('#ff').form('clear');
		}

　　文件另存为“index.html”，即首页，放在wwwroot下（注意easyui的相关文件也要放在这个目录下），启动程序后，就是直接访问这个页面了，没有“$”这个标志。
　　登陆界面基本完成，数据需要提交到“Login.php”这个页面，按一般的做的法，新建一个IWForm，使用模板加载文件，本文用另一种思路，也是本文的关键：
用