Werneck Paiva

Queries com a “nova” JPA 2 criteria API

Ricardo Paiva — Sat, 21 Jan 2012 02:06:52 +0000

{lang: 'pt-BR'}

Eu sempre achei a linguagem SQL muito interessante, por ter quê de linguagem natural. Aliás, a idéia inicial era realmente criar uma linguagem de consultas, bem próxima à maneira como nós, humanos, nos comunicamos. O tempo passou, a linguagem cresceu, e as consultas SQL se tornaram verdadeiros monstros. É difícil encontrar uma query mais complexa que contenha fluidez similar a uma sentença em inglês. Além disso, eu sempre achei chato misturar SQL no meio da minha aplicação (mas isso é uma birra minha que não tem nada a ver com a história).

Há cerca de 3 anos fui apresentado a uma API de consultas do Hibernate (Hibernate Criteria API). A idéia é que programaticamente poderíamos construir consultas SQL, ao invés de usar a linguagem de consultas do Hibernate (HQL). Achei a idéia muito boa e fiz uso desta API por alguns anos.

No mundo JPA (Java Persistence API), somente com a JPA 2, passamos a ter acesso a uma API de criteria. Existem inúmeras vantagens e desvantagens em usar uma API de criteria, mas as que eu gosto de destacar são:

Vantagens:

Verificação de erros – Muitos erros podem ser detectados em tempo de compilação;
Segurança – como as consultas são construídas pelo motor da API, você fica praticamente imune a SQL injections;
Queries dinâmicas podem ser construídas mais facilmente, ao invés montar strings complexas.
Tipagem forte – a JPA criteria API leva vantagem em relação à Hibernate Criteria API em relação a verficação de tipos.

Desvantagens:

Complexidade – uma vez que a maioria dos desenvolvedores está acostumada com o SQL/HQL/JPQL, migrar para uma API de criteria não é simples.

Executando uma query JPQL:

Query query = entityManager.createQuery("SELECT p FROM Product p");
List results = query.getResultList();

A mesma query JPQL, mas de forma tipada, seria:

TypedQuery typedQuery = entityManager.createQuery("SELECT p FROM Product p", Product.class);
List results = typedQuery.getResultList();

Executando esta consulta usando a JPA Criteria API:

CriteriaBuilder builder = entityManager.getCriteriaBuilder();
CriteriaQuery query = builder.createQuery(Product.class);
Root from = query.from(Product.class);
CriteriaQuery select = query.select(from);

TypedQuery typedQuery = entityManager.createQuery(select);
List results = typedQuery.getResultList();

Perceba que os dois últimos comandos são bem parecidos com a maneira como a JPQL funciona. A primeira vista, esta estratégia parece ser bem mais complexa e trabalhosa, mas se encurtarmos um pouco o código, temos uma estrutura bem parecida com uma query SQL:

CriteriaBuilder builder = entityManager.getCriteriaBuilder();
CriteriaQuery query = builder.createQuery(Product.class);

TypedQuery typedQuery = entityManager.createQuery(
    query.select(
       query.from(Product.class)
    )
);
List results = typedQuery.getResultList();

Veja um exemplo de como fazermos uma consulta com a cláusula where.
Usando a JPQL:

TypedQuery typedQuery = entityManager.createQuery(
    "SELECT p "+
    "FROM Product p "+
    "WHERE p.price > :price",
Product.class);
typedQuery.setParameter("price", price);
List results = typedQuery.getResultList();

Usando a JPA Criteria API:

CriteriaBuilder builder = entityManager.getCriteriaBuilder();
CriteriaQuery query = builder.createQuery(Product.class);
Root from = query.from(Product.class);
TypedQuery typedQuery = entityManager.createQuery(
    query.select(from )
    .where(
       builder.gt(from.get("price"), price)
    )
);
List results = typedQuery.getResultList();

Sim, tudo bem, eu admito, está tudo muito mais complicado do que as queries JPQL. Mas eu ainda acho que queries com muitos componentes dinâmicos são mais fáceis de fazer, quando usamos a JPA Criteria API.

Vamos dar uma olhada numa query que envolva múltiplas entidades (joins).

Usando a JPQL:

TypedQuery typedQuery = entityManager.createQuery(
      "SELECT p "+
      "FROM Product p "+
      "WHERE p.supplier.name=:supplier",
Product.class);
typedQuery.setParameter("supplier", supplierName);
List results = typedQuery.getResultList();

Usando a JPA Criteria API:

CriteriaBuilder builder = entityManager.getCriteriaBuilder();
CriteriaQuery query = builder.createQuery(Product.class);
Root from = query.from(Product.class);
TypedQuery typedQuery = entityManager.createQuery(
    query.select(from )
    .where(
       builder.equal(from.join("supplier").get("name"), supplierName)
    )
);
List results = typedQuery.getResultList();

Para fazer uma ordenação, basta usar o método CriteriaQuery.orderBy():

CriteriaBuilder builder = entityManager.getCriteriaBuilder();
CriteriaQuery query = builder.createQuery(Product.class);
Root from = query.from(Product.class);
TypedQuery typedQuery = entityManager.createQuery(
    query.select(from )
    .where(
       builder.gt(from.get("price"), price)
    )
    .orderBy(builder.asc(from.get("name")))
);
List results = typedQuery.getResultList();

