Home > Artigos > Java ME >

Programando Java ME para BlackBerry

Publicado por daltoncamargo em 17/08/2009 - 11.092 visualizações

comentários: 0

Programando Java ME para BlackBerry – Parte 4 – Utilizando Componentes de UI


Retomando
Na última série desta seqüência de posts sobre Java ME para BlackBerry vimos a estrutura básica de um aplicativo que utiliza a BlackBerry API. Só para relembrar, abaixo está o código mostrado no último post:

class HelloScreen extends MainScreen {             public HelloScreen() {           super(FullScreen.DEFAULT_MENU|FullScreen.DEFAULT_CLOSE);           LabelField title = new LabelField(”BlackBerry App Ping”, LabelField.ELLIPSIS |LabelField.USE_ALL_WIDTH);          setTitle(title);      }      public boolean onClose() {          System.exit(0);          return true;     } }

O código acima resulta em aplicativos que apresentam as interfaces mostradas nas Figuras abaixo. A Figura 2 apresenta a tela de aplicativos do aparelho emulado pelo JDE, a Figura 1, por sua vez, apresenta o aplicativo do código anterior em execução.



Figura 1: Aplicativo sendo executado.




Figura 2: tela de aplicativos do aparelho emulado pelo JDE.


Pilha de Display
Os objetos que herdam de Screen ficam armazenados em uma pilha de telas de UI, a que estiver mais no topo desta pilha é a que está visível ao usuário. Quando uma Screen é retirada de visualização, a que estiver logo abaixo dela na pilha é mostrada ao usuário.

Trabalhando com Menu Item
O leitor deve ter percebido que na Figura 1 o menu item está com o label Close, agora imaginem se o aplicativo a ser desenvolvido é todo em português, alemão ou hebraico? Aquele item em inglês não vai ficar legal. Ou ainda, a BlackBerry não oferece nenhum meio de adicionar novos menus items ao seu menu? Bem, a resposta para todas estas perguntas será dada no parágrafo a seguir.
Primeiramente você deve criar novos itens de menu, com a classe MenuItem, o trecho de código abaixo mostra a forma de instanciar esta classe:

private MenuItem viewItem = new MenuItem("Ver Mensagem", 100, 10) {    public void run() {       Dialog.inform("Exemplo de Menu Item");    } };

O construtor da classe recebe três parâmetros:

• Texto: label que ficará visível para o usuário.
  
• Ordinal: para ordem dos itens do menu.
  
• Prioridade: prioridade do menu para receber o foco.
  

A implementação do método run define a ação que este menu item terá ao ser acionado. No nosso exemplo, ele apenas mostra um aviso no display para o usuário.
Além disso, é preciso sobrescrever o método makeMenu para adicionar os items do menu criados a tela.

protected void makeMenu(Menu menu, int instance) {    menu.add(viewItem);    menu.add(closeItem); }

O resultado pode ser conferido nas Figuras 3 e 4. E o menu item Close aonde foi parar? Como sobrescrevemos o método makeMenu este menu desaparece, para inserir um menu item de saída teremos que criar um novo MenuItem. Veja a Listagem 1 com a nova classe HelloScreen. A Figura 5 apresenta o aplicativo com os dois menu item´s.




Figura 3: Aplicativo com novo menu item.




Figura 4: Ação do novo menu item.



class HelloScreen extends MainScreen {     private MenuItem viewItem;     private MenuItem closeItem;         public HelloScreen() {         super(FullScreen.DEFAULT_MENU | FullScreen.DEFAULT_CLOSE);         LabelField title = new LabelField       ("BlackBerry App Ping", LabelField.ELLIPSIS | LabelField.USE_ALL_WIDTH);         setTitle(title);                  viewItem = new MenuItem("Ver Mensagem", 100, 10) {              public void run() {                      Dialog.inform("Exemplo de Menu Item");              }          };                  closeItem = new MenuItem("Sair", 101, 11) {              public void run() {                      onClose();              }          };      }          protected void makeMenu(Menu menu, int instance) {          menu.add(viewItem);          menu.add(closeItem);      }      public boolean onClose() {         System.exit(0);         return true;      } }

Listagem 1: Classe Hello Screen.



Figura 5: Tela do aplicativo com os dois itens de menu.


