Arquivos de sites

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

Anúncios

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

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