Arquivos de sites

jQuery – Os métodos before() e after()

No capítulo anterior, nós usamos os métodos append() e prepend() para inserir coisas dentro de um elemento, mas em alguns casos, nós precisamos inserir coisas antes ou depois de um ou vários elementos em vez disso. O jQuery tem os métodos befoer() e after() apenas para esse propósito, e eles são tão fáceis de usar. Veja esse exemplo:

<a href="javascript:void(0);" onclick="$('input.test1').before('<i>Before</i>');">Before</a>   
<a href="javascript:void(0);" onclick="$('input.test1').after('<b>After</b>');">After</a>
<br /><br />
<input type="text" value="Input 1" name="txtInput1" /><br />
<input type="text" value="Input 2" name="txtInput2" /><br />

Dependendo em qual dos dois links você clicou, uma tag itálico ou uma negrito será inserida antes ou depois de cada elemento input na página usando a classe “test1”. Assim como append() e prepend(), ambos after() e before() permitem você usar strings HTML, elementos DOM e objetos jQuery como parâmetros e uma quantidade infinita deles também. Nós vamos demonstrar isso no próximo exemplo:

<a href="javascript:void(0);" onclick="InsertElements();">Insert elements</a>
<br /><br />
<span id="spnTest2">Hello world? </span>
<script type="text/javascript">
function InsertElements()
{
        var element1 = $("<b></b>").text("Hello ");
        var element2 = "<i>there </i>";
        var element3 = document.createElement("u");
        element3.innerHTML = "jQuery!";   
        $("#spnTest2").after(element1, element2, element3);
}
</script>

Neste exemplo, nós criamos um objeto jQuery, uma string HTML e um elemento JavaScript DOM, e então nós usamos o método after() para inserir todos eles depois da nossa tag span. Claro, o método before() poderia ter sido usado exatamente da mesma maneira.

Existem variações dos métodos before() e after(), chamados insertBefore() e inserAfter(). Eles fazem praticamente a mesma coisa, mas eles fazem isso ao contrário, então ao invés de os chamarem nos elementos que devemos inserir dados antes ou depois, com um parâmetro do que é para ser inserido, você faz exatamente o oposto. Qual método usar obviamente depende da situação, mas aqui está um exemplo mostrando a você como usar ambos:

<a href="javascript:void(0);" onclick="InsertElementsBefore();">Insert elemenets</a>
<br /><br />
<span id="spnTest3">Hello world? </span>
<script type="text/javascript">
function InsertElementsBefore()
{       
        $("#spnTest3").before($("<i></i>").text("before() "));
        $("<b></b>").text("insertBefore() ").insertBefore("#spnTest3");
}
</script>

Neste exemplo, nós inserimos os itens antes da tag span, mas você poderia com certeza fazer exatamente a mesma coisa usando after() e insertAfter(), se você deseja inserir depois do elemento alvo. Como você pode ver, o resultado é o mesmo – apenas a ordem do que nós fazermos difere.

Fonte: jquery-tutorial.net

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

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

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
jQuery editor - Completion lists

TSW WebCoder mostrando os parâmetros do método fadeIn   jQuery editor - Parameter hints

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

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.
struts2-ajax-jar-files

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
struts2-ajax-drop-down

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