BT

Novo Touch Charts da Sencha: gráficos em dispositivos móveis com HTML5

por Dio Synodinos , traduzido por Rodrigo Urubatan em 10 Ago 2011 |

A Sencha lançou uma versão beta da biblioteca para criação de gráficos interativos em HTML5, o Sencha Touch Charts, otimizada para dispositivos móveis. A biblioteca, um add-on pago para o produto Sencha Touch (que é gratuito), possibilita que desenvolvedores criem gráficos dos tipos radar, barras,  linhas, área e  torta/pizza, com recursos de interatividade. Os gráficos gerados são otimizados para iOS, Android e BlackBerry.

A biblioteca Sencha Touch Charts utiliza aceleração de hardware em dispositivos que suportam este recurso. Também dá suporte a gestos de toque, o que pode ser usado para facilitar a visualização de conjuntos de dados complexos. Os gestos suportados incluem pinçar para ampliar, arrastar (swipe) para navegar horizontalmente pelos dados, e toques rápidos (taps) para aprofundamento nos dados.

A biblioteca utiliza recursos do HTML5 como a tag <canvas> para o desenho dos elementos visuais, e CSS3 para a definição da aparência, o que a torna compatível com  navegadores móveis modernos. 

No Sencha Touch Charts, a definição dos componentes e suas iterações é feita com JavaScript:

var chartPanel = new Ext.chart.Panel({ 
  title: 'Pie Chart',
  fullscreen: true,
  dockedItems: [...],
  items: {
    cls: 'pie1',
    theme: 'Demo',
    store: store1,
    shadow: false,
    animate: true,
    insetPadding: 20,
    legend: {
      position: {
        portrait: 'bottom',
        landscape: 'left'
      }
    },
    interactions: [
      {
        type: 'reset',
        confirm: true
      },
      {
        type: 'rotate'
      },
      {
        type: 'iteminfo',
        gesture: 'taphold',
        listeners: {...}
      },
      {
        type: 'piegrouping',
           onSelectionChange: function(me, items) {
          ...
        }
      }
    ],
    series: [...]
  }
});

A definição dos estilos é feita com SASS/SCSS que é compilado para CSS3:

...
chart[cls=piecombo1] {
  padding: 20;
  series {
    label {
      display: rotate;
      contrast: true;
      font: 14px Arial;
    }
  }
}
...

O InfoQ.com falou com um representante da Sencha, que deu mais detalhes sobre o novo produto:

InfoQ: Para melhorar o desempenho vocês implementaram um engine de renderização utilizando Canvas do HTML5. Poderia nos dar mais detalhes?

Sencha: Para desenho em HTML5, há basicamente as tecnologias SVG e Canvas. Escolhemos Canvas para dispositivos móveis por dois motivos. Primeiro, o SVG não era suportado no ambiente Android antes do Honeycomb. Portanto, para suportar os milhares de dispositivos rodando a versão 2.x do Android no mercado, não poderíamos utilizar SVG. O segundo motivo: nos nossos testes de desenho, o Canvas tem se mostrado mais performático em telefones e tablets.

InfoQ: Alguns anos atrás, nem mesmo se podia criar gráficos simples que funcionassem bem em todos os browsers, mas isso está mudando com o HTML5. Quais tecnologias HTML5 vocês acharam mais úteis neste projeto?

Sencha: A grande evolução para exibição de gráficos e visualização de dados em geral foi a melhora na capacidade de desenho dos browsers. Os browsers têm trabalho bem na exibição de páginas, mas agora com Canvas, SVG (e logo com o WebGL), o browser sozinho tem capacidade de exibir conteúdos multimídia, o que antes só era possível utilizando Flash ou Silverlight. Agora que os browsers têm essa capacidade nativa, não precisamos mais depender de plugins externos..

InfoQ: Quais os maiores desafios enfrentados pela empresa ao trabalhar com browsers em ambiente móvel, como por exemplo o mobile WebKit, em comparação com browsers desktop?

Sencha: Nosso maior desafio foi o desempenho, que tratamos em duas dimensões. Primeiro consideramos o poder de processamento. Trabalhamos muito para garantir que não houvesse uma sobrecarga na CPU e que os gráficos ficassem mais responsivos. A segunda dimensão é a memória. Dispositivos móveis têm uma quantia limitada de RAM, e precisamos fazer uma quantidade enorme de ajustes para garantir o uso otimizado da memória disponível nesses equipamentos.

InfoQ: O que fez com que vocês escolhessem SASS para folhas de estilo, ao invés de CSS3?

Sencha: Utilizamos o SASS em vez do CSS3 básico por ele adicionar várias funcionalidades de metaprogramação ao CSS. Pode-se por exemplo definir que os botões serão 20% mais claros que a cor de fundo, e utilizar variáveis e funções para guiar todo o estilo da aplicação — ao invés de fazer tudo manualmente.


Você pode encontrar mais informações sobre Sencha Touch e ExtJS, no InfoQ.com e no InfoQ Brasil.

Olá visitante

Você precisa cadastrar-se no InfoQ Brasil ou para enviar comentários. Há muitas vantagens em se cadastrar.

Obtenha o máximo da experiência do InfoQ Brasil.

Dê sua opinião

HTML é permitido: a,b,br,blockquote,i,li,pre,u,ul,p

Receber menssagens dessa discussão
Comentários da comunidade

HTML é permitido: a,b,br,blockquote,i,li,pre,u,ul,p

Receber menssagens dessa discussão

HTML é permitido: a,b,br,blockquote,i,li,pre,u,ul,p

Receber menssagens dessa discussão

Dê sua opinião

Conteúdo educacional

Feedback geral
Bugs
Publicidade
Editorial
InfoQ Brasil e todo o seu conteúdo: todos os direitos reservados. © 2006-2013 C4Media Inc.
Política de privacidade
BT