IT Mídia
Notícias em destaque

Sobre o uso de Componentes de Interface Gráfica nas Plataformas Mobile

13 de janeiro de 2012 23:52

No desenvolvimento para dispositivos móveis, o programador possui uma biblioteca de classes e interfaces que auxiliam na criação do software. Em relação à interface gráfica, as plataformas atuais também fornecem um conjunto rico de componentes prontos para usar. Na maioria dos casos uma simples instância com a palavra new e a adição do componente no container que representa a tela da sua aplicação, já permitem a criação de aplicativos elaborados graficamente falando.

Mas nem tudo são flores nesta história. Começando pelo fato de que, nem sempre foi assim. Na quase extinta plataforma Java ME, que ainda tem alguns adeptos, tínhamos dois caminhos a seguir: utilizar os componentes prontos disponíveis no pacote lcdui, criar nossos itens estendendo de CustomItem ou desenhar a tela inteira com um Canvas.

No primeiro caso tínhamos a facilidade de uso e a criação de aplicativos em um tempo muito curto. Porém, em contrapartida, ficávamos limitados aos componentes, pois os mesmos não podiam ser melhorados e, ficávamos reféns da implementação da máquina virtual nos telefones celulares. O mesmo componente, por exemplo um DateField, tinha interfaces completamente distintas em aparelhos de marcas ou plataformas heterogêneas.

Para criar as telas totalmente em Canvas ganhávamos na possibilidade de criar qualquer coisa imaginável, porém, o tempo de desenvolvimento crescia grandiosamente, isso porque era necessário utilizar diretivas gráficas para desenhar qualquer coisa na tela.

Quando o BlackBerry surgiu, utilizando um porting do próprio Java ME, os problemas da plataforma da Sun foram parcialmente resolvidos. O conjunto de bibliotecas para interfaces gráficas cresceu, com mais e melhores componentes. Mas, novamente, são pouquíssimas as vezes que os desenvolvedores BlackBerry utilizam um componente da API sem precisar alterá-o. Pelo menos aqui temos a possibilidade de especialização de um item.

Para termos uma idéia melhor, veja a Figura abaixo, ela apresenta componentes de entrada de texto na BlackBerry API. Logicamente estes componentes não serviriam para uma interface gráfica de usuário mais elaborada.

O que é mais normal no desenvolvimento BlackBerry é termos classes que representam os itens de interface gráfica. Eles podem ter um extends para um componente já pronto, como por exemplo, um LabelField. Ou, podem estender diretamente a classe Field. Nos dois casos o desenvolvedor terá que sobrescrever o método paint, responsável pelo desenho do componente no display do aparelho.

protected void paint(Graphics g) {
    if (hasFocus) {
           g.drawBitmap(width/2 – largBotao/2, 0, largBotao, height, btOn, 0, 0);
    } else {
        g.drawBitmap(width/2 – largBotao /2, 0, largBotao, height, btOff, 0, 0);
    }
       
    if (texto != null){
        g.setFont(fonte);
        g.setColor(cor);
        g.drawText(texto, width/2 – fonte.getAdvance(texto)/2, btOn.getHeight());
    }
}

A notícia ruim é que, novamente, estaremos utilizando diretivas gráficas para atingirmos nosso objetivo. No trecho de código acima, estamos criando um componente que terá duas imagens alternando em relação ao foco, além disso, ele poderá ter um texto ou não, que será desenhado na parte inferior da imagem.

Na plataforma Android, o uso de customização de componentes é menos comum. Porém, mesmo assim ela ocorre algumas vezes. Isso acontece por dois motivos. O rico conjunto de componentes de UI que a plataforma oferece. A possibilidade de aplicar estilos nos e temas nas suas telas, tornando desnecessária a customização de componentes.

Para saber mais sobre a aplicação de estilos e temas, visite esta página: http://developer.android.com/guide/topics/ui/themes.html.

Para criar um componente customizado no Android, basta criar uma classe que herda de View. Além disso, o desenvolvedor deve sobrescrever os métodos onDraw e onMeasure. O primeiro serve para desenhar o item. O segundo define as dimensões gráficas do mesmo.

O próprio site de desenvolvedores Android nos fornece um bom exemplo de como fazer isso. Visite esta página http://developer.android.com/resources/samples/ApiDemos/src/com/example/android/apis/view/LabelView.html, e veja um componente customizado completo. Preste atenção nos métodos que citei no parágrafo anterior. Deixo aqui apenas o onDraw:

protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  canvas.drawText(mText, getPaddingLeft(), getPaddingTop() – mAscent, mTextPaint);
}

Infelizmente não conheço muito da plataforma iOS, a ponto de falar sobre a customização de componentes, mas, segundo uma consulta que fiz com desenvolvedores iPhone esse processo acontece sim. Acredito que seja na mesma taxa de ocorrência do Android, devido aos mesmos motivos.

Fica visível que as plataformas de desenvolvimento móvel estão seguindo uma tendência em relação aos itens de interface de usuário. Cada vez mais o conjunto de componentes prontos é mais rico e em uma quantidade maior. Porém, vai demorar um tempo para que não seja necessária nenhuma customização em nenhum momento. Ao mesmo tempo que cresce a biblioteca de classes, cresce a complexidade e a necessidade de riqueza nos detalhes de interface gráfica.

Vocês concordam com esta teoria?

Sobre Ricardo Ogliari

Graduado em Ciência da Computação, pós-graduando em Web e analista de sistemas mobile na MobMidia | Grupo Pontomobi, Ricardo Ogliari é autor de dezenas de artigos que foram publicados em anais de congressos nacionais e internacionais, sites especializados e revistas. Palestrante em eventos nacionais e internacionais, como JustJava, Java Day, GeoLivre, ExpoGPS, FISL e FITE, sempre aborda temas relacionados a computação móvel. Neste espaço, discutirá sobre tecnologias, plataformas, mercado, ideias e linguagens presentes no mundo da mobilidade.

Entre em contato com Ricardo Ogliari

Parceiros

Portais: IT Mídia | IT Web | Saúde Web

Publicações: InformationWeek Brasil | CRN Brasil | FH

Fóruns: IT Forum | IT Forum + | IT Business Forum | Saúde Business Forum