Arquivos de sites

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

Anúncios

jQuery – Animações customizadas com o método animate()

Nos capítulos anteriores, nós vimos dentro dos métodos de efeitos embutidos fading e sliding do jQuery. Porém, você pode muito mais que isso. Com o método animated(), você pode criar animações customizada onde você manipula quase qualquer propriedade CSS numérica de um elemento. Isso permite você por exemplo mover uma caixa devagar através uma tela ou subir ou descer. Vamos tentar alguma coisa muito simples:

<div style="height: 60px;">
        <div id="divTestBox1" style="height: 50px; width: 50px; background-color: #89BC38; position: absolute;"></div>
</div>
<script type="text/javascript">
$(function()
{
        $("#divTestBox1").animate(
                {
                        "left" : "200px"
                }
        );
});
</script>

O primeiro, e único necessário, parâmetro da função animated é o mapa das propriedades do CSS que você deseja que seja alterado. Nesse caso, nós temos um elemento div absolutamente posicionado, que nós dissemos ao jQuery para mover até ele alcançar 200 pixels na propriedade left.
O segundo parâmetro permite você especificar a duração da animação em milissegundos ou como “slow” ou “fast” que é o mesmo de 600 ou 200ms. Com isso, nós podemos diminuir o exemplo acima mais do que nós queremos:

<div style="height: 60px;">
        <div id="divTestBox2" style="height: 50px; width: 50px; background-color: #89BC38; position: absolute;"></div>
</div>
<script type="text/javascript">
$(function()
{
        $("#divTestBox2").animate(
                {
                        "left" : "200px"
                }, 
                5000
        );
});
</script>

Com o terceiro parâmetro, nós podemos especificar uma função de callback para ser chamada uma vez que a  animação terminar. Isso pode ser bastante útil para executar um número diferente de animações em uma fila. Por exemplo, veja esse exemplo:

<div style="height: 40px;">
        <div id="divTestBox3" style="height: 20px; width: 20px; background-color: #89BC38; position: absolute;"></div>
</div>
<script type="text/javascript">
$(function()
{
        $("#divTestBox3").animate(
                { "left" : "100px" }, 
                1000,
                function()
                {
                        $(this).animate(
                                { "left" : "20px" },
                                500,
                                function()
                                {
                                        $(this).animate({ "left" : "50px" }, 500);
                                }
                        )
                }
        );
});
</script>

Isso pode parecer um pouco repetitivo, mas o que nós fazemos é que nós chamamos o método animado e perguntamos pela propriedade left da nossa “div” de teste para ser animada até ela alcançar 100 pixels no left. Nós queremos que isso leve 1 segundo (1000 milissegundos) e uma vez que isso se complete, nós desejamos que uma nova animação comece, que mova isso de volta para 20 pixels dentro de meio segundo, e assim que ESSA animação finalize, nós movemos ela um pouco para direito de novo, então agora ela tem uma propriedade left de 50 pixels.

Porém, desde que o jQuery vem com funcionalidade de fila para animações, você pode normalmente realizar o exemplo acima de um modo muito mais simples. Isso entretanto, apenas se aplica quando você quer um conjunto de animações executadas após cada uma – se você quer fazer outra coisa quando uma animação estiver completa, o exemplo acima será ainda o caminho a ser seguido. Aqui está uma versão de fila:

<div style="height: 40px;">
        <div id="divTestBox4" style="height: 20px; width: 20px; background-color: #89BC38; position: absolute;"></div>
</div>
<script type="text/javascript">
$(function()
{
        $("#divTestBox4").animate({ "left" : "100px" }, 1000);
        $("#divTestBox4").animate({ "left" : "20px" }, 500);
        $("#divTestBox4").animate({ "left" : "50px" }, 500);
});
</script>

Fonte: jquery-tutorial.net

jQuery – Sliding de elementos (Deslizar)

No capítulo anterior, nós vimos como nós podemos exibir ou esconder elementos  usando os métodos fading do jQuery. Porém, algumas vezes um efeito de sliding é uma melhor escolha, e para isso, o jquery tem um conjunto de métodos de combinação para fazer apenas isso. Vamos começar com um simples exemplo dele, onde nós usamos o método slideDown():

