BT
x Por favor preencha a pesquisa do InfoQ !

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.

Avalie esse artigo

Relevância
Estilo/Redação

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 mensagens dessa discussão
Comentários da comunidade

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

Receber mensagens dessa discussão

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

Receber mensagens dessa discussão

Dê sua opinião
Feedback geral
Bugs
Publicidade
Editorial
Marketing
InfoQ Brasil e todo o seu conteúdo: todos os direitos reservados. © 2006-2016 C4Media Inc.
Política de privacidade
BT

Percebemos que você está utilizando um bloqueador de propagandas

Nós entendemos porquê utilizar um bloqueador de propagandas. No entanto, nós precisamos da sua ajuda para manter o InfoQ gratuito. O InfoQ não compartilhará seus dados com nenhum terceiro sem que você autorize. Procuramos trabalhar com anúncios de empresas e produtos que sejam relevantes para nossos leitores. Por favor, considere adicionar o InfoQ como uma exceção no seu bloqueador de propagandas.