Para quem tem twitter, pode me seguir e fazer perguntas sobre a tecnologia em tempo real, para quem não tiver, pode deixar comentário no blog pois ficarei o tempo todo on line. Não atenderei todas as perguntas, irei filtrar as mais interessantes, portanto caprichem nas perguntas (se houver) que na primeira oportunidade que surgir perguntarei ao Gustavo e postarei no resumo do blog a resposta, sei que muitas das minhas dúvidas são as dúvidas de outros que começaram a trabalhar com EFL a pouco tempo, portanto muita coisa será respondida no resumo que farei do curso e não de forma imediata.

Qualquer coisa, seja sugestão ou crítica comenta ai.

Update: Posts só sairão, no final de semana. Tá cruel, muita coisa pra fazer/estudar.

Este post visa ser uma visão geral do que é e como funciona esta tecnologia e está respectivamente divido em duas seções: O que é ? e Como Funciona ?.

O que é ?

EFL é um conjunto de bibliotecas escrita em C para facilitar o desenvolvimento de um gerenciador de janelas baseado no X, o famoso Enlightenment, o qual possui muitos recursos eye candy sem precisar de gerenciadores de janela com suporte a aceleração através de OpenGL, ex: compiz. E sempre fez um ótimo trabalho sem esse tipo de recurso.

Segui alguns vídeos coletados no youtube do Enlightenment em ação.

E existem outros mais. É possível implementar funcionalidades muito parecidas com as do iphone, por exemplo:

E olha um teclado virtual feito com EFL baseado no teclado do iPhone, feito pelo Gustavo Barbiery, um dos geeks que trabalha com EFL aqui no Brasil e que por sinal próxima semana estará em Manaus para dar um treinamento de EFL na FPF¸após eu ter tido muitas conversas com o chefinho.

E como o EFL faz muito com pouco processamento, foi portado para outras arquiteturas como ARM, onde roda em dispositivos como o Internet Tablet N810 da Nokia e existem algumas aplicações rodando com EFL, mas a aplicação de referência de uso do EFL no Maemo é o Canola, que é um player para o maemo. Alguns vídeos do canola em ação:

E roda também em celulares, e já está sendo feito uma plataforma completa para dispositivos móveis, o Illumine, e um dos geeks é um dos criadores do EFL, o Rasterman (Carsten Haitzler) e olhem só sua gang que já roda illumine:

Rasterman Gang's

E tudo isso e muito mais foi desenvolvido primariamente com EFL, Ficou afim de entender melhor e começar a desenvolver ? Bom…. posso guiá-lo pelo caminho que percorri no estudo.

Como funciona ?

Já que na primeira parte instalamos as técnologias básicas(ecore, evas, edje), vamos dá uma olhada em seu funcionamento.

Bem, vamos começar pelo começo.

Arquitetura completa do EFL.

Concentre-se na parte azul da arquitetura, o core EFL.

Evas é o canvas onde tudo é renderizado e também gera sinais para aplicação.

Ecore é o responsável por capturar todos os eventos de uma janela originados do X11 e direcionar esses eventos para os devidos callbacks, possui também um mecanismo de MainLoop e uma série de ferramentas que auxiliam o trabalho com EFL e tarefas comuns de programação.

Alguns componentes do Ecore:

• Ecore_Con – Comunicação em rede
• Ecore_IPC – Comunicação entre processos
• Ecore_Config – Sistema de configuração
• e outros.

Edje é um meio de separar o código da aplicação do código da interface, basicamente é o responsável por te prover o mecanismo de manipulação de objetos da interface, ou seja, manipular o canvas(evas) de forma descritiva e orientada a estados. Apartir do momento que você faz essa separação ou dividi a aplicação em camadas, você imediatamente ganha vantagens, como por exemplo no Enlightenment e no canola a interface é feita com Edje e por isso possui um mecanismo de Temas(Themes) avançado e flexível de temas, ou seja, você pode mudar toda a interface sem mexer no código da aplicação.