Vejamos uma consulta resultado de uma tela de busca onde o usuário pode filtra por diversos critérios: maior preço, menor preço, nome e categoria. A estratégia será adicionar mais ou menos cláusulas ao predicado usado pelo where.

CriteriaBuilder builder = entityManager.getCriteriaBuilder();
CriteriaQuery query = builder.createQuery(Product.class);
Root from = query.from(Product.class);

Predicate predicate = builder.and();

// product.price > minPrice
if (minPrice != null && minPrice > 0){
     predicate = builder.and(predicate, builder.ge(from.get("price"), minPrice));
}
// product.price < maxPrice
if (maxPrice != null && maxPrice > 0){
    predicate = builder.and(predicate,
        builder.le(from.get("price"), maxPrice));
}

// product.name like %productName%
if (productName != null && productName.length > 2){
    predicate = builder.and(predicate,
        builder.like(from.get("name"), "%"+productName+"%"));
}

// product.category.name like %categoryName%
if (categoryName != null && categoryName.length() > 2){
    predicate = builder.and(predicate,
        builder.like(
            from.join("category").get("name"),
            "%"+categoryName+"%"));
}

TypedQuery typedQuery = entityManager.createQuery(
    query.select(from )
    .where( predicate )
    .orderBy(builder.asc(from.get("name")))
);
List results = typedQuery.getResultList();

Recentemente precisei fazer uma consulta a partir de um relacioamento unidirecional que me deu um certo trabalho. Fazendo algumas simplificações, eu queria obter todos professores (Teacher) de turmas (ClassSection) de uma determinada escola (School). Turma aponta para professor, mas professor não aponta para turma.

Teacher <- ClassSection -> School

Aconsulta ficou mais ou menos assim:

CriteriaBuilder builder  = entityManager.getCriteriaBuilder();
CriteriaQuery query = builder.createQuery(Teacher.class);
Root fromTeacher = query.from(Teacher.class);
Root fromClassSection = query.from(ClassSection.class);

Join teacherJoin = fromClassSection.join("teacher");
Join schoolJoin = fromClassSection.join("school");

TypedQuery typedQuery = getEntityManager().createQuery(query
    .select(fromTeacher)
    .where(builder.and(
            builder.equal(fromTeacher, teacherJoin),
            builder.equal(schoolJoin.get("id"), schoolId)
    ))
    .orderBy(builder.asc(fromTeacher.get("firstName")))
    .distinct(true)
);

List teachers = typedQuery.getResultList();

Perceba que faço a cahamada query.from() duas vezes, uma para Teacher e outra para ClassSection, entreatanto, o método createQuery() sempre terá o tipo da classe que será retornada como resultado da consulta.

Para saber mais:
http://www.objectdb.com/java/jpa/query/criteria
http://www.altuure.com/2010/09/23/jpa-criteria-api-by-samples-part-i/
http://www.altuure.com/2010/09/23/jpa-criteria-api-by-samples-%E2%80%93-part-ii/

{lang: 'pt-BR'}

Como usar autowire do Spring a partir do método main()

Ricardo Paiva — Fri, 20 Jan 2012 16:59:39 +0000

{lang: 'pt-BR'}

Que o Spring é um framework fantástico, eu não preciso dizer. Seus projetistas criaram, a partir de um paradigma de container IOC, um ecossistema de frameworks que nos auxiliam em inúmeras tarefas, desde testes unitários a controle transacional, passando por segurança, MVC entre outras.

Algumas vezes precisamos rodar o Spring a partir de uma aplicação standalone (aquela que possui o método main()). Isso não é lá muito complicado, mas é interessante perceber que podemos usar todos os recursos do Spring, inclusive as anotações @Autowired, mesmo na classe que possui o método main.

Para inicializarmos o Spring, usalmente fornecemos um arquivo XML de configuração do ApplicationContext. A diferença agora é que iremos solicitar ao próprio Spring que inicialize a classe que contém o método main, e faça uso das anotações de @Autowired que estamos usando.

Veja o exemplo de uma classe que depende de um bean de serviço:

@Component
public class MyApplication{

        @Autowired
        private IMyService myService;

	public static void main(String[] args) {
		ApplicationContext context = new ClassPathXmlApplicationContext("config.xml");
		MyApplication app = context.getBean(MyApplication.class);
		app.start()
	}

	private void start(){
	        myService.doSomething();
                // ...
	}
}

@Service
public class MyService implements IMyService {
    public String doSomething() {
        // ...
    }
}

O arquivo config.xml deverá estar localizado no classpath da aplicação. Se estiver usando Maven, coloque na pasta src/main/resource

Se você quer saber como criar uma aplicação standalone com um único JAR e todas as suas dependências usando o Maven, leia o artigo que escrevi sobre o assunto.

{lang: 'pt-BR'}

Como criar um JAR executável com todas as dependências usando Maven

Ricardo Paiva — Fri, 20 Jan 2012 16:32:20 +0000

{lang: 'pt-BR'}

Algumas vezes precisamos criar uma aplicação standalone, que possua dependências e que gere apenas um arquivo JAR. É possível usar o Maven para fazer o build, gerenciar as dependências e ainda criar o arquivo MANIFEST.MF com as informações necessárias para que a aplicação rode sem precisarmos informar qual classe possui o método main().