Caixas de Diálogo e Mensagem de Status
Para que o leitor possa aproveitar ao máximo os componentes da BlackBerry API, é necessário um conhecimento nos itens de menu (já visto) e também em caixas diálogo e mensagem de sistemas. Para isso, basta usar uma das duas subclasses de PopupScreen: Dialog ou Status. Estas duas classes não entram na pilha de Sreen´s discutida anteriormente, pra utiliza-las basta chamar Dialog.ask(int) ou Status.show(). As Figuras abaixo mostram alguns exemplos de Dialog e Status. A Figura 6 mostra oque é gerado chamando a linha de código Dialog.ask(Dialog.D_SAVE, “Exemplo de D_SAVE”), a Figura 7 ilustra o resultado da linha de código Dialog.ask(Dialog.D_YES_NO, “Exemplo de D_YES_NO”) e, por fim, a Figura 8 traz um exemplo de Status.show(“Exemplo de Status.show()”). A diferença é apenas estática entre os tipos de diálogo, as opções são as seguintes:

• D_SAVE
  
• D_YES_NO
  
• D_OK
  
• D_DELET
  

Além destas, podemos chamar os métodos inform e alert da classe Dialog. A classe Status difere essencialmente no comportamento, sendo removido após um intervalo fixo de tempo e não a ação do usuário.



Figura 6: Exemplo de Dialog.ask(Dialog.D_SAVE).



Figura 7: Exemplo de Dialog.ask(Dialog.D_YES_NO).



Figura 8: Exemplo de Status.show().



Trabalhando com Componente de UI

Todos os componentes da BlackBerry API são tratados como campos, sendo assim, são regiões retangulares dentro da área controlada por gerenciadores de layout. O tamanho dos campos depende deste gerenciador, e dele também, a tarefa de adicionar rolagem aos componentes que precisam. Os componentes são encontrados no pacote net.rim.device.api.ui.component. A BlackBerry API também permite a criação de campos customizados (a mesma idéia dos CustomItem´s na MIDP), para isso, basta extender a classe Field, porém, esse é assunto para ser mais detalhado adiante.

BitmapField
Um BitMapField contém bitmaps, ou seja, uma imagem. A classe fornece duas maneiras de utilização, a primeira é usando bitmaps pré-definidos na própria API, para isso, chame o método getPredefinedBitmap() passando como parâmetro umas das seguintes opções:

• Bitmap.INFORMATION
  
• Bitmap.QUESTION
  
• Bitmap.EXCLAMATION
  
• Bitmap.HOURGLASS
  

No exemplo do trecho de código abaixo, utilizamos o INFORMATION (linha 1). Com isso criamos um objeto BitMap, que é passado por parâmetro para o componente BitMapField (linha 2) e, posteriormente, adiciona a tela (linha 3) com o método add(). Perceba que o uso deste componente é semelhante ao ImageItem da MIDP e, a necessidade de instanciar um objeto Image.
O segundo meio de renderizar um bitmap é escolhendo uma imagem dos recursos do aplicativo. Para isso chame o método getBitmapResource(), passando por parâmetro a localização da imagem (linha 5). As linhas 6 e 7 são idênticas ao uso com bitmaps pré-definidos na API. Veja a Figura 9 para verificar o resultado.

Bitmap myBitmap = Bitmap.getPredefinedBitmap(Bitmap.INFORMATION); BitmapField myBitmapField = new BitmapField(myBitmap); add(myBitmapField);         Bitmap myBitmap2 = Bitmap.getBitmapResource("mo.PNG"); BitmapField bitmapField2 = new BitmapField(myBitmap2); add(bitmapField2);



Figura 8: Exemplo de uso do componente BitmapField.




Figura 9: Exemplo de ButtonField.

ButtonField
Este componente dispensa comentários, basta dizer que é um botão. Para utlizá-lo basta instanciar um objeto da classe ButtonField passando como parâmetro o róulo do botão, seu estilo, ou ambos. Veja a listagem de código abaixo e seu resultado na Figura 9.

ButtonField btnEnviar = new ButtonField("Enviar"); ButtonField btnLimpar = new ButtonField("Limpar"); add(btnEnviar); add(btnLimpar);


