jQuery – O método load()

Como descrito nos capítulos anteriores, existem várias maneiras de usar AJAX com jQuery, e elas devem com certeza ser usadas dependendo da situação. Um dos métodos mais simples e ainda sim poderoso para carregar dados assincronamente é o método load(). Você o usa escolhendo um elemento onde você quer o conteúdo carregado e então chama o método load() nele. Ele recebe a URL que você deseja carregar, como parâmetro. Por exemplo, nós precisamos de um arquivo externo que nós podemos carregar. Nós vamos chamar de content.html e o conteúdo dele deve ser parecer com isso:

<div id="divContent">
        <b>This is external content</b>
</div>
And there's more of it

Salve isso como content.html, no mesmo diretório onde você mantém os outros arquivos de exemplo deste tutorial. Nós podemos carregar ele simples assim:

<div id="divTestArea1"></div>
<script type="text/javascript">
$(function()
{
        $("#divTestArea1").load("content.html");
});
</script>

Se você tem o arquivo de conteúdo em outro diretório, ou se você nomeou ele diferentemente, você terá que mudar o parâmetro para o método load consequentemente. Isso é tudo que ele precisa para carregar o conteúdo de um arquivo externo com jQuery e o método load. Um truque muito legal é que você pode na verdade passar um seletor (selector) juntamente com a URL, para apenas pegar uma parte da página. No primeiro exemplo, nós carregamos o arquivo inteiro, mas no exemplo seguinte, nós vamos apenas usar a div, que contém a primeira sentença:

<div id="divTestArea2"></div>
<script type="text/javascript">
$(function()
{
        $("#divTestArea2").load("content.html #divContent");
});
</script>

Como você pode ver, nós simplesmente anexamos um seletor jQuery padrão ao parâmetro, depois da URL, separada por um espaço. Isso faz o jQuery selecionar o conteúdo fora e apenas passa as partes correspondidas de volta ao container. Você pode usar qualquer tipo de seletor jQuery para retirar esse truque, que o torna muito poderoso.

O método load pode receber dois parâmetro extra: Um conjunto de string de consulta (querystring) pares de chave/valor, e uma função de callback que será executada quando o método load terminar, não importa se ele tiver êxito ou falhar. Aqui está um exemplo onde nós usamos a função callback para informar sobre o resultado. Normalmente, você deveria provavelmente apenas mostrar uma mensagem se o método falhasse, mas para ilustrar como isso funciona, nós fazemos isso se o método falhar também. Eu me certifiquei que isso falharia por exemplo, requisitando um arquivo que não existe:

<div id="divTestArea3"></div>
<script type="text/javascript">
$(function()
{
        $("#divTestArea3").load("no-content.html", function(responseText, statusText, xhr)
        {
                if(statusText == "success")
                        alert("Successfully loaded the content!");
                if(statusText == "error")
                        alert("An error occurred: " + xhr.status + " - " + xhr.statusText);
        });
});
</script>

Como você pode ver, a função de callback especifica 3 parâmetros, que jQuery preencherá para você. O primeiro parâmetro irá conter o conteúdo resultado se a chamada tiver sucesso. O segundo parâmetro é uma string que especifica o estado da chamada, ex. “sucesso” ou “erro”. Você pode usar isso para ver se a chamada foi bem sucedida ou não. O terceiro parâmetro é o objeto XMLHttpRequest usado para executar a chamada AJAX. Isso conterá propriedades que você pode usar para ver o que deu errado e muitas outras coisas.

Fonte: jQuery-tutorial.net

jQuery – Introdução ao AJAX

AJAX, abreviação para Asynchronous JavaScript And XML (XML e JavaScript Assíncronos), permite você carregar dados em background e mostra-lo na sua página web. Isso lhe permite criar websites com funcionalidade mais rica.Aplicações web populares como Gmail, Outlook Web Access, e Google Maps usam AJAX e extensivamente, para fornecer a você uma experiência mais responsiva, como desktop.

Usar AJAX pode ser um pouco complicado, porque os vários navegadores tem diferentes implementações para suportar AJAX. Normalmente isso irá lhe forçar a escrever código para responder de forma diferente, dependendo do navegador, mas felizmente, jQuery fez isso pra gente, que nos permite escrever AJAX funcionalmente com tão pouco quanto uma única linha de código.

