set enc=utf-8

ShareThis

Aleluia!

ShareThis

Pra piorar, ainda esta semana uma outra atualização de pacotes removeu o ponto (.) do teclado. Você apertava o ponto, na tela aparecia uma vírgula. Esse último problema eu acabei resolvendo com ajuda desse post do Ubuntero, mas resolver o problema maior do teclado não está fácil. Minha última atualização do Ubuntu (quando subi para a 8.04) já havia provocado o mesmo problema, mas como agora a distribuição adotou um tal de HAL, minha antiga solução não serve mais.

Quando eu conseguir arrumar o problema do teclado volto a postar.

ShareThis

O que acabou criando discórdia entre os desenvolvedores do PHP e os usuários da linguagem foi a decisão do core team de substituir o então separador de namespaces :: por uma contra barra (\).

Ou seja, código que você futuramente escreveria assim:

Meu::belo::namespace

Escreverá assim:

Meu\belo\namespace

Contra-barra é melhor ou pior que dois pontos? Na verdade pra mim tanto faz, acho que nunca vou utilizar namespaces quando estiver programando PHP. Não que eles não sejam úteis, mas nunca cheguei a escrever grandes bibliotecas em PHP. Quando o fiz, não tive problemas em distribui-las por diretórios, utilizando convenções razoáveis para nomes de classe. Mas, sim, é verdade, é melhor escrever isso (não sei se esta será a sintaxe escolhida):

using MeuLongoPrefixoParaEvitarConflito;

class FrontController {
}

class FrontControllerHelper {
}

Do que escrever isto:

class MeuLongoPrefixoParaEvitarConflito_FrontController {
}

class MeuLongoPrefixoParaEvitarConflito_FrontControllerHelper {
}

O exemplo acima, na minha opinião, justifica a adição de namespaces à linguagem. Eu não escrevo frameworks PHP, mas quem escreve certamente vai agradecer muito.

Por outro lado, acho que namespaces chegaram tarde demais. Afinal, a linguagem já possui uma sopa de funções lançadas no namespace global (em torno de 3000 funções, se não estou enganado). Evidentemente nenhuma dessas funções será remanejada para um namespace adequada num futuro próximo (em nome da compatiblidade retroativa).

ShareThis

Vá até o site de download da Adobe. Escolha a versão “tar.gz para Linux”. Após o download, desempacote o arquivo:

tar xzf install_flash_player_10_linux.tar.gz

E comece a instalação:

cd install_flash_player_10_linux/
sudo ./flashplayer-installer

Quando perguntado sobre “path of the Mozilla, Netscape, or Opera browser”, eu digitei:

/usr/lib/firefox-3.0.3

Acredito que isso seja algo específico do Ubuntu (a versão exata do Firefox, obviamente, dependerá da configuração do seu sistema). Nas últimas vezes que precisei instalar o Flash eu costumava digitar /usr/lib/mozilla-firefox, mas dessa vez não funcionou. Se tiver problemas com a sua distribuição, tente encontrar dentro de /usr/lib um diretório que tenha um nome como mozilla ou firefox, e então teste todos eles.

Bom, para testar se tudo deu certo, abra seu Firefox e, por exemplo, vá até o YouTube. Abra qualquer vídeo e teste se o vídeo toca corretamente. Se sim, clique com o botão direito do mouse sobre o vídeo. Nessa hora aparecerá um menu contextual, e você verá “About Flash Player 10″. É uma forma simples de verificar se o Firefox está utilizando a nova versão ou a antiga versão do plugin Flash.

ShareThis

E como fazer caso seja necessário, no seu contexto, ter acesso ao username e password presentes nesse arquivo? Acredito que esses dados não estejam disponíveis em nenhum dos objetos que o Rails instancia (eu procurei), certamente por questões de segurança, mas se você realmente precisa carregar esses dados, eis aqui uma forma bem simples.

De preferência dentro de um controller da sua aplicação (como o ApplicationController), você pode definir esta linha:

class ApplicationController < ActiveRecord::Base
  @@db_config = YAML.load_file("#{RAILS_ROOT}/config/database.yml")[RAILS_ENV]
end

Agora você tem em @@db_config um hash (cujas chaves são strings, e não símbolos) com tudo aquilo que você precisa. Digamos que seu config/database.yml tivesse esta cara:

production:
  adapter: mysql
  database: teste_production
  username: teste
  password: teste
  timeout: 5000