ChoiceField
Este componente é um pouco mais elaborado e trabalhoso que os outros dois vistos até agora. De início, o programador deve escolher se seu campo de escolha será de números inteiros ou valores que podem ser transformados em Objects, como Strings. No primeiro caso será necessário utilizar a NumericChoiceField e, no segundo, a ObjectChoiceField.
A classe NumericChoiceField tem dois construtores, um deles, utlizado na listagem de código abaixo (linha 1) aceita quatro parâmetros: o primeiro é uma String com o rótulo do componente, o segundo parâmetro indico o início do conjunto de escolhas do usuário, o terceiro parâmetro define o final do conjunto de números e o quarto parâmetro define o valor de incremento. É possível adicionar ainda um quinto parâmetro, que define o valor inicial. Veja na Figura 11 os valores do campo de escolha numérico, perceba que os números “saltam” de dois em dois.
Já o construtor da classe ObjectChoiceFiled possui quatro versões, a utlizada no nosso exemplo aceita o rótulo do componente e um vetor de Object. É possível definir o estilo e o índice inicial deste campo de escolha através do construtor.

NumericChoiceField ncIdade = new NumericChoiceField("Selecione sua idade:", 1,2,20); add(ncIdade); String itens[] = {"Baixa", "Média", "Alta"}; add(new ObjectChoiceField("Sua estatura:", itens));




Figura 10: Exemplo de ChoiceField.




Figura 11: Tela de opções de um ChoiceField.



Figura 12: Item de menu Change Option.


Há três maneiras diferentes de selecionar um dos itens dos campos:

• Através da tecla Space do aparelho.
• Pressionando Alt e depois as teclas direcionais para cima e para baixo.
• Os dois campos de escolha inserir um item de menu “Change Option” no menu principal, veja a Figura 12.

OptionField
Campos de opções podem ser de múltipla escolha ou não, concorda? Pois bem, quando utilizamos opções de múltiplas escolhas, devemos utilizar a classe CheckboxField, caso contrário, utiliza-se a classe RadioButtonField. As duas classes apresentam os mesmos construtores, no nosso exemplo abaixo utilizamos a versão com dois parâmetros para instaciar os CheckboxField´s (linhas 1 e 2), sendo eles: um rótulo para o componente e um valor booleano que informa se o item vai estar selecionado ou não.
Existe ainda a possibilidade de instanciar passando apenas o rótulo do componente, como fizemos nas linhas 7 e 8 da listagem. Além disso, tem a versão do construtor com três parâmetros onde, o estilo do componente também pode ser definido. A grande diferença entre a utilização das classes está no fato de que, todos os RadioButtonField´s devem ser adicionados a um RadioButtonGroup e, este, por sua vez, é adicionado a tela principal. Veja o resultado de nossa codificação na Figura 13.

CheckboxField myCheckbox = new CheckboxField("Vinagre", true); CheckboxField myCheckbox2 = new CheckboxField("Espinafre", false); add(myCheckbox); add(myCheckbox2);     RadioButtonGroup rbGroup = new RadioButtonGroup(); RadioButtonField rbField = new RadioButtonField("Masculino"); RadioButtonField rbField2 = new RadioButtonField("Feminino"); rbGroup.add(rbField); rbGroup.add(rbField2); add(rbField); add(rbField2);



Figura 13: Exemplo de OptionField.


DateField
Não vão se confundir com o componente homônimo da MIDP, porém, o objetivo é o mesmo, um campo de data. Na listagem de código abaixo instanciamos a classe DateField utilzando o construtor que aceita três parâmetros: o rótulo do componente, a hora e data atual e o tipo do campo, ou seja, se é somente data, somente hora ou ambos. Existe ainda a possibilidade de adicionar um estilo ao componente. Veja a Figura 14 para ver o resultado da listagem de código abaixo. Para editar o campo de data basta usar o teclado do aparelho, ou, adicionar um item de menu criado pelo próprio componente, Change Option.

DateField dateField = new DateField("Data: ", System.currentTimeMillis(), DateField.DATE_TIME); add(dateField);



Figura 14: Exemplo de DateField.


EditField
Este componente representa um campo de texto. A principal classe é BasicEditField, sendo extendida por AutoTextEditField, EditField e PasswordEditField. Tem também a RichTextField, que é somente leitura. Assim como no componente TextField da MIDP existem filtros de entrada de textos, a BlackBerry API também fornece alguns, veja:

• DEFAULT_MAXCHARS.
  
• FILTER_DEFAULT.
  
• FILTER_EMAIL.
  
• FILTER_HEXADECIMAL.
  
