Arquivos de sites

jQuery – Introdução a manipulação do DOM – Pegando e atribuindo conteúdo [text(), html() and val()]

Introdução a manipulação do DOM

Um dos mais importantes aspectos do JavaScript e desse modo jQuery, é a manipulação do DOM. O DOM significa Document Object Model (Modelo de Objeto de Documento) e é um mecanismo para representação e interação com nossos documentos HTML, XHTML ou XML. Ele lhe permite navegar e manipular seus documentos através de uma linguagem de programação, que no navegador será quase sempre JavaScript. A navegação e manipulação do DOM usando o JavaScript padrão pode muito complicado, mas felizmente para nós, o jQuery vem com um monte de métodos relacionado ao DOM, fazendo isso tudo muito mais fácil.

No primeiro exemplo “Hello, world!” desse tutorial, nós comparamos o trabalho de encontrar um elemento e atribuir um texto a ele usando primeiro jQuery e então JavaScript. Esta é apenas a ponta do iceberg, porém, e nos capítulos seguintes você verá como é fácil manipular o conteúdo dos seus documentos com jQuery.

Pegando e atribuindo conteúdo [text(), html() and val()]

O aspecto mais simples da manipulação do DOM é recuperar e atribuir text (texto), valores (valores) e HTML. Essas três coisas podem parecer a mesma coisa, mas elas não são. Text é uma representação literal (sem HTML) do conteúdo interno para todos os elementos normais, values são para elementos de formulário e HTML é o mesmo que text, mas incluindo qualquer marcação (markup).

Felizmente para nós, o jQuery vem com um método para cara um dos três, nos permitindo recuperar e atribuir essas propriedades: Os métodos text(), html() e val(). Aqui está um pequeno exemplo que mostrará a você a diferença entre eles e como eles são simples de usar:

<div id="divTest">
        <b>Test</b>
        <input type="text" id="txtTest" name="txtTest" value="Input field" />
</div>
<script type="text/javascript">
$(function()
{
        alert("Text: " + $("#divTest").text());
        alert("HTML: " + $("#divTest").html());
        alert("Value: " + $("#divTest").val());
        
        alert("Text: " + $("#txtTest").text());
        alert("HTML: " + $("#txtTest").html());
        alert("Value: " + $("#txtTest").val());
});
</script>

Então uma chamada  para um desses métodos sem parâmetros irá simplesmente retornar a propriedade desejada, Se nós queremos atribuir a propriedade em vez disso, nós simplesmente especificamos um parâmetro extra. Aqui está um exemplo completo:

<div id="divText"></div>
<div id="divHtml"></div>
<input type="text" id="txtTest" name="txtTest" value="Input field" />

<script type="text/javascript">
$(function()
{
        $("#divText").text("A dynamically set text");
        $("#divHtml").html("<b><i>A dynamically set HTML string</i></b>");
        $("#txtTest").val("A dynamically set value");
});
</script>

E isso é o quão fácil é para atribuir texto, HTML e valores.

Essas três funções vêm com uma sobrecarga a mais, onde você especifica uma função de callback como primeiro e único parâmetro. Essa função de callback será chamada com dois parâmetros pela jQuery, o índice do elemento corrente na lista de elementos selecionados, assim como o valor existente, antes dele ser substituído com um novo valor. Você então retorna a string que você deseja usar como o novo valor para função. Essa sobrecarga funciona para ambos html(), text() e val(), mas por motivo de simplicidade, nós apenas usamos a versão do text() neste exemplo:

<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<script type="text/javascript">
$(function()
{
        $("p").text(function(index, oldText) {
                return "Existing text: " + oldText + ". New text: A dynamically set text (#" + index + ")";
        });
});
</script>

Nós começamos com três elementos de parágrafos semelhantes, que o texto é a única diferença deles. No código jQuery, nós selecionamos todos eles e então usamos a versão especial do método text() para substituir o texto atual com um novo texto construído, baseado nos dois parâmetros que jQuery fornece a nós: O índice do elemento atual e também o seu texto atual. Esse novo texto é então retornado ao jQuery, que irá substituir texto atual pelo novo.

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