development:
  adapter: mysql
  database: teste_development
  username: teste
  password: teste
  timeout: 5000

Se o servidor da aplicação está rodando em modo de desenvolvimento, então a constante RAILS_ENV guarda development. Por conseqüência, @@db_config['database'], por exemplo, guarda teste_development.

Por ter sido declarada no escopo de classe de ApplicationController, nesse exemplo @@db_config estaria disponível em todos os métodos de todos os seus controllers.

ShareThis

Outra dica importante é que, se você usa Linux, recomendo que abra o arquivo utilizando o kchmviewer, que renderiza o documento com uma ótima qualidade. Já o xchm deixa esse documento em especial bem pobre, sem a formatação original, e nem dá vontade de utilizar.

A versão atual do arquivo conta, além da documentação do jQuery, com a documentação completa do conjunto de extensões jQuery UI (que utilizo e recomendo).

ShareThis

Nomenclatura

Durante o texto vou me referir à função $ como função jQuery, pois na verdade elas são a mesma coisa. A diferença é que a função $ não estará disponível se você optar por utilizá-la sem conflitos.

Como começar

Antes de escrever qualquer código JavaScript, faço questão de utilizar aquela técnica clássica onde o nosso código JS começa a ser executado apenas quando o DOM terminou de ser carregado:

$(document).ready(function() {
    // aqui vai o código específico da sua aplicação
});

Esse código eu deixo em um arquivo externo, e o referencio a partir da tag <script> presente no meu template HTML (independente do framework que você estiver - ou não - utilizando, manter o código JS fora do seu template HTML é uma forma simples de separar apresentação e comportamento).

Deste ponto em diante passo a omitir essas linhas de inicialização. Todo o código que for exibido pode ser posicionado na linha 2 da listagem de código acima.

Encontrando elementos

Cedo ou tarde você precisará encontrar elementos do seu documento e manipulá-los. Na verdade, boa parte da minha programação JavaScript consiste disso. Com o jQuery, qualquer ação começa com uma chamada à função jQuery, e com esta não poderia ser diferente. Para encontrar um elemento você pode passar uma string que atenda a especificação da biblioteca para seletores. Alguns exemplos:

// todos os parágrafos contendo a classe "warning"
$('p.warning');

// todas as checkboxes dentro do elemento de id "users_list"
$('#users_list input[type=checkbox]');

Fazendo alguma coisa com os elementos

Encontrar os elementos e não fazer nada com eles não serve pra muita coisa. Por exemplo, vamos imaginar que você queira fazer a seguinte operação: quando o usuário clicar em um link com a classe help, vamos mostrar a ele um alerta. É algo bem estúpido, e como esperado, simples de fazer:

$('a.help').click(function() {
    alert('Você clicou num parágrafo de ajuda!');
});

A função jQuery, quando recebe uma string, irá retornar um outro objeto jQuery, contendo internamente uma lista de todos os elementos encontrados no documento que satisfazem a sua consulta. Como esse retorno é um outro objeto jQuery, você já pode realizar uma chamada de função sobre esse objeto (neste caso, click). Veremos mais adiante como levar esse conceito ao extremo.

Parando eventos

Quando definimos o evento para cliques sobre links com a classe help, não evitamos que a URL especificada no atributo href do link fosse seguida pelo navegador. Se esse link tinha como href o símbolo #, então após o clique a barra de rolagem vertical (se existia) foi movida para o topo do documento.

Para evitar esse comportamento, precisamos utilizar o objeto de tipo Event que o jQuery envia para a nossa função de processamento de eventos. Veja como:

$('a.help').click(function(e) {
    // o link não será seguido pelo navegador
    e.preventDefault();
});

Caso você esteja observando a submissão de um formulário, pode utilizar a mesma técnica para evitar que o formulário seja submetido.

$('form#create_user').submit(function(e) {
    // o formulário não será enviado
    e.preventDefault();
});

Esses são apenas alguns dos eventos disponíveis, aqui você pode encontrar todos eles.

Manipulando as classes de um elemento

Você tem à disposição 3 métodos básicos para manipular as classes de elementos. Aprenda a utilizá-los com exemplos:

// adiciona a classe "teste" ao parágrafo
$('p:first').addClass('teste')

// remove a classe "teste" ao parágrafo
$('p:first').removeClass('teste')

// adiciona (se não existir) ou remove (se existir) a classe "teste" ao parágrafo
$('p:first').toggleClass('teste')