Fazendo uma analogia a arquitetura de desenvolvimento web, seria mais ou menos assim, olhe a figura do MVC abaixo

Sabemos que no desenvolvimento web, o Model é responsável pela lógica de negócio da aplicação, o Controller é responsável por capturar as requisições que vem da View e processa-lás junto a Model e então devolver a resposta a View, a View é a camada de apresentação que no contexto web é o html/css/javascript.

Olhando essa arquitetura MVC podemos fazer a seguinte analogia, que o View é o Edje, o Controller é o Ecore. E o Evas é o browser onde tudo é renderizado.

Consegui explicar alguma coisa ? Se não,  deixe um comentário.

Falei alguma besteira ? Se sim, deixe um comentário corrigindo e colocarei os devidos créditos.

Próximos posts (Aguardem):

Estudando python EFL – parte 3 (Ecore-Evas)

Estudando python EFL – parte 4 (Edje)

O Evento ocorreu no auditório da UniLasalle de manaus e contou com auditório cheio, eu inclusive que cheguei 15 minutos atrasado tive que sentar no chão .

Bom, o evento foi composto por 2 palestras:

• Palestra 1:
  • WEB 2.0 Oportunidades, e novas tendências. Álvaro Mota Gonçalves, INdT
  • Open-WEB. Harald Kirschner, WEB 2.0 developer and co-developer Mootools project

• Palestra 2
  • WEB 2.0 v Overview de Tecnologias WEB 2.0. Harald Kirschner, front-end web developer specialist, core developer of MooTools project

O Álvaro Mota Gonçalves começou falando da estratégia da Nokia que mudou, e agora tem um foco mais aberto para o provimento de serviços web e levar a mesma experiência encontrada no uso de serviços web no pc com browser só que através do celular de forma móvel(mobile), o que é uma tendência hoje em dia de fato. Uma tecnologia que corresponde a este incentivo da Nokia para com a melhor experiencia de serviços web no celular é o WebRunTime(WRT). No quesito provimento de serviços a gente pode ver a investida da Nokia com o lançamento do Ovi.

Foi dito também que o mercado de trabalho estão a procura por profissionais de desenvolvimento web2.0, não lembro qual foi o site que o Álvaro mostrou onde ele fez uma pesquisa e retornou mais de 2000 empregos em aberto para se trabalhar com web2.0, ou seja, oportunidade.

A palestra mais esperada(pelo menos por mim), era a do Harald a qual pode ser encontrada aqui , achei que ele iria se aprofundar mais na explicação de web2.0 falando sobre microformats, WRT e outros conceitos e tecnologias que ainda não parei para estudar, mais o foco da palestra dele era falar de web2.0 para pessoas que não sabiam ou sabiam pouco o que é web2.0.

O Harald falou um pouco desse “compra-compra” que vemos hoje em dia de grandes empresas comprando as menores que oferecem algum serviço interessante, e ele até comentou “Quer ficar milhionário ? É só fazer um serviço inovador e publicar na web..” e logo depois complementou “só não é tão fácil fazer um..” . Um fato que me chamou atenção foi a compra do GrandCentral pelo google, o qual eu nem fazia idéia que existia, trata-se de um serviço de gerenciamento de ligações, tem muitas funcionalidades interessantes, vale a pena dá uma olhada, é uma pena que o serviço ainda não está disponí­vel para o Brasil, mas vocé pode solicitar uma notificação quando o serviço estiver disponí­vel.

Além disso ele mostrou uma tabela de serviços comparativos, de 1.0 para 2.0

Como por exemplo:

E outros como pode ser visto na apresentação dele.

Falou que os princípios da Web2.0 são:

Open Source – Liberação das informações
Communication – Usuários
Design – Nova arquitetura de interfaces com o usuário

Pra mim ficou meio misturado a afirmação de que o relacionamento do OpenSource com a web2.0 seja a liberação de informações no sentido de Content Syndication, Web Feed(RDF, Atom e etc), WebServices e APIs na minha opnião isso tem haver com OpenData e não com OpenSource, de fato há muita semelhança no modelo colaborativo de projetos OpenSource de código aberto para com serviços OpenData de compartilhamento de informações e não dúvido que a web2.0 com a semântica de OpenData tenha se baseado no modelo colaborativo do OpenSource. Eu acredito que um termo melhor seria OpenData.

