PhoneGap/Cordova Plugin Repositories

First english post!! Let’s see if the audience pays off…

I’m in a frenetic use of Cordova/Phonegap!! Including the use of third party plugins, not just the ones that come by default with Cordova, like Contacts, Capture, Sensors, etc. Recently, the people from Cordova created the official Cordova/Phonegap repo for plugins – Cordova Plugins! VERY NICE!! You can search for plugins by its name and tags defined by the plugin’s development team.

cordova-plugin-search
Cordova Plugin search

When you find a possible plugin to use, click on the link and you’re forward to the plugin page:

cordova-plugin-page
Cordova Plugin page

If you click in the link latest or in some older version – in the picture above, would be 0.6.3 – it’ll download the .TGZ plugin file! VERY NICE!!! But you don’t get a Documentation page for the plugin ANYWHERE in the site! VERY BAD… :(

You have to open the .TGZ file and read the README.md to see if it’s really what you searching for. OR you can copy the URL, delete part of it and use it to see the JSON config file for the plugin package.

Using the example above – see the last picture:

  1. Get URL => http://registry.cordova.io/de.appplant.cordova.plugin.local-notification/-/de.appplant.cordova.plugin.local-notification-0.6.3.tgz
  2. Delete the .TGZ part AND the /-/ part => http://registry.cordova.io/de.appplant.cordova.plugin.local-notification
  3. Copy it to the browser address area and press enter
cordova-plugin-json
Cordova Plugin json config file

Now you can see many info about the plugin, including the readme part. You can use this tip to develop a page that shows plugins info in a nicer way!

Another site that’s very nice is Plugreg! It’s a nicer version of Cordova Plugins. And it has more packages then Cordova Plugins.

Let’s hope they join forces to construct a GREAT PLUGIN PAGE!!! One point of entry to all plugins, like Composer is for PHP or Gems is for Ruby.

Problemas com quebra de linha em CSS

Mais um post de dica rápida, mas bem valiosa – pelo menos pra mim foi BASTANTE!!

Quem nunca teve problemas com quebra de linha? Colocamos um texto mais longo dentro de uma DIV ou de um P e o comportamento que esperamos é do texto sendo quebrado quando está para sair da caixa do elemento pai. Contudo, alguma vezes o texto sai da caixa como na imagem abaixo.

Texto sem quebra
Texto sem quebra

Quebrei a cabeça pra descobrir que quando um texto tem no lugar de espaços em branco normais o nosso “amigo”   – que expressa um espaço em branco em caracteres especiais do HTML – ele considera que o texto é uma “palavra” só, toda amarrada com o  . Por isso ele escapa da caixa e fica com esse comportamento horrível! Levei 4h para descobrir isso, gastas entre pesquisas no Google e tentativa e erro tirando algumas partes do código.

Então, se retirar os   de seu texto e deixar espaços em branco normais, o texto se quebra normalmente!

texto-com-quebra
Texto com quebra

Silex Micro Framework – parte 2

Demorou MUITO (!!!), mas consegui voltar ao tema… Vamos a segunda parte do post sobre Silex Micro Framework. Para quem não viu os anteriores:

Hoje falaremos um pouco sobre o Twig, que é um excelente Template Engine! Gosto muito de várias facilidades dele, incluindo a variedade de funções, tags, filtros e extensões já disponíveis!!

Bom para começar a usá-lo com o Silex, nada melhor do que o nosso amigo Composer – veja o post anterior, o Silex Micro Framework – parte 1. Com ele podemos instalar facilmente o Twig. Basta abrir o arquivo do seu projeto composer.json e colocar o seguinte:

{
    "require": {
        "silex/silex": "~1.1",
        "twig/twig": ">=1.8,<2.0-dev"
    }
}

Depois, rode o comando php composer.phar update para que o Composer recarregue o arquivo JSON, gere o arquivo lock e baixe tudo que for novo – no nosso caso, o Twig. Se estiver com o Composer instalado globalmente, pode rodar composer update (em breve, um post sobre o Composer).

Com isso, na pasta vendor de nosso projeto, deve haver uma pasta chamada twig. O Twig está dentro desta pasta e disponível para ser usado. Depois trabalhamos com o Silex e seu TwigServiceProvider, que disponibiliza o Twig para ser usado de forma fácil com o Silex. MUITO FÁCIL!!!

Dentro de nosso arquivo index.php de nosso último post – Silex Micro Framework – parte 1 – basta colocar esta linha logo após a criação do objeto Silex Application:

// index.php
require_once 'vendor/autoload.php';

$app = new SilexApplication();
// Para o Twig funcionar com o Silex coloque as 3 linhas abaixo
$app->register(new Silex\Provider\TwigServiceProvider(), array(
    'twig.path' => __DIR__.'/templates',
));
$app->get('/', function () {
    return 'Seja bem vindo ao Silex!';
});
$app->run();

Com isso, podemos acessar o objeto Twig simplesmente com $app[‘twig’]. Com relação a configuração, o twig.path é onde ficam os arquivos de template. No exemplo acima, fica na pasta templates dentro da pasta do projeto. Existem outras opções de configuração, mas deixaremos pra discutir isso em outro post!

Agora podemos usar o Twig com o seu método principal, o render. Em vez de retornarmos uma string como no exemplo anterior, vamos retornar um template Twig:

$app->get('/', function (Silex\Application $app) {
    return $app['twig']->render('layout.twig');
});

O que acontece acima: antes de mais nada, colocamos o Silex\Application como um dos parâmetros para usarmos ele dentro da função anônima. Segundo, retornamos um template renderizado usando o render do $app[‘twig’] e passando como parâmetro o arquivo que queremos renderizar – layout.twig. Este arquivo deve estar dentro da pasta template dentro do projeto.

layout.twig é um arquivo simples com algumas marcações do Twig:

<html>
    <head>
        <title>Primeiro Template Twig</title>
        <meta charset="utf-8" />
    </head>
    <body>
        <h1>Seja bem vindo, {{ nome }}</h1>
        <h3>Hoje é dia {{ data }}</h3> 
    </body>
</html>

Este é um arquivo HTML simples que já mostra algumas questões do que o Twig pode fazer. Existem duas marcações diferenciadas {{ nome }} e {{ data }}. Por enquanto, elas não fazem nada, mas mude nossa renderização do template como mostrado abaixo e teremos no lugar de {{ nome }} a palavra Marcio e de {{ data }} a data atual:

$app->get('/', function (Silex\Application $app) {
    return $app['twig']->render('layout.twig', array(
        'nome' => 'Marcio',
        'data' => date('d/m/Y')
    ));
});

É desta forma que passamos informações para o template poder manipular. E não pára por aí!! Podemos passar qualquer tipo de informação para o template: strings, inteiros, floats, arrays, objetos, etc. Por exemplo, se quisermos imprimir uma lista de pessoas:

$app->get('/', function (Silex\Application $app) {
    return $app['twig']->render('layout.twig', array(
        'pessoas' => array('Marcio', 'Maria', 'João')
    ));
});

No template poderíamos trabalhar essa lista em array da seguinte forma:

<html>
    <head>
        <title>Primeiro Template Twig</title>
        <meta charset="utf-8" />
    </head>
    <body>
    {% if pessoas is not empty %}
        <ul>
        {% for pessoa in pessoas %}
            <li>{{ pessoa }}</li>
        {% endfor %}
        </ul>
    {% else %}
        <h4>Não existem pessoas na lista</h4>
    {% endif %}
    </body>
</html>

Isto imprime a lista de pessoas se a variável pessoas – passada para o template no código anterior – não estiver vazia (percebam a tradução direta do inglês da marcação if pessoas is not empty deixando o código mais fácil de entender). Este exemplo é um pouco melhor, pois trás duas marcações diferentes. Existem marcações do tipo {{ pessoa }}, que imprimem na tela valor; e existem marcações do tipo {% algo %} que são códigos executáveis, como if e for.

Se passarmos um objeto ou um array associativo, podemos acessar os atributos e métodos do objeto ou os índices do array da seguinte forma:

// index.php
$app->get('/', function (Silex\Application $app) {
    return $app['twig']->render('layout.twig', array(
        'marcio' => array('nome' => 'Marcio', 'email' => 'marcio@mail.com'),
        'maria'  => new Pessoa('Maria', 'maria@mail.com')
    ));
});

// layout.twig
{{ marcio.nome }}
{{ maria.email }}

Além disso, podemos usar filtros, aplicáveis com o uso do pipe – {{ pessoa | raw }} – e funções – {{ include(‘menu.twig’) }}.

Para saber de outros filtros e funções que podemos usar com o Twig, veja este link. Esta foi uma pequena introdução do Twig com o Silex. Tentando mostrar como instalar e como funciona. Algumas funcionalidades mais complexas serão mostradas em outros posts. Apenas para deixar marcado, aqui estão as próximas partes e as que já foram postadas do mega post sobre Silex:

  1. Parte 1 – Instalação e Introdução ao Silex
  2. Parte 2 – Instalação e Introdução ao Twig (este post)
  3. Parte 3 – Instalação e Introdução ao Doctrine DBAL
  4. Parte 4 – Meu Silex Skeleton – Como e Por quê
  5. Parte 5 – Construindo um TODO LIST com Silex, Twig e Doctrine DBAL
  6. Parte 6 – Logging no Silex com Monolog
  7. Parte 7 – Estendendo o Twig no Silex
  8. Parte 8 – Profiling do Silex

Algumas dicas e truques serão mostrados durante os posts. Esperam que gostem e acompanhem!

JSON e Codificação

Dica rápida – para futuras referências!!

Trabalhando com json_encode do PHP, descobri que se jogarmos strings em outros formatos sem ser UTF-8, ele pode gerar saída null. Ou seja, quando estiver jogando valores para serem codificados depois como JSON, é bom antes usar a função utf8_encode para garantir a codificação como UTF-8!!

$dados = array(
    'nome'  => utf8_encode('Marcio'),
    'email' => utf8_encode('marcio@email.com')
);

header('Content-Type: application/json; charset=utf-8');
echo json_encode($dados);

At Your Service

Fala, galera! Tentando voltar aos posts depois de algum tempo! E vim pra falar de alguns serviços que estou disponibilizando na web. Todos em versão βeta ainda, mas já consegue-se usar tranquilamente!!!

At Your Service
At Your Service – Simple services at your disposal

Pode encontrá-los em http://culturabeta.com.br/labs/at-your-service. O de filmes e o de localização estão ok! Consegue-se usar bem. O de tempo tem um problema com a página de origem – pesquisando outras, se souberem de alguma, avisem!!

O serviço de localização – passa-se as coordenadas latitude e longitude – e obtém-se informações como a cidade, estado, rua, país, número, etc. Interessante para se usar com Geolocation!!! Somando-se a isso, pode usar o serviço de filmes para saber que filmes está passando na sua cidade!!!

Para testarem, deixo aqui alguns links para que possam testar os serviços:

Usem a vontade os serviços!!! Já sei que tem várias pessoas usando!! 😀

Usando PUT e DELETE no Silex

Uma pequena dica no Silex que deve ser a dúvida de MUITA gente trabalhando com ele: como usar outros métodos sem ser GET e POST no Formulário.

Antes, era mais simples, mas nas versões mais novas, precisamos de duas etapas. Primeiro, em qualquer local antes do famoso $app->run, coloque o seguinte:

Symfony\Component\HttpFoundation\Request::enableHttpMethodParameterOverride();

Este trecho está dizendo ao Silex que estou permitindo sobrescrita do métodos HTTP. Assim, posso configurar um formulário para usar PUT e DELETE ao invés dos “consagrados” GET e POST:

<form action="form.php" method="post">
  <input type="hidden" name="_method" value="put" />
  ...
</form>

Assim, mudamos o método de post (que está configurado na tag form) para put (configurado usando uma tag input do tipo hidden com valor put). Não se restringe a esses dois métodos. Podemos usar outros, como HEAD, PATCH, OPTIONS, etc.

Espero que esta dica tenha ajudado, pois demorei pra achar como faz isso no Silex e essas pequenas dicas ajudam no dia a dia. E serve pra futuras referências pra mim! 😀

CSS for Developers and Out of the Box!!

Estive ontem – 01/10/2012, segunda-feira – no #horaextra Salvador. Mais uma vez uma boa dose de conversas sobre TI, discussões sobre testes, TDD, BDD, agilidade, #startupdojoba, etc. São boas horas de engradecimento pessoal e profissional.

Durante as conversas surgiu aquele papo de que ninguém gosta de CSS. Cada vez mais descubro que estou sozinho! Funcionalidades de um site, portal, sistema fazem diferença, mas, cada vez mais, vejo que um bom design e usabilidade bem trabalhada prende as pessoas no site. São dois vetores que, quanto maior a influência, mais usuários. Funcionalidade… BOM!! Site bonito… BOOOM!!!! Usabilidade 10… MUUUUUITO BOOOOOOOM!!!!!!! Continue lendo “CSS for Developers and Out of the Box!!”

Silex Micro Framework – parte 1

Silex Framework

Venho estudando e usando o Silex há algum tempo já! Estou num projeto pequeno para atualização de mídias do desktop de todas as máquinas da empresa (~10 mil empregados). Vi uma oportunidade de usá-lo e trabalhar com REST. Usando o Silex, adicionei algumas classes e deixei ele um pouco mais fácil de trabalhar, principalmente no que se refere ao uso do Doctrine e de autorização e autenticação (usamos LDAP). Depois conto mais sobre o que fiz, mas queria mostrar como ele funciona e se é ou não interessante usá-lo. Continue lendo “Silex Micro Framework – parte 1”

Handlers com prazo de validade!

No projeto que estou atualmente, uma das ferramentas que mais utilizo é o jQuery! Até porque o Strophe – biblioteca de comunicação com servidor XMPP – usa bastante ele. Uma das coisas com que me deparei no projeto usando jQuery foi a necessidade de fazer com que um evento ocorresse apenas uma vez sobre um elemento. Mais especificamente, um click em cima de um item de menu.

Dava até pra fazer usando algo como isso: Continue lendo “Handlers com prazo de validade!”