Acessando atributos

Acessar atributos é algo trivial com jQuery:

// recupera o "href" do link
var id = $('a#add_another_row').attr('id');

// define o "href" do link
var id = $('a#add_another_row').attr('href', '#');

Note que attr atua apenas sobre o primeiro elemento interno a um objeto jQuery. Por atributos, nesse caso, entende-se as propriedades de um elemento HTML (diferente de suas propriedades de estilo).

Definindo estilos de elementos

Sempre que possível procuro manter todos os estilos associados ao documento dentro das minhas definições CSS. Assim, se quero modificar o visual do sistema, sei que é apenas lá que devo mexer. Mas em algumas situações me vi obrigado a quebrar essa regra. São casos onde você precisará manipular propriedades CSS específicas de elementos.

$('a#do_something_crazy').click(function(e) {
    e.preventDefault();

    // vamos recuperar a cor do link
    alert("Agora o link tem cor " + $(this).css('color'));

    // agora vamos alterar apenas a cor do link
    $(this).css('color', 'blue');

    // agora vamos alterar as propriedades CSS "color" e "background-color" do link
    $(this).css({
        color: 'green',
        backgroundColor: 'red'
    });
});

Na listagem acima apresentei as 3 formas de utilizar a função css:

• css(propriedade): recupera o valor de “propriedade”
• css(propriedade, valor): define o valor de “propriedade” como “valor”
• css(objeto): define diversos pares de “propriedade/valor”

Encontrando elementos ancestrais

Imagine que você está definindo um tratador de evento sobre um link. Esse link está dentro de uma célula de tabela (td), que por sua vez está dentro de uma linha de tabela (tr). No contexto do tratamento desse evento, seu objeto atual, associado à variável this, é esse link. Nesse momento você percebe que precisa, por algum motivo, do id da linha onde está link (isso acontece bastante comigo). Para esses casos utilize a função parents, que retorna todos os ancentrais do elementos do objeto jQuery atual.

$('a#do_something').click(function(e) {
    var rowId = $(this).parents('tr:first').attr('id');
});

Como parents retorna todos os ancestrais, passamos à função um seletor jQuery, indicando que queremos apenas a primeira linha. Simples, rápido e indolor.

Encontrando elementos filhos

Já vimos como encontrar ancestrais. Quando você quer fazer o caminho inverso, é só utilizar a função find. Por exemplo, imagine que você está processando a submissão de um formulário e precisa encontrar vários campos desse formulário, para validá-los. Se eles não possuem id’s associados, o find será uma mão na roda.

$('form#authentication').submit(function(e) {
    e.preventDefault();
    var username = $(this).find('input[name=username]').val();
    var password = $(this).find('input[name=password]').val();
});

Valores de elementos

Utilize a função val para descobrir o conteúdo de determinados elementos (como o conteúdo de uma caixa de texto, por exemplo):

$('#username').val();

Funções semelhantes são text e html.

Realizando tarefas de acordo com o navegador do usuário

Como avisar ao seu usuário que você, por exemplo, está utilizando uma biblioteca baseada no elemento canvas, e que a experiência desse usuário no Internet Explorer não será tão boa (baixa performance)? Verifique que navegador ele está utilizando:

if ($.browser.msie) {
    alert('Experimente o Firefox!');
}

Você pode realizar testes para outros navegadores também, é claro. Dê uma olhada na documentação dos utilitários da biblioteca.

Inserindo elementos no documento

Volta e meia crio pequenos frameworks baseados em classes de elementos, de forma a evitar a repetição de código HTML. Nesses casos sempre é bom poder inserir código HTML arbitrário após a carga do documento. Eis como fazer isso com jQuery:

$('<p>Este parágrafo foi inserido dinamicamente!</p>').appendTo('body');
$('<p>Este parágrafo também foi inserido dinamicamente!</p>').prependTo('body');

Como podemos ver, quando a string enviada à função jQuery não é reconhecida como um seletor, ela é reconhecida como um elemento a ser criado (não sei se é exatamente essa a implementação interna, mas se você pensar assim não terá problemas para entender a diferença entre enviar uma string como seletor ou um novo elemento HTML).

As funções appendTo e prependTo são muito úteis nesses casos. Com elas você indica que quer inserir um elemento como último ou como primeiro filho do elemento passado como parâmetro.