<div id="divTestArea1" style="padding: 50px; background-color: #89BC38; text-align: center; display: none;">
        <b>Hello, world!</b>
</div>
<a href="javascript:void(0);" onclick="ShowBox();">Show box</a>
<script type="text/javascript">
function ShowBox()
{
        $("#divTestArea1").slideDown();
}
</script>

Para esconder a caixa de novo, nós podemos usar o método slideUp(). Ambos recebem o mesmo conjunto de parâmetros, que são todos opcionais. O primeiro parâmetro permite você especificar a duração para o efeito em milissegundos, ou “fast” (rápido) ou “slow” (devagar), que são o mesmo se especificar ou 200 ou 600 milissegundos. Vamos tentar um exemplo onde nós fazemos apenas isso:

<div id="divTestArea21" style="width: 50px; height: 50px; display: none; background-color: #89BC38;"></div>
<div id="divTestArea22" style="width: 50px; height: 50px; display: none; background-color: #C3D1DF;"></div>
<div id="divTestArea23" style="width: 50px; height: 50px; display: none; background-color: #9966FF;"></div>
<a href="javascript:void(0);" onclick="ShowBoxes();">Show boxes</a>
<script type="text/javascript">
function ShowBoxes()
{
        $("#divTestArea21").slideDown("fast");
        $("#divTestArea22").slideDown("slow");
        $("#divTestArea23").slideDown(2000);
}
</script>

Temos um pouco mais de HTML que o de costume, mas isso está lá apenas para você ser capaz de ver os andamentos diferentes que as caixas são mostradas. Observe como a primeira caixa aparece quase que instantaneamente, a segunda caixa é bem parecida e a terceira caixa é mais devagar, porque ela usou dois segundos inteiros para descer.

Agora, o segundo parâmetro pode ser oir o nome de uma  função de atenuação (que nós não vamos usar nesse tutorial) ou uma função de callback que você pode fornecer, para ser chamada uma vez que o efeito terminar. Aqui está um exemplo disso, combinado com o uso do método slideUp():

<div id="divTestArea3" style="width: 50px; height: 50px; display: none; background-color: #89BC38;"></div>
<script type="text/javascript">
$(function()
{
        $("#divTestArea3").slideDown(2000, function()
        {
                $("#divTestArea3").slideUp(3000);
        });
});
</script>

A habilidade para fazer isso pode ser muito útil para combinar vários efeitos, com você pode ver. Neste exemplo, a função de callback que nós fornecemos será chamada assim que o método slideDown() estiver completamente finalizado e então o método slideUp() é chamado.

No caso de você querer simplificar o slide de um elemento para cima ou para baixo dependendo do seu estado atual, os desenvolvedores do jQuery forneceram a nós  um método legal slideToggle() para fazer apenas isso. Veja o próximo exemplo, onde nós usamos ele:

<div id="divTestArea4" style="width: 50px; height: 50px; display: none; background-color: #89BC38;"></div><br />
<a href="javascript:void(0);" onclick="ToggleBox();">Toggle box</a>
<script type="text/javascript">
function ToggleBox()
{
        $("#divTestArea4").slideToggle("slow"); 
}
</script>

Fonte: 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

Resolvendo Problema: Configurando Eclipse + Proxy

Fala galera beleza? Tendo problemas para utilizar Eclipse + Proxy?

Tentou configurar nessa tela?: (Window > Preferences > General > Network Connections)
1
… e nada adiantou?

Problema: O eclipse não passa os parâmetros setados para JVM.

Solução: Passar os parâmetros diretamente:

Run > Run Configurations > Java Application > [Nome da sua classe Main] > Arguments
2

E na caixa “VM arguments” adicione o seguinte conteúdo:
________________________________________________
-Dhttp.proxyHost=hostNameDoProxy
-Dhttp.proxyPort=numeroDaPorta
-Dhttp.proxyUser=nomeDeLogin
(ou nomeDoDominio\nomeDeLogin)
-Dhttp.proxyPassword=senhaDoUsuario
-Dhttp.nonProxyHosts=localhost|127.0.0.1
________________________________________________

Fácil não é? Espero que tenha funcionado com vocês também… 😀

See ya!