Mostrou 1 exemplo de como ganhar dinheiro com a web2.0, usando o Amazon Web Service, o qual a cada livro vendido que você indicou em seu site/blog você ganha dinheiro.(O qual estarei botando em breve no meu blog ).

Dando continuidade no quesito oportunidades, segundo Harald o que você precisa saber para arrumar um bom emprego no mercado de web2.0:

• Content Syndication
• Web feeds
• RDF
• Atom
• Web services and APIs
• Communication with XML or JSON
• REST
• SOAP(WSDL)

Algumas passagens me chamaram atenção como a do Tim O’Reilly sobre web2.0, resumindo significa que a inteligência coletiva é a base da web2.0, concordo em gênero e grau, você não ?

Houve também slides sobre Folksonomia[1], Comunicação, melhoramento de Design de interfaces com os novos conceitos RIA(Rich Internet Application) e RUE(Rich User Experience). Essa questão de trazer a experiência de uso de softwares desktop para web entre outras coisas.

Não deixou de falar dos padrões e a acessibilidade o que geralmente é ignorada em detrimento a funcionalidades “eye-candy” o que julgo muito importante e que nunca deve ser esquecida, ou seja, sua palestra também incluiu Web standards, W3C, leitores de tela, SEO e o funcionamento de softwares web, como estrutura(xhtml), apresentação(css) e etc.

Casos de uso do uso de JavaScript .

• Melhorias na interação com os forms;
• Melhorias na colaboração entre os usuários;
• Filtros e manipulação de dados
• Autocomplete (Como o google suggests)

Entrando mais na parte técnica, falou sobre o desenvolvimento, que com essa onda de informações e novos conceitos, por onde se basear , citou padrões utilizados e criados pelo yahoo, o YPatterns e das alternativas como o Ajax Pattern.

Não deixou de falar também para as pessoas com perfil empreendedor, falou sobre modelo de negócios:

• Vender API
• Vender serviços
• Vender informações

Estratégias de expansão para quem já possui serviços:

• Criar API
• Distribuir como OpenSource (Citou também meios de o fazer, através do google code)

Vendeu um pouco de jabá falando sobre o MooTools e falou um pouco sobre o porque de frameworks.

Nessa hora tomei a liberdade de lhe fazer uma pergunta tendo em vista que o que ele mostrou de exemplo nada foram diferente dos exemplos encontrados utilizando JQuery , YUI e Ext-js os quais são os que eu uso nos meus projetos.

P: Perguntei quais eram as principais diferenças entre MooTools e Jquery/YUI ?
R: Ele disse que Mootools é melhor para projetos grandes. Disse também JQuery tem mais classes prontas e que o YUI tem uma estrutura menor do que a MooTools. Na opnião dele YUI é para projetos que precisem de namespaces.

O Evento foi de importância para região, quase não se ver eventos desse tipo por aqui em Manaus. Com certeza desenvolvedores web(como eu) sentem falta.

À coordenação, meus parabéns.

[1] Recomendo a leitura deste post sobre Folksonomia pelo Revolução Etc

A idéia é escrever um conjunto de posts para compartilhar os conhecimentos adquiridos, ajudando os mais novos (assim como eu) entrar no desenvolvimento de aplicações para maemo ou desktop utilizando esta tecnologia. Pretendo nos posts ter 2 seções uma com resumo e outra explicando com mais detalhes para os que não possuem muita experiência com linux possam entender e aprender.

Para constar, estou usando o Ubuntu 8.10.

Resumido:

1. Instalar os pacotes build-essential libpng12-dev libjpeg62-dev python-setuptools librsvg2-dev python2.5-dev subversion autoconf automake autotools-dev m4 libtool cvs git-core libdbus-1-dev
   