O plugin que faz a mágica da geração do JAR incluindo todas as dependências é o maven-assembly-plugin. Ele irá incluir todos os arquivos .class junto com as classes de nossa aplicação.



        maven-assembly-plugin
        
            
                jar-with-dependencies
            
            
                
                    true
                    fully.qualified.MainClass
                
            
        
        
            
                make-my-jar-with-dependencies
package
                
                    single

Para fazer o build em sua aplicação, simplesmente rode o maven:

$ mvn clean install

Para executar seu programa, faça:

$ java -jar target/suaApplicacao-jar.with-dependencies.jar

{lang: 'pt-BR'}

Como funciona o Map Reduce usado pelo Google

Ricardo Paiva — Wed, 24 Aug 2011 01:54:59 +0000

{lang: 'pt-BR'}

Introdução

MapReduce é um modelo de programação proposto pelo Google para para facilitar o processamento de grandes volumes de dados. A partir de um paradigma inspirado em primitivas de programação funcional, foi criado um framework que permitisse a manipulação de grande volume de dados de forma paralela e distribuída, além de prover tolerância a falha, escalonamento de I/O e monitoramento. Um grande número de aplicações reais podem ser expressas nesse modelo de programação.

O modelo de programação MapReduce consiste na construção de um programa formado por duas operações basicas: map e reduce. A operação de map recebe um par chave/valor e gera um conjunto intermediário de dados, também no formato chave/valor. A operação de reduce é executada para cada chave intermediária, com todos os conjuntos de valores intermediários associados àquela chave combinados. Em geral a operação de map é usada para encontrar algo, e a operação de reduce é usada para fazer a sumarização do resultado.

Exemplo

Considere o problema de contar o número de ocorrências de uma palavra em uma grande coleção de documentos. Veja o pseudo-código para este problema usando MapReduce:

map(String input_key, String input_value):
    // input_key: document name
    // input_value: document contents
    for each word w in input_value:
        EmitIntermediate(w, "1");

reduce(String output_key, Iterator intermediate_values):
    // output_key: a word
    // output_values: a list of counts
    int result = 0;
    for each v in intermediate_values:
        result += ParseInt(v);
    Emit(AsString(result));

Para cara palavra do documento de entrada, a função map emite o valor ’1′ associado à chave que representa a palavra em questão. A função de reduce soma todas as contagens emitidas para uma mesma chave, ou seja, uma mesma palavra.

Execução

Execução paralela

A operação de map é distribuída em múltiplas máquinas a partir do particionamento dos dados em pedaços que podem ser processasdos em paralelo por diferente máquinas. A operação de reduce é distribuída através do particionamento das chaves intermediárias. O tamanho e a função de particionamento são parâmetros fornecidos pelo usuário.

Passo-a-passo de execução

A biblioteca MapReduce, no programa do usuário, primeiro divide os dados de entrada em M pedaços. Em seguida inicia várias cópias do programa em um cluster de computadores.
Uma das cópias do programa é especial – o master. As outras cópias são denominadas workers e recebem trabalho do master. Existem M tarefas de Map e R tarefas de reduce para serem assinaladas. O master seleciona workers ociosos e assinala a eles uma tarefa de map ou de reduce.
Um worker que possui uma tarefa de map le o conteúdo correspondente ao pedaço da entrada. Ele interpreta os pares chave/valor a partir dos dados de entrada e passa como parâmetro para a função de map do usuário. Os pares chave/valor intermediários produzidos pela função de map são armazenados em memória.
Periodicamente os pares de dados dos buffers são escritos em disco, particionados em R regiões pela função de particionamento. A localização desses pares de dados no disco é informada ao master, que irá repassar essa localização para os workers com tarefas de reduce.
Quando um worker de reduce é notificado da localização dos dados pelo master, este usa uma chamada de procedimento remota para buscar os dados do disco local dos workers de map. Quando os dados já foram lidos, ele ordena os dados pelas chaves intermediárias, para que todas as ocorrências de uma mesma chave seja agrupada junto. A operação de ordenação é necessária, pois muitas chaves diferentes são mapeadas para a mesma tarefa de reduce. Se a quantidade de dados intermediários é muito grande para caber em memória, uma ordenação externa é usada.
O worker de reduce percorrer os dados intermediários já ordenados e para cada chave encontrada, ele passa a chave os valores intermediários para a função de reduce definida pelo usuário. A saída de cada função de reduce é adicionada ao final de um arquivo de saída para aquela partição de reduce.
Quando todas as tarefas de map e reduce foram terminadas, o master retorna o programa do usuário.

Ao final da execução do programa, o resultado está disponível em R arquivos (um para cada operação de reduce). É comum que os arquivos de resultados de uma operação de MapReduce sejam entradas para outra chamada de MapReduce.

Tolerância a falhas