Você deve estar ciente do fato que existe ambas vantagens e desvantagens ao usar AJAX na sua página, que significa que você deve sempre considerar cuidadosamente antes de decidir usar isso ao invés de fazer uma chamada comum de volta ao servidor. Aqui está um resumo:

Vantagens:

• Sua página será mais prazerosa de usar, quando você pode atualizar partes dela sem um refresh, que faz o navegador piscar e rodar a barra de status.
• Porque você apenas carrega o dado que você precisa para atualizar a página, ao invés de  atualizar a página inteira, você salva largura de banda.

Desvantagens:

• Porque as atualizações são feitas pelo JavaScript no cliente, o estado não irá registrar no histórico do navegador, fazendo isso impossível de usar os botões Voltar e Avançar do navegador entre os vários estados da página.
• Pelo mesmo motivo, um estado específico não pode ser favoritado pelo usuário.
• Dado carregado através do AJAX não será indexado por qualquer dos maiores motores de busca.
• Pessoas usando navegadores sem suporte JavaScript, ou com JavaScript desabilitado, não será capaz de usar a funcionalidade que você fornece através do AJAX.
  Os dois primeiros itens da lista podem ser contornados embora, tipicamente através do uso de um iframe e lendo e escrevendo dado de uma parte da URL depois do caractere “#”.

Nos capítulos seguintes, você irá aprender como usar várias funções AJAX relacionadas ao jQuery.

Fonte: jquery-tutorial.net

jQuery – O que é jQuery? Onde Programar?

O que é jQuery?

Uma vez que você veio a esta página, talvez você já tenha uma boa idéia sobre o que é jQuery, mas por segurança, aqui vai uma breve explicação. jQuery é um framework de JavaScript, qual o propósito é fazer isso muito mais fácil para usar JavaScript em seu website. Você poderia também descrever jQuery como uma camada de abstração, já que ela tem um monte de funcionalidades que você teria que escrever várias linhas de JavaScript para realizar e envolvê-las dentro de funções que você pode chamar com uma única linha de código. É importante observar que jQuery não substitui o JavaScript, e enquanto isso oferece atalhos sintáticos (syntactical shortcuts), o código que você escreve quando usa jQuery ainda é código JavaScript.

Com isso em mente, você deve estar ciente que você não precisa ser um expert em JavaScript para usar jQuery. De fato, o jQuery tenta simplificar muitas das coisas complicadas do JavaScript, como chamadas AJAX e manipulação de DOM, de modo que você pode fazer essas coisas sem conhecer muito sobre JavaScript.

Existem um monte de outros frameworks de JavaScript lá fora, mas até agora, jQuery parece ser o mais famoso e também o mais extensível, provado pelo fato de que você pode encontrar jQuery plugins para quase qualquer tarefa lá fora. O poder, a grande variedade de plugins e a bela sintaxe são o que fazem o jQuery esse excelente framework. Continue lendo para saber muito mais sobre ele e para ver porque nós o recomendamos.

Onde Programar? Um editor de jQuery

Assim como HTML, CSS e mesmo o habitual JavaScript, você pode escrever jQuery em qualquer tipo de editor, até mesmo no Windows Notepad. Entretanto, usar um simples editor de texto como Notepad para criar páginas web é como usar uma chave de fenda para furar um pedaço de madeira: Funciona, mas leva muito mais tempo e é a forma menos agradável.

Se você ja tem um editor HTML que permite você trabalhar facilmente com JavaScript, então ele possivelmente será bom para escrever jQuery também, mas existem editores lá fora que irão tratar o jQuery como um cidadão de primeira classe e ajudará você digitar isso mais rápido e mais eficientemente.

Eu pessoalmente utilize TSW WebCoder, o qual tem um monte de incríveis recursos IntelliSense para auxiliar você, cobrindo todas as tecnologias que você precisa: HTML, CSS, JavaScript, PHP e com certeza o jQuery. Se o seu atual editor já faz tudo isso, e você se sente confortável com ele, então certamente mantenha o mesmo – se não, então considere dar uma chance ao WebCoder.

> Mais informações sobre o TSW WebCoder (em Inglês) 

> Faça o Download do TSW WebCoder

Aqui vai alguns screenshots para mostrar para vocês porque o TSW WebCoder faz isso muito mais fácil para trabalhar com jQuery:

TSW WebCoder mostrando os método possíveis em um objeto jQuery

TSW WebCoder mostrando os parâmetros do método fadeIn  

Fontes: jquery-tutorial.net / jquery-tutorial.net