2. Fazer o checkout do código do trunk do svn do enlightenment dos seguintes pacotes: eina eet evas ecore embryo edje etk edje_editor.
3. Compilar os códigos na seguinte ordem: eina eet evas ecore embryo edje etk edje_editor.
   
4. Fazer checkout dos bindings do efl para python do SVN: cython python-efl-utils python-evas python-ecore python-edje python-etk.
5. Instalar os pacotes na seguinte ordem: python-efl-utils python-evas.

Após instalar o python-evas, você precisa instalar os headers para compilar o python-ecore, então: python setup.py install_headers

6. Continuar a instalação dos pacotes dos bindings: python-ecore, python-edje e python-etk
   

Detalhado:

Instalar os pacotes essenciais para compilar os códigos, usando apt-get ou aptitude:

$ apt-get install build-essential libpng12-dev libjpeg62-dev python-setuptools librsvg2-dev python2.5-dev subversion autoconf automake autotools-dev m4 libtool cvs git-core libdbus-1-dev

Após instalar esses pacotes é preciso fazer o checkout do repositório do enlightenment, você pode criar uma pasta no seu home e entre no diretório:

$ mkdir $HOME/e_src

$ cd $HOME/e_src

entrar na pasta e fazer o checkout dos códigos eina eet evas ecore embryo edje etk edje_editor:

$ svn co https://svn.enlightenment.org/svn/e/trunk/eina eina

$ svn co https://svn.enlightenment.org/svn/e/trunk/eet eet

$ svn co https://svn.enlightenment.org/svn/e/trunk/evas evas

$ svn co https://svn.enlightenment.org/svn/e/trunk/ecore ecore

$ svn co https://svn.enlightenment.org/svn/e/trunk/embryo embryo

$ svn co https://svn.enlightenment.org/svn/e/trunk/edje edje

$ svn co https://svn.enlightenment.org/svn/e/trunk/etk etk

$ svn co https://svn.enlightenment.org/svn/e/trunk/edje_editor edje_editor

$ svn co https://svn.enlightenment.org/svn/e/trunk/e_dbus e_dbus

após ter feito o checkout do código, você precisar exportar os códigos para não mexer no código que veio pelo svn assim você pode aproveitar sempre as alterações do código, para atualizar sua cópia do svn basta:

$ svn up

crie uma pasta onde conterá o código exportado para compilação e entre na diretório:

$ mkdir $HOME/e_src_exported

$ cd $HOME/e_src_exported

exportando:

$ svn export $HOME/e_src/eina eina

$ svn export $HOME/e_src/eet eet

$ svn export $HOME/e_src/evas evas

$ svn export $HOME/e_src/ecore ecore

$ svn export $HOME/e_src/embryo embryo

$ svn export $HOME/e_src/edje edje

$ svn export $HOME/e_src/e_dbus e_dbus

após exportar, precisamos compilar, começaremos pelo eina e estes comandos devem ser repetidos para cada diretório:

$ cd eina

$ sh autogen.sh

$ make

$ sudo make install

$ sudo ldconfig

$ cd ..

depois o eet:

$ cd eet

$ sh autogen.sh

$ make

$ sudo make install

$ sudo ldconfig

$ cd ..

depois evas:

$ cd evas

$ sh autogen.sh

$ make

$ sudo make install

$ sudo ldconfig

$ cd ..

depois ecore:

$ cd ecore

$ sh autogen.sh

$ make

$ sudo make install

$ sudo ldconfig

$ cd ..

depois o embryo:

$ cd embryo

$ sh autogen.sh

$ make

$ sudo make install

$ sudo ldconfig

$ cd ..

depois e por último o edje:

$ cd edje

$ sh autogen.sh

$ make

$ sudo make install

$ sudo ldconfig

$ cd ..

depois o etk:

$ cd etk

$ sh autogen.sh

$ make

$ sudo make install

$ sudo ldconfig

$ cd ..

depois o edje_editor:

$ cd edje_editor

$ sh autogen.sh

$ make

$ sudo make install