Sendo honesto: muitas vezes preciso inserir muito mais HTML do que uma linhazinha dessas. Em situações reais já precisei inserir grandes trechos de formulário, por exemplo. Não tenha medo: insira uma contra-barra ao fim de cada linha e prolongue sua string HTML por diversas linhas:

$('<p class="input_row"> \
   <input id="username" type="text" /> \
   </p> \
   ...'
  )
  .prependTo($('form#auth'));

Criando um cache

Quando você precisa fazer 2 operações diferentes utilizando o mesmo seletor, mas em pontos diferentes do código, é interessante atribuir o objeto jQuery que contém o resultado da consulta a uma variável, para evitar o custo de processamento de uma nova consulta.

Portanto, isto não é legal:

$('a.special').click(function() {
    //
});

// muitas linhas depois...

$('a.special').hover(function() {
    //
});

Isto é legal:

var $specialLinks = $('a.special');

$specialLinks.click(function() {
    //
});

// muitas linhas depois...

$specialLinks.hover(function() {
    //
});

Note que utilizei um cifrão como prefixo para a variável $specialLinks. Considero isso uma boa prática dentro de código JS que utilize jQuery, pois deixa bem claro quais variáveis são objetos jQuery e quais não são. Se você for estudar o código de plugins é provável que encontre essa mesma convenção sendo seguida.

Encadeando funções

Como disse anteriormente, toda função jQuery que você invoca a partir de um objeto jQuery retorna o próprio objeto jQuery. Isso significa que em vez de fazer isto:

var $newP = $('<p class="warning"></p>');
$newP.css('width', '100%');
$newP.appendTo('body');

Você pode fazer isto:

$('<p class="warning"></p>')
    .css('width', '100%')
    .appendTo('body');

Sim, você pode encadear quantas chamadas quiser.

Em inglês o termo para esse encadeamento de chamadas é chaining. Quando vi o código disposto dessa forma pela primeira vez não gostei nenhum pouco, pensei: “nunca vou fazer isso!”. Mas hoje, se você abrir meus arquivos JS verá encadeamento de chamadas por todo lado. Acho que isso vicia, simplesmente.

Se você for utilizar aquele parágrafo em algum outro ponto do código, crie um cache para ele no momento da criação:

var $warningP = $('<p class="warning"></p>')
    .css('width', '100%')
    .appendTo('body');

Utilizando plugins

Sem plugins o jQuery já teria sido uma grande idéia, mas com a possibilidade de definir novas funções para o objeto jQuery, fica difícil reclamar dessa biblioteca. Em geral um plugin jQuery tem um nome bastante sugestivo (como tablesorter), e o nome dele indica exatamente qual o nome da função que corresponde ao plugin.

Para utilizar qualquer plugin jQuery basta incluir no seu cabeçalho HTML uma referência (tag <script>) ao código-fonte do plugin após ter referenciado o código-fonte do jQuery. Digamos que estejamos utilizando o plugin tablesorter, capaz de dar à tabelas HTML poderes de ordenação de colunas. Eu utilizaria o plugin da seguinte forma:

// primeiro verifique se o plugin foi carregado
if ($.fn.tablesorter) {
    $('table.record_list').tablesorter();
}

Com o código acima aplicamos o comportamento oferecido pelo plugin a todas as tabelas de classe record_list do documento.

Note que a grande maioria dos plugins opta pela simplicidade: eles funcionam sem que você passe parâmetros para a função principal. Se você precisar passar parâmetros, em geral você irá passar um objeto literal, o qual sobrescreverá as opções padrão do plugin.

jQuery e Firebug

Dentro de um projeto que utiliza o jQuery, tire o máximo de proveito da biblioteca. Se aquele seletor jQuery que você escreveu não está funcionando, copie e cole o código no console do Firebug e veja a resposta. Se a resposta do console for simplesmente um array vazio, quer dizer que seu seletor não casou com nenhum elemento. Caso contrário, você verá uma representação dos elementos que casaram.

Além de fazer consultas no documento, gosto de manipular os elementos que encontro via Firebug. Por exemplo:

$('p.warning:first').css('background-color', 'red');

Acho mais fácil que utilizar o editor de CSS embutido no Firebug.

Um exemplo completo

