wired

Habilitando CORS no Play Framework 2.3.x

É bem comum quando você trabalha com diferentes servidores e recursos separados por uma vasta rede de servidores, ou você contorna isso usando Nginx, proxies ou você implementa uma abordagem diferente quando chega nesse nível.

CORS, basicamente é o problema mais comum em lhe dar com chamadas AJAX hoje em dia, por exemplo esse post foi inspirado nessa necessidade.

No Play Framework você samba um pouquinho para conseguir adicionar suporte a CORS nas chamadas que forem executadas por lá.

Para quem usa Tomcat, pode usar o filtro que o Ebay disponibilizou no Github.

Como funciona no Play?

Crie um arquivo na pasta Raiz:Global.java

 
import play.GlobalSettings;
import play.libs.F.Promise;
import play.mvc.Action;
import play.mvc.Http;
import play.mvc.SimpleResult;
 
public class Global extends GlobalSettings {
    private class ActionWrapper extends Action.Simple {
        public ActionWrapper(Action<?> action) {
            this.delegate = action;
        }
 
        @Override
        public Promise<SimpleResult> call(Http.Context ctx) throws java.lang.Throwable {
            Promise<SimpleResult> result = this.delegate.call(ctx);
            Http.Response response = ctx.response();
            response.setHeader("Access-Control-Allow-Origin","*");
            response.setHeader("Access-Control-Allow-Methods", "POST, HEAD, PATCH, GET, PUT, DELETE, OPTIONS");
            response.setHeader("Access-Control-Allow-Credentials", "true");
            response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
            return result;
        }
    }
 
    @Override
    public Action<?> onRequest(Http.Request request, java.lang.reflect.Method actionMethod) {
        return new ActionWrapper(super.onRequest(request, actionMethod));
    }
}

Salve e execute qualquer chamada REST que você tenha de serviço no Play, o cabeçalho agora aparecerá para você assim:

 
 
    Status Code: 200 OK
    Access-Control-Allow-Credentials: true
    Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization
    Access-Control-Allow-Methods: POST, HEAD, PATCH, GET, PUT, DELETE, OPTIONS
    Access-Control-Allow-Origin: *
    Content-Length: 3322
    Content-Type: application/json; charset=utf-8

Fácil né? Para chegar até aqui foi complicado, então deixo aqui o registro para futuros devs Java que tiverem esses problemas para resolver de forma mais rápida que eu.

Até o próximo post, dúvidas, deixem seus comentários.

gitignore_site

.gitignore e como gerar o seu

Esse é um post rápido, se você tem um projeto e que faz versionamento com o Git, sempre terá que ignorar alguns arquivos como: preferências de (sdk, projeto), saída do projeto, arquivos de documentação. Em fim tem de tudo um pouco para você gerenciar.

O que mais complica é quando você tem N IDEs,com um time que tem diferentes skills e que usam diferentes IDE para trabalhar, nesse ponto você tem que alterar com certa frequência o .gitignore para levar em consideração e não entrar arquivos indesejáveis.

A melhor maneira de fazer isso é com auxílio. Achei um site bem bacana para isso.

www.gitignore.io

O site gitignore.io é excelente, consigo facilmente adicionar os arquivos para serem ignorados. Diminuindo a chance de erros.

Welcome - Polymer

Gravação Componentizando a Web com Polymer

No último sábado aconteceu outro Hangout da série tecnologias Google para desenvolvimento Web.

Eu particularmente estou adorando a receptividade do público que está fomento por tanto conteúdo.

Nesse hangout eu mostrei um pouco sobre componentes Web, arquitetura do Polymer e como ele pode resolver alguns problemas já existentes.

Quem quiser assistir, está on-line a gravação no youtube.

Código fontes e slides são disponíveis pela licença Creative Commons, significa que você pode modificar e mencionar a fonte original, com isso você pode fazer a mesma apresentação no seu grupo de usuários, estudos etc.

Slides: Baixar Slides

Exemplos criados no Hangout:
Fork no Github

Aproveito e faço o convite para os próximos que sempre acontecem na última semana de cada mês.

Quem perdeu também o hangout sobre AngularJS, pode assistir aqui.

Welcome - Polymer

Hangout – Componentizando a Web com Polymer

No próximo sábado (25/10) 01/Novembro , vamos nos reunir on-line e apresentar para vocês toda essa idéia de componentização da Web com o framework Polymer.