$ cd ..

depois o e_dbus:

$ cd e_dbus

$ sh autogen.sh

$ make

$ sudo make install

$ cd ..

Antes de instalar os bindings é preciso instalar algumas dependências:

$ wget -c http://www.cython.org/Cython-0.10.3.tar.gz

$ git clone git://git.profusion.mobi/users/ulisses/python-dispatcher.git

E após, instale o Cython:

$ tar -zxvf Cython-0.10.3.tar.gz

$ cd Cython-0.10.3

$ sudo python setup.py install

$ cd ..

e o Python-Dispather:

$ cd python-dispatcher

$ sudo python setup.py install

$ cd ..

Após ter compilado e instalado os componentes essenciais do EFL, você precisa compilar e instalar os bindings para python, baixando os pacotes dentro do mesmo diretório pra onde exportou o código do svn:

$ svn co https://svn.enlightenment.org/svn/e/trunk/BINDINGS/python/python-evas

$ svn co https://svn.enlightenment.org/svn/e/trunk/BINDINGS/python/python-ecore

$ svn co https://svn.enlightenment.org/svn/e/trunk/BINDINGS/python/python-edje

$ svn co https://svn.enlightenment.org/svn/e/trunk/BINDINGS/python/python-etk

$ svn co https://svn.enlightenment.org/svn/e/trunk/BINDINGS/python/python-e_dbus

Exportando:

$ cd $HOME/e_src_exported

$ svn export $HOME/e_src/python-evas python-evas

$ svn export $HOME/e_src/python-ecore python-ecore

$ svn export $HOME/e_src/python-edje python-edje

$ svn export $HOME/e_src/python-etk python-etk

depois o python-evas:

$ cd python-evas

$ sudo python setup.py install

$ sudo python setup.py install_headers

$ cd ..

depois o python-ecore:

$ cd python-ecore

$ sudo python setup.py install

$ cd ..

depois o python-edje:

$ cd python-edje

$ sudo python setup.py install

$ cd ..

depois o python-etk:

$ cd python-etk

$ sudo python setup.py install

$ cd ..

depois o python-e_dbus:

$ cd python-e_dbus

$ sudo python setup.py install

$ cd ..

Pronto! você possui uma instalação funcional.

Para testar, você pode o exemplo que o Gustavo Barbiery fez, você precisa fazer o checkout:

$ mkdir $HOME/efl_demo

$ cd $HOME/efl_demo

$ svn co https://svn.enlightenment.org/svn/e/trunk/BINDINGS/python/python-edje/examples/evas-demo/01-app_launcher 01-app_launcher

$ cd 01-app_launcher

$ edje_cc 01-app_launcher.edc

$ python 01-app_launcher.py

Se tudo funcionar, pronto você realmente tem uma instalação funcional do python efl.

Fontes:

http://wiki.enlightenment.org/

Basicamente, não tem muita referência de instalação do efl e esse é um dos motivos de eu estar escrevendo o post.

Qualquer coisa comenta ai!

Update 24/01/09: Adicionado compilação do e_dbus e python-e_dbus.

Update 01/09/08: Considerando uma instalação inicial inclui mais alguns pacotes para instalar antes de iniciar a compilação: autoconf automake autotools-dev m4 libtool

Update 14/10/08: Houve mudanças nos repositórios do EFL, e agora é preciso compilar também o pacote EINA. Incluído Eina e correções na hora de instalar os bindings

Update 22/12/08: Esse modo de instalação que fiz funcionava bem com a versão antiga do efl, antes do eina. Atualizei para a versão do SVN e inclui a instalação de mais 2 pacotes do EFL, 1 binding e um utilitário(python-dispatcher) e a remoção do python-efl-utils. E tudo feito no ubuntu 8.10.

Antes era: http://daniel.jb0.org e agora é http://danielmartins.eti.br/blog.

Sempre gosto de esta mudando a cara do blog pois acho enjoativo passar muito tempo com o mesmo template.

