Arquivos de sites

jQuery – Parando animações com o método stop()

No capítulo anterior, nós vimos como nós podemos fazer animações customizadas usando o método animate() e como nós podemos ter várias animações depois de cada uma,  fazendo várias chamadas de animações e desse modo usando a fila de animação do jQuery. Porém, algumas vezes você precisa para uma animação antes dela terminar, e para isso, o jQuery tem um método stop(). Ele funciona para todos os efeitos relacionados as funções do jQuery, incluindo o sliding, fading e animações customizadas com o método animate(). Aqui está um exemplo onde nós usamos ele:

<a href="javascript:void(0);" onclick="$('#divTestArea1').slideDown(5000);">Show box</a>   
<a href="javascript:void(0);" onclick="$('#divTestArea1').stop();">Stop</a>
<div id="divTestArea1" style="padding: 100px; background-color: #89BC38; text-align: center; display: none;">
        <b>Hello, world!</b>
</div>

Para fazer o exemplo um pouco mais compacto, eu usei chamadas inline nos eventos onclick dos dois links. Quando você clicar o primeiro link, o método slideDown() é usado no seu elemento div, começando um deslizamento para baixo (slide down) devagar. Um clique no segundo link  irá matar a animação corrente/atual sendo realizada no elemento selecionado. Esse é o comportamento padrão do método stop(), mas dois parâmetros opcionais nos permitem fazer as coisas de forma diferente. O primeiro parâmetro especifica se a fila de animação deve ser limpa ou não. O padrão é false, que significa que apenas a animação ativa será parada, permitindo quaisquer animações enfileiradas sejam executadas mais tarde. O seguinte exemplo demonstrará isso:

<a href="javascript:void(0);" onclick="$('#divTestArea2').slideDown(5000).slideUp(5000);">Show box</a>   
<a href="javascript:void(0);" onclick="$('#divTestArea2').stop();">Stop</a>   
<a href="javascript:void(0);" onclick="$('#divTestArea2').stop(true);">Stop all</a>   
<a href="javascript:void(0);" onclick="$('#divTestArea2').clearQueue().hide();">Reset</a>

<div id="divTestArea2" style="padding: 100px; background-color: #89BC38; text-align: center; display: none;">
        <b>Hello, world!</b>
</div>

Nós adicionamos uma segunda animação ao link “Show box”. Isso irá deslizar a caixa para baixo devagar, e uma vez terminado, deslizará ela para cima de novo. O sistema de fila garante que esses passo serão executados na sequência. Agora, clique no link “Reset” para ter a caixa escondida de novo e então clique no link “Show box” mais uma vez, seguido por um clique no “Stop”. Você verá que a primeira animação foi parada,seguindo para a segunda animação a ser executada. Porém, se você tentar de novo e clicar no “Stop all” em vez disso, o valor true passado irá garantir que a fila inteira está limpa e que toda animação no elemento está parada.

O Segundo parâmetro diz ao jQuery se você gostaria de que ele apenas parar onde ele está, ou apressar a animação em invés disso, permitindo ele terminar. Isso faz uma grande diferença, porque como você pode ver no primeiro exemplo, uma vez que você aperta stop, o comportamento padrão é simplesmente para a animação onde ela está e deixá-la assim. O exemplo seguinte irá mostrar a diferença:

<a href="javascript:void(0);" onclick="$('#divTestArea3').slideDown(5000);">Show box</a>   
<a href="javascript:void(0);" onclick="$('#divTestArea3').stop(true);">Stop</a>   
<a href="javascript:void(0);" onclick="$('#divTestArea3').stop(true, true);">Stop but finish</a>   
<a href="javascript:void(0);" onclick="$('#divTestArea3').clearQueue().hide();">Reset</a>
<div id="divTestArea3" style="padding: 100px; background-color: #89BC38; text-align: center; display: none;">
        <b>Hello, world!</b>
</div>

Tente as duas variações do “Stop” – a primeira irá para imediatamente, enquanto a segunda irá apressar a animação para o fim.

Fonte: jquery-tutorial.net

jQuery – Animações customizadas com o método animate()

Nos capítulos anteriores, nós vimos dentro dos métodos de efeitos embutidos fading e sliding do jQuery. Porém, você pode muito mais que isso. Com o método animated(), você pode criar animações customizada onde você manipula quase qualquer propriedade CSS numérica de um elemento. Isso permite você por exemplo mover uma caixa devagar através uma tela ou subir ou descer. Vamos tentar alguma coisa muito simples:

<div style="height: 60px;">
        <div id="divTestBox1" style="height: 50px; width: 50px; background-color: #89BC38; position: absolute;"></div>
</div>
<script type="text/javascript">
$(function()
{
        $("#divTestBox1").animate(
                {
                        "left" : "200px"
                }
        );
});
</script>

O primeiro, e único necessário, parâmetro da função animated é o mapa das propriedades do CSS que você deseja que seja alterado. Nesse caso, nós temos um elemento div absolutamente posicionado, que nós dissemos ao jQuery para mover até ele alcançar 200 pixels na propriedade left.
O segundo parâmetro permite você especificar a duração da animação em milissegundos ou como “slow” ou “fast” que é o mesmo de 600 ou 200ms. Com isso, nós podemos diminuir o exemplo acima mais do que nós queremos:

<div style="height: 60px;">
        <div id="divTestBox2" style="height: 50px; width: 50px; background-color: #89BC38; position: absolute;"></div>
</div>
<script type="text/javascript">
$(function()
{
        $("#divTestBox2").animate(
                {
                        "left" : "200px"
                }, 
                5000
        );
});
</script>

Com o terceiro parâmetro, nós podemos especificar uma função de callback para ser chamada uma vez que a  animação terminar. Isso pode ser bastante útil para executar um número diferente de animações em uma fila. Por exemplo, veja esse exemplo:

<div style="height: 40px;">
        <div id="divTestBox3" style="height: 20px; width: 20px; background-color: #89BC38; position: absolute;"></div>
</div>
<script type="text/javascript">
$(function()
{
        $("#divTestBox3").animate(
                { "left" : "100px" }, 
                1000,
                function()
                {
                        $(this).animate(
                                { "left" : "20px" },
                                500,
                                function()
                                {
                                        $(this).animate({ "left" : "50px" }, 500);
                                }
                        )
                }
        );
});
</script>