Nosso documento contém uma tabela com a classe record_list, a qual está envolvida por uma div#table_panel. Após o carregamento da página, vamos adicionar um link abaixo dessa tabela. Esse link, quando clicado, adiciona uma nova linha à tabela. Este exemplo sozinho não serve para nada, mas utilizei a mesma idéia aqui no meu projeto para criar uma tabela que exibia todas as curvas de um gráfico. Para adicionar mais uma curva ao gráfico, eu utilizava essa mesma abordagem: primeiro adicionava a nova linha, e em seguida gerava o gráfico novamente, via Ajax.

$(document).ready(function() {
    $('<a href="#" id="create_new_line">Criar nova linha</a>')
        .click(function(e) {
            e.preventDefault();
            $('<tr> \
                 <td>...</td> \
                 <td>...</td> \
                 <td>...</td> \
               </tr>'
            )
            .appendTo('table.record_list:first');
        })
        .appendTo('#table_panel');
});

ShareThis

Semana passada, estudando um certo script PHP, me deparei com uma validação manual de data que utilizava o seguinte código (talvez as mensagens para o usuário não fossem exatamente essas, é verdade):

if (!ereg('[0-9][0-9][0-9][0-9]-[0-9][0-9]-[0-9][0-9]_[0-9][0-9]:[0-9][0-9]:[0-9][0-9]', $date)) {
    echo 'Data inválida! Se deu mal!';
} else {
    echo 'Hoje passa... mas não acostuma!';
}

A idéia é validar uma data no formato AAAA-MM-DD_HH:mm:SS. Não ficou muito óbvio, certo? Expressões regulares já são complexas por natureza, então é um pecado mortal complicar aquelas que podem ser definidas de maneira simples.

Como a função ereg suporta expressões regulares estendidas (e há exatamente esse exemplo na documentação oficial!) o código pode ser reduzido para:

if (!ereg('[0-9]{4}-[0-9]{2}-[0-9]{2}_[0-9]{2}:[0-9]{2}:[0-9]{2}', $date)) {
    echo 'Data inválida! Se deu mal!';
} else {
    echo 'Hoje passa... mas não acostuma!';
}

A Dona Legibilidade de Código agradece!

ShareThis

Infelizmente há programadores que gostam dele, e usam como bengala para situações onde um simples array associativo daria conta do recado. Mas saiba que um dia (uma semana, um mês, um ano depois) alguém vai pegar esse código, e essa pessoa vai sofrer.

Se você não sabe o que é o $$, recomendo que continue lendo, pois um dia você pode precisar dar manutenção em um código desses. Se já sabe, por favor, deixe um comentário dando uma razão racional para utilizá-lo (e não “eu tenho preguiça de escrever arrays associativos”).

Para exemplificar o uso do $$, vamos considerar a idéia (insegura) de transformar todas as chaves do array superglobal $_GET em variáveis. O código é o seguinte:

foreach ($_GET as $key => $value) {
    $$key = $value;
}

Ok, você não entendeu o que está acontecendo. Imagine que o script que define esse código é o test.php, e que ele está hospedado em http://www.example.com/test.php. Vamos apontar nosso browser para esse script e passar 2 variáveis: color e height. A URL seria:

http://www.example.com/test.php?color=red&height=3

O que o loop foreach está fazendo? Para cada par chave/valor ($key/$value) do nosso array ($_GET), é definida uma variável cujo nome é igual à chave do array ($key), e seu valor é igual ao valor para o qual aquela chave do array aponta. Não entendeu nada ainda? Vamos de novo:

$$um_variavel_qualquer referencia uma variável cujo nome depende do valor presente na variável $uma_variavel_qualquer.

Outro exemplo:

$nome = 'Caio';
$$nome = 'Programador';
echo $Caio;

Esse programa dá como resultado:

Programador

Portanto, após a execução do foreach, as variáveis $color e $height estarão disponíveis. Isso pode parecer legal à primeira vista, mas não é. Fora as questões de insegurança que ela levanta (que você pode encontrar facilmente pelo Google), é complicada pegar um script não-MVC de, digamos, 500 linhas, que você não escreveu, e tentar entender quando a variável $um_nome_muito_maluco foi definida. Você vai subindo pelo script, chega ao topo e viu que na verdade ela não foi definida explicitamente, mas sim dentro de um loop foreach que utiliza o mágico $$. Você já terá perdido uns 10 minutos (sendo otimista) no momento em que se deu conta disso, e vai se lembrar deste post (eu espero).

Portanto, tenha piedade do programador que dará manutenção no seu código no futuro. Lembre-se de que esse programador pode ser você mesmo.

ShareThis