Mudei de endereço e a idéia também é mudar outras coisas, por exemplo, postar no mínimo 4 post/mês, ou seja, em média 1 por semana.

Acredito que há muitas opniões sobre esta nova abordagem de web2.0, desenvolvedores nacionais renomados ja se expressaram sobre esta questão, a web2.0 é boa para diversas situações, mas não tudo. Um exemplo é o Yahoo Mail Beta, é legal e bonito mas é lento demais, sem falar que no firefox qualquer ação o processamento vai para 100% e isso é caos!. É tudo uma questão de bom senso, usar web2.0 para dá um turbinada na aplicação com validações e chamadas assíncronas, melhorar a usabilidade ou ainda aplicar um comportamento para um determinado componente na tela é uma boa opção. Mas usar web2.0 para emular sistemas que rodam no desktop é complicado, por que são muitos eventos, muitos widgets, muitas regras de css(posicionamento, imagens e etc) e acaba que a aplicação fica extremamente lenta e de difícil manutenção, com certeza não é o que queremos.

Para quem não conhece, a YUI é uma biblioteca de componentes reutilizaveis feitos em javascript, dhtml e css para facilitar a construção de RIA (Rich Internet Applications) , a YUI é produzida primariamente pelos yahoo hackers e também pela comunidade. É utilizada extensivamente no portal do Yahoo.com[.br] para os softwares web do Yahoo!, com isso podemos entender que é um projeto amplamente suportado. A YUI! é software livre, cuja a licença é uma variação da licença BSD e pode ser encontrada aqui.

Como eu ainda não postei nada sobre a YUI, neste artigo estarei descrevendo sua utilização básica com um exemplo utilizando o widget DataTable, para o exemplo ficar ainda mais interessante irei também descrever como customizar a ordenação crescente e decrescente. As informações de exemplo que vamos utilizar são informações referentes a veículos, vamos customizar a ordenação por Placa, a YUI já possui funções de ordenação padrões e que trabalham com alguns tipos definidos.

No inicío de cada bloco de código estarei usando a sigla [COD_[1-9]{2}] para identificar o bloco de código quando o estiver referenciando em outros trechos do artigo, para facilitar a localização.

Pré-requisitos:

1. Conhecimentos básicos em JavaScript.
2. Você precisa baixar a YUI e carregar os componentes na sua página html ou carregá-las apartir do próprio site do yahoo, para saber mais sobre este serviço entre no site.. No desenrolar deste artigo usarei o serviço de hosting da YUI provido pelo Yahoo.

Primeiramente é preciso incluir os scripts e os estilos no header do html:

• Estilos: [COD_01]
  

• Mais estilo(Sobrecarrega algumas regras css, para fins de personalização): [COD_02]
  

• YUI Scripts: [COD_03]
  
  
  
  
  
  
  
  
• JavaScript para criação do DataTable:[COD_04]
  
  function init()
  {
  /**
  * Configura namespace para não haver conflitos referentes a nomes
  * e para facilitar a organização de objetos e etc.
  */

  YAHOO.namespace(“exemplo”);

  /**
  * Dados que serão usados no DataTable
  */
  YAHOO.exemplo.dados = {
  veiculos: [
  {placa:"JTX-0506", vistoria:new Date(2004, 2, 21), km:110000},
  {placa:"JYZ-0469", vistoria:new Date(2001, 8, 10), km:65000},
  {placa:"JTA-4591", vistoria:new Date(2000, 9, 5), km:45036},
  {placa:"XYZ-4587", vistoria:new Date(2000, 5, 8), km:456978}
  ]
  };

  /**
  * Informações do cabeçalho para o widget.ColumnSet possa retornar
  * um objeto adapter(adaptador) para a renderização do DataTable.
  */
  var Cabecalhos = [
  {key:"placa", title:"Placa", sortable:true},
  {key:"vistoria", type:"date", sortable:true, resizeable:true},
  {key:"km", type:"number", sortable:true, resizeable:true}
  ];

  /**
  * Objeto “configurador” do cabecalho
  */
  var ConfiguraColunas = new YAHOO.widget.ColumnSet(Cabecalhos);

  /**
  * Objeto DataSource é responsável por pegar, tratar e adaptar
  * as informações para que o objeto DataTable possa renderizá-las
  */
  var CapturaInformacoes = new YAHOO.util.DataSource(YAHOO.exemplo.dados.veiculos);
  CapturaInformacoes.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
  CapturaInformacoes.responseSchema = {
  fields: ["placa","vistoria","km"]
  };

  /**
  * Enfim cria o table
  * O primeiro parametros é onde(div) será renderizado o seu DataTable
  */
  var DataTable = new YAHOO.widget.DataTable(“exemplo”,
  ConfiguraColunas, CapturaInformacoes, {caption:”Exemplo básico de DataTable”});
  }

  /**
  * Quando a arvore DOM estiver carregada executa a função!
  * o YAHOO.util.Event é um utilitário do YUI para trabalhar com eventos
  */
  YAHOO.util.Event.onDOMReady(init);
  