• FILTER_INTEGER.
  
• FILTER_LOWERCASE.
  
• FILTER_NUMERIC.
  
• FILTER_PHONE.
  
• FILTER_PIN_ADDRESS
  
• FILTER_UPPERCASE
  
• FILTER_URL
  
• JUMP_FOCUS_AT_END
  
• NO_NEWLINE
  

A Listagem de código abaixo mostra um exemplo de utilização dos campos de entrada de texto. Todos usam o mesmo construtor, que pode ter no máximo 4 parâmetros: um rótulo para o componente, um texto inicial, o tamanho máximo de caracteres e o filtro, ou estilo. Veja o resultado do código abaixo na Figura 15.
BasicEditField bf = new BasicEditField("BasicEditField: ", "", 10, EditField.FILTER_UPPERCASE); add(bf); add(new EditField("EditField: ", "", 10, EditField.FILTER_EMAIL)); add(new PasswordEditField("PasswordEditField: ", "")); add(new AutoTextEditField("AutoTextEditField: ", ""));



Figura 15: Exemplo de EditField.


GaugeField
O GaugeField permite representações visuais de números, semelhante ao componente de mesmo nome na MIDP, o Gauge. O único construtor da classe GaugeField recebe quatro parâmetros: o rótulo do componente, o valor mínimo e máximo do gauge, o valor inicial e, por fim, seu estilo. Dentre os principais modos de operação, ou estilos, podemos citar os mostrados na listagem de código abaixo. Na linha 1 criamos um GaugeField com o estilo NO_TEXT, note que a Figura 16 apresenta o primeiro gauge sem texto nenhum na barra de progresso. O segundo GaugeField foi definido com o estilo PERCENT, retorne a Figura 16 e veja o segundo gauge. Finalmente, o terceiro gauge especifica que poderá ganhar foco (FOCUSABLE) e que também é editável (EDITABLE). Como resultado disso, o último gauge da Figura 16 é o único que tem iteração com o usuário.

GaugeField staticGauge = new GaugeField("Sem texto: ", 1, 100, 20, GaugeField.NO_TEXT); GaugeField percentGauge = new GaugeField("Percento: ", 1, 100, 29, GaugeField.PERCENT); GaugeField interactiveGauge = new GaugeField("Gauge: ", 1, 100, 60, Field.FOCUSABLE | Field.EDITABLE); add(staticGauge); add(percentGauge); add(new SeparatorField());      add(interactiveGauge);




Figura 16: Exemplo de GaugeField.

SeparatorField
Este componente adiciona uma linha horizontalmente na tela, veja a Figura 16, antes do último gauge. Seu construtor não recebe parâmetro algum. Olhe a última listagem apresentada aqui, mais especificamente na linha 8:

add(new SeparatorField());

LabelField
Este componente é apenas um texto sem interação nenhuma. Na Figura 16 podemos ver um exemplo deste campo no título. O código para sua utilização pode ser visto na listagem abaixo:

LabelField title = new LabelField("BlackBerry App Ping", LabelField.ELLIPSIS|LabelField.USE_ALL_WIDTH); setTitle(title);

ListField
Este componente permite a criação de listas de itens. O construtor da classe ListField pode receber até dois parâmetros (linha 6), sendo o primeiro um inteiro que define o número de elementos na lista e, o segundo, o estilo do componente. Para inserir os elementos na lista é preciso configurar o ListFieldCallback que o ListField irá utilizar. Para isso chame o método setCallback (linha 8). No nosso exemplo criamos uma classe ListCallback q ue herda diretamente de ListFieldCallback. Com a instância desta última classe (linha 7) é só chamar seu método add e passar instâncias de objetos String (linha 12 até 15). Perceba que as linhas 9, 10 e 11 estão comentadas. Elas seriam úteis se usássemos o construtor da classe ListField sem parâmetros. Com isso, precisamos inserir espaços para os elementos que irão compor a lista. Veja o resultado de nosso código na Figura 17.


