Intraweb之EasyUI篇doc.doc

1Intraweb之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基础)。第一步:实现登陆界面。首先引入以下文件,后面其它页面也一样这样引用,直接贴代码:[html]viewplaincopy1.<spanstyle="white-space:pre"></span><linkrel="stylesheet"type="text/css"href="easyui/themes/default/">2.<linkrel="stylesheet"type="text/css"href="easyui/themes/">3.<scripttype="text/javascript"src="easyui/"></script>4.<scripttype="text/javascript"src="easyui/"></script>5.<scripttype="text/javascript"src="easyui/locale/easyui-lang-.js"></script>这些文件是必须引用的,,,easyui-lang-.js是汉化文件(EasyUI对中文支持还是很不错的,如果觉得汉化得不够好,可以打开这个文件自行修改)。界面部分:[html]viewplaincopy1.<formid="ff"class="easyui-form"method="post"data-options="novalidate:true">2.<!--form提供了各种方法来操作执行表单字段,比如:ajax提交,load,clear等等。当提交表单的时候可以调用validate方法检查表单是否有效。3.“data-options”控件的各种属性,form有以下属性:,true:验证,false:不验证。,true:使用,false:不使用。。{}.-->10.<tablecellpadding="5">11.<tr>12.<td>用户名:</td>13.<td><inputclass="easyui-textbox"type="text"name="username"data-options="required:true"style="width:150px"/></td>14.<!--(文本框)是一个增强的输入字段组件,它允许用户非常简单的创建一组表单。它是一个用于构建其他组合控件的基础组件,bo,databox、:true表示文本框不能为空,下同。17.-->18.</tr>19.<tr>20.<td>密码:</td>21.<td><inputclass="easy