• Você pode fechar o header do html e então no corpo(body) colocar aonde o DataTable será renderizado, no caso: (Sem isso o DataTable não irá ser renderizado)
  

Resultado:

Como podemos constatar no resultado acima as duas ordenações que realmente funcionam são as colunas por data e por quilometragem, pois o YUI reconhece os tipos informados nas linhas 28 e 29 do JavaScript , os tipos reconhecidos pela YUI são “string”, “number”, “date”, “currency”, “email” e “link”. Você pode clickar no cabeçalho da coluna “Placa” e você verá que a lógica de ordenação aplicada é a do tipo string, ou seja, pelas letras iniciais, mas precisamos que essa coluna seja ordenada pelo numero final da placa, pois sabemos que o pagamento do ipva de um veículo vence no mês do último número da placa, por exemplo final de placa 1 vence em Janeiro, 2 em Fevereiro e assim sucessivamente e as placas com final 0 vence em outubro.

Precisamos customizar a ordenação, vamos criar primeiramente as funções para ordenação crescente e decrescente, a YUI possui duas funções utilitárias para ajudar-nos nesta tarefa, são a YAHOO.util.Sort.compareAsc e a YAHOO.util.Sort.compareDesc
, a primeira para comparação crescente e a segunda para comparação decrescente, vejamos sua utilização já aplicando ao problema que nós temos de ordenar os dados pelo final da placa, a seguir: [COD_05]

/**
* Ordenação Crescente
*
*/
var ordByPlacaAsc = function(a,b){
// Pega o final da primeira placa
var finalPlaca1 = a.placa.charAt(a.placa.length – 1);
// Pega o final da segunda placa
var finalPlaca2 = b.placa.charAt(b.placa.length – 1);

var compFnc = YAHOO.util.Sort.compareAsc
// transforma em inteiro multiplicando por 1 e joga para
// a função utilitária de comparação
var resultado = compFnc(finalPlaca1*1,finalPlaca2*1);
return resultado;
}

/**
* Ordenação Decrescente
*
*/
var ordByPlacaDesc = function(a,b){
// Pega o final da primeira placa
var finalPlaca1 = a.placa.charAt(a.placa.length – 1);
// Pega o final da segunda placa
var finalPlaca2 = b.placa.charAt(b.placa.length – 1);

var compFnc = YAHOO.util.Sort.compareDesc

// transforma em inteiro multiplicando por 1 e joga para
// a função utilitária de comparação
var resultado = compFnc(finalPlaca1*1,finalPlaca2*1);
return resultado;
}

Como podemos ver, basicamente temos o mesmo procedimento só que com funções utilitárias diferentes, você pode fazer a comparação nas linhas 11 e 28, as funções utilitárias fazem a comparação e para a YAHOO.util.sort.compareAsc retornam -1 se o primeiro argumento for < (menor que) o segundo argumento, 0 se o primeiro argumento é igual( == ) ao segundo argumento e 1 se o primeiro argumento é >(maior que) o segundo argumento e o inverso para a YAHOO.util.sort.compareDesc, ou seja, -1 se o primeiro argumento for > (maior que) o segundo argumento, 0 se o primeiro argumento é igual( == ) ao segundo argumento e 1 se o primeiro argumento é < (menor que) o segundo argumento e assim a YUI vai ordenando os dados no DataTable, mas você está sentindo falta de algo ?! sim!, aonde parametrizamos para que o YUI utilize estas funções customizadas de ordenação ?!

