Arquivos de sites

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

Anúncios

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

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:

É 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 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.

struts 2 architecture
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