Isso pode parecer um pouco repetitivo, mas o que nós fazemos é que nós chamamos o método animado e perguntamos pela propriedade left da nossa “div” de teste para ser animada até ela alcançar 100 pixels no left. Nós queremos que isso leve 1 segundo (1000 milissegundos) e uma vez que isso se complete, nós desejamos que uma nova animação comece, que mova isso de volta para 20 pixels dentro de meio segundo, e assim que ESSA animação finalize, nós movemos ela um pouco para direito de novo, então agora ela tem uma propriedade left de 50 pixels.

Porém, desde que o jQuery vem com funcionalidade de fila para animações, você pode normalmente realizar o exemplo acima de um modo muito mais simples. Isso entretanto, apenas se aplica quando você quer um conjunto de animações executadas após cada uma – se você quer fazer outra coisa quando uma animação estiver completa, o exemplo acima será ainda o caminho a ser seguido. Aqui está uma versão de fila:

<div style="height: 40px;">
        <div id="divTestBox4" style="height: 20px; width: 20px; background-color: #89BC38; position: absolute;"></div>
</div>
<script type="text/javascript">
$(function()
{
        $("#divTestBox4").animate({ "left" : "100px" }, 1000);
        $("#divTestBox4").animate({ "left" : "20px" }, 500);
        $("#divTestBox4").animate({ "left" : "50px" }, 500);
});
</script>

Fonte: jquery-tutorial.net

jQuery – Sliding de elementos (Deslizar)

No capítulo anterior, nós vimos como nós podemos exibir ou esconder elementos  usando os métodos fading do jQuery. Porém, algumas vezes um efeito de sliding é uma melhor escolha, e para isso, o jquery tem um conjunto de métodos de combinação para fazer apenas isso. Vamos começar com um simples exemplo dele, onde nós usamos o método slideDown():

<div id="divTestArea1" style="padding: 50px; background-color: #89BC38; text-align: center; display: none;">
        <b>Hello, world!</b>
</div>
<a href="javascript:void(0);" onclick="ShowBox();">Show box</a>
<script type="text/javascript">
function ShowBox()
{
        $("#divTestArea1").slideDown();
}
</script>

Para esconder a caixa de novo, nós podemos usar o método slideUp(). Ambos recebem o mesmo conjunto de parâmetros, que são todos opcionais. O primeiro parâmetro permite você especificar a duração para o efeito em milissegundos, ou “fast” (rápido) ou “slow” (devagar), que são o mesmo se especificar ou 200 ou 600 milissegundos. Vamos tentar um exemplo onde nós fazemos apenas isso:

<div id="divTestArea21" style="width: 50px; height: 50px; display: none; background-color: #89BC38;"></div>
<div id="divTestArea22" style="width: 50px; height: 50px; display: none; background-color: #C3D1DF;"></div>
<div id="divTestArea23" style="width: 50px; height: 50px; display: none; background-color: #9966FF;"></div>
<a href="javascript:void(0);" onclick="ShowBoxes();">Show boxes</a>
<script type="text/javascript">
function ShowBoxes()
{
        $("#divTestArea21").slideDown("fast");
        $("#divTestArea22").slideDown("slow");
        $("#divTestArea23").slideDown(2000);
}
</script>

Temos um pouco mais de HTML que o de costume, mas isso está lá apenas para você ser capaz de ver os andamentos diferentes que as caixas são mostradas. Observe como a primeira caixa aparece quase que instantaneamente, a segunda caixa é bem parecida e a terceira caixa é mais devagar, porque ela usou dois segundos inteiros para descer.

Agora, o segundo parâmetro pode ser oir o nome de uma  função de atenuação (que nós não vamos usar nesse tutorial) ou uma função de callback que você pode fornecer, para ser chamada uma vez que o efeito terminar. Aqui está um exemplo disso, combinado com o uso do método slideUp():

<div id="divTestArea3" style="width: 50px; height: 50px; display: none; background-color: #89BC38;"></div>
<script type="text/javascript">
$(function()
{
        $("#divTestArea3").slideDown(2000, function()
        {
                $("#divTestArea3").slideUp(3000);
        });
});
</script>

A habilidade para fazer isso pode ser muito útil para combinar vários efeitos, com você pode ver. Neste exemplo, a função de callback que nós fornecemos será chamada assim que o método slideDown() estiver completamente finalizado e então o método slideUp() é chamado.

No caso de você querer simplificar o slide de um elemento para cima ou para baixo dependendo do seu estado atual, os desenvolvedores do jQuery forneceram a nós  um método legal slideToggle() para fazer apenas isso. Veja o próximo exemplo, onde nós usamos ele:

<div id="divTestArea4" style="width: 50px; height: 50px; display: none; background-color: #89BC38;"></div><br />
<a href="javascript:void(0);" onclick="ToggleBox();">Toggle box</a>
<script type="text/javascript">
function ToggleBox()
{
        $("#divTestArea4").slideToggle("slow"); 
}
</script>

Fonte: jquery-tutorial.net

jQuery – Fading de elementos (Exibir/Esconder)

Fazer simples animação é muito fácil com jQuery. Um desses efeitos é o fading em um elemento, para exibí-lo ou escondê-lo. Aqui está um simples exemplo, onde nós exibimos uma caixa escondida, usando o método fadeIn():

<div id="divTestArea1" style="padding: 50px; background-color: #89BC38; text-align: center; display: none;">
        <b>Hello, world!</b>
</div>
<a href="javascript:void(0);" onclick="ShowBox();">Show box</a>
<script type="text/javascript">
function ShowBox()
{
        $("#divTestArea1").fadeIn();
}
</script>

Você pode dar um fade em um monte de elementos diferentes, como divs, spans ou links. O método fadeIn() pode receber três parâmetros. O primeiro permite você especificar a duração do efeito em milissegundos, ou “fast” (rápido) ou “slow” (devagar), que é o mesmo que especificar 200 ou 600 milissegundos. Aqui está um exemplo disso em uso:

<div id="divTestArea21" style="width: 50px; height: 50px; display: none; background-color: #89BC38;"></div>
<div id="divTestArea22" style="width: 50px; height: 50px; display: none; background-color: #C3D1DF;"></div>
<div id="divTestArea23" style="width: 50px; height: 50px; display: none; background-color: #9966FF;"></div>
<a href="javascript:void(0);" onclick="ShowBoxes();">Show boxes</a>
<script type="text/javascript">
function ShowBoxes()
{
        $("#divTestArea21").fadeIn("fast");
        $("#divTestArea22").fadeIn("slow");
        $("#divTestArea23").fadeIn(2000);
}
</script>