Assim como no mês passado, foi um sucesso mesmo com a minha baita bronquigripe acabou saindo algo bom e que o pessoal curtiu para caramba.

Dessa vez eu consegui caprichar mais e com toda certeza vai ser melhor que o último hangout.

Convide seus amigos, compartilhe nas redes sociais, é grátis e dura em média 2 ou 3 horas.

Remarcamos para uma melhor experiência.

angular-hangout

Gravação do hangout criando Web Apps com AngularJS

Agradeço aos mais de 167 participantes de assistiram ao vivo o Hangout e aos mais de 760 que já assistiram a gravação até o momento da escrita desse post.

Quem perdeu, pode assistir no youtube a gravação.

Mesmo com uma forte gripe que me arrastou para uma bronquite aguda, consegui explicar em um estilo de aula, como você pode se tornar produtivo com o AngularJS, assim como, usando o Bower, Yeoman e Grunt para automatizar as tarefas.

angular-hangout

Convite para participar do Hangout Web Apps com AngularJS

Chegou a hora de compartilhar o que aprendi nos últimos 12 meses.

Convido todos vocês leitores a aprender um pouco sobre como criar Web Apps com AngularJS nesse Hangout on-line e grátis.

Será no próximo sábado as 09:30 da manhã horário de Brasilia, e com uma duração máxima de 3 horas.

Nesse hangout como é de costume, vou comentar sobre as semelhanças do Flex com o Angular, arquitetura de uma Web App e consumindo serviços REST de forma mais fácil.

A transmissão também será gravada e disponibilizada no Youtube.

angular_header

AngularJS extensões para Chrome e Firefox

Duas extensões que fazem uma tremenda diferença para quem desenvolve para Web com algum editor simples como o SublimeText ou Atom.

Batarang para o Chrome

batarang

Angscope para Firefox

ngscope

Se você usa uma IDE mais completa como o WebStorm, você pode instalar um plugin para o Chrome do JetBrains e debugar direto.

Independente de IDE, uma boa ferramenta para explorar o scope de cada controller e diretiva é definitivamente melhor que usar o console.log(); para debugar suas próximas aplicações.

angular_header

Angular 1.2.x One-Way data-binding

A grande vantagem do AngularJS é o two-way data-binding. Embora isso seja uma excelente função, em excesso acaba causando problemas, dentre eles performance para renderizar valores.

E isso impacta diretamente na questão de Grids de dados, internacionalização, gráficos e por ai adiante.

Boa parte de aplicações usa apenas one-way data-binding, já que é parte pertinente só renderizar dados, quando se exige um certo nível de aceitação para intergir, consumir um websocket ou atualizações constantes o two-way é a solução perfeita para isso.

A atual versão do angular 1.2.24 só possui suporte ao two-way data-binding. Qual a solução para o problema? Criar uma diretiva que permita o uso apenas de uma maneira.

Entendendo o problema

Sempre que você assina o two-way com {{ }} em suas views de HTML, o angular cria uma raiz de eventos para observar se o valor vai mudar ou não, consequentemente atualizar a view.

 
     <p>Olá {{USER_NAME}}</p>

O $watch faz esse papel, criando isso em pequenas aplicações é até aceitável, já que o nível de controle é sustentável e não existe tantas variáveis sendo mudada.

Criando a diretiva One-way

var app = angular.module("OneWayApp",[]);
 
app.directive('oneWay', function() {
    return {
        scope: true,
        link: function($scope,$elm) {
            setTimeout(function() {
                $scope.$destroy();
                $elm.removeClass('ng-binding ng-scope');
            }, 0);
        }
    }
});

O que eu faço é só destruir o $watcher depois que o valor for renderizado na view, assim evito ficar olhando por mudanças que não são necessárias.

Veja um exemplo sendo executado abaixo.

One-way App

Performaticamente falando, consigo renderizar 10 mil itens na tela sem precisa olhar todos eles, tire o atributo one-way e seu Brower pode quebrar e fechar. Até a barra de rolagem fica mais suave com tantos itens sem precisa observar suas mudanças.Igor Costa

Futuro do Angular JS

Essa função vai vim built-in na próxima versão do AngularJS 1.3.

Sua anotação será da seguinte forma:

 
<p>{{::user.name}}</p>

Colocando só os ::, essa função quem quiser se arriscar na RC-1, pode usar em seus projetos futuros, embora quem ainda dependa muito de funções especificas do 1.2.x, pode usar essa diretiva.