Tutorial Completo de Struts2 (PDF – em Português)

Clique aqui para fazer o download do Tutorial Completo de Struts2 (PDF – em Português)

Se preferir pode acessar o conteúdo diretamente aqui no blog, tudo em português:

• Parte 1 – Introdução ao Framework Struts 2
• Parte 2 – Tutorial: Criando uma aplicação Struts 2 no Eclipse
• Parte 3 – Tutorial do Framework de validação do Struts2 com Exemplo
• Parte 4 – Tutorial do Plugin Struts 2 Tiles com exemplo no Eclipse
• Parte 5 – Tutorial de Interceptadores (Interceptors) do Struts2 com Exemplo
• Parte 6 – Tutorial de Upload e Gravação de Arquivos do Struts 2 com Exemplo
• Parte 7 (Final) – Tutorial de Ajax no Struts 2 com Exemplo

É isso ai pessoal… deu um trabalhinho traduzir tudo isso, deve ter alguns errinhos,
pois meu inglês é meia boca… mas espero que tenham gostado e que tenha sido útil 😀

Parte 7 (Final) – Tutorial de Ajax no Struts 2 com Exemplo

Bem vindo a ultima parte de uma série de 7 artigos de tutoriais do Framework Struts2, no artigo anterior nós vimos como implementar a funcionalidade de carga de arquivo (File Upload) no Struts2. Neste artigo nós vamos ver como nós podemos implementar o suporte Ajax em uma aplicação web usando o framework struts2.

Suporte AJAX no Struts 2

O Struts 2 fornece  suporte embutido a Ajax usando a biblioteca Dojo Toolkit. Se você é novo em Dojo, talvez você queira passar pela Introdução ao DOJO Toolkit (Em Inglês).

O Struts 2 vem com um poderoso conjunto de APIs de Dojo AJAX que você pode usar para adicionar suporte Ajax. A fim de adicionar suporte Ajax, você precisa adicionar o seguinte arquivo JAR no seu classpath:
struts2-dojo-plugin.jar

Uma vez que nós adicionamos esse arquivo JAR, nós precisamos adicionar o seguinte fragmento de código em qualquer arquivo JSP que nós precisamos adicionar o suporte Ajax.

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

Primeiro defina a taglib sx que nós usaremos para adicionar as tags disponíveis de AJAX.

<sx:head/>

Adicione essa tag head no seu JSP entre as tags <head> … </head>. Essa tag sx:head incluirá os arquivos javascript e css necessários pra implementar o Ajax.

Exemplo AJAX: Ajax Drop Down (Combobox)  do Struts2

Vamos adicionar um simples suporte AJAX a nossa aplicação web StrutsHelloWorld. Nós usaremos o código base que nós usamos nos artigos anteriores e adicionar o Ajax no topo dele.

Nós criaremos um drop down (combobox) qual irá autocompletar e sugerir a entrada. Para isso nós iremos adicionar o suporte Dojo a nossa app web.

Passo 1: Adicionar o arquivo JAR

Como discutido anteriormente nós adicionaremos o struts2-dojo-plugin.jar no classpath (WEB-INF/lib). Assim, a seguinte é a lista dos arquivos JAR necessários. Observe que estes jars são necessários para rodar toda a aplicação, incluindo todos os exemplos das partes anteriores desta série de tutoriais.

Passo 2: Criar a classe action do AJAX

Nós vamos criar uma classe action a qual irá ser chamada pelo nosso exemplo Ajax. Crie um arquivo AjaxAutocomplete.java no pacote net.viralpatel.struts2 e copie o seguinte conteúdo dentro dele.

AjaxAutocomplete.java

package net.viralpatel.struts2;   import java.util.ArrayList; import java.util.List; import java.util.StringTokenizer;   import com.opensymphony.xwork2.ActionSupport;   public class AjaxAutocomplete extends ActionSupport {     private String data = "Afghanistan, Zimbabwe, India, United States, Germany, China, Israel";     private List<String> countries;     private String country;          public String execute() {         countries = new ArrayList<String>();         StringTokenizer st = new StringTokenizer(data, ",");           while (st.hasMoreTokens()) {             countries.add(st.nextToken().trim());         }         return SUCCESS;     }     public String getCountry() {         return this.country;     }       public List<String> getCountries() {         return countries;     }       public void setCountries(List<String> countries) {         this.countries = countries;     }     public void setCountry(String country) {         this.country = country;     } }

