Webpoint

Boa noite pessoal. Gostaria de compartilhar com todos o momento que estou passando, mas isto vai ter que ficar para outro momento. Estou vendo as estatísticas dos termos pesquisados para entrar no blog e estou aflito! Tem muita gente buscando solução para upload de arquivos múltiplos! Devido a mudanças no jQuery que eu nem previa (o plugin interface, um dos melhores para jQuery ter sido abandonado e passado a ser padrão o jQuery UI o script que fiz não sei como funciona com outras versões do jQuery. A biblioteca SWFupload mudou muito também e melhorou muito e estou desenvolvendo baseado nela. O jQuery UI Uploader é a solução ideal para upload, mas não sei por que motivo ela não está tão bem documentada e tem dados muitos problemas.

Então mãos à obra!

A função de inserir arquivos Javascripts ou CSS sob demanda (através de um comando) deveria ser essencial no javascript. Existe alguns plugins para jQuery que faz isto como Javascript on demand, mas ainda faltava flexibilidade e a possibilidade de adicionar arquivos CSS.

Criei um plugin que insere no head do documento a tag script apontando para um script externo ou a tag link para um arquivo css. Você pode passar uma string como arquivo ou um array de arquivos para serem carregados. Ele não insere scripts duplicados, pois sempre verifica a existência do arquivo antes de inserir.

Sintaxe

$.include(String | Array url, Function callback);

Exemplos

//Javascript único
$.include('file.js');

//Você pode passar uma array de arquivos

$.include(['file01.js','file02.js']);

//Você pode especificar o diretório base para todos arquivos inclusos

$.ImportBasePath = '/foo/test/';

//Você pode inserir arquivos de diferentes formatos em um único array

$.include(['file01.js','file02.css']);

//O plugin suporta callback também
$.include(['file01.js',function(){
//code be executed when script loads
});

//Ainda não amplamento testado, você pode usar callbacks para scripts gerados

$.include(['file01.css',function(){
//code be executed when css loads
});

Utilidade

Ideal para inserir scripts sob demanda ou executar scripts e estilos em requisições Ajax

Por que não usar $.getScript?

O $.getScript é muito útil para carregar arquivos javascript, mas ele faz uma requisição ajax em que o retorno é avaliado e executado. O proposta deste plugin é criar um novo elemento no head do documento.

Compatibilidade

• Firefox 2+
• Internet Explorer 6+

Download

http://plugins.jquery.com/project/includedemand

Código fonte

http://code.google.com/p/jquerydevbrazil/source/browse/trunk/jquery.include.js

Este plugin tem por objetivo acessar uma query string anexada numa url similar a maneira feita pelo GET em uma linguagem de servidor

Como usá-lo?

//url: http://www.alexandremagno.net/jquery/plugins/jget/
//?test=var&test2=var2
 
var save1 = $.jget['test'];
 
alert(save1);
 
//imprime 'var'
 
var save2 = $.jget['test2'];
 
alert(save2);
 
//imprime 'var2'

Plugin no site do jQuery

http://plugins.jquery.com/project/jget

Download

http://plugins.jquery.com/files/jquery.jget_3.zip

Página de exemplo

http://www.alexandremagno.net/jquery/plugins/jget

Você pode anexar uma query string e se estiver usando o Firefox com o firebug, poderá ver no console as variáveis anexadas. Exemplo: http://www.alexandremagno.net/jquery/plugins/jget/?test=jgetplugin

Autor

Alexandre Magno

Licença

MIT - http://www.opensource.org/licenses/mit-license.php

Pessoal, tomei a iniciativa de criar um local para todos que desenvolvem plugins aqui no Brasil publicarem.

O endereço é: http://code.google.com/p/jquerydevbrazil/

A idéia é manter um local acessível para o mundo, para compartilhar os plugins e manter a sua documentação original. O autor do plugin poderá manter uma documentação em português em seu blog, mas ter uma documentação em inglês no site do projeto. Através do SVN, o Google code permite um controle de código e edição em equipe. Assim, com o seu plugin plubicado neste local, ele poderá ser melhorado por outros integrantes.

Se quiser fazer parte deste projeto, basta entrar em contato, possuir algum plugin, ter conhecimento sobre SVN, ter uma conta no Google que eu irei enviar o convite.

Com isto, você será orientado de  como será os padrões para publicação.

Não tenho intenção nenhuma de tomar crédito pelos plugins criados pelos colaboradores que se interessarem, esta é apenas uma maneira de centralizar o desenvolvimento e criar um trabalho em equipe para podermos melhorar o que já foi criado da maneira mais prática e moderna.

Desta maneira também, o desenvolvedor pode ter seu plugin em português, mas ter uma referência global para outros que desejarem acessá-los.

Neste local também os membros poderam fazer uma inspeção maior e relatar erros e idéias de novos plugins.

Espalhem a idéia e vamos criar extensões para facilitar o nosso dia-a-dia e consequentemente da nossa equipe e vice-versa.

No site do projeto tem uma idéia de como funciona, pois nele eu publiquei um plugin para centralizar elementos.

E ai pessoal,

Gostaria de informar que agora faço parte da equipe do jQuery para desenvolvimento de plugins e melhoria da Framework e em breve irei publicar os plugins no site do jQuery . Aqui no Blog permanecerá uma documentação em português e no site de plugins do jQuery a documentação original em inglês, para todos poderem usufruírem.

Obrigado a todos que me ajudaram e espero poder continuar passando algo de bom para todos que desejam aprender e se aperfeiçoarem nesta framework.

Só recapitulando. Para quem não sabe, o jQuery é uma framework/biblioteca de javascript para facilitar o desenvolvimento web, principalmente nesta nova era de Ajax e Web 2.0. Ela possui ferramentas para trabalhar com manipulação do DOM, CSS, XML, Ajax e efeitos. Uma das suas grandes vantagens em relação às outras é a possibilidade de facilmente extendê-la, podendo manter "limpa" o seu código original e usar os plugins de acordo com a demanda.

Qualquer projeto reusável pode ser pensado como uma extensão do jQuery e tudo pode ser feito em termos de plugin, facilitando a reutilização do código e a sua manutenção.

Todos os plugins são livres e contém uma documentação de como são usados e ainda servem de lição para quem quer começar a desenvolvê-los. Mas para isto precisa saber e se aprofundar no javascript, que apesar dos pesares e da briga eterna de browsers, ela pode ser uma linguagem amiga e não uma inimiga do desenvolvimento. E o jQuery é a maior prova de que esta linguagem polêmica pode dar bons frutos.

Vou falar neste post sobre um plugin para jQuery que deve ser aprendido como parte de sua documentação: o jQuery form plugin

Ele é muito útil para enviar formulário usando ajax, além de controlar a validação client-side de maneira triunfante. Se você não tem idéia de como usar o jQuery para pegar os valores do formulário de uma maneira fácil para ser passado pelo método $.post do jQuery, ou usa o método value() para fazer isto, depois deste plugin você vai fazer isto de uma maneira muito mais eficiente.

Exemplo ilustrativo

Para vocês entenderem o que estou falando, acessem este link: http://www.alexandremagno.net/portfolio_dev/site/contato. Tentem enviar o formulário sem preencher nenhum campo, ou deixando campos vazios e e-mail incorretos. O formulário fez a validação de uma maneira bonita, simples e intuitiva. Isto pode ser totalmente configurado para o plugin, a imaginação é o limite .

Preencha corretamente o formulário e envie(aproveite e deixe uma mensagem para mim ). Ele foi enviado usando ajax, com todos os campos passados para o jQuery, processados pelo php, retornado pelo XML e devolvido ao usuário. Tudo feito pelo plugin. Tentem enviar também sem preencher algum campo ou digitar um e-mail não válido, ele irá mostrar uma validação eficiente e personalizável.

ler artigo completo

Nota: Para quem usa o Flash Player 10 o script pode não funcionar. Houve uma mudança nesta versão que não permite que elementos do DOM acesse o Action Script, que é o "cérebro" do funcionamento do SWFUpload. A nova versão da biblioteca cria um elemento flash para que seja possível a sua interação com o javascript. Estou atualizando o Script para que possa funcionar nas novas versões do Flash.

Desculpe a demora para voltar a escrever, estava atolado de projeto e como prometi, estava desenvolvendo um script para o jQuery em conjunto com a biblioteca SWFUpload. Bem, para quem não sabe sobre o que estou falando, há posts que contam como tudo começou:

• Jquery, Mootools e múltiplos uploads - parte 01
• Jquery, Mootools e múltiplos uploads - parte 02

Descobri o SWFUpload que é uma biblioteca bastante completa e que faz todo o background do processo. Então você tem vários parâmetros e callbacks que podem ser usados da maneira que preferir. Como já sou acostumado com o jQuery, resolvi usá-lo para fazer a parte do callback, ou seja, toda a interface que o usuário experimenta.

Devido as limitações do Javascript, da própria maneira de como é feito o upload de arquivos, temos que reconhecer que este sistema de uploads é uma revolução. Exagero? Como vocês faziam sistemas de uploads de arquivos antes? De cinco em cinco? usando iframe? Enviando os arquivos via FTP? E quando se trata de um sistema que será usado para um cliente?

Apesar de exisitir alguns plugins para o jQuery que tem esse objetivo, confesso que a maioria deles não tem a versatilidade e o poder oferecido pelo fancy upload, desenvolvido para o mootools. Os plugins que mais se aproximam para o jQuery são o Multiple File Upload, que é bom, mas não é versátil e o que ele faz é inserir campos de arquivo escondido e deixar para o usuário somente o registro do arquivo que foi escolhido. No lado do PHP estes campos serão tratados como arrays, bom, mas nada versátil e possui todas as limitações já existentes, uma delas é que você não sabe o tamanho do arquivo até ele ser jogado temporariamente no servidor. O outro é o jqUploader, que é desenvolvido em Flash, sendo assim, o jQuery faz a inserção on the fly do swf, mas a interface e o processamento é todo em flash. O SWFUpload triunfa por que ele usa o flash, mas você não sabe que está sendo usado. Pelo fato do Action Script possuírem classes que manipula arquivos de uma maneira bem mais versátil que o Javascript, além da classe external interface, que deixa o flash interagir com o html externo, esta biblioteca usa essas ferramentas para devolver ao desenvolvedor as respostas para serem usadas adequadamente.

Ao script

O SWFUpload oferece diversos callbacks para serem usados, ele pode ser manipulado por javascript. Usei o jQuery em conjunto com o plugin interface para oferecer uma experiência rica para o usuário fazer o upload de arquivos, como no Flickr.

Havia prometido um plugin, mas com um script ele poderá ser explicado e assim personalizado da maneira que acharem melhor.

Exemplo da interação do SWFUpload com o jQuery

A tarefa do SWFUpload

O trabalho do SWFUpload, como falado anteriormente é processar todos os dados utilizando o action script e devolver estes dados em tempo real para o ser manipulado via javascript.

Portanto, os scripts que precisam ser inseridos no cabeçalho são:

• SWFUpload.js - o script em si, retirado do site, aqui ele está compactado, mas no site tem ele completo e a versão mais atual
• SWFUpload.swf - O arquivo flash que faz o processamento, aconselho colocar no mesmo local do script acima, mas isto pode ser customizado.
• init.js - O script que cria o objeto da classe, com as configurações e a referência aos callbacks necessários
• callback.js - É onde eu entro utilizando o jQuery para facilitar a sua vida :-).

O arquivo que precisa de explicação pela parte do SWFUpload é o init.js que instancia o objeto e o inicializa. Ele permite várias configurações. Todas elas estão na sua documentação. Vou tentar descrever o que usei para fazer este script:

var swfu;
 
var init_uploader = function()
 
{
 
swfu = new SWFUpload({upload_script : '../upload.php',
 
target : "container_arquivo",
 
flash_path : 'swfupload/SWFUpload.swf',
 
allowed_filesize : 30720, // 30 MB
 
allowed_filetypes : "*.*",
 
allowed_filetypes_description : "todos arquivos...",
 
browse_link_innerhtml : "Procurar",
 
upload_link_innerhtml : "Enviar arquivos",
 
upload_file_start_callback : "inicioUpload",
 
browse_link_class : "btn_procurar",
 
upload_link_class : "btn_upload",
 
upload_file_cancel_callback : 'cancelado',
 
upload_file_queued_callback : "entrouFila",
 
upload_progress_callback : "progresso",
 
upload_file_complete_callback : 'terminoArquivo',
 
upload_queue_complete_callback : "fimDownload",
 
upload_error_callback : 'uploadError'	});
 
swfu.loadUI();
 
};
 
//please use better handler attachment than this:
 
window.onload = init_uploader;

Acho que não precisa de muitas explicações, por que as funções já falam por si. Eu especifiquei as funções que serão usadas no callback.js para manipular as respostas, como por exemplo, quando seleciona um arquivo, quando inicia um download e a barra de progresso, todas elas aceitam alguns parâmetros, entre eles o objeto file, que tem várias propriedades, como o id que é uma identificação única do arquivo e graças a ele temos total controle do que está sendo feito com o arquivo. O arquivo upload.php é o script de servidor que faz a manipulação e copia para o local desejado, ele pode ser acessado via $_FILE['Filedata']. A diferença desse para os plugins do jQuery que faz a manipulação dos uploads, é que não será manipulado por um array de arquivos, mas sim será chamado o upload.php para cada arquivo, ou seja, será enviado um por um da fila e seu controle será feito em tempo real, assim como a resposta para o usuário.

Este script é mais geral, você pode especificar os tipos de arquivos desejados. O bom nisto é que a caixa de diálogo exibida pelo flash você acessa o sistema de arquivos do cliente, mas só exibe os arquivos do formato especificado.

É hora do callback!

O arquivo callback.js possui toda a manipulação necessária e a inserção on the fly da lista de arquivos, nome, tamanho, botão de remover, barra de progresso etc. Tudo é feito via jQuery e com os efeitos do plugin interface.

Dê uma analisada no html, pois alguns elementos são essenciais para o funcionamento, pois através dele o jQuery faz inserções de conteúdo on the fly.

O arquivo css encontra-se abaixo e pode ser personalizado:

/* Upload de arquivos */
 
body {font-family: Arial, Helvetica, sans-serif;
 
font-size: 12px;
 
}
 
#wrapper {
 
width: 600px;
 
margin: 20px auto;
 
border: 1px solid gray;
 
background-color: #FFFBEF;
 
}
 
#wrapper h2 {
 
text-align: center;
 
background-color: #3E458F;
 
width: 100%;
 
color: white;
 
padding: 12px 0;
 
}
 
