آشنایی با فرم ورود توسط ExtJS

برای استفاده از پلتفورم ExtJS جهت پیاده‌سازی رابط گرافیکی فرض می‌کنیم صفحه ورودی شما به این صورت می‌باشد:

<%@ page contentType="text/html; charset=utf-8" language="java" import="java.util.*"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ExtJS Log in Sample</title>
	<link rel="stylesheet" type="text/css" href="http://localhost:8080/coder/web/theme/css/ext-all.css" />

	<script type="text/javascript" src="http://localhost:8080/coder/web/script/ext/core/ext-base.js"></script>
	<script type="text/javascript" src="http://localhost:8080/coder/web/script/ext/core/ext-all.js"></script>
	<script type="text/javascript" src="http://localhost:8080/coder/web/script/ext/user/login/login.js"></script>
</head>

<body>
</body>
	<div id="login"></div>
</html>

مشخص می‌باشد که آدرس‌دهی‌ها با توجه به شرایط شما می‌بایست تغییر یابد.

فایل Login.js به صورت زیر می‌باشد :

Ext.onReady(function(){
	Ext.QuickTips.init();

	// Generating Log In Form
	var bd = Ext.get('login');

	var login_form = new Ext.FormPanel({
		id: login_form,
		monitorValid: true,
		labelWidth: 100,
		url: 'http://localhost:8080/coder/process/user/login',
		frame: true,
		monitorResize: true,
		bodyStyle: 'padding:5px 5px 0;',
		anchor: '50%',
		defaults: {
			width: 200,
			msgTarget: 'side'
		},
		defaultType: 'textfield',

		items: [{
				labelAlign: 'right',
				fieldLabel: 'نام کاربری',
				name: 'username',
				allowBlank: false,
			},{
				fieldLabel: 'رمز عبور',
				name: 'password',
				allowBlank:false,
				inputType: 'password'
			}
		],

		buttons: [{
			text: 'انصراف',
			handler: function() {
				login_form.getForm().reset();
			}
		}, {
			text: 'ورود',
			handler: function() {
				if( login_form.getForm().isValid() ){
					login_form.getForm().submit({
						method:'POST', 

						success: function() {
							var nextScreen = 'http://localhost:8080/coder/';
							window.location = nextScreen;
						},
						failure: function(form, action) {
							if( action.failureType == 'server' ) {
								obj = Ext.util.JSON.decode(action.response.responseText);
								Ext.Msg.alert('نام کاربری و یا رمز عبور، نادرست می باشد.', obj.errors.reason);
							} else {
								Ext.Msg.alert('خطا!', 'در ارتباط با سرور اشکال رخ داده است : ' + action.response.responseText);
							}
						}
					});
				}
			}
		}]
	});

	login_form.render(bd);

	Ext.fly('login').show();
});

آدرسی که فرم ورود به آن صفحه Submit می‌شود، و در فایل بالا به آن اشاره شده است،

http://localhost:8080/coder/process/user/login

در web.xml داریم :

<web-app>
	...
	<servlet>
		<servlet-name>LogInController<servlet-name>
		<servlet-class>com.wordpress.coderspulse.web.user.LoginHandler</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>LogInController</servlet-name>
		<url-pattern>/process/user/login</url-pattern>
	</servlet-mapping>
	...
</web-app>

فایل LoginHandler.java

package com.wordpress.coderspulse.web.user;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class LoginHandler extends HttpServlet {
    public void init(ServletConfig config) throws ServletException {
        super.init(config);
    }

    public void destroy() {
    }

    protected void doPost (HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        boolean userValidated = false;

        // Do User validating  here

        response.setContentType("text/html");
        PrintWriter out = response.getWriter();

        if ( userValidated == true ) {
		// If User was validated, this is the Format to tell the Ext that it is a Success
		out.println("{success:true}");
        } else {
		// If User was NOT validated, this is the Format to tell the Ext that it is a Failure, and Why
		out.println("{success:false, errors:{reason:'Login failed.Try again'}}");
        }
        out.close();
    }
}

قابل ذکر است که Response ای که شما آماده کرده‌اید، می‌بایست، دقیقا با فورمت JSON بدون وجود ] در ابتدا و [ در انتهایش باشد.