Uma vez que o framework de MapReduce foi criado para ajudar o processamento de uma quantidade enorme de dados em um cluster com inúmeras máquinas, lidar com falhas é algo essencial. O processo master envia um ping periodicamente para cada worker. Se o master não receber uma resposta de um worker em um certo período de tempo, o master assume que aquela máquina falhou. Todas as tarefas de map completadas pelo worker são resetadas para seu estado inicial e são re-escalonadas para outro worker. Essas tarefas precisam ser re-executadas em caso de falha, pois seus arquivos de saída são armazenado no disco local da máquina que falhou e, portanto, ficam inacessíveis. O mesmo acontece com as tarefas de map ou reduce que estão em progresso. Tarefas de reduce completadas não precisam ser re-executadas, pois seus arquivos de saída são armazenados no sistema de arquivo global.

No caso do processo master falhar, é necessário um controle mais complexo, pois o processo master é o elo entre a execução das tarefas de map e reduce. O processo master deve executar checkpoints periódicos de suas estruturas de dados. Em caso de falha, uma nova instância pode ser levantada, recuperando a partir do último estado que foi salvo. O MapReduce assume que só existirá um único processo master (Single Master), portanto, falhas neste processo são indesejáveis.

Ao final da execução do programa, algumas máquinas, apesar de ainda responderem, podem apresentar um tempo de resposta muito inferior a média das outras máquinas. Por exemplo, falhas nos discos podem reduzir a taxa de leitura de 30MB/s para 1MB/s. Para evitar que estes processo atrasem a execução do programa, quando o programa está perto de terminar, algumas cópias das tarefas restantes são iniciadas (tarefas backup). A tarefa será marcada como completada assim que, ou a tarefa primária ou uma tarefa de backup, responder. A título de exemplo, um programa de ordenação, pode demorar até 44% mais tempo se o mecanismo de tarefas de backup estiver desligado.

Localidade

A largura de banda é um recurso relativamente escasso neste ambiente de computação. A quantidade de comunicação é reduzida pelo fato de que os dados de entrada (gerenciados pelo sistema de arquivos global – GFS) está armazenado no disco local das máquinas que fazem parte do cluster. O GFS implementeado pelo Google divide cada arquivo em blocos de 64MB e armazena algumas cópias destes blocos em máquinas diferentes (tipicamente 3). O processo master do MapReduce leva em conta a localização dos dados na hora de escalonar as tarefas de map em uma máquina que contém uma das répicas dos dados de entrada.

Para saber mais, você pode acessar a página mantida pelo Google com informações sobre o MapReduce

Acesse também o projeto Hadoop, uma implementação open source de MapReduce em Java, mantida pelo grupo Apache.

{lang: 'pt-BR'}

Máscara de imagens com Canvas do HTML5

Ricardo Paiva — Sat, 14 May 2011 04:29:56 +0000

{lang: 'pt-BR'}

Antes do HTML5, criar uma máscara para uma imagem era algo que exigia, necessariamente, a manipulação do arquivo em uma ferramenta gráfica externa, usando a transparência do formato PNG. Isso atende muitos casos, mas não permite criar máscaras dinâmicas, ou seja, máscaras criadas via Javascript ou que mudem ao longo do tempo, como em uma animação por exemplo. É possível criar uma máscara usando uma DIV, mas isso só atende a problemas onde a máscara é regular (retangular). Se você quiser fazer uma animação com uma máscara no formato de um círculo ou de um polígono irregular, precisará lançar mão do Canvas do HTML5.

A primeira técnica para criar uma máscara usando canvas é a mais simples e imediata, mas tem alguns problemas de performance. Para fazer animações mais sofisticadas é preciso usar uma outra técnica, a mesma usada em alguns jogos (Bit Blit). Vou apresentar as duas técnicas, no intuito de identificar as diferenças entre elas.

Primeira técnica: clip()

Esta técnica compreende o desenho de um polígono qualquer, sucedido pela chamada do método context.clip(). Qualquer elemento desenhado em seguida, será recortado pelo polígono desenhado anteriormente. É importante que o polígono seja fechado e que seja preenchido com alguma cor.

O exemplo acima começa instanciando um objeto de imagem, que irá guardar o conteúdo da imagem que receberá a máscara. Em seguida acessamos o contexto 2D do canvas criado. Com a API de Canvas podemos fazer inúmeros desenhos. Em nosso exemplo fizemos um círculo completo com um preenchimento em branco. Apesar da cor branca não aparecer, isso influencia, em parte, as bordas da máscara. O método clip() define que qualquer coisa que for desenhada no canvas a partir de então, será ‘recortado’ pela máscara. Em seguida definimos a URL da imagem e, ao ser carregada, desenhamos a imagem no canvas.

Esta me parece a técnica mais simples de se entender e de implementar, mas sofre com performance quando resolvemos animar a máscara, em especial círculos. Além disso algumas pessoas podem reclamar da falta de resolução no contorno.

Segunda técnica: Bit Blit

A técnica de Bit Blit é bem consagrada em jogos, para aumentar a performance de renderização dos componentes gráficos. Eu mesmo já escrevi um artigo de como explorar a técnica usando Flash (Aumento da Performance de Jogos em Flash com Bit blitting). A idéia básica é usar operações de bit com os pixels dos elementos gráficos, de tal forma que possamos gerar a imagem final com operações mais leves.