Não se importe com todo o HTML, está lá apenas para que você possa ver a diferença entre as durações do fading. Agora, o segundo parâmetro pode ser o nome de uma função de atenuação (que nós não vamos usar nesse tutorial) ou uma função de callback que você pode fornecer, para ser chamada uma vez que o efeito terminar. Aqui está um exemplo disso, combinado com o uso do método fadeOut(), que obviamente tem o efeito reverso do fadeIn():

<div id="divTestArea3" style="width: 50px; height: 50px; display: none; background-color: #89BC38;"></div>
<script type="text/javascript">
$(function()
{
        $("#divTestArea3").fadeIn(2000, function()
        {
                $("#divTestArea3").fadeOut(3000);
        });
});
</script>

Pode ter situações onde você quer esconder ou exibir um element dependendo do estado corrente do mesmo. Você poderia com certeza checar se ele está visível ou não, e então chamar ou fadeIn() ou fadeOut(), mas os desenvolvedores legais do jQuery tem nos fornecido um método específico para alternar (toggling) um elemento, chamado fadeToggle().  Ele leva os mesmo parâmetros como fadeIn() e fadeOut(), então ele é muito fácil de usar. Aqui está um pequeno exemplo:

<div id="divTestArea4" style="width: 50px; height: 50px; display: none; background-color: #89BC38;"></div><br />
<a href="javascript:void(0);" onclick="ToggleBox();">Toggle box</a>
<script type="text/javascript">
function ToggleBox()
{
        $("#divTestArea4").fadeToggle("slow");  
}
</script>

E isso é quão fácil é usar os efeitos de fading do jQuery.

Fonte: jquery-tutorial.net

jQuery – Selectors relação Parent/child (Pai/filho)

O jQuery também permite você selecionar elementos baseado em seus elemento pai. Temos duas variações: Uma que vai apenas combinar elementos que tem um filho direto ao elemento pai, e um qual irá combinar todo o caminho através da hierarquia, ex.: um filho de um filho de um filho de um elemento pai.

A sintaxe para encontrar filhos que são descendentes direto de um elemento se parece com isso:

$(“div > a”)

Esse selector irá encontrar todos os links que são filho direto de um elemento div. Substituindo o símbolo de “maior que” por um simples espaço em branco irá mudar isso para combinar todos links dentro de um elemento div, não interessa se eles estão diretamente relacionados ou não:

$(“div a”)

Aqui está um exemplo onde nós colorimos tags bold de azul se elas são descendentes diretas da primeira área de teste:

<div id="divTestArea1">
        <b>Bold text</b>
        <i>Italic text</i>
        <div id="divTestArea2">
                <b>Bold text 2</b>
                <i>Italic text 2</i>
                <div>
                        <b>Bold text 3</b>
                </div>
        </div>
</div>
<script type="text/javascript">
$("#divTestArea1 > b").css("color", "blue");
</script>

Como você verá, apenas a primeira tag bold está colorida. Agora, se você usou a segunda abordagem, ambas tags bold deverão estar coloridas de azul. Tente o seguinte exemplo, onde a única coisa alterada foi o caractere “maior que” que foi substituído por um espaço em branco, observe que nós também aceitados descendentes não diretos ou “netos” assim eles são chamados algumas vezes:

<div id="divTestArea1">
        <b>Bold text</b>
        <i>Italic text</i>
        <div id="divTestArea2">
                <b>Bold text 2</b>
                <i>Italic text 2</i>
                <div>
                        <b>Bold text 3</b>
                </div>
        </div>
</div>
<script type="text/javascript">
$("#divTestArea1 b").css("color", "blue");
</script>

Agora a coisa legal é que você pode na verdade voltar a cima da hierarquia se necessário, usando o método parent().

Fonte: jquery-tutorial.net

jQuery – Introdução ao selectors (seletores) e Usando elementos, IDs e classes

Uma tarefa muito comum quando se está usando JavaScript, é ler e modificar o conteúdo da página. Para fazer isso, você precisa encontrar o(s) elemento(s) que você deseja modificar, e ai é onde o selector no jQuery ajudará você. Com o JavaScript normal, encontrar elementos pode ser extremamente pesado, ao menos que você precise encontrar um único elemento que tem um valor especificado no atributo ID. O jQuery pode ajudar você a encontrar elementos baseado em seus IDs, classes, tipos, atributos, valores de atributos e muito, muito mais. Ele é baseado no selectors do CSS e como você verá através desse tutorial, ele é extremamente poderoso. Quando usamos esse tipo de programa para fazer mudanças em seu site, é importante que você tenha autenticação de dois fatores (two factor authentication (em Inglês)) de modo que o seu site e computador não são compromissados.

Pela razão dessa ser uma tarefa tão comum, o construtor do jQuery vem em várias formas que recebem uma selector query como argumento (parâmetro), permitindo você localizar elementos com uma quantidade bastante limitada de código para uma eficiência ótima. Você pode instanciar o objeto jQuery simplesmente escrevendo jQuery() ou até mais curto usando o nome de atalho do jQuery: $().

Portanto, selecionar um conjunto de elementos é simples assim:

$(<query aqui>)

Com o objeto jQuery retornado, você pode então começar a usar e alterar os elementos que você encontrou.

Fonte

Usando elementos , IDs e classes

O selector #id