No código acima nós criamos uma simples classe action com os atributos String country e List countries. A lista de países será populada com nomes de países quando o método execute() é chamado. Aqui por exemplo, nós carregamos dados estáticos. Você pode se sentir livre para mudar isso e adicionar dados do banco de dados.

Passo 3: Crie o JSP

Crie o arquivo JSP para exibir o Textbox com Autocomplete para nossa action Ajax. Crie AjaxDemo.jsp no diretório WebContent.

AjaxDemo.jsp

<%@ page contentType="text/html; charset=UTF-8"%> <%@ taglib prefix="s" uri="/struts-tags"%> <%@ taglib prefix="sx" uri="/struts-dojo-tags"%> <html> <head>     <title>Welcome</title>     <sx:head /> </head> <body>     <h2>Struts 2 Autocomplete (Drop down) Example!</h2>          Country:     <sx:autocompleter size="1" list="countries" name="country"></sx:autocompleter>     </action> </body> </html>

No arquivo JSP acima nós usamos a tag sx:autocompleter para renderizar um drop down com autocomplete o qual utiliza a classe Ajax para buscar dados internamente. Veja que nós mapeamos o atributo list com List countries.

Passo 4: Criando a entrada no Struts.xml

Adicione a seguinte entrada de action no arquivo Struts.xml:

<action name="ajaxdemo" class="net.viralpatel.struts2.AjaxAutocomplete">     <interceptor-ref name="loggingStack"></interceptor-ref>     <result name="success" type="tiles">/ajaxdemo.tiles</result>     <result type="tiles">/ajaxdemo.tiles</result> </action>

Observe que nós estamos utilizando Tiles aqui neste exemplo. Você pode querer usar o AjaxDemo.jsp ao invés do /ajaxdemo.tiles para renderizar a saída diretamente em JSP.

Isso é tudo pessoal

Compile e rode a aplicação no eclipse

Download do código fonte

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

Conclusão

O framework Struts2 fornece uma ampla variedade de recursos para criar uma rica aplicação web. Nessa série de Struts2 nós vimos diferentes aspectos do Struts2 como introdução ao struts2, aplicação hello world, framework de validação, plugin tiles, interceptadores do struts2, carga de arquivo e suporte a Ajax.

Fonte: viralpatel.net – Viral Patel

Parte 1 – Introdução ao Framework Struts 2

Então vamos começar a parte 1 de uma série de 7 partes, Nestes tutoriais nós vamos discutir a  Introdução ao Framework Struts2, framework de validação, os interceptadores no Struts2, plugin Tiles e essa aplicação com exemplo, um exemplo de upload de arquivo e exemplo de Ajax do Struts2.

Introdução ao Framework Struts 2

Apache Struts 2 é um framework elegante e extensível para criação de aplicações web em java. O framework é projetado para simplificar todo o ciclo de desenvolvimento, desde a construção, implantação, manutenção de aplicações ao longo do tempo.

Apache Struts2 foi originalmente conhecido como WebWork 2. Após trabalhar independentemente por vários anos, as comunidades WebWork e Struts juntaram forças para criar o Struts2. Essa nova versão do Struts é mais simples de usar e mais próximo de como o Struts sempre pretendia ser.

Struts 2 é um framework pull-MVC. Isto é, os dados que são mostrados ao usuáro tem que ser puxado da Action.

Struts2 suporta configurações baseadas em anotação que é mais fácil de criar e mais intuitiva. Classe action no Struts 2 atua como model na aplicação web. Ao contrário do Struts, a classe action do Struts 2 são simples objetos POJO assim slimplificando o teste do código. Struts2 também bem com poderosas APIs para configurar Interceptadores que reduzem muito o acoplamento na aplicação. A parte de view do Struts 2 é altamente configurável e suporta diferentes result-types como Velocity, FreeMarker, JSP e etc.

A Arquitetura do Struts 2

A Arquitetura do Struts 2 é baseado no framework WebWork 2. Isto influência as tecnologias JEE Standard como Java Filters, JavaBeans, ResourceBundles, Locales, XML etc nesta arquitetura.
Abaixo segue o diagram do framework.

Imagem: struts.apache.org

