Ajax Struts2 Login Page with Shake Animation Effect: 2014

Artículo original: Ajax PHP Login Page with Shake Animation Effect

El siguiente es una adaptacion sencilla del plugin de animacion shake, sobre Struts2 y Jquery plugin y Maven.

Estructura de la aplicacion:

Pom.xml:


  4.0.0
  org
  Struts2_ej_01
  war
  1.0
  Struts2_ej_01 Maven Webapp
  http://maven.apache.org


  
    javax.servlet
    servlet-api
    2.5
    provided
  
  
  
  
    org.apache.struts
    struts2-core
    2.3.16.3
  
  
    org.apache.struts
    struts2-convention-plugin
    2.3.16.3
  

  
  
    org.apache.struts
    struts2-json-plugin
    2.3.16.3
  

  
  
    com.jgeppert.struts2.jquery
    struts2-jquery-plugin
    3.7.1
  



  Struts2_ej_01
  
    
      org.apache.maven.plugins
      maven-compiler-plugin
      
        1.6
        1.6

Crer archivo login.jsp en src\main\webapp\User\pages

Agregar las siguientes taglibs:

<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="sj" uri="/struts-jquery-tags" %>

Sección HEAD:

  
  <link href='<s:url value="/resources/css/style.css" />' rel="stylesheet"></link>
  <sj:head jquerytheme="redmond" >
  <script src='<s:url value="/resources/js/jquery.ui.shake.js" />'></script>
  <script>
      $.subscribe('beforeSubmit', function(event,data){
        $("#error").html('');
      });
      $.subscribe('submitComplete', function(event,data){
            
        var usuario=event.originalEvent.request.responseJSON.userName;
            
        if(event.originalEvent.request.responseJSON.loginValido=='OK'){
          $('#box')
            .toggle(
              "explode",
              function(){
                $('#box').html(
                  '<table>'+
                  '<tr>'+
                  '<td><img src="<s:url value="/resources/images/ok.png"/>" /></td>'+
                  '<td><span style="font-weight:bold;"> Bienvenido '+usuario + '</span>'+
                  '</td>'+
                  '</tr>'+
                  '</table>'
                );
                $('#box').toggle("explode");
              }
            );
        }else{
          //Shake animation effect.
          $('#box').shake();
          $("#error").html(
            '<table>'+
            '<tr>'+
            '<td><img src="<s:url value="/resources/images/error.png"/>" /></td>'+
            '<td>'+
            '<span style="color:#cc0000;font-weight:bold;">Error:</span>'+
            '<span style="color:#cc0000;">el usuario y/o la contraseña no son validos.</span>'+
            '</td>'+
            '</tr>'+
            '</table>'
          );
        }
      });
    </script>
</sj:head>

Sección BODY:

<div id="main">
<sj:div 
  cssclass="result ui-widget-content ui-corner-all" 
  cssstyle="width:300px;" 
  delay="3000" 
  effect="explode" 
  effectduration="1500" 
  id="divContentResult">
</sj:div>

<div id="box">
    <s:form 
        action="Login" 
        id="loginForm" 
        theme="xhtml">

        <h2>Identificate</h2>
        <img 
            id="indicator" 
            src='<s:url value="/resources/images/indicator.gif"/>'
            alt="Cargando..."
            style="display:none"
            />

        <s:textfield 
            cssclass="input_text ui-widget ui-widget-content ui-corner-all campoTexto" 
            label="Usuario" 
            name="userName" 
            size="10"
            />
   
        <s:password 
            cssclass="input_text ui-widget ui-widget-content ui-corner-all campoTexto" 
            label="Contraseña" 
            name="password" 
            size="10"
            />

        <sj:submit 
            id="btnEntrar"
            button="true"
            value="Entrar"
            indicator="indicator"
            formIds="loginForm"
            onCompleteTopics="submitComplete"
            onBeforeTopics="beforeSubmit"
            targets="divContentResult"
            cssStyle="float:right;"
            />

        <div style="clear: both;"></div>
        <div id="error">
        </div>
        <div style="clear: both;">
        </div>

    </s:form>

</div> <!-- Cierre div id="box" -->
</div> <!-- Cierre div id="main" -->

Crear LoginAction en src\main\java\org\action:

package org.action;

import java.util.Map;
import org.apache.struts2.convention.annotation.Action;
import org.apache.struts2.convention.annotation.Namespace;
import org.apache.struts2.convention.annotation.ParentPackage;
import org.apache.struts2.convention.annotation.Result;
import org.apache.struts2.convention.annotation.ResultPath;
import org.apache.struts2.dispatcher.SessionMap;
import org.apache.struts2.interceptor.SessionAware;
import com.opensymphony.xwork2.ActionSupport;

@Namespace("/User")
@ResultPath(value="/")
@ParentPackage("json-default")
public class WelcomeUserAction extends ActionSupport implements SessionAware{
 private static final long serialVersionUID = 1L;

 private SessionMap<String,Object> sessionMap;
 
 @Override
 public void setSession(Map<String, Object> map) {
  sessionMap=(SessionMap)map;
 }
 
 private String userName;
 private String password;
 private String loginValido;
 
 @Action(
  value="Login", 
  results={
   @Result(
    name="success",
    type="json"
   )
  }
 )
 public String execute(){
  System.out.println("U="+this.userName);
  System.out.println("P="+this.password);
  
  if(
   this.userName.equalsIgnoreCase("cespower")
   &&
   this.password.equalsIgnoreCase("1234")
  ){
   this.loginValido="OK";
   this.sessionMap.put("userName", this.userName);
  }else
   this.loginValido="ERROR";
  
  return SUCCESS;
 }
 public String getUserName() {
  return userName;
 }
 public void setUserName(String userName) {
  this.userName = userName;
 }
 public String getPassword() {
  return password;
 }
 public void setPassword(String password) {
  this.password = password;
 }
 public String getLoginValido() {
  return loginValido;
 }
}

Al final, el login debe funcionar de la siguiente manera:

domingo, 10 de agosto de 2014

Ajax Struts2 Login Page with Shake Animation Effect