Angularjs: Um framework para facilitar sua vida

Olá pessoal.

Semana passada houve uma evento inusitado: Uma reunião do Google Developer Group da Bahia na UNIRB em Salvador e Marlon, que foi um dos organizadores do evento, entrou em contato comigo para que eu palestrasse sobre Angularjs. Para mim foi uma surpresa muito boa participar deste evento e poder colaborar com o mesmo. Daí nasceu a palestra “Angularjs: Um framework para facilitar sua vida”.

Houveram várias outras palestras. O Marlon Carvalho (@marlonscarvalho) fez uma palestra excepcional mostrando como é simples o desenvolvimento de extensões para o navegador Google Chrome. O porquê criar, as facilidades encontradas e outros pontos.

Logo após veio a palestra do Felipe Matheus, que veio falar sobre mundo Java e todas as possibilidades que uma linguagem multiplataforma pode proporcionar aos desenvolvedores, abordando desde o histórico até a etapa atual e novas idéias referentes ao ecossistema Java.

Após Felipe, chegou a minha vez. A palestra seria inicialmente um overview sobre o Framework da google, mostrando seus pontos fortes, seu paradigma de programação descritiva e outros pontos que fazem do angularjs a escolha ideal em projetos diversos. Os slides estão disponíveis no meu slideshare.

Evento muito bom e que agregou conteúdo a toda a comunidade (parabéns ao evento por sinal Marlon)! Logo após, graças ao amigo Jonata Weber, ocorreu um hangout descontraído sobre o Angularjs com o pessoal do DEV FSA de Feira de Santana, Bahia. Segue o vídeo do Hangout:

Criei também um repositório no github com os exemplos que foram mostrados na palestra. Dentre eles estão:

• Exemplos de utilização de recursos, consumindo a API de buscas do Twitter;
• Exemplos de diretivas, mostrando como criar tags e trabalhar o html como se fosse um arquivo xml;
• Exemplos de utilização de data-binding, criando um micro editor online, onde o usuário cria os seus snippets e pode testá-los em tempo real, vendo a modificação(exemplo: onde possuir a tag <lorem></lorem> será inserido um texto do site lorem ipsum e assim por diante);

Link do repositório do projeto no Github: https://github.com/willmendesneto/palestra-angularjs;

Obrigado e até mais!

Tablesorter: configurações e mapeamentos via classes css

Olá pessoal

Ao utilizar o plugin tablesorter, tive alguns problemas com ordenação de valores, datas e outros atributos. Acabei pesquisando e vi que não era o único.

Vi algumas soluções baseadas no plugin Jquery metadata, mas estava querendo evitar este overhead, já que posso trabalhar com configurações de classes a partir do próprio jquery.