1. O ciclo de vida normal do struts começa quando a requisição é enviada pelo cliente. Isto resulta na invocação do servlet container que por sua vez é passa através da cadeia de filtros padrão.
2. O filtro FilterDispatcher que é chamado consulta o ActionMapper para determinar  se uma  Action deveria ser invocada.
3. Se o ActionMapper encontra uma Action a ser invocada, o FilterDispatcher delega controle ao ActionProxy.
4. O ActionProxy lê o arquivo de configuração como o struts.xml. ActionProxy cria uma instancia da classe ActionInvocation e delega o controle.
5. ActionInvocation é responsável pela implementação padrão de comando. Ela invoca os Interceptors(Interceptadores) um por um (se necessário) e então invoca a Action.
6. Uma vez que a Action retorna, o ActionInvocation é responsável por procurar o resultado da propriedade associada com o código resultado da Action mapeada no struts.xml.
7. Os Interceptors são executados de novo na ordem contrária e a resposta é retornada para o Filter (Na maioria dos casos ao FilterDispatcher). E o resultado é então enviado para o servlet container que por sua vez o envia de volta ao cliente.

Ciclo de vida do Processamento da Requisição

O ciclo de vida do processamento da requisição do framework Struts2 é bastante discutida na sessão acima, onde vimos a arquitetura do framework Struts 2.

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.

Suporte AJAX no Struts 2

AJAX é um termo bem conhecido no desenvolvimento web. Agora é possível escrever aplicações desktop como web2.0 usando AJAX. Até o Struts 1.x, o desenvolvedor tinha que escrever e manter o código em javascript para adicionar o suporte AJAX.
Mas agora o Struts 2 lhe dá o Ajax ‘for a da caixa’. Sem escrever javascript, sem debugar comparando vários browsers; apenas configure e vai.

Struts 2 vem com uma biblioteca de tags AJAX altamente configuráveis quais podem ser usada diretamente sem escrever código JavaScrip. Struts 2 também suporta biblioteca Dojo. Agora é muito fácil adicionar características de AJAX habilitado como o Autocomplete a sua aplicação web.
Relacionado: Introdução ao DOJO Toolkit (em inglês)

Comparação do Struts 1 e Struts 2

Vamos ver a diferença básica entre o framework Struts 1 e 2.

1. Diferente do Struts 1, o Struts 2 não necessita de implementar a classe Action. A Action no Struts 2 é um objeto POJO. Assim fazendo isso ficar fácil para teste unitário do código.
2. Actions  do Struts 1 são singletons e deve ser thread-safe uma vez que só terá apenas uma instancia de uma classe para manipular todas as requisições para aquela Action. Objetos action do Struts 2 são instanciados para cada requisição, então não tem problemas de thread-safety.
3. As actions do Struts 1 tem dependências da servlet API desde que a HttpServletRequest e HttpServletResponse é passada ao método execute quando uma Action é invocada. As actions do Struts 2 não são acopladas a um container. Mais frequentemente os contextos de servlet são representadas como simples Maps, permitindo Actions serem testadas em isolamento.
4. Struts 1 usa um objeto ActionForm para capturar a entrada. Como as Actions, todos ActionForms devem estender uma classe base. Uma vez que outro JavaBeans não pode ser usada como ActionForms, desenvolvedores criam mais classes redundantes para capturar as entradas. Struts 2 usa Action properties como input properties, eliminando a necessidade por um segundo objeto de entrada. Input properties podem ser tipos de objetos ricos quais podem ter suas próprias propriedades.
5. Struts 1 integra com JSTL, assim utilizando o JSTL EL. O EL tem basic object graph traversal, mas é relativamente uma coleção fraca e suporte de propriedades indexado. Struts 2 pode utilizar JSTL, mas o framework também suporta uma linguagem de expressão (expression language) muito mais poderosa e flexível, chamada “Object Graph Notation Language” (OGNL).
6. Struts 1 usa o mecanismo padrão JSP para fazer o binding (amarração) dos objeto dentro do contexto da página para acesso. Struts 2 usa um tecnologia “ValueStack” de modo que  as taglibs podem acessar valores sem acoplar sua view ao tipo do objeto que ela está renderizando.

Struts 1 suporta separar Request Processors (ciclos de vida) para cada módulo, mas todas as Actions no modulo necessitam compartilhar o mesmo ciclo de vida. Struts 2 suporta criar diferentes ciclos de vida em cada Action base via Interceptor Stacks. Custom stacks podem ser criadas e usada com diferentes Actions, conforme desejado.

—————————————————————-

Espero que tenham gostado dessa primeira parte, assim que possível postarei a parte 2 😀
See ya!

Fonte: viralpatel.net – Viral Patel