Ext Without JS系列教程---构建登陆面板
2008-02-27 16:28
375 查看
Ext是一个非常优秀的js框架,使用Ext能够构建非常漂亮的应用程序,但是由于Ext完全使用js代码书写,js的灵活性和复杂性导致了不少人对Ext望尘莫及,EasyJWeb1.1版开始集成Ext框架,使用easyjweb完全面向对象的构建Ext程序,本教程将连载使用easyjweb构建Ext程序。
本节我们将使用easyjweb构建一个登陆面板,最终效果如下:
![](http://p.blog.csdn.net/images/p_blog_csdn_net/ProvidenceZY/1.bmp)
图1-1 登陆面板
![](http://p.blog.csdn.net/images/p_blog_csdn_net/ProvidenceZY/2.bmp)
图1-2 正在登陆...
这个效果还是不错的吧,如果使用js来书写这个面板有一定的难度,使用easyjweb书写只需要几行代码,甚至不需要任何页面文件即可合成这样漂亮的页面。
easyjweb1.1版可以使用easyjweb.bat projectName ext这样的命令生成一个ext应用程序,笔者不喜欢使用命令行生成,还是自动动手吧!
首先新建一个工程,这里使用Eclipse,添加相应的jar文件到classpath中(可以直接从easyjweb源码中拷贝所有的包),编写web.xml,代码如下:
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<?xml version="1.0" encoding="UTF-8"?>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<web-app xmlns="http://java.sun.com/xml/ns/j2ee"
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_5.xsd"
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
metadata-complete="false" version="2.5">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<!--定义EasyJWeb的主控Servlet -->
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<servlet>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<servlet-name>国产开源框架</servlet-name>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<servlet-class>com.easyjf.web.ActionServlet</servlet-class>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<load-on-startup>1</load-on-startup>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</servlet>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<servlet-mapping>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<servlet-name>国产开源框架</servlet-name>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<url-pattern>*.ejf</url-pattern><!--所有.ejf的扩展名都由easyjweb来处理-->
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</servlet-mapping>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<!-- 定义字符处理Filter -->
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<filter>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<filter-name>CharsetFilter</filter-name>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<filter-class>com.easyjf.web.CharsetFilter</filter-class>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<init-param>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<param-name>encoding</param-name>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<param-value>UTF-8</param-value>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</init-param>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<init-param>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<param-name>ignore</param-name>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<param-value>true</param-value>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</init-param>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</filter>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<filter-mapping>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<filter-name>CharsetFilter</filter-name>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<servlet-name>国产开源框架</servlet-name>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</filter-mapping>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</web-app>
关于web.xml这里不介绍了。
编写easyjweb默认的配置文件easyjf-web.xml,代码如下:
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<?xml version="1.0" encoding="UTF-8"?>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<国产开源框架-web xmlns="http://www.easyjf.com/schema/easyjf/web"
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
xsi:schemaLocation="http://www.easyjf.com/schema/easyjf/web http://www.easyjf.com/schema/easyjf/web/easyjf-web-0.0.1.xsd ">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<framework-setting>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<property name="com.easyjweb.debug">false</property><!--调试模式,每次加载都会重新初始化EasyJWeb-->
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<property name="com.easyjweb.maxUploadFileSize">51200</property><!--最大上传文件为51200kb-->
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<property name="com.easyjweb.uploadSizeThreshold">512</property><!--上传文件缓存值-->
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</framework-setting>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<import resource="mvc.xml" />
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</国产开源框架-web>
为了显示代码的层次和清晰,我们在easyjf-web.xml中只有一些简单的配置,关于easyjweb具体配置在mvc.xml中进行定义,这里只需要import recource="mvc.xml"即可,这里支持多个导入。
编写mvc.xml,代码如下:
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<?xml version="1.0" encoding="UTF-8"?>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<国产开源框架-web xmlns="http://www.easyjf.com/schema/easyjf/web"
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
xsi:schemaLocation="http://www.easyjf.com/schema/easyjf/web http://www.easyjf.com/schema/easyjf/web/easyjf-web-0.0.1.xsd ">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<framework-setting>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<property name="com.easyjweb.debug">false</property><!--调试模式,每次加载都会重新初始化EasyJWeb-->
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<property name="com.easyjweb.maxUploadFileSize">51200</property><!--最大上传文件为51200kb-->
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<property name="com.easyjweb.uploadSizeThreshold">512</property><!--上传文件缓存值-->
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<!-- <property name="com.easyjweb.propertiesType">xml</property> -->
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<property name="com.easyjweb.defaultActionPackages">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
com.easyjf.ext.action
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</property><!--设置自加Action扫描的路径,根据你的情况调整-->
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</framework-setting>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<beans>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<!--异常处理Bean,把所有的异常控制都转到error.html这个页面-->
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<bean name="exceptionHandler"
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
class="com.easyjf.web.exception.DefaultExceptionHandle"
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
scope="singleton">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<!-- <property name="errorPage" value="/error.html"/>-->
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</bean>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<!-- 重复提交时的处理Bean -->
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<bean name="tokenExceptionHandler"
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
class="com.easyjf.web.exception.DefaultTokenVaildExceptionHandler"
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
scope="singleton">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</bean>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<!--acegi异常处理器,使得acegi的相关异常可以得到正确的处理-->
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<bean name="acegiException"
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
class="com.easyjf.web.security.acegi.AcegiExceptionHandler" />
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</beans>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</国产开源框架-web>
mvc.xml中配置了默认action包为 com.easyjf.ext.action,这样就不需要给每个action配置一个moudle了,比如请求为manage.ejf,那么系统自动回到默认包 com.easyjf.ext.action下查找名为ManageAction的类处理该请求
编写ManageAction,代码如下:
package com.easyjf.ext.action;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
import com.easyjf.web.components.Button;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
import com.easyjf.web.components.Function;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
import com.easyjf.web.components.RichComponentAction;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
import com.easyjf.web.components.Window;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
import com.easyjf.web.components.form.ActionFunction;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
import com.easyjf.web.components.form.Form;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
import com.easyjf.web.components.form.FormAction;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
import com.easyjf.web.components.form.TextField;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedBlock.gif)
public class ManageAction extends RichComponentAction ...{
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif)
public void doLogin() ...{
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
Window win = new Window("win1", "登陆系统", 265, 140);//新直接使用win1建一个window,win1为名称,后面可以之际使用win1来应用该window
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
win.setClosable(false);//设置该window关闭按钮不可用
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
Form f = new Form("fp");//新建一个form
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
f.setLabelAlign("right");//设置form的标签对齐为右对齐
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
f.setLabelWidth(55);//设置form的标签宽度为55px
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
f.set("bodyStyle", "padding-top:6px");//设置form的bodystyle属性为paddint-top:6px
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
f.set("frame", true);//设置form为frame
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
f.getDefaults().put("width", 158);
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
TextField tf1 = new TextField("userName", "帐号");//新建一个TextField对象,相当于网页中input
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
tf1.set("cls", "user");
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
TextField tf2 = new TextField("password", "密码");
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
tf2.setInputType("password");
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
tf2.set("cls", "key");
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
f.add(tf1, tf2);//添加2个TextField到form
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
win.add(f);//添加form到window
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
Function success = new ActionFunction(
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
"window.location.href = 'manage.ejf';");//新建一个函数,这里为登陆成功后的导向为:manage.ejf
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
Function failure = new ActionFunction(
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
"form.reset();if(action.failureType == Ext.form.Action.SERVER_INVALID)Ext.MessageBox.alert('警告',action.result.errors.msg);");//新建登陆错误提示函数
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
FormAction action = new FormAction("loginAction",
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
"portal.ejf?cmd=adminLogin", success, failure);//新建FormAction,命名为loginAction,登陆成功后执行success函数,失败执行failure函数
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
action.setWaitMsg("正在登陆,请稍后...");//设置登陆时候的提示
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
Button b = new Button("登陆", new Function(
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
"var fp=Ext.getCmp('fp');fp.form.submit(loginAction);"));//新建一个按钮,点击该按钮的时候执行后面的函数new Function( "var fp=Ext.getCmp('fp');fp.form.submit(loginAction);"),这里就是一个页面中的js函数
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
Button b2 = new Button("重置", new Function(
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
"var fp=Ext.getCmp('fp');fp.form.reset();"));
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
win.addButtons(b, b2);//添加按钮到window
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
win.show();//显示window
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
this.addComponents(action, win);//添加FormAction和Window
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
this.componentPage();//返回easyjweb定义的页面,如果没有这一句就返回用户自己的页面,这里将返回views/manage/login.html
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif)
}
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockEnd.gif)
}
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
这样一个完全面向对象的java方法就会自动生成一个登陆页面,启动tomcat,输入http://yourhost:port/manage.ejf?cmd=login就可以看到前面的页面了,这个项目结构如下:
![](http://p.blog.csdn.net/images/p_blog_csdn_net/ProvidenceZY/3.bmp)
这里要注意的是要给ext源代码拷贝到项目下,并且目录为:plugins/extjs/ext-2.0,是不是有点心动了,那就赶紧试一试吧!
本节我们将使用easyjweb构建一个登陆面板,最终效果如下:
![](http://p.blog.csdn.net/images/p_blog_csdn_net/ProvidenceZY/1.bmp)
图1-1 登陆面板
![](http://p.blog.csdn.net/images/p_blog_csdn_net/ProvidenceZY/2.bmp)
图1-2 正在登陆...
这个效果还是不错的吧,如果使用js来书写这个面板有一定的难度,使用easyjweb书写只需要几行代码,甚至不需要任何页面文件即可合成这样漂亮的页面。
easyjweb1.1版可以使用easyjweb.bat projectName ext这样的命令生成一个ext应用程序,笔者不喜欢使用命令行生成,还是自动动手吧!
首先新建一个工程,这里使用Eclipse,添加相应的jar文件到classpath中(可以直接从easyjweb源码中拷贝所有的包),编写web.xml,代码如下:
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<?xml version="1.0" encoding="UTF-8"?>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<web-app xmlns="http://java.sun.com/xml/ns/j2ee"
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_5.xsd"
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
metadata-complete="false" version="2.5">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<!--定义EasyJWeb的主控Servlet -->
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<servlet>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<servlet-name>国产开源框架</servlet-name>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<servlet-class>com.easyjf.web.ActionServlet</servlet-class>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<load-on-startup>1</load-on-startup>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</servlet>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<servlet-mapping>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<servlet-name>国产开源框架</servlet-name>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<url-pattern>*.ejf</url-pattern><!--所有.ejf的扩展名都由easyjweb来处理-->
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</servlet-mapping>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<!-- 定义字符处理Filter -->
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<filter>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<filter-name>CharsetFilter</filter-name>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<filter-class>com.easyjf.web.CharsetFilter</filter-class>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<init-param>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<param-name>encoding</param-name>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<param-value>UTF-8</param-value>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</init-param>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<init-param>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<param-name>ignore</param-name>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<param-value>true</param-value>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</init-param>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</filter>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<filter-mapping>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<filter-name>CharsetFilter</filter-name>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<servlet-name>国产开源框架</servlet-name>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</filter-mapping>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</web-app>
关于web.xml这里不介绍了。
编写easyjweb默认的配置文件easyjf-web.xml,代码如下:
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<?xml version="1.0" encoding="UTF-8"?>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<国产开源框架-web xmlns="http://www.easyjf.com/schema/easyjf/web"
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
xsi:schemaLocation="http://www.easyjf.com/schema/easyjf/web http://www.easyjf.com/schema/easyjf/web/easyjf-web-0.0.1.xsd ">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<framework-setting>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<property name="com.easyjweb.debug">false</property><!--调试模式,每次加载都会重新初始化EasyJWeb-->
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<property name="com.easyjweb.maxUploadFileSize">51200</property><!--最大上传文件为51200kb-->
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<property name="com.easyjweb.uploadSizeThreshold">512</property><!--上传文件缓存值-->
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</framework-setting>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<import resource="mvc.xml" />
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</国产开源框架-web>
为了显示代码的层次和清晰,我们在easyjf-web.xml中只有一些简单的配置,关于easyjweb具体配置在mvc.xml中进行定义,这里只需要import recource="mvc.xml"即可,这里支持多个导入。
编写mvc.xml,代码如下:
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<?xml version="1.0" encoding="UTF-8"?>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<国产开源框架-web xmlns="http://www.easyjf.com/schema/easyjf/web"
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
xsi:schemaLocation="http://www.easyjf.com/schema/easyjf/web http://www.easyjf.com/schema/easyjf/web/easyjf-web-0.0.1.xsd ">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<framework-setting>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<property name="com.easyjweb.debug">false</property><!--调试模式,每次加载都会重新初始化EasyJWeb-->
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<property name="com.easyjweb.maxUploadFileSize">51200</property><!--最大上传文件为51200kb-->
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<property name="com.easyjweb.uploadSizeThreshold">512</property><!--上传文件缓存值-->
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<!-- <property name="com.easyjweb.propertiesType">xml</property> -->
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<property name="com.easyjweb.defaultActionPackages">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
com.easyjf.ext.action
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</property><!--设置自加Action扫描的路径,根据你的情况调整-->
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</framework-setting>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<beans>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<!--异常处理Bean,把所有的异常控制都转到error.html这个页面-->
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<bean name="exceptionHandler"
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
class="com.easyjf.web.exception.DefaultExceptionHandle"
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
scope="singleton">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<!-- <property name="errorPage" value="/error.html"/>-->
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</bean>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<!-- 重复提交时的处理Bean -->
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<bean name="tokenExceptionHandler"
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
class="com.easyjf.web.exception.DefaultTokenVaildExceptionHandler"
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
scope="singleton">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</bean>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<!--acegi异常处理器,使得acegi的相关异常可以得到正确的处理-->
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<bean name="acegiException"
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
class="com.easyjf.web.security.acegi.AcegiExceptionHandler" />
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</beans>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</国产开源框架-web>
mvc.xml中配置了默认action包为 com.easyjf.ext.action,这样就不需要给每个action配置一个moudle了,比如请求为manage.ejf,那么系统自动回到默认包 com.easyjf.ext.action下查找名为ManageAction的类处理该请求
编写ManageAction,代码如下:
package com.easyjf.ext.action;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
import com.easyjf.web.components.Button;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
import com.easyjf.web.components.Function;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
import com.easyjf.web.components.RichComponentAction;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
import com.easyjf.web.components.Window;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
import com.easyjf.web.components.form.ActionFunction;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
import com.easyjf.web.components.form.Form;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
import com.easyjf.web.components.form.FormAction;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
import com.easyjf.web.components.form.TextField;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedBlock.gif)
public class ManageAction extends RichComponentAction ...{
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif)
public void doLogin() ...{
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
Window win = new Window("win1", "登陆系统", 265, 140);//新直接使用win1建一个window,win1为名称,后面可以之际使用win1来应用该window
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
win.setClosable(false);//设置该window关闭按钮不可用
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
Form f = new Form("fp");//新建一个form
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
f.setLabelAlign("right");//设置form的标签对齐为右对齐
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
f.setLabelWidth(55);//设置form的标签宽度为55px
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
f.set("bodyStyle", "padding-top:6px");//设置form的bodystyle属性为paddint-top:6px
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
f.set("frame", true);//设置form为frame
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
f.getDefaults().put("width", 158);
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
TextField tf1 = new TextField("userName", "帐号");//新建一个TextField对象,相当于网页中input
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
tf1.set("cls", "user");
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
TextField tf2 = new TextField("password", "密码");
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
tf2.setInputType("password");
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
tf2.set("cls", "key");
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
f.add(tf1, tf2);//添加2个TextField到form
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
win.add(f);//添加form到window
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
Function success = new ActionFunction(
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
"window.location.href = 'manage.ejf';");//新建一个函数,这里为登陆成功后的导向为:manage.ejf
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
Function failure = new ActionFunction(
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
"form.reset();if(action.failureType == Ext.form.Action.SERVER_INVALID)Ext.MessageBox.alert('警告',action.result.errors.msg);");//新建登陆错误提示函数
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
FormAction action = new FormAction("loginAction",
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
"portal.ejf?cmd=adminLogin", success, failure);//新建FormAction,命名为loginAction,登陆成功后执行success函数,失败执行failure函数
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
action.setWaitMsg("正在登陆,请稍后...");//设置登陆时候的提示
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
Button b = new Button("登陆", new Function(
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
"var fp=Ext.getCmp('fp');fp.form.submit(loginAction);"));//新建一个按钮,点击该按钮的时候执行后面的函数new Function( "var fp=Ext.getCmp('fp');fp.form.submit(loginAction);"),这里就是一个页面中的js函数
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
Button b2 = new Button("重置", new Function(
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
"var fp=Ext.getCmp('fp');fp.form.reset();"));
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
win.addButtons(b, b2);//添加按钮到window
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
win.show();//显示window
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
this.addComponents(action, win);//添加FormAction和Window
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
this.componentPage();//返回easyjweb定义的页面,如果没有这一句就返回用户自己的页面,这里将返回views/manage/login.html
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif)
}
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockEnd.gif)
}
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
这样一个完全面向对象的java方法就会自动生成一个登陆页面,启动tomcat,输入http://yourhost:port/manage.ejf?cmd=login就可以看到前面的页面了,这个项目结构如下:
![](http://p.blog.csdn.net/images/p_blog_csdn_net/ProvidenceZY/3.bmp)
这里要注意的是要给ext源代码拷贝到项目下,并且目录为:plugins/extjs/ext-2.0,是不是有点心动了,那就赶紧试一试吧!
相关文章推荐
- nodejs+mongodb系列教程之(2/5)--认识express4构建的nodes项目
- 使用Vue构建Ionic混合APP系列教程(二):导航
- 使用ASP.NET Web Api构建基于REST风格的服务实战系列教程【二】——使用Repository模式构建数据库访问层
- 使用ASP.NET Web Api构建基于REST风格的服务实战系列教程【九】——API变了,客户端怎么办?
- [js高手之路]深入浅出webpack教程系列9-打包图片(file-loader)用法
- nodejs+mongodb系列教程之(5/5)--一个完整的项目
- Docker系列教程12-使用Maven插件构建Docker镜像
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):(二十七)战斗前夜之构建动态障碍物系统
- [js高手之路] vue系列教程 - vue的事件绑定与方法(2)
- EXT教程系列
- [js高手之路] vue系列教程 - 绑定class与行间样式style(6)
- Flex4系列教程之五 – 构建Flex4为前端的Java EE项目
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):(四十三)制作游戏主菜单面板及鼠标左右键快捷技能栏
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):(四十三)制作游戏主菜单面板及鼠标左右键快捷技能栏
- Vue.js 系列教程 5:动画
- Vue.js 系列教程 2:组件,Props,Slots
- Vue.js 系列教程 2:组件,Props,Slots
- Vue.js 系列教程 4:Vue
- Vue.js 系列教程 4:Vue
- Ext Js MVC系列二 利用Application和Viewport进行应用程序初始化和页面布局