Baseado em uma solução proposta no próprio stackoverflow (http://stackoverflow.com/questions/5672993/how-to-ignore-th-with-specific-class-name-in-tablesorter), acabei criando uma própria com os seletores.

Baixe o arquivo tablesorter no site do projeto

Abra o arquivo jquery.tablesorter.js e modifique:

– A variável “defaults” vai ficar com mais um atributo abaixo da chave debug : false

    debug: false,
noSorterClass: 'no-sorter'

– O método “checkHeaderMetadata” agora irá utilizar o valor da classe configurada para não inserir a coluna como “sortable”

function checkHeaderMetadata(cell, noSorterClass) {
if ((($.metadata) && ($(cell).metadata().sorter === false)) || $(cell).hasClass(noSorterClass)) {
return true;
};
return false;
}

E agora iremo modificar o método que utiliza o checkHeaderMetadata para que envie o valor da classe configurada. O método que o utiliza é o buildHeaders:

modifique o conteúdo

if (checkHeaderMetadata(this) || checkHeaderOptions(table, index)) this.sortDisabled = true;

por este


if (checkHeaderMetadata(this, table.config.noSorterClass) || checkHeaderOptions(table, index))    this.sortDisabled = true;


Agora em um arquivo javascript insira as configurações do tablesorter. Utilizei as configurações padrão do próprio plugin Tablesorter, então só vamos inserir o seguinte código:


$(function() {
function setupTablesorter() {


$.tablesorter.addParser({
id: "money",
is: function(s) {
return true;
},
format: function(s) {
return $.tablesorter.formatFloat(s.replace(/ /, '').replace('R$', '').replace(/\./, '').replace(/\,/, '.').replace(new RegExp(/[^0-9,]/g),""));
},
type: "numeric"
});


var classHeaders = {
'text': '.sorter-text',
'digit': '.sorter-digit',
'currency': '.sorter-currency',
'ipAddress': '.sorter-ipAddress',
'url': '.sorter-url',
'isoDate': '.sorter-isoDate',
'usLongDate': '.sorter-usLongDate',
'shortDate': '.sorter-shortDate',
'time': '.sorter-time',
'metadata': '.sorter-metadata',
'digit': '.sorter-digit',
'money': '.sorter-money',
};

        var tableHeaders = '', separator;

        $('.tablesorter').each(function (i, e) {

            var self = $(this);
$.each(classHeaders, function(key, value){
self.find(key).each(function (pos) {

                    if(separator == undefined)
separator = ',';

                    tableHeaders += separator +' '+ $(this).index()+' : { sorter: "'+key+'"}';
});
});

            $(this).tablesorter({ widgets: ['zebra'], dateFormat: 'uk', noSorterClass: 'no-sorter', headers: tableHeaders });
});
}

    if($('.tablesorter')[0])
setupTablesorter();


});

E agora é cria a tabela e inserir a classe “tablesorter” e as classes referentes a cada configuração em suas respectivas tags “th” e pronto! Está feito!Os arquivos estão disponíveis no meu Github para quem quiser porpôr melhores soluções. e farei um gist com eles.

Link github: https://github.com/willmendesneto/tablesorter

Obrigado a todos e até mais!

Plugin Jquery Text Resize

Inicialmente agradeço a todos que colaboraram diretamente ou indiretamente neste projeto, especialmente a Thiago Teles, colaborador direto para a criação do plugin.

O plugin  “jquery.text.resize.js” é um plugin javascript que manipula o tamanho de fonte do texto, juntamente com algumas outras opções como valor da variação da fonte, persistência da fonte com a utilização de COOKIE, limitar a quantidade de clicks para incremento/decremento da fonte, dentre outras opções.

A quem interessar o projeto “Jquery Text Resize” está disponibilizado para download no Github ou na própria página do projeto:

Github: https://github.com/willmendesneto/Jquery-Text-Resize

Página do projeto: http://willmendesneto.github.com/Jquery-Text-Resize.

Criando link com TARGET para validação W3C

Olá pessoal.

Aqui vai um código simples para que seu site passe na validação W3C no quesito de links, ou as tags “<a></a>”.

Se você escrever um código no seu HTML desta forma e tentar validar seu projeto, visualizará alguns erros de validação. Mas porque? A W3C não aceita o atributo target=”_blank” do link e mostrará um erro a ser corrigido no seu projeto. Uma saída simples, fácil e prática é implementar este atributo via Jquery.

Basta trabalhar com o atributo rel do link. Como? Veja o código abaixo:

Como ficaria o conteúdo da página “index.html”

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Link com atributo Target para validação W3C</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="jquery.functions.js"></script>
    </head>
    
    <body>
        <h1>Página de teste</h1>
        <a rel="external" href="https://willmendesnetoprojects.wordpress.com">Link Com Target</a>
    </body>
</html>

como ficaria o conteúdo da página “jquery.functions.js”


$(document).ready(function(){

    $(‘a[rel=external]’).attr(‘target’,’_blank’);

});

E pronto! Seus links agora estarão redirecionando para a página que queira. O jquery fará o trabalho de atribuir o atributo target a todos as tags “<a></a>” que possuam o atributo rel=”external”

Antes:


<a href="https://willmendesnetoprojects.wordpress.com" rel="external" >Link Com Target</a>


Depois:


<a href="https://willmendesnetoprojects.wordpress.com" rel="external" 

target="_blank" >Link Com Target</a>


Simples e prático.
Espero ter ajudado.

Créditos:

Wilson Mendes “willmendesneto@gmail.com”

Thiago Teles: “thiagoteles.designer@gmail.com”