segunda-feira, 26 de maio de 2008

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

10 comentários:

Anônimo disse...

Fala Neto!


Parabens, vc esta esplorando muito bem o lwuit. As demos estao muito objetivas o que ajuda aos outros desenvolvedores.

Abracos.

Rodrigo Meirelles

Neto Marin disse...

Valeu Rodrigo!
Estou bolando mais algumas brincadeiras com caixas de diálogo e logo logo deve ter um post novo!

[]s
Neto

Neto disse...

Estou começando com J2ME e parei aqui no seu blog, realmente muito interessante o seu trabalho com LWUIT, vou tentar usar :)

Siba disse...

Bom dia Neto,
Cheguei a seu blog googlando por ai, estou precisando de uma ajuda em uma questao sobre J2ME, preciso desenvovler uma aplicacao simples que faça uma operacao matematica através de bluetooth, o projeto eh o seguinte ter um valor em um dispositivo e enviar parte do valor para outro como se fosse um pagamento movel, nao sou familiarizado com a plataforma e nao consigo achar um exemplo disso na web, se tiver tmpo para me auxiliar ficarei muito agradecido! Qualquer coisa segue meu email a baixo, desde já agradeço atencao dispensada e parabens pelo seu blog!

aspire3420@gmail.com

Grande abs
Siba!

GrepTips disse...

Este código não funciona.
Já experimentas-te se funciona?
O carregamento de imagens no método construtor simplesmente não funciona.

fernandofranzini disse...

Fala Neto
Exemplo muito legal...era oque eu precisava para começar meu projeto aqui !! Valeu brow !!!
A paz.

Teste disse...

Cara, o carregamento da imagem no construtor não funciona.

Teria como verificar???

Grato.

Neto Marin disse...

Na verdade o problema é o Display.init(this) q está no startApp(), vcs tem move-lo para o começo do construtor.

Foi mal pessoal.

[]s
Neto

Teste disse...

Neto,

Obrigado pela rápida resposta.

Mas o erro continua. Não adiantou colocar no construtor.

Grato.

Anônimo disse...

Вот еще немного ссылок на тему, Invictory Знакомства

Знакомства Сегодня - http://clarkeburton.dousetsu.com
Опен Сайт Знакомств - http://ryanigor.dousetsu.com
Секс Для Удовольствия - http://grayulric.dousetsu.com
Фото Мужчин С Сайта Знакомств - http://baxterciaran.dousetsu.com
Самые Большие Сайты Знакомств - http://peterdieter.dousetsu.com
Сайт Знакомств Для Лесбиянок - http://traviskareem.dousetsu.com
Tatar Сайт Знакомств - http://rajanigel.dousetsu.com
Давай Познакомимся Стихи - http://ericmarshall.dousetsu.com
Знакомства Через Веб - http://nolanmacaulay.dousetsu.com
Замужние Женщины Для Секса - http://ezekieluriah.dousetsu.com
Как Оригинально Познакомиться - http://rudyardroth.dousetsu.com
Сайт Знакомств В Мариуполе - http://eltonjarrod.dousetsu.com
Секс Видио Чат Онлайн - http://gilzane.dousetsu.com
Возраст Для Первого Секса - http://dillonoleg.dousetsu.com
Зеленоградский Сайт Знакомств - http://tanekjonas.dousetsu.com
Юины Для Секса - http://colthoward.dousetsu.com
Знакомства Для Секса За Деньги - http://wadeodysseus.dousetsu.com
Реальные Встречи Для Секса - http://lucianorson.dousetsu.com
Знакомства Лучшие - http://brennanknox.dousetsu.com
Сайт Знакомств Для Полных Людей - http://guytyrone.dousetsu.com
Мамаба Сайт Знакомств - http://alicolby.dousetsu.com
Как Оригинально Познакомиться - http://berkchanning.dousetsu.com
Сайт Знакомств В Эстонии - http://hedleymicah.dousetsu.com
Откровенные Знакомства - http://clintonmalik.dousetsu.com
Движок Знакомств - http://masonslade.dousetsu.com
Донецкий Сайт Знакомств - http://stoneblaze.dousetsu.com
Онлайн Секс Чат Девушки - http://jacksonerasmus.dousetsu.com
Nirvana Сайт Знакомств - http://patrickmagee.dousetsu.com
Хочу Познакомиться С Итальянцем - http://borisalec.dousetsu.com
Вирт Знакомства Чат - http://brianleroy.dousetsu.com
Секс Игры Для Мобильного - http://grahamcedric.dousetsu.com
Ищу Девушку Для Виртуального Секса - http://marshallconan.dousetsu.com
Лесби Чат Знакомств - http://paulelijah.dousetsu.com
Познакомились В Интернете И Поженились - http://avrameric.dousetsu.com
Необычные Позы Для Секса Фото - http://joelkennedy.dousetsu.com
Знакомства Нефтекамск - http://uptonwilliam.dousetsu.com
Видео Позы Секса Для Беременных - http://kieranoleg.dousetsu.com
Сайт Серьезных Знакомств - http://channingjohn.dousetsu.com
Знакомства Mail Ru Без Регистрации - http://yulinicholas.dousetsu.com
Знакомства В Москве И Московской - http://isaacdriscoll.dousetsu.com
Секс Чат Майл - http://jerryemery.dousetsu.com
Оральный Секс Для Девушки - http://abelbenjamin.dousetsu.com
Planet Знакомства - http://abeljakeem.dousetsu.com
Красноярский Сайт Знакомств - http://mylesmicah.dousetsu.com
Сервер Знакомств - http://dominicarden.dousetsu.com
Сайт Знакомств От 50 Лет - http://jakeememerson.dousetsu.com
Секс Игрушки Для Котов - http://herrodandrew.dousetsu.com
Секс Для Oblivion - http://rashadezekiel.dousetsu.com
Девушки Для Секса В Уфе - http://hoyttanner.dousetsu.com
Девушки Для Секса Ярославль - http://kaseemraja.dousetsu.com