Arquivos de sites

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 6 – Tutorial de Upload e Gravação de Arquivos do Struts 2 com Exemplo

Bem vindos a parte 6 de uma série de 7 partes do framework Struts2. Na parte anterior nós passamos pelo básico dos Interceptadores do Struts2. Também criamos um interceptador customizado e o integramos a aplicação Struts2.

É bastante recomendável passar pelos artigos anteriores no caso de você ser novo no framework Struts2.

Hoje vamos ver como fazer um Upload de Arquivos no Struts2. Nós vamos utilizar o interceptador FileUploadInterceptor que vem embutido no Struts2, no nosso exemplo para fazer o upload do arquivo. O interceptador de upload de arquivos do Struts2 é baseado no MultiPartRequestWrapper, o qual é automaticamente aplicado a requisição se ela contém um elemento de arquivo.

Arquivo JAR Necessário

Antes de começar, você precisa ter certeza que o arquivo commons-io.jar está presente no classpath. Segue a lista de arquivos JAR necessários.
struts2-file-upload-jar-files

Primeiros passos

A fim de adicionar a funcionalidade de upload de arquivos, nós vamos adicionar uma classe action FileUploadAction ao nosso projeto. Crie o arquivo FileUploadAction.java no pacote net.viralpatel.struts2
FileUploadAction.java

package net.viralpatel.struts2;

 

import java.io.File;

import javax.servlet.http.HttpServletRequest;

import org.apache.commons.io.FileUtils;

import org.apache.struts2.interceptor.ServletRequestAware;

import com.opensymphony.xwork2.ActionSupport;

 

public class FileUploadAction extends ActionSupport implements

        ServletRequestAware {

    private File userImage;

    private String userImageContentType;

    private String userImageFileName;

 

    private HttpServletRequest servletRequest;

 

    public String execute() {

        try {

            String filePath = servletRequest.getSession().getServletContext().getRealPath(“/”);

            System.out.println("Server path:" + filePath);

            File fileToCreate = new File(filePath, this.userImageFileName);

 

            FileUtils.copyFile(this.userImage, fileToCreate);

        } catch (Exception e) {

            e.printStackTrace();

            addActionError(e.getMessage());

 

            return INPUT;

        }

        return SUCCESS;

    }

 

    public File getUserImage() {

        return userImage;

    }

 

    public void setUserImage(File userImage) {

        this.userImage = userImage;

    }

 

    public String getUserImageContentType() {

        return userImageContentType;

    }

 

    public void setUserImageContentType(String userImageContentType) {

        this.userImageContentType = userImageContentType;

    }

 

    public String getUserImageFileName() {

        return userImageFileName;

    }

 

    public void setUserImageFileName(String userImageFileName) {

        this.userImageFileName = userImageFileName;

    }

 

    @Override

    public void setServletRequest(HttpServletRequest servletRequest) {

        this.servletRequest = servletRequest;

 

    }

}

No arquivo da classe acima, nós declaramos alguns atributos:

  • private File userImage; -> Isso irá armazenar o arquivo carregado
  • private String userImageContentType; -> Essa string conterá o Content Type do arquivo carregado.
  • private String userImageFileName; -> Essa string irá conter o nome do arquivo carregado.

Os campos userImageContentType e userImageFileName são opcionais. Se o método setter desse campos for fornecido, o Struts2 irá setar o dado. Isso é apenas para pegar alguma informação extra do arquivo carregado. Segue também o padrão de nomeação, se você fornecer o tipo do conteúdo e o nome do arquivo. O nome deve ser ContentType e FileName. Por exemplo, se o atributo arquivo (File) na action for private File uploadedFile, o tipo do conteúdo será uploadedFileContentType e o nome do arquivo uploadedFileFileName.

Observe também na classe action acima, nós implementamos a interface org.apache.struts2.interceptor.ServletRequestAware. Isto é para pegar o objeto servletRequest. Nós estamos usando esse path para salvar o arquivo carregado no método execute(). Nós usamos o método FileUtil.copyFile() do pacote commons-io para copiar o arquivo carregado na pasta root. Esse arquivo será recuperado na página JSP e exibido ao usuário.

Os JSPs

Crie dois arquivos JSP na pasta WebContent. UserImage.jsp irá exibir um formulário para o usuário carregar a imagem. Ao submeter, o arquivo será carregado e salvo no servidor. O usuário será enviado ao arquivo SuccessUserImage.jsp aonde terá os detalhes do arquivo serão exibidos. Copie o seguinte código dentro dele.
UserImage.jsp

<%@ page contentType="text/html; charset=UTF-8"%>

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

<html>

<head>

<title>Upload User Image</title>

</head>

 

<body>

<h2>Struts2 File Upload & Save Example</h2>

<s:actionerror />

<s:form action="userImage" method="post" enctype="multipart/form-data">

    <s:file name="userImage" label="User Image" />

    <s:submit value="Upload" align="center" />

</s:form>

</body>

</html>

SuccessUserImage.jsp

<%@ page contentType="text/html; charset=UTF-8"%>

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

<html>

<head>

<title>Success: Upload User Image</title>

</head>

<body>

    <h2>Struts2 File Upload Example</h2>

    User Image: <s:property value="userImage"/>

    <br/>

    Content Type: <s:property value="userImageContentType"/>

    <br/>

    File Name: <s:property value="userImageFileName"/>

    <br/>

    Uploaded Image:

    <br/>

    <img src="<s:property value="userImageFileName"/>"/>

</body>

</html>

Entrada no Struts.xml

Adicione a seguinte entrada da classe FileUploadAction  ao arquivo struts.xml.

<action name="userImage"

    class="net.viralpatel.struts2.FileUploadAction">

    <interceptor-ref name="fileUpload">

        <param name="maximumSize">2097152</param>

        <param name="allowedTypes">

            image/png,image/gif,image/jpeg,image/pjpeg

        </param>

    </interceptor-ref>

    <interceptor-ref name="defaultStack"></interceptor-ref>

    <result name="success">SuccessUserImage.jsp</result>

    <result name="input">UserImage.jsp</result>

</action>

Observe que na entrada acima nós especificamos dois parâmetros ao interceptador fileUpload, maximumSize e allowedTypes. Estes são parâmetros opcionais que nós podemos especificar ao interceptador. O parâmetro maximumSize setará o tamanho máximo do arquivo que poderá ser carregado. Por padrão é 2MB. E o parâmetro allowedTypes especifica os tipos de conteúdos permitidos do arquivo que será carrregado. Aqui nós o especificamos para ser um arquivo de imagem (image/png,image/gif,image/jpeg,image/pjpeg).

O interceptador de carga de arquivo também faz a validação e adiciona erros, essas mensagens de erros são armazenadas dentro do arquivo struts-messsages.properties. Os valores das mensagens podem ser sobrescritos fornecendo texto/valor para as seguintes chaves:

  • struts.messages.error.uploading – erro quando a carga do arquivo falha
  • struts.messages.error.file.too.large – erro ocorrido quando o tamanho do arquivo é grande
  • struts.messages.error.content.type.not.allowed – quando o tipo do conteúdo não é permitido

Isso é tudo pessoal

Compile e execute o projeto no eclipse e vá ao link http://localhost:8080/StrutsHelloWorld/UserImage.jsp

Tela de carga de imagem
struts2-file-upload-example

Tela de carga de imagem no caso de erro
struts2-file-upload-error

Tela de carga de imagem em sucesso
struts2-file-upload-success

Download do código fonte

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

Fonte: viralpatel.net – Viral Patel