#contentContainer {
 
width: 300px;
 
height: auto;
 
margin: 10px auto;
 
background-color: #FDFFEF;
 
border: 1px solid #9F8181;
 
padding: 20px;
 
}
 
#container_arquivo {
 
padding: 10px 6px;
 
margin: 8px auto;
 
}
 
#lista li {
 
width: 90%;
 
height: 75px;
 
margin: 12px 0;
 
padding: 6px;
 
background-color: #DBDFC3;
 
list-style-type: none;
 
}
 
#lista li a {
 
display: block;
 
}
 
.msg_fim_upload {
 
text-align: center;
 
color: red;
 
font-weight: bold;
 
padding: 5px;
 
background-color: #FFE7DF;
 
}
 
.btn_procurar, .btn_upload {
 
padding: 4px;
 
background-color: #E0E3EF;
 
border: 1px solid #74798F;
 
margin: 10px;
 
text-decoration: none;
 
}
 
.btn_procurar:hover, .btn_upload:hover {
 
background-color: #DFDFDF;
 
}
 
.arquivo {
 
font-weight: bold;
 
color: #6F3039;
 
}
 
.campo_peq {
 
border: 1px solid gray;
 
font-size: 10px;
 
background-color: #E5EFE0;
 
margin: 6px 5px 0 5px;
 
}
 
.barra {
 
background-color: green;
 
color: white;
 
width: 1px;
 
margin: 4px 0;
 
border: 1px solid gray;
 
text-align: center;
 
display: block;
 
}
 
/* fim do upload de arquivos */

Alguns dessas estilizações são para a demonstração online e outros são para o funcionamento adequado do script.

O script foi testado no Firefox 1.2.xx, no IE6 e IE7. Nestes dois últimos, há uma pequena falha na animação, mas devido ao interface. Se não gostou do resultado do efeito, ele pode ser alterado pelo callback nas linhas que tem os métodos Grow(crescer) e Shrink(encolher).

Espero que tenham gostado e que façam bom proveito deste script e qualquer dúvida, estou a disposição.