Um tipo de selector muito comum é o baseado em ID, que nós vimos no exemplo “Hello, world”. Ele usa o atributo ID de uma tag HTML para localizar o elemento desejado. Um ID deve ser único,então você deve apenas usar esse selectior quando você deseja localizar um único elemento. Para localizar um elemento com um ID específico, escreva um caractere hash (#), seguido pelo ID do elemento que você deseja localizar, assim:

$("#divTest")

Um exemplo disso em uso:

<div id="divTest"></div>
<script type="text/javascript">
$(function()
{
        $("#divTest").text("Test");
});
</script>

Agora, enquanto tiver apenas um único elemento que combina com a nossa query acima, você deve estar ciente que o resultado é uma lista, significando que isso pode conter mais de um elemento, se a query combina com mais de um. Um exemplo disso é combinar todos os elementos quais usam uma ou varias classes CSS.

O selector .class

Elementos com uma classe específica podem ser localizados escrevendo um caractere ponto (.) seguido pelo nome da classe. Aqui vai um exemplo:

<ul>
        <li>Test 1</li>
        <li>Test 2</li>
        <li>Test 3</li>
</ul>
<script type="text/javascript">
$(function()
{
        $(".bold").css("font-weight", "bold");
});
</script>

O selector element

Você também pode combinar baseado em elementos nos nomes das tags.

You can also match elements based on their tag names. Por exemplo, você pode combiner todos os links emu ma página assim:

$(“a”)

Ou todas as tags div assim:

$(“div”)

Se você usar um selector de multi-elemento (multi-element), como o selector de classe que nós usamos no exemplo anterior, e nó sabemos que nós estamos procurando por emento de um tipo específico, é uma boa prática especificar o tipo do elemento antes do selector. Não é apenas mais preciso, mas também é mais rápido para o jQuery processar, resultando em sites mais responsivos. Aqui vai uma versão reescrita do exemplo anterior, onde nós usamos esse método:

$("span.bold").css("font-weight", "bold");

Isso combinará todos os elementos span com “bold” como classe. Claro, isso pode ser usado com IDs e praticamente com todos os outros selector também.

Fonte: jquery-tutorial.net / jquery-tutorial.net

jQuery – Evento Ready e Encadeamento de método (Method chaining)

Como mencionado, é uma boa prática esperar o documento ser totalmente carregado (loaded) e pronto (ready), antes de trabalhar com ele. Isso também permite você ter seu código JavaScript antes do body (corpo) do seu documento, na sessão head (cabeçalho), senão diretamente ou através de um link para um arquivo JavaScript externo. Você pode fazer isso apenas colocando seu código dentro do evento ready do documento. Nós vamos usar o mesmo exemplo como no capítulo “Hello, world!”, mas dessa vez o código está dentro do evento ready:

<div id=”divTest1″></div>
<script type=”text/javascript”>
function DocumentReady()
{
$(“#divTest1”).text(“Hello, world!”);
}

$(document).ready(DocumentReady);
</script>

O que fazemos aqui é que criamos uma function (função), chamada DocumentReady, a qual deve ser disparadas assim que o documento estiver pronto para manipulação do DOM. Na última linha, usamos o método ready() para atribuir nossa função ao evento ready, para dizer ao jQuery que assim que o documento estiver pronto, nós queremos que ele chame nossa função.

Entretanto, nós podemos encurtá-la um pouco usando uma função anônima (anonymous function) do JavaScript em vez disso. Isso basicamente apenas significa que ao invés de declarar a função e dá-la um nome, nós simplesmente criamos ela e então imediatamente passamos a referencia à função ready(). Se você é novo em JavaScript, então isso pode parecer demasiadamente complicado, mas assim você se acostuma a isso, você talvez possa apreciar as poucas keystrokes e o menor espaço necessário para realizar o mesmo:

<div id=”divTest2″></div>
<script type=”text/javascript”>
$(document).ready(function()
{
$(“#divTest2”).text(“Hello, world!”);
});
</script>

Mas com certeza, isso ainda não foi curto o bastante para o time do jQuery, então eles decidiram criar uma versão (sobrecarga) do construtor do jQuery, que leva uma função ready como um parâmetro, para fazer isso ainda mais curto:

<div id=”divTest3″></div>
<script type=”text/javascript”>
$(function(){
$(“#divTest3”).text(“Hello, world!”);
});
</script>

No ultimo exemplo, nossa função anonima é passada diretamente ao contrutor do jQuery, que a atribui ao evento ready. Como você verá quando você testar o código, o evento é disparado assim que a página for carregada, a maioria das vezes tão rápido que você nem se quer percebe.

Como já descrito, envolver nosso código na função de evento ready é a melhor prática para trabalhar com jQuery em nosso documento, e portanto você verá esse tutorial usando essa abordagem na maioria dos exemplos, a não ser ignorado para manter o tamanho dos nossos exemplos baixo.

Encadeamento de método (Method chaining)

Também um outro aspecto de tantos outros aspectos realmente legais do jQuery é o fato de que a maioria dos métodos retornam um objeto jQuery que você pode então usar para chamar outro método. Isso permite você fazer um encadeamento de método, onde você pode chamar múltiplos métodos no mesmo conjunto de elementos, que é realmente agradável porque isso salva você e o navegador de ter que procurar o mesmo elemento mais de uma vez. Aqui vai um exemplo, e não se preocupe sobre os métodos do jQuery usados nos exemplos seguintes – eles serão explicados nos capítulos posteriores:

<div id=”divTest1″></div>
<script type=”text/javascript”>
$(“#divTest1”).text(“Hello, world!”).css(“color”, “blue”);
</script>

Isso funciona assim: Nós instanciamos um novo objeto jQuery e selecionamos o elemento divTest1 com o caractere $, que é o atalho para a classe jQuery. No retorno, nós pegamos um objeto jQuery, permitindo-nos manipular o elemento selecionado. Nós usamos aquele objeto para chamar o método text(), que define o texto ao(s) elemento(s) selecionado(s). Esse método retorna o objeto jQuery de novo, nos permitindo usar outra chamada de método diretamente no valor de retorno, que é o método css().

Nós podemos adicionar mais métodos se nós precisarmos, mas até certo ponto, a linha de código se tornará bastante grande. Felizmente para nós, o JavaScript não é muito rigoroso em relação a sintaxe, então você pode formatar como você quiser, incluindo linebreaks (quebra de linha) e indentações.  Por exemplo, isso irá funcionar muito bem também:

<div id=”divTest2″></div>
<script type=”text/javascript”>
$(“#divTest2”).text(“Hello, world!”)
.removeClass(“blue”)
.addClass(“bold”)
.css(“color”, “blue”);
</script>

O JavaScript irá simplesmente jogar fora os espaços extras em branco, quando interpretar o código e executa-lo como uma longa linha de código com várias chamadas de métodos.

Observe que alguns métodos não retornam o objeto jQuery, enquanto outro apenas retornam isso dependendo dos parâmetros que você passar pra ele. Um bom exemplo disso é o método text() usado acima. Se parâmetros não forem passados a ele, o texto atual do(s) objeto(s) selecionado(s) é retornado em vez do objeto jQuery, enquanto um único parâmetro provoca o jQuery a definir o texto especificado e retornar um objeto jQuery.

Fonte: jquery-tutorial.net / jquery-tutorial.net

Parte 5 – Tutorial de Interceptadores (Interceptors) do Struts2 com Exemplo

Sejam vem vindos a parte 5 de uma série de 7 partes aonde nós vamos examinar aspectos diferentes do framework Struts2. No artigo anterior nós vimos como integrar o framework Tile com o Struts2.

Hoje vamos explorer o mundo dos Interceptadores(Interceptors) no Struts2. Nós vamos ver o que os interceptadores são e como configura-los em uma aplicação web baseada em Struts2.

Interceptadores do Struts 2: Fundamentos

O Struts2 fornece um mecanismo poderoso para controlar uma requisição usando Interceptadores. Interceptadores são responsáveis pela maior parte do processamento de requisições. Eles são invocados pelo controller (controlador) antes e depois de invocar uma action, assim eles ficam entre o controller e a action. Interceptadores executam tarefas como Logging, Validation, File Upload, Double-submit guard e etc.
struts2 request processing lifecycle
O ciclo de vida de processamento do framework Struts2 é bastante discutido na parte 1 do tutorial.

  1. A requisição é gerada pelo usuário e enviada ao Servlet container.
  2. Servlet container invoca o filtro FilterDispatcher que por sua vez determina a ação apropriada.
  3. Um por um dos Intercetors são aplicados ante de chamar a Action. Interceptors executam tarefas como Logging, Validation, File Upload, Double-submit guard e etc.
  4. Action é executada e o Result é gerado pela Action.
  5. A saída da Action é renderizada na view (JSP, Velocity, etc) e o resultado é retornado ao usuário.

Portanto os interceptadores do Struts2 removem funções cross cutting como logging de componentes action e cria uma separação mais limpa do MVC.

O Struts2 vem com uma lista padrão de interceptadores já configurada na aplicação, no arquivo struts-default.xml. Nós podemos criar nossas próprios interceptadores e pluga-los dentro de uma aplicação web baseada em Struts2.

O framework cria um objeto de ActionInvocation que encapsula a action e todos os interceptadores configurados para aquela action. Cada interceptador é chamado antes da action ser chamada. Uma vez que a action é chamada e o resultado é gerado, cada interceptador é chamado de novo na ordem contrária para executar o trabalho de pós-processamento. Interceptadores podem alterar o workflow (fluxo de trabalho) da action. Isso talvez impessa a execução da action.

Nossa Meta

Nossa meta sera criar um interceptador customer MyLoggingInterceptor, o qual irá logar a requisição antes de qualquer action ser chamada. Ele também irá imprimir o nome da classe Action e o tempo de execução em milisegundos.

Criando o Interceptador de Log

Crie uma classe java MyLoggingInterceptor no pacote net.viralpatel.struts2.interceptors e copie o seguinte conteúdo dentro dela.
struts2-logging-interceptors

package net.viralpatel.struts2.interceptor;import com.opensymphony.xwork2.ActionInvocation;

import com.opensymphony.xwork2.interceptor.Interceptor;

public class MyLoggingInterceptor implements Interceptor{

    private static final long serialVersionUID = 1L;

    public String intercept(ActionInvocation invocation) throws Exception {

        String className = invocation.getAction().getClass().getName();

        long startTime = System.currentTimeMillis();

        System.out.println("Before calling action: " + className);

        String result = invocation.invoke();

        long endTime = System.currentTimeMillis();

        System.out.println("After calling action: " + className

                + " Time taken: " + (endTime - startTime) + " ms");

        return result;

    }

    public void destroy() {

        System.out.println("Destroying MyLoggingInterceptor...");

    }

    public void init() {

        System.out.println("Initializing MyLoggingInterceptor...");

    }

}

Configurando o interceptador no struts.xml

Uma vez que nós criamos uma classe interceptadora, tudo o que precisamos fazer é configurar ela no arquivo struts.xml e usa-la com as actions.

Para configurar o interceptador criado há pouco, adicione o seguinte código dentro do struts.xml

<interceptors>    <interceptor name="mylogging"

        class="net.viralpatel.struts2.interceptor.MyLoggingInterceptor">

    </interceptor>

    <interceptor-stack name="loggingStack">

        <interceptor-ref name="mylogging" />

        <interceptor-ref name="defaultStack" />

    </interceptor-stack>

</interceptors>

Esse código deve ser adicionado depois da tag <result-types >  no <package ></package>. Aqui nós configuramos um novo interceptador mylogging com a tag <interceptor >. Também veja que nós definimos um interceptor-stack com o nome de loggingStack. Isso é para ter certeza de que o Struts2 chamará todos os interceptadores padrões assim como chamará o nosso interceptador customizado. Isso é muito importante como por exemplo a lógica de validação não será chamada na nossa aplicação Struts2 se nós ignorarmos o stack padrão (defaultStack) dos interceptadores.

Nós podemos fazer o novo loggingStack como interceptador padrão ou podemos configurar ele em cada nível de action. A fim de faze-lo um stack padrão, nós devemos adicionar o seguinte no struts.xml

<default-interceptor-ref name="loggingStack"></default-interceptor-ref>

Uma vez que nós adicionamos o código acima no Struts.xml, o logginStack será aplicado à todas as action daquele pacote.

Também nós talvez quiséssemos aplicar o interceptador customizado para apenas determinadas actions. Para fazer isso, nós precisamos adicionar a tag interceptor-ref na action.

<action name="login"    class="net.viralpatel.struts2.LoginAction">

    <interceptor-ref name="loggingStack"></interceptor-ref>

    <result name="success" type="tiles">/welcome.tiles</result>

    <result name="error">Login.jsp</result>

</action>

Isso é tudo pessoal

Se nós executarmos nossa aplicação StrutsHelloWorld no ecplipse e olharmos os logs do console, nós vamos encontrar as declarações de log que nós imprimimos no nosso interceptador.

Initializing MyLoggingInterceptor.....

..

..

Before calling action: net.viralpatel.struts2.LoginAction

..

..

After calling action: net.viralpatel.struts2.LoginAction Time taken: 313 ms

..

..

..

Destroying MyLoggingInterceptor...

Download do código fonte

Clique aqui para fazer o download do código fonte sem os JARs (17KB)

Fonte: viralpatel.net – Viral Patel

Parte 4 – Tutorial do Plugin Struts 2 Tiles com exemplo no Eclipse

Bem vindos à parte 4 de uma série de 7 partes, onde nós passaremos por diferentes aspectos do Framework Struts2 com alguns exemplos úteis. Na parte anterior nós passamos por Framework de validação do Struts2. Nós vimos como é fácil integrar validação na sua aplicação Struts2.

Nesta parte vamos discutir sobre o Framework Tile e a sua integração com Struts2. Nós vamos adicionar o suporte Tiles a nossa aplicação de Struts ‘HelloWorld’ que nós criamos anteriormente. Eu recomendo você passar pelos artigos anteriores e baixar o código fonte da nossa aplicação de exemplo.

Introdução ao Tiles 2

Atualmente, um website é geralmente dividido em pedaços de templates que são renderizados entre diferentes páginas web. Por exemplo, um site contendo um header (cabeçalho), footer (rodapé), menu e etc. Estes itens permanecem os mesmos por todo o site e dando  um visual padrão. Isso é muito difícil de codificar em cada página web e se depois uma modificação é necessária, então todas as páginas precisam ser modificadas. Por isso nós usamos o mecanismo de Templatization. Nós criamos uma página padrão de Header, Footer, Menu e etc., e a incluímos em cada página.

O plugin Tile premite ambos templating e componentização. De fato, ambos mecanismos são similates: você define partes da página (uma ‘Tile’/’Telha’) que você junta para construir outra parte ou uma página inteira. Uma parte pode receber parâmetros, permitindo um conteúdo dinâmico, e pode ser visto como um método na linguagem Java. Tiles é um sistema de templating usado para manter um visual consistente através de todas as páginas web de uma aplicação web. Isso aumenta a reusabilidade do template e reduz a duplicação de código.

Um layout comum de website é definido em um arquivo de configuração central e esse layout pode ser estendido através de todas as páginas web da aplicação.

Layout da nossa Aplicação

Nossa meta é adicionar um Header, Footer e Menu ao nossa aplicação StrutsHelloWorld.
Abaixo segue o layout da mesma.
struts2-tiles-layout

Arquivos JAR requeridos

A fim de adicionar o suporte Tiles a nossa aplicação Struts2, nós precisaremos de alguns arquivos JARs.
Abaixo segue a lista de JARs do nosso exemplo. Adicione estes JARs na pasta WEB-INF/lib.
struts2-tiles-jar-files

Configurando o Tiles no web.xml

Para configurar o Tiles, uma entrada  de listener tem que ser criada no web.xml. Abra o web.xml na pasta WEB-INF e adicione o seguinte código.

<listener>

    <listener-class>

        org.apache.struts2.tiles.StrutsTilesListener

    </listener-class>

</listener>

<context-param>

    <param-name>tilesDefinitions</param-name>

    <param-value>/WEB-INF/tiles.xml</param-value>

</context-param>

O código acima configure o listener do Tiles no web.xml. Um arquivo de configuração de entrada /WEB-INF/tiles.xml é passado como argumento. Este arquivo contém a definição do Tiles para sua aplicação web.

Crie um arquivo tiles.xml na pasta WEB-INF e copie o seguinte código dentro dele.
struts2-tiles-xml

<?xml version="1.0" encoding="UTF-8" ?>

 

<!DOCTYPE tiles-definitions PUBLIC

       "-//Apache Software Foundation//DTD Tiles Configuration 2.0//EN"

       "http://tiles.apache.org/dtds/tiles-config_2_0.dtd">

<tiles-definitions>

    <definition name="baseLayout" template="/BaseLayout.jsp">

        <put-attribute name="title" value="" />

        <put-attribute name="header" value="/Header.jsp" />

        <put-attribute name="menu" value="/Menu.jsp" />

        <put-attribute name="body" value="" />

        <put-attribute name="footer" value="/Footer.jsp" />

    </definition>

    <definition name="/welcome.tiles" extends="baseLayout">

        <put-attribute name="title" value="Welcome" />

        <put-attribute name="body" value="/Welcome.jsp" />

    </definition>

    <definition name="/customer.tiles" extends="baseLayout">

        <put-attribute name="title" value="Customer Form" />

        <put-attribute name="body" value="/Customer.jsp" />

    </definition>

    <definition name="/customer.success.tiles" extends="baseLayout">

        <put-attribute name="title" value="Customer Added" />

        <put-attribute name="body" value="/SuccessCustomer.jsp" />

    </definition>

</tiles-definitions>

Aqui no tile.xml nós temos que definir um template baseLayout. Este layout contém atributos como Header, Title, Body, Menu e Footer. O layout é depois estendido, e novas definições para as páginas Welcome e Customer são definidas. Nós temos que substituir o layout padrão e mudar o conteúdo de Body e Title.

Criando os JSPs

struts-2-tiles-layout-jsp

Nós definiremos o template para nossa aplicação web em uma arquivo JSP chamado BaseLayout.jsp. Este template irá conter diferentes segmentos da página (Header, Footer, Menu etc). Crie 4 novos arquivos JSP BaseLayout.jsp, Header.jsp, Menu.jsp and Footer.jsp e copie o seguinte conteúdo em cada um deles.

BaseLayout.jsp

<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title><tiles:insertAttribute name="title" ignore="true" /></title>

</head>

<body>

<table border="1" cellpadding="2" cellspacing="2" align="center">

    <tr>

        <td height="30" colspan="2"><tiles:insertAttribute name="header" />

        </td>

    </tr>

    <tr>

        <td height="250"><tiles:insertAttribute name="menu" /></td>

        <td width="350"><tiles:insertAttribute name="body" /></td>

    </tr>

    <tr>

        <td height="30" colspan="2"><tiles:insertAttribute name="footer" />

        </td>

    </tr>

</table>

</body>

</html>

Header.jsp

<%@ page contentType="text/html; charset=UTF-8"%>

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

<h2>Struts2 Example - ViralPatel.net</h2>

Menu.jsp

<%@ page contentType="text/html; charset=UTF-8"%>

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

<s:a href="customer-form">Customer</s:a>

Footer.jsp

<%@ page contentType="text/html; charset=UTF-8"%>

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

Copyright &copy; ViralPatel.net – Tradução SpigandoEAprendendo.wordpress.com

Modificações no Struts.xml

No struts.xml nós definimos a tag de resultado (result) que mapeia uma ação específica com uma página JSP. Agora nós modificaremos isso e mapearemos o resultado com Tiles. Abaixo segue o conteúdo do arquivo struts.xml.

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE struts PUBLIC

    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"

    "http://struts.apache.org/dtds/struts-2.0.dtd">

 

<struts>

    <constant name="struts.enable.DynamicMethodInvocation"

        value="false" />

    <constant name="struts.devMode" value="false" />

    <constant name="struts.custom.i18n.resources"

        value="ApplicationResources" />

 

    <package name="default" extends="struts-default" namespace="/">

        <result-types>

            <result-type name="tiles"

                class="org.apache.struts2.views.tiles.TilesResult" />

        </result-types>

        <action name="login"

            class="net.viralpatel.struts2.LoginAction">

            <result name="success" type="tiles">/welcome.tiles</result>

            <result name="error">Login.jsp</result>

        </action>

        <action name="customer"

            class="net.viralpatel.struts2.CustomerAction">

            <result name="success" type="tiles">/customer.success.tiles</result>

            <result name="input" type="tiles">/customer.tiles</result>

        </action>

        <action name="customer-form">

            <result name="success" type="tiles">/customer.tiles</result>

        </action>

    </package>

</struts>

O struts.xml agora define um novo tipo de Resultado pelo Tiles. Esse tipo de resultado é usado na tag <result> para diferentes ações. Também observe que nós vamos definir uma nova ação customer-form. Esta é apenas uma declaração vazia para redirecionar o Usuario para página do formulário Customer quando ela clica no link Customer no menu.

É isso ai pessoal

Compile e execute a aplicação no Eclipse e veja que o header, menu e o footer estão apropriadamente aplicados.

Página de Boas Vindas com Tiles
struts-2-welcome-page-tiles

Página Customer com Tiles
struts2-tiles-customer-page

Página de Sucesso Customer com Tiles
struts2-customer-added-tiles

Download do código fonte:
Clique aqui para fazer o download do código fonte (sem os JARs) (11KB)

Fonte: viralpatel.net – Viral Patel

Parte 3 – Tutorial do Framework de validação do Struts2 com Exemplo

Seja bem vindo a parte 3 de uma série de 7 partes do tutorial aonde vamos passar por diferentes aspectos práticos do framework Struts2. Na última parte nós criamos uma Aplicação básica de Struts2 do zero. Eu recomendo fortemente que você passe pelos artigos anteriores no caso de você ser novo no Struts2.

Nesse artigo vamos aprender como alavancar o framework de validação do Struts2 em uma aplicação. Para isso utilizaremos a aplicação StrutsHelloWorld a qual nós criamos no artigo anterior como base e começaremos adicionando a lógica de validação a ele.

Introdução ao framework de validação do Struts2

A action do Struts2 depende de um framework de validação fornecido pela XWork para permitir a aplicação de regras de validação de entrada para nossa Action antes delas serem executadas. O framework de validação do Struts2 nos permite separar a lógica de validação do real código Java/JSP, onde isso pode ser revisado e facilmente modificado depois.

O framework de validação do Struts2 alivia muita das dores de cabeça associadas com  manipulação de validação de dado, permitindo você focar no código de validação e não no mecanismo de captura de dados e reexibição de dados incompletos ou inválidos.

O framework de validação vem com um conjunto de retinas úteis para manipular o formulário de validação automaticamente e isso pode tratar o formulário de validação de ambos os lados, servidor (Server Side) ou cliente (Client Side). Se determinada validação não está presente, você pode criar sua própria lógica de validação implementando a interface com.opensymphony.xwork2.Validator e plugá-la dentro do framework de validação como um componente reutilizável.

O validador usa arquivos de configuração XML para determinar quais rotinas de validação devem ser instaladas e quais delas devem ser aplicadas para uma determinada aplicação.O arquivo validators.xml contém todas as declarações dos validadores comuns. Se o arquivo validators.xml não estiver presente no classpath, um arquivo de validação padrão é carregado do path com/opensymphony/xwork2/validator/validators/default.xml.

O primeiro arquivo de configuração, declara as rotinas de validação que devem ser plugadas dentro do framework e fornece nomes lógicos para cada uma das validações. O arquivo validator-rules.xml também define o código JavaScript do lado cliente para cada rotina de validação. O validador pode ser configurado para enviar esse código JavaScript para o navegador então essas validações são realizadas tanto do lado cliente quanto do lado servidor.

Escopo dos Validadores (Validators Scope)

Temos 2 tipos de validadores na Validação do Struts2.

  1. Field Validators (Validação de Campos)
  2. Non-field validators (Validação de Não-Campos)

Field validators, como o nome indica, atua em um único campo acessível através de uma action. Um validador, em contrapartida, é mais genérico e pode fazer validações no contexto inteiro da action, invocando mais de um campo (ou até mesmo nenhum campo) na regra de validação. A maioria das validações podem ser definidas em forma de campo. Isso deve ter preferência sobre validação non-field sempre que possível, como mensagens de validação de campo são vinculados ao campo relacionado e será apresentado próximo ao elemento de entrada correspondente na view respectiva.

<validators>

  <field name="bar">

      <field-validator type="required">

          <message>You must enter a value for bar.</message>

      </field-validator>

  </field>

</validators>

Non-field validators apenas adiciona mensagens de nível de action. Validações non-field fornecida pela XWork é ExpressionValidator (Validador de Expressão).

<validators>

      <validator type="expression">

            <param name="expression">foo lt bar</param>

            <message>Foo must be greater than Bar.</message>

      </validator>

</validators>

Primeiros passos

Vamos adicionar a lógica de validação na aplicação StrutsHelloWorld que nós criamos no artigo anterior. Para esse tutorial, vamos criar uma classe Action chamada CustomerAction a qual conterá poucos campos. Crie um arquivo CustomerAction.java no pacote net.viralpatel.struts2.
customer-action-struts2

Copie o seguinte conteúdo dentro dele.

CustomerAction.java

package net.viralpatel.struts2;

import com.opensymphony.xwork2.ActionSupport;

public class CustomerAction extends ActionSupport{

    private String name;

    private Integer age;

    private String email;

    private String telephone;

    public String addCustomer() {

        return SUCCESS;

    }

    

    public String getName() {

        return name;

    }

    public void setName(String name) {

        this.name = name;

    }

    public Integer getAge() {

        return age;

    }

    public void setAge(Integer age) {

        this.age = age;

    }

    public String getEmail() {

        return email;

    }

    public void setEmail(String email) {

        this.email = email;

    }

    public String getTelephone() {

        return telephone;

    }

    public void setTelephone(String telephone) {

        this.telephone = telephone;

    }

}

Observe que a classe CustomerAction tem os campos name, email, telephone e age. Também tem um método chamado addCustomer() o qual não tem nenhuma lógica, ele apenas retorna SUCCESS.

Agora nós vamos adicionar uma entrada para essa classe action no arquivo struts.xml. Abra o arquivo struts.xml o qual estará presente abaixo da pasta resources. E adicione o seguinte conteúdo entre as tags <package></package>.

<action name="customer"

    class="net.viralpatel.struts2.CustomerAction">

    <result name="success">SuccessCustomer.jsp</result>

    <result name="input">Customer.jsp</result>

</action>

Observe que nós estamos mapeando a classe CustomerAction com o nome customer. Também em sucesso o usuário será redirecionado a página SuccessCustomer.jsp. Repare que tem outra tag de resultado com nome input. Sempre que a lógica de validação encontra algum erro de validação, redireciona o usuário de volta a página especificada como input. Assim no nosso exemplo, o usuário será redirecionado de volta para Customer.jsp no caso de quaisquer erros.

Crie duas novas JSPs Customer.jsp (qual conterá o formulário do Customer) e SuccessCustomer.jsp (qual será mostrada em sucesso).
struts2-validation-jsp-files

Customer.jsp

<%@ page contentType="text/html; charset=UTF-8"%>

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

<html>

<head>

<title>Customer Form - Struts2 Demo | ViralPatel.net</title>

</head>

<body>

<h2>Customer Form</h2>

<s:form action="customer.action" method="post">

    <s:textfield name="name" key="name" size="20" />

    <s:textfield name="age" key="age" size="20" />

    <s:textfield name="email" key="email" size="20" />

    <s:textfield name="telephone" key="telephone" size="20" />

    <s:submit method="addCustomer" key="label.add.customer" align="center" />

</s:form>

</body>

</html>

SuccessCustomer.jsp

<%@ page contentType="text/html; charset=UTF-8"%>

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

<html>

<head>

<title>Customer Page - Struts2 Demo | ViralPatel.net</title>

</head>

<body>

    <h2>Customer Added Successfully.</h2>

</body>

</html>

Nós criamos o arquivo Customer.jsp qual irá exibir o formulário Customer. Mas nós não temos link para esta página na nossa aplicação web. Então nós criaremos um link para Customer.jsp da página Welcome.jsp. Abra a página Welcome.jsp e adicione o seguinte código de link dentro dela.

<s:a href="Customer.jsp">Add Customer</s:a>

Agora abra o arquivo ApplicationResources.properties da pasta resources e adicione as seguintes chaves/valores dentro dela.

name= Name

age= Age

email= Email

telephone= Telephone

label.add.customer=Add Customer

errors.invalid=${getText(fieldName)} is invalid.

errors.required=${getText(fieldName)} is required.

errors.number=${getText(fieldName)} must be a number.

errors.range=${getText(fieldName)} is not in the range ${min} and ${max}.

Execute o código no Eclipse e veja a saida. Você verá a página de login. Entre com username=admin e a senha=admin123 e faça o login. Na página de boas vindas você verá um link para página Add Customer. Clique naquele link e você verá a página Customer.
struts2-customer-form

Adicionando a lógica de validação

Agora nós terminamos o básico do formulário customer no qual nós vamos adicionar a lógica de validação. Seguem as regras de validações:

  1. Campo Name é obrigatório.
  2. Campo Age é obrigatório. Deve ser um número entre 1 e 100.
  3. Campo Email é obrigatório. Deve ser um endereço de email válido.
  4. Campo Telephone é obrigatório.

A fim de definir a lógica de validação para um formulário em particular, primeiro nós devemos criar um arquivo XML no qual manterá esse dado. O Struts2 define uma convenção de nomenclatura específica na definição dos arquivos XML de validação. O formato é <NomeDaClasseAction>-validation.xml. Então para nossa aplicação vamos criar um arquivo CustomerAction-validation.xml. Observe que este arquivo deve estar presente no mesmo pacote da classe action.
Crie o arquivo
CustomerAction-validation.xml no pacote net.viralpatel.struts2. E copie o seguinte conteúdo dentro dele.
struts2-validation-xml

CustomerAction-validation.xml

<!DOCTYPE validators PUBLIC "-//Apache Struts//XWork Validator 1.0.3//EN"

    "http://struts.apache.org/dtds/xwork-validator-1.0.3.dtd">

<validators>

    <field name="name">

        <field-validator type="requiredstring">

            <param name="trim">true</param>

            <message key="errors.required" />

        </field-validator>

    </field>

    <field name="age">

        <field-validator type="required">

            <message key="errors.required" />

        </field-validator>

        <field-validator type="int">

            <param name="min">1</param>

            <param name="max">100</param>

            <message key="errors.range"/>

        </field-validator>

    </field>

    <field name="email">

        <field-validator type="requiredstring">

            <message key="errors.required" />

        </field-validator>

        <field-validator type="email">

            <message key="errors.invalid" />

        </field-validator>

    </field>

    <field name="telephone">

        <field-validator type="requiredstring">

            <message key="errors.required" />

        </field-validator>

    </field>

</validators>

E é isso. Nós apenas adicionamos a lógica de validação ao nosso exemplo. Veja que os arquivos XML de validação contém diferentes field-validators.

Validação do lado cliente

É muito fácil adicionar a validação do lado cliente ou validação JavaScript a qualquer formulário em Struts2. Tudo o que você precisa fazer é adicionar validate=”true” na tag form no seu arquivo JSP. Por exemplo abra o Customer.jsp e adicione validate=”true” na tag form. O Struts2 automaticamente gerará o código JavaScript para validação do lado cliente do formulário.

<s:form action="customer.action" method="post" validate="true">

    ...

</s:form>

Isso é tudo pessoal

Execute a aplicação e teste o formulário Customer com diferentes valores.

Página Customer

struts2-customer-form

Página Customer com erros
customer-page-validation-errors

Página Customer com sucesso
customer-page-success

Download do Código Fonte

Struts2_Validation_example.zip (3.6 MB)

Fonte: viralpatel.net – Viral Patel