bower_header

A quebra do build automático e o Bower no meio do caminho

Quem usa algum esquema de integração contínua como o Jenkins por exemplo, sabe que é horrível ter a foto do Chuck Norris e saber que foi você quem quebrou o build.

O Bower geralmente é o culpado, acontece isso sempre e tem acontecido comigo nos últimos 9 builds gerados em um dos softwares que estamos fazendo.

Qual a principal causa disso?

Bom, acontece quando nós usamos diversas bibliotecas, componentes de terceiros e vem com diferentes versões do software principal que você está usando, por exemplo: Angular, JQuery e faz o Jenkins quebrar, já que o bower fica sem saber qual versão instalar.

+ bower install --silent
bower                        ECONFLICT Unable to find suitable version for angular
Build step 'Execute shell' marked build as failure
Finished: FAILURE

Mesmo eu tentando colocar via –silent, ele ignora e continua quebrando o build.

Entendendo o caso:

O Bower tem uma configuração para lá de prática e acabei descobrindo isso na quebra do build, ele possui uma conversão chamada “resolutions”, onde força você à usar a versão que você realmente quer.

{
  "name": "Seu Produto",
  "version": "0.0.1",
  "dependencies": {
    "angular": "1.2.16",
    "json3": "~3.2.6",
    "es5-shim": "~2.1.0",
    "jquery": "~2.1.1",
    "jQuery-Mask-Plugin": "1.6.4",
    "jquery-ui": "~1.10.4",
    "bootstrap": "~3.1.1",
    "angular-resource": "1.2.16",
    "angular-cookies": "1.2.16",
    "angular-sanitize": "1.2.16",
    "angular-route": "1.2.16",
    "angular-animate": "~1.2.16",
    "angular-collection": "~0.5.0",
    "angular-bootstrap": "0.11.0",
    "angular-strap": "~2.0.2",
    "momentjs": "~2.6.0",
    "ng-grid": "~2.0.11",
    "textAngular": "~1.2.1",
    "fontawesome": "~4.1.0",
    "angular-ui-utils": "~0.1.1",
    "cpf_cnpj": "~0.0.3",
    "angular-intro.js": "~1.1.2"
  },
  "devDependencies": {
    "angular-mocks": "1.2.16",
    "angular-scenario": "1.2.16",
    "angular-ui-utils": "~0.1.1",
    "jquery-ui": "~1.10.4"
  },
  "resolutions":{ "angular": "1.2.16" }
}

O “resolutions” acaba configurando implicitamente a versão do software que você quer e isso por final evita a quebra do build e o Chuck no telão na sala de desenvolvimento.

angular_header

AngularJS e filtros Brasileiros

Acabei de publicar no github um projeto bem simples e ao mesmo tempo bastante comum a tal da formatação de certos campos como, cnpj,cpf, cep e por ai vai no ramo Brasileiro.

Querendo ou não você vai encontrar esse pequeno problema no ramo uma vez ou outra na vida.

Como eu precisei e não achei nada no mercado, acabei fazendo os meus e para ninguém mais sofrer com esse problema, é só usar esses filtros.

Como usá-lo?

Instalando via bower

$ bower install ng-filters-br

Depois de executar só colocar dentro dos módulos de sua aplicação:

var app = angular.module('myApp', ['ngSanitize','brasil.filters']);

Aplicando o filtro de formatação quando necessário

É só colocar:

{{value | nome do filtro}}

Exemplo abaixo:

    <h3>Filtros valores reais brasileiros</h3>
    <p ng-repeat="value in moedas">{{value | realbrasileiro}}</p>
    <h3>Filtros para CPF</h3>
    <p ng-repeat="value in cpfs">{{value |cpf}}</p>
    <h3>Filtros para CNPJ</h3>
    <p ng-repeat="value in cnpjs">{{value |cnpj}}</p>
    <h3>Filtros para CEP</h3>
    <p ng-repeat="value in ceps_br">{{value |cep}}</p>
    <h3>Filtros para Telefones SP</h3>
    <p ng-repeat="value in tels_sp">{{value |telefone_sp}}</p>

Quem não estiver usando o Bower

Para utilizar sem o bower, basta copiar os arquivos na basta dist, seja minificado ou normal. Vai de sua escolha.

Sugestões, reclamações. Só fazer um fork, criar pull-requests ou abrir uma issue caso você não consiga fazer um pull-request.

Desenvolvimento de software para Web e Mobilidade