String fieldOne = new String("Ricardo Ogliari"); String fieldTwo = new String("Sheila Madl"); String fieldThree = new String("Paulo Renato"); String fieldFour = new String("Marilde Terezinha"); ListField myList = new ListField(4, ListField.MULTI_SELECT); ListCallback myCallback = new ListCallback(); myList.setCallback(myCallback); // myList.insert(0); // myList.insert(1); // myList.insert(2); myCallback.add(fieldOne); myCallback.add(fieldTwo); myCallback.add(fieldThree); myCallback.add(fieldFour); add(myList); class ListCallback implements ListFieldCallback {      private Vector listElements = new Vector();      public void drawListRow(          ListField list, Graphics g, int index, int y, int w) {          String text = (String)listElements.elementAt(index);          g.drawText(text, 0, y, 0, w);      }      public Object get(ListField list, int index) {          return listElements.elementAt(index);      }      public int indexOfList(ListField list, String p, int s) {          return listElements.indexOf(p, s);      }      public int getPreferredWidth(ListField list) {          return Graphics.getScreenWidth();      }      public void add(String toInsert) {          listElements.addElement(toInsert);      }      public void erase() {          listElements.removeAllElements();      } }




Figura 16: Exemplo de ListField.

TreeField
O componente TreeField cria uma árvore com os itens que a compõe. O único construtor da classe TreeField recebe como parâmetro uma instância da classe TreeFieldCallback e seu estilo. No trecho de código abaixo criamos três Strings que serão os nodos de nossa árvore (linhas 1, 2 e 3). Posteriormente, na linha 5, criamos a instância da classe TreeCallback. Na linha 6 criamos a instância de TreeField e, nas linhas 7, 8 ,e 9 adicionamos os nodos utilizando o método addChildNode(). A API permite que especifiquemos que nodo queremos que seja mostrado expandido para o usuário. A Figura 17 mostra o resultado de nossa codifcação.


String ndPrincipal = new String("Principal"); String ndSeg = new String("Segundo nível"); String ndTer = new String("Terceiro nível"); TreeCallback myCallback2 = new TreeCallback(); TreeField myTree = new TreeField(myCallback2, Field.FOCUSABLE); int node1 = myTree.addChildNode(0, ndPrincipal); int node2 = myTree.addChildNode(1, ndSeg); int node3 = myTree.addChildNode(node2, ndTer); myTree.setExpanded(node1, false); add(myTree); class TreeCallback implements TreeFieldCallback      {          public void drawTreeItem(TreeField tree, Graphics g, int node,              int y, int width, int indent) {              Object obj = tree.getCookie(node);              if (obj instanceof String) {                   String text = (String)obj;                   g.drawText(text, indent, y);               }           }       }



Figura 17: Exemplo de TreeField.


Publicações anteriores:
Parte 1, Parte 1 (1/2) e (2/2).

Sobre o Autor:

Ricardo da Silva Ogliari é formando em Ciência da Computação pela Universidade de Passo Fundo - RS. Desenvolveu sistemas móbile e web para empresas do Rio Grande do Sul, atualmente trabalha como desenvolvedor de aplicações direcionadas a telefones celulares na Kwead.com de São Paulo. Também, foi palestrante dos eventos JustJava 2005 e EJES (Encontro Java do Espírito Santo) 2005, além de ministrar alguns cursos sobre a tecnologia Java ME e Java EE.

Tópicos Relacionados


• Aprenda a desenvolver para BlackBerry  
• Enviar aplicação nativa BlackBerry para o device por USB?  
• Material sobre como des.um server proxy  
• O Java aceita Herança múltipla ?  
• Socket em java como fazer  
• Porque XML é tão amado por uns, e tão odiado por outros?  
• Como comprar pó de café da ilha de Java?  
• velhos membros do javafree  
• Java em Rio Preto?  
• Desenvolvimento de software comercial  
• criptografia  
• Pontuação Tempo Real Maio 2004  
• Artigos e tutoriais sobre desenvolvimento móvel  
• Não estou entendendo Java  
• quero criar um jogo de tiro...  
• Oportunidade para desenvolvedores J2ME  
• Empréstimo e Devolução de Livros em Java  
• Publicar sua aplicação nativa BlackBerry via OTA na web?  
• Consegui largar a M$  
• Eu gostaria de um exemplo usando sockets  

Home Sobre Empregos Blogs Anuncie

O JavaFree.org é uma comunidade java formada pela coolaboração dos desenvolvedores da tecnologia java. A publicação de artigos além de ajudar a comunidade java, ajuda a dar maior visibilidade para o autor. Contribua conosco.

© Copyright JavaFree.org - Java
Design: Luka Cvrk  |  Desenvolvimento: Dalton Camargo  |