R: No bloco de código [COD_04] na linha 27 é possível passar um argumento chamado sortOptions contendo as informações referentes a customização da ordenação, veja um exemplo de como fica a linha 27 inserindo as funções de ordenação:

{key:”placa”, title:”Placa”, sortable:true, sortOptions:{ascFunction:ordByPlacaAsc,descFunction:ordByPlacaDesc}},

Como resultado podemos ver a ordenação sendo feita pelo último número da Placa do veículo:

Resultado:

Já me estendi demais, espero que eu tenha conseguido exemplificar o uso básico do widget DataTable da YUI e de como customizar a ordenação, qualquer sugestão, correção ou crítica construtiva é bem vinda. Ajude-me a melhorar a qualidade dos artigos que escrevo.

Links essenciais que me serviram de consulta e para quem deseja exemplos mais ricos:
http://developer.yahoo.com/yui
http://developer.yahoo.com/yui/examples/datatable/
http://developer.yahoo.com/yui/datatable/
http://developer.yahoo.com/yui/docs/module_datatable.html
http://www.quirksmode.org/js/strings.html

O projeto Seeduca e GCompris Brasil decidiram em reunião compartilhar recursos e conhecimento para que haja uma melhor e maior colaboração entre os projetos, como segue a notícia no site do GCompris Brasil escrita pelo Frederico, mantenedor do projeto GCompris Brasil.

Eu como um dos membro do projeto Seeduca.org me sinto muito feliz com esta notícia, pois é algo que só tende a fomentar a cultura de software livre nos ambientes educacionais que se utilizam da informática e também nos chamados Edutretenimentos (Não sei se existe essa palavra!), mas seria softwares de entretenimento com foco educacional, ou seja, enquanto a criança brinca e se diverte  ela está aprendendo e se desenvolvendo.

Para os que ainda não estão por dentro:

O projeto Seeduca.org é “O projeto Seeduca é um projeto que visa disseminar e incentivar o uso do Software Livre na educação, pois acreditamos que o conhecimento e a inclusão digital nos meios educacionais não podem ser obtidos e plenamente compartilhados por meio de softwares não livres.”.

O projeto Gcompris Brasil é “O objetivo desse site é reunir os trabalhos de tradução, documentação e divulgação do software educacional GCompris aqui no Brasil. Todos estão convidados para colaborar com o projeto, que é aberto a qualquer pessoa.”.

Você que de alguma forma está envolvida na educação de crianças, jovens e adultos e gostaria de conhecer o projeto Seeduca e/ou GCompris entre na lista de discussão neste link e participe.

Vale ressaltar que as contribuições podem vir de quase qualquer área do conhecimento. Seja você programador,tradutor, pedagogo, educador, pai/mãe que se preocupa o desenvolvimento/criação de seu filho(a), entusiastas e etc.

Participem:

http://www.seeduca.org
http://gcompris.teia.bio.br em breve www.gcompris-br.org

:wq!

Powered by ScribeFire.

Notícia não está quente mas está morna! rs…

É hora de criar seu espaço também nos mainframes da IBM!

A Equipe da IBM que desenvolve z/OS acabou de portar o PHP. A versão portada é a 5.1.2 e foi portada para utilização nos 2 ambientes suportados pelo PHP, o CLI (Command Line Interface) e para o ambiente web através de CGI e claro já vem incluída a extensão PDO_ODBC para comunicação com o DB2, mas isso é claro !

Fonte: http://info.abril.com.br/blog/sandra/20070208_listar.shtml

Fonte: http://www.alphaworks.ibm.com/tech/php4zos