Como estamos interessados em criar máscaras, vamos fazer desenhos com uma cor sólida (preto). Usando a operação de ‘source-atop’ vamos renderizar nossa imagem por cima do nosso desenho. O canvas entenderá que o elemento gráfico que sucede a operação ‘source-atop’ deverá ter uma interseção com o que foi desenhado previamente, ou seja, somente a área da imagem que estiver por cima do elemento gráfico em preto que desenhamos aparecerá no canvas.

Assim como o exemplo anterior, neste esperamos carregar a imagem e em seguida fazemos o desenho de uma figura geométrica. Usamos o método context.fillRect(x, y, larg, alt) para desenhar um retângulo. O atributo context.globalCompositeOperation = 'source-atop' indica que qualquer elemento gráfico renderizado posteriormente deverá ter uma interseção com o que já foi desenhado.

Do ponto de vista de performance, as duas técnicas são similares quando trabalhamos com polígonos simples, como retângulos. No entando, ao desenhar círculos com o método arc() temos uma queda significativa de performance. É aí que a técnica de Bit blit entra e nos ajuda bastante. Por incrível que pareça, desenhar um quadrado com um degradê circular (radial) é mais rápido do que desenhar um arco. Sabendo disso, podemos desenhar um degradê radial com o mesmo diâmetro do círculo, dentro de um quadrado, usando o método context.createRadialGradient(startX, startY, startR, endX, endY, endR). Como estamos usando um degradê, temos a vantagem de podermos suavizar as bordas, tornando os contornos mais suaves.

Apos carregar a imagem, definimos um raio e um ponto x e y, onde o quadrado será posicionado. Em seguida criamos um preenchimento do tipo RadialGradient que é composto por dois círculos (var r = ctx3.createRadialGradient(x + radius, y + radius, radius-5, x + radius, y + radius, radius)). Quanto menor o círculo mais interno, mais ‘esfumaçado’ será a borda do círculo e, no exemplo, a diferença entre eles é de 5px. Como o gradiente pode ter várias cores, definimos uma cor sólida até 95%. A partir deste ponto, o degradê passa a ser transparente. Aplicamos o objeto de degradê criado ao estilo de preenchimento (ctx3.fillStyle = r). Desenhamos, então, o quadrado no ponto x, y e, por fim, usamos o mesmo recurso de operação bitmap usado no exemplo anterior (ctx3.globalCompositeOperation = 'source-atop') para exibir a imagem com a máscara.

Um exemplo interessante do uso de uma máscara animada é este abaixo. Clique no canvas para a ver a animação.

Você pode executar o exemplo acima a partir desta página, ou ver um exemplo mais sofisticado nesta página.

{lang: 'pt-BR'}

Utilize efeitos de flip do iPhone e iPad em aplicações web com WebKit

Ricardo Paiva — Wed, 04 May 2011 04:52:06 +0000

{lang: 'pt-BR'}

Recentemente comecei um trabalho para iPad. Apesar do projeto não ser nem uma aplicação web, nem uma aplicação nativa, a ferramenta me permitia que eu usasse recursos de HTML 5, especialmente os suportados pelo WebKit. O desafio foi usar alguns efeitos que são encontrados facilmente no iPhone, mas que ainda são raridades na Web.

Inicialmente esbarrei com o framework JQTouch – uma excelente solução para criar aplicações web para dispositivos móveis. Bem maduro e com muitas funcionalidades. A idéia básica do framework é transformar uma página HTML com marcações simples, em uma aplicação no estilo iPhone, incluindo design e efeitos. Para o meu problema seria um overkill e ainda teria um trabalho enorme para customizar a interface.

Me baseei, então, neste excelente artigo, que possui um exemplo bem bacana. A diferença básica do exemplo que usarei será o uso de javascript para disparar o efeito 3D. A implementação que usarei só funciona no Safari. Apesar do navegador Chrome também se basear no mesmo engine que o Safari (WebKit), infelizmente o efeito 3D não funciona corretamente.

Enquanto o W3C ainda não bate o martelo para o padrão de efeitos 3D, o projeto WebKit se adiantou e criou alguns excelentes efeitos que são aplicados por meio de CSS. A estrela da festa é o efeito '-webkit-transform'. Com ele é possível fazer rotações nos eixos X e Y (rotate), mover (translate), redimensionar (scale) ou mesmo mudar a perspectiva de um objeto (skew). Você pode se aprofundar mais nos efeitos 3D disponíveis a partir deste artigo que possui alguns exemplos bem sofisticados.

Para fazer nosso efeito de flip iremos utilizar o recurso de rotação. Para que o efeito 3D seja notado, precisamos definir a perspectiva que iremos trabalhar, o tempo de duração da transição e uma flag que habilita o efeito 3D. O efeito de flip a alguns quadrados apresentados na página. Ao serem clicados, o quadrado irá virar e para revelar o conteúdo da parte posterior.

O HTML será definido assim:

Criamos um container global "content", apenas para organização. Cada quadrado será definido pela div com CSS "box" que contém o conteúdo da face frontal ("face front") e da face posterior ("face back"). Para que não haja desajuste na hora do efeito, ambas as faces serão definidas com o mesmo tamanho.

O código CSS irá definir tamanhos, posicionamento e toda a configuração dos efeitos de transição:

O container mais externo "content" possui uma perspectiva de visualização, para que o efeito 3D seja percebido. A face posterior (marcada pela classe CSS "back") é inicializada com uma rotação de 180º, para que seja considerada efetivamente como a parte de trás do quadrado. As faces são definidas com posicionamento absoluto, permitindo que uma esteja sobreposta a outra.

A única coisa que falta é criar o javascript que irá aplicar o efeito de rotação quando o usuário clicar sobre um quadrado:

Quando a página carregar, todos elementos marcados com a classe CSS "box" terão seu evento de click monitorados. Ao serem disparados, a classe CSS "rotate" será aplicada, provocando o efeito de rotação do quadrado. Estamos usando o jquery para simplificar a manipulação dos elementos da página.

Experimente este um demo deste exemplo (lembre-se de usar o Safari).

Espero que a dica a tenha ajudado e vamos torcer para que estes efeitos estejam disponíveis em todos os browsers em breve.

{lang: 'pt-BR'}

Ajax com Javascript não intrusivo (unobtrusive Ajax)

Ricardo Paiva — Sun, 06 Mar 2011 05:54:15 +0000

{lang: 'pt-BR'}

O que é javascript não intrusivo?

Quando criamos nossas páginas HTML, repletas de javascript, estamos sujeitos a espalhar trechos de código por diversos elementos da página, como botões, links, imagens etc. Esta é uma prática bastante comum e muito ruim, pois dificulta muito a manutenção e reuso do código gerado. O javascript não intrusivo (unobtrusive javascript) sugere que o código HTML fique separado do código javascript, trazendo organização, modularidade, e maior facilidade na criação de plugins. Ao invés de adicionarmos códigos javascript aos eventos diretamente nos elementos HTML, construimos um HTML mais simples, e adicionamos um código javascript que irá observar quando o evento for disparado.

Ao invés de fazermos isso:

Fazemos isso:

Neste exemplo, fazendo uso da biblioteca jQuery para definir o comportamento do clique do botão quando a página for totalmente carregada.

Esta estratégia é especialmente útil quando lidamos com páginas que serão exibidas em diferentes navegadores. Se um determinado navegador não possui uma certa funcionalidade, o nosso Javascript simplesmente falha, mas o usuário ainda será capaz de ver o conteúdo original.

Um bom exemplo desta técnica, é o framework Lightbox 2 para exibir fotos na forma de um album. Par ausá-lo basta criar um link para a foto original e avisar ao lightbox que aquela foto será exibida através do atributo rel="lightbox" no link. Algo como:

Foto da viagem

Se o Lightbox não funcionar, o usuário ainda será capaz de clicar no link e abrir a foto em outra página.

Para que um link vire uma chamada ajax devemos proceder da mesma maneira, via Javascript trocamos o comportamento padrão por uma chamada ajax. Entretanto, só isso não basta. É preciso dizer ao browser que precisamos remover a ação de mudar de página quando o link for clickado.




    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed enim velit, pretium at volutpat vitae, volutpat at augue. Nullam tempus, urna id gravida vestibulum, enim urna sodales tortor, in pulvinar nisi eros pretium est.
    Post Anterior
    Próximo Post

O exemplo acima representa uma página com um post. Ao clicar nos botões de próximo ou anterior, o usuário seria redirecionado para uma outra página, porém, alteramos este comportamento para que uma chamada Ajax seja feita, e o resultado substitua o conteúdo da página.

Repare que cancelamos o comportamento padrão do link criando um método genérico preventDefault(), que engloba rotinas específicas para cada browser. Este é o “pulo do gato” do Ajax não-intrusivo, pois sem isto, o link continuaria funcionando e, mesmo que o Ajax fosse executado, ele não iria impedir que a página fosse redirecionada.

Exemplo com suporte a botão de back e histórico: unobstrusive-ajax
Não abordei o controle de histórico neste artigo para mantê-lo mais simples.

Código fonte do exemplo (incluindo os arquivos PHP): unobtrusive-ajax.zip.

{lang: 'pt-BR'}

Percorrendo arquivos com nomes com espaço no Linux

Ricardo Paiva — Fri, 14 Jan 2011 04:02:07 +0000

{lang: 'pt-BR'}

O pipe é uma das grandes invenções do Unix. Através dele podemos encadear processos e transformar pequenas utilitários em ferramentas capazes de realizar tarefas realmente complexas.

A idéia é muito simples: todo processo tem associado a ele um arquivo de entrada, um arquivo de saída e um arquivo de erro. Como no Linux (ou qualquer outro Unix) um dispositivo é representado por um arquivo A entrada padrão de um processo, portanto, é o teclado, e a saída padrão e de err é a tela (console). A grande engenhosidade do pipe é a capacidade de redirecionar a saída de um processo, que seria para tela, para a entrada de outro processo. Isto permite que comandos sejam encadeados para realizar uma tarefa mais sofisticada.

Além de podermos encadear processos, o shell (aí depende do shell) ainda nos oferece uma linguagem de programação, o ShellScript. O ShellScript permite criar variáveis, condicionais, loopings etc. Usarei o Bash como referência.

Vamos pensar num bastante comum: Você tem um projeto em um diretório cheio de arquivos e subdiretórios. Você deseja mudar a permissão de todos os arquivos com a extensão *.pdf.

Primeiramente, precisamos procurar pelos arquivos usando o comando find

