FishEyeList com LWUIT

Ola pessoal,

Continuando com minhas experiências com a biblioteca LWUIT, fiz agora um outro tipo de menu: um FishEyeList !!
Ou seja, conforme você alterna entre os itens da lista, o ícone correspondente fica maior, dando um destaque e indicando que item está selecionado. Esse tipo de lista ficou muito conhecida com o uso de Ajax e também com iPhone. E agora, você vai poder ter essa lista, fácil... fácil... na sua aplicação Java ME! ;-)



A lista
Esse tipo de menu em relação ao apresentado antes tem uma vantagem, usar menos imagem. Isso porque para dar o efeito de que a imagem está maior que a "normal" não é necessário gerar outra, mas sim utilizar o método image.sclaed(nova_larga, nova_altura).

O exemplo
Esse exemplo também foi todo feito em uma única classe MIDlet, FishEyeListMIDlet, e que tem o método montaFishEyeList que é chamado no startApp para que seja exibido o Form com o menu. E as ações dos botões são tratadas no actionPerformed, como vc já está se acostumando a ver aqui nesse blog! ;-)

montaFishEyeList( )
É o método que monta o menu com a FishEyeList. Para que ele faça a montagem, o método recebe 2 parametros:

• Image[] icone: Array com os ícones a serem utilizados nos botões.
• String[] label: Strings com os labels a serem utilizados nos botões.

No inicio do método há a criação do Form e a definição da figura de fundo. Também nesse ponto é definido o layout para o Form, que nesse caso será utilizado o layout BoxLayout e com a orientação no eixo Y, ou seja, cada item adicionado será colocado em uma linha dando a "impressão" de uma lista. O código relativo a essa parte se encontra abaixo:

Form fishEyeForm = new Form("FishEye List");
       fishEyeForm.setLayout(new BoxLayout(BoxLayout.Y_AXIS));
       try {
           fishEyeForm.setBgImage(Image.createImage("/background.png"));
       } catch (IOException e) {}

Depois disso, é a hora de adicionar os botões e definir o comportamento de cada um. Isso será feito dentro de um loop que irá percorrer cada item dos arrays recebidos e em cada iteração serão executadas as seguintes ações:

• Criação de um novo botão, com o texto e a imagem do array (utilizando o indice do loop). A forma de instanciar o novo botão é new Button(label[i], icone[i]).
• Quando um botão é selecionado, o LWUIT coloca automaticamente uma cor indicando a seleção do botão. Para isso não acontecer e "atrapalhar" o comportamento usamos o método setBgTransparency(0).
• O comportamento do botão precisa ser controlado por alguém e nesse caso, o midlet do exemplo é quem implementa a interface ActionListener e que deverá ser passado como parametro para o método addActionListener.
• O efeito de FishEye (aumento da imagem) é feito alterando a imagem que é exibida quando o item está selecionado, através do método setRolloverIcon, e nesse caso aumentando o tamanho da imagem. No exemplo o aumento é de 30% da imagem utilizando o método scaled da imagem passada.
• Além disso, o ícone também tem seu tamanho diminuido em 20% quando é clicado. Isso também é feito com o método scaled sendo passado para o método setPressedIcon.
• O normal de um botão é ter sua borda desenhada para melhorar a visualização do componente. Porém, como estamos utilizando em um menu e o foco é a imagem a ser mostrada, a borda pode não ser desenhada. Para providenciar isso, iremos utilizar o método setBorderPainted(false).

O código do loop e criação do botão segue abaixo:

//criando os botões
Button b = null;
for ( int i = 0; i < icone.length; i++ ) {            
   b = new Button(label[i], icone[i]);            
   b.getStyle().setBgTransparency(0);            
   b.addActionListener(this);            
   b.setRolloverIcon(icone[i].scaled((int)(icone[i].getWidth()*1.3),                    
       (int)(icone[i].getHeight()*1.3)));            
   b.setPressedIcon(icone[i].scaled((int)(icone[i].getWidth()*0.8),                    
      (int)(icone[i].getHeight()*0.8)));            
   b.setBorderPainted(false);            
   fishEyeForm.addComponent(b);        
}

Tratando o uso do botão
Pessoal, nesse ponto para não perder muito tempo e não extender muito o post, veja esse mesmo tópico no post anterior, pois essa parte é exatamente igual a anterior! ;)

Download e código completo
Para facilitar, todo o código do exemplo pode ser baixado em um ZIP, clicando AQUI, e dentro da pasta deployed é possível encontrar o JAR e JAD da aplicação para você ver o exemplo funcionando ou até instalar no seu celular.

[]s
Neto