پیاده‌سازی فرم ورود توسط ExtJS ~ Coder's Pulse

برای استفاده از فریموورک 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);
                     }
                  }, 
                  scope: this
               });
            }
         }
      }]
   });

   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.blogspot.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.blogspot.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 ) {
         // 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 بدون وجود ] در ابتدا و [ در انتهایش باشد.

Coder's Pulse

پیاده‌سازی فرم ورود توسط ExtJS

0 comments:

Post a Comment

تگ‌ها

آرشیو