$ find projeto/ -iname "*.pdf"
projeto/relatorios/relatorio.pdf
projeto/contratos/contrato servico.pdf
projeto/documentacao/auditoria.pdf
projeto/documentacao/especificacao de produtos.pdf

Em seguida, precisamos passar o resultado do comando find para o comando chmod, para mudarmos as permissões. Infelizmente o comando chmod não recebe dados da entrada padrão, portanto, iremos usar uma outra ferramenta, as aspas invertidas (ou crase). Este mecanismo permite que a saída de um processo seja usado como parâmetro na chamada de outro processo:

chmod 640 `find projeto/ -iname "*.pdf"`
chmod: cannot access 'projeto/contratos/contrato': No such file or director
chmod: cannot access 'servico.pdf': No such file or director
chmod: cannot access 'projeto/documentacao/especificacao': No such file or director
chmod: cannot access 'de': No such file or director
chmod: cannot access 'produtos.pdf': No such file or director

Perceberam a confusão que se deu quando os arquivos tem espaço nos nomes?. Ao invés de iterar para cada arquivo, o chmod iterou para cada parte de nome entre espaços.

Ao invés de usar a crase, podemos usar o while em combinação com o comando read, e esquecer as dores de cabeça. Tudo funciona perfeitamente.

find projeto/ -name "*.pdf" | while read f; do chmod 640 "$f"; done

O comando while irá iterar em cada nova entrada do comando read, e este, por sua vez, irá ler cada ‘linha’ da saída do comando find e gravar na variável f. A variável f pode ser usada com qualquer tipo de comando dentro do bloco “do … done”. Tudo se encaixa.

Eu uso essa estratégia para uma infinidade de coisas:

# Mudar as permissões apenas de diretórios
find . -type d | while read f; do chmod 775 "$f". done

# Procurar um texto em apenas um tipo de arquivo
find . -iname "*.xml" | while read f; do grep "palavra" "$f"; done

# remover diretórios .svn de um projeto
find . -iname ".svn" -type d | while read d; do rm -rf "$d"; done

Seria possível usar o parâmetro -delete do comando find para excluir arquivos, mas este parâmetro não funcionaria com diretórios não vazios.

{lang: 'pt-BR'}

Geolocalização com HTML 5

Ricardo Paiva — Thu, 13 Jan 2011 15:09:58 +0000

{lang: 'pt-BR'}

Obter a localização do usuário é uma tarefa especialmente útil para aplicações web, sobretudo as que irão rodar em dispositivos móveis. Felizmente a especificação do HTML 5 pensou nisso e criou uma API que fornece os dados que a gente precisa, de uma maneira relativamente simples.

Uma característica da especificação, é que ela não restringe qual será a origem da informação. Ou seja, em um dispositivo móvel, como um celular, seria possível obter a localização do usuário usando o GPS, a localização da antena de celular, informações da antena wi-fi, base dados de endereço IP etc. O browser irá tratar a origem destas informações e, provavelmente, irá passar essa responsabilidade para o sistema operacional.

Obter a localização de um usuário depende da autorização dele, portanto esta é uma tarefa assíncrona. Uma vez que nosso script solicita a localização, uma mensagem será exibida pedindo ao usuário a autorização para que aquele site tenha acesso às informações de posicionamento.

A localização do usuário é representada por uma coordenada, formada pela latitude e longitude. O objeto recebido como resultado é do tipo Position e possui um atributo do tipo Coordinates com uma série de informações:

latitude: Posicionamento horizontal no mapa
longitude: Posicionamento vertical no mapa
accutacy: precisão em metros das coordenadas de localização. Está sempre disponível.
altitude: altitude em metros em relação ao nível do mar
altitudeAccuracy: precisão em metros da altitude
heading: direção da viagem, definida em graus (0º, 360º), contando no sentido horário em relação ao norte geográfico.
speed: velocidade de terra do usuário em metros/segundo.

Se o valor da altitude, heading e speed não estiverem disponíveis, os atributos terão valor null.

Veja o codigo abaixo para obter a localização do usuário:

 function updateMap(position) {
      // Localização formada por longitude e latitude
      var lat = position.coords.latitude;
      var long = position.coords.longitude;
}

// Solicita a localização
navigator.geolocation.getCurrentPosition(updateMap);

É possível também observar a posição do usuário a medida que ela se altera:

É possível ainda detectar quando o recurso de localização não está disponível, ou quando o usuário não permitiu que o seu script obtenha sua localização:

Abaixo, um exemplo funcional da API de geolocalização do HTML 5 e o mapa do GoogleMaps:

{lang: 'pt-BR'}

Drag and drop de múltiplos arquivos para upload via Ajax com HTML 5

Ricardo Paiva — Wed, 05 Jan 2011 18:11:03 +0000

{lang: 'pt-BR'}

Uma funcionalidade bem esperada do HTML5 é a capacidade de arrastar e soltar arquivos para dentro do browser. Desta forma, o usuário é capaz de fazer upload ou manipular arquivos, sem ter navegar por toda árvore de diretórios do sistema através da caixa de diálogo padrão do sistema. É possível também fazer upload de múltiplos arquivos simultaneamente usando AJAX, e é isso que eu explicarei neste artigo.

