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.
Form fishEyeForm = new Form("FishEye List");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:
fishEyeForm.setLayout(new BoxLayout(BoxLayout.Y_AXIS));
try {
fishEyeForm.setBgImage(Image.createImage("/background.png"));
} catch (IOException e) {}
- 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).
//criando os botõesTratando o uso do botão
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);
}
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