Infelizmente, até o momento, a API de manipulação de arquivos ainda não está plenamente definida. O exemplo construído funciona apenas no Firefox e no Chrome.

O passo principal da especificação HTML 5 para oferecer o mecanismo de Drag and Drop, foi definir um conjunto de eventos para os diversos passos que executamos ao arrastarmos e soltarmos um objeto. E a API de Drag and Drop não está restrita à manipulação de arquivos. É possível manipular qualquer elemento visual da página, usando a nova API nativa de Drag and Drop.

Em nosso caso não precisamos nos preocupar com o objeto que será arrastado, pois o sistema operacional já irá tratá-lo. Nossos esforços estarão focados em tratar a zona alvo do arquivo. A idéia principal é adicionar event listeners aos eventos de drag and drop e tratá-los da maneira correta.

Para que elemento html aceite a operação de ‘drop’, é preciso que ele escute pelo menos um dos três eventos:

dragenter: Usado para definir se o elemento aceitará ou não o drop de um objeto. Para aceitar, deve-se cancelar o compartamento padrão do evento.
dragover: Determina que tipo de feedback será exibido ao usuário (mudança de cor, alpha etc).
drop: Evento que permite realizar uma operação quando o usuário solta o objeto na zona alvo.

Existe ainda mais um evento dragleave que é executado quando o usuário deixa a zona alvo sem realizar o ‘drop’ do objeto.

Uma parte importante da manipulação de eventos de Drag and Drop é evitar o comportamento padrão do browser, e isso é feito com o método preventDefault() do objeto de evento

dropArea.addEventListener("dragover", function(event) {
	  event.preventDefault();
}, true);

O objeto de evento, obtido quando se escuta um determinado evento, transporta um outro objeto de tipo DataTransfer. Este objeto, entre outras coisas, contém a lista de arquivos que foram selecionados e arrastados para a zona alvo do Drag and Drop.

dropArea.addEventListener("drop", function(event) {
    for (var i = 0; i
Uma outra novidade da API html5 é interface FileReader, que provê métodos para leitura de arquivos e eventos para manipular o resultado. Podemos juntar a interface FileReader com os arquivos contidos no objeto DataTransfer e fazer uma manipulação para criarmos um elemento do tipo  cujo atributo src é uma url fictícia, com o conteúdo do arquivo. Desta forma, criamos um preview do arquivo que será feito upload (assumindo que o arquivo será uma imagem).
var file = event.dataTransfer.files[0]
var img = document.createElement("img");
var reader = new FileReader();
reader.onloadend = function() {
	img.src = this.result;
}
reader.readAsDataURL(file);
img.classList.add("obj");
var content  = document.getElementById("content");
content.appendChild(img);
Por fim, precisamos realizar a operação de upload usando Ajax. Queremos fazer upload de todos os arquivos simultaneamente. Ainda não existe um consenso a respeito da maneira como os dados são enviados para o servidor. O objeto File, implementado pelo Firefox, possui o método getAsBinary(), que não é definida pela especificação. Já a versão 4, deste mesmo browser, trás o objeto FormData, que permite enviar os dados de forma mais simples e eficiente. O objeto FormData também foi implementado pelo Chrome e me parece que se firmará como futuro padrão.
A interface FormData é bem simples de ser usada e não exige manipulação direta do protocolo de comunicação. Através dela é possível associar identificadores/valores de um formulário e enviar todo o objeto via Ajax.
var f = new FormData();
var file = event.dataTransfer.files[0]
f.append("images", file);
var request = new XMLHttpRequest();
request.open("POST", "upload.php", true);
request.send(f);
O envio é feito de forma eficiente, e o arquivo não precisa ser todo armazenado em memória, como é o caso do segundo método de envio que veremos a seguir.
A segunda forma de envio, compatível com o Firefox, envia os dados via POST usando o header de transmissão de arquivos (multipart/form-data). Os dados do arquivo precisam estar em um formato específico, ditado pela RFC 2388. Criamos, portanto, uma grande string contendo todo o conteúdo dos arquivos:
var boundary = '------multipartformboundary' + (new   Date).getTime();
var dashdash = '--';
var crlf     = '\r\n';

/* String seguindo a RFC2388. */
var builder = '';

builder += dashdash;
builder += boundary;
builder += crlf;

/* Para cada arquivo que foi arrastado. */
for (var i=0; i
Finalmente criamos a rquisição Ajax através de um objeto do tipo XMLHttpRequest e enviamos a string criada que contém o conteúdo dos arquivos já no formato adequado.
var request = new XMLHttpRequest();
request.open("POST", "upload.php", true);
request.setRequestHeader('content-type', 'multipart/form-data; boundary='+ boundary);
request.sendAsBinary(builder);        

request.onload = function(event) {
     alert("Arquivo enviado");
};
Voila! Múltiplos arquivos sendo enviados usando Drag and Drop por meio de requisições Ajax.
Você pode olhar o código fonte de meu exemplo: upload.zip

Adicionei também um arquivo PHP para manipular os arquivos que chegam no servidor. Não se esqueça que, para executar o exemplo, é preciso dar permissão de escrita na pasta upload/.
Bons estudos e até o próximo artigo.
{lang: 'pt-BR'}