Flex Menu tutorial / Exemplo

Flex Menu tutorial / Exemplo

Pois bem, depois de um pedido de ajuda sobre como fazer um menu simples, decidi por mãos à obra em em 20 minutos surgiu um exemplo de como aproveitar uma TitleList para fazer um simples menu, com um código da aplicação que não passa de 30 linhas e com um canvas como itemRender com cerca de 25 linhas, temos um menu que pode ser personalizada e usada nas mais variadas ocasiões.

Como podem ver pela imagem ao lado, este menu apresenta uma aparencia bem simples e agradavel sem sobrecarregar o nosso aplicativo e altamente personalizavel. Como os eventos click, rollOver, itemclick e quase todos os eventos do button estão presentes na titleList é muito facil usar o menu interceptando esses mesmos eventos na TileList.

Veja o código…


testGridMenu.mxml












menuRender.mxml









Bem simples ah?

Vejam o exemplo online aqui

Espero que seja util
Abraço.


20 comments

add yours
  • Victor Chaves Garcia September 5, 2008

    Mário, beleza! Obrigado. Neste exemplo consigo colocar aquele efeito de ir ficando branco o menu ao passar por cima? :)

  • Mário Santos September 5, 2008

    basta no menuRender fazer o efeito nele proprio, algo como

    private function init():void {
    this.addEventListener(MouseEvent.MOUSE_OVER, animaOver);
    this.addEventListener(MouseEvent.MOUSE_OUT, animaOut);
    }

    private function animaOver(ev:MouseEvent):void {
    //efeito animOver sempre com o target “this”
    }

    private function animaOut(ev:MouseEvent):void {
    //efeito animOut sempre com o target “this”
    }

    chama esta função “init” no creationComplete=”init()”

    p.s. Pode usar as funções que já existem para fazer os efeitos: “changeOver()”, “changeOut”, respondi e nem me lembrei que já tinha as funções feitas, não necessitando do código em cima.. mas fica em comentario para ajudar alguém em situações semelhantes.

    Isto deve funcionar :p
    Abraço!

  • thiano September 5, 2008

    po mario se parece q anda adivinhando meus pensamentos eimmmm
    mto legal esse menu … ja ate abri mao daquele outro q vc me mostrou… no post dos componentes..rs…rs Que eu testei e deu certo e acabei nao agradecendo vc .. obrigado pela força. To aterefado com outras coisas do projeto mas logo te encho mais o saco

  • Mário Santos September 5, 2008

    Oupa thiano.

    Ainda bem que gostou, e como pode ver é bem simples, facil de entender e de configurar ah? :)

    Abraço.

  • Erle Carrara September 6, 2008

    Mario, não seria mais fácil(e rápido) fazer esse menu usando CSS? Com seria mais fácil e muito menos complicado, além de seguir os padrões web.

  • Brian September 7, 2008

    Parabéns pelo trabalho, Mário.

  • Mário Santos September 7, 2008

    Boas Erle!

    O proprio flash em si já não segue praticamente nenhum padrão web, e claro que podia usar css para personalizar alguns pontos do menu, mas nunca conseguiria fazer o menu em css, visto que o css que é usado no flex ainda não permite muitas coisas. Não estará a confundir css do html com o css do flash/flex ? é que não é usando css no flex que o menu fica mais dentro dos padrões web..

    Mas quem utilizar o menu pode sempre aplicar alguns estilos ou ainda melhor, usar uma class ou xml com constantes para definir as cores do menu, textos e icons…

    Mas nada de grave…

    Brian, Obrigado.

  • Nardelis (Brasil) September 10, 2008

    Oi Mário! Parabéns pelo ótimo trabalho.
    Sou admirador do flex, só que totalmente recruta, pergunto por onde começar? Entrar direto no flex é muito complicado. Que material é nescessário aprender antes do flex.
    Um abraço

  • Mário Santos September 10, 2008

    Boas Nardelis, não se preocupa que ainda vai a tempo de aprender :)

    Bem, aqui no blog têm alguns tutoriais, como o Adobe Flex a partir do zero, que é mesmo para iniciantes, começa na instalação e vai ensinando passo a passo… conta cm 5 partes, todas compiladas num unico e-book. Veja a lista:
    http://msdevstudio.com/blog/2008/06/30/adobe-flex-a-partir-do-zero-livro-actualizado/

    Depois para dar ajuda também está disponivel no blog uma iniciação ao Action Script 3, usado no flex, que pode ver o e-book em:
    http://msdevstudio.com/blog/2008/06/30/tutorial-action-script-3-parte-i-o-livro/

    de resto pode correr aqui o blog que conta com muita informação, ainda têm algumas referencias em Português como o blog do vedovelli com os seus screencasts, listas como a flexDev ou a flexbrasil, ou até o fórum flexbrasil… basta dar uma procurada no google que encontra ainda mais referencias.

    http://vedovelli.com.br
    http://br.groups.yahoo.com/group/flex-brasil (flexbrasil)
    http://forum.flexbrasil.com.br/ (forum flexbrasil)
    http://groups.google.com/group/riapt (riapt.org)
    http://groups.google.com/group/flexdev (flexdev)

    Bom, deve chegar para se manter nos estudos algumas semanas… qq duvida avise.
    Abraço.

  • Ved September 10, 2008

    Mario, bacana demais! Faltam tutos sobre como utilizar com criatividade os componentes nativos do Flex!

    Eu venho aplicando bastante isso nos meus novos sistemas. Agora vejo como o background adquirido na época que eu “fazia pagina” tem me ajudado, principalmente na hora que é necessário ser criativo!

    Sou seu fã, cara!

    Abração do Ved

  • Nardelis (Brasil) September 10, 2008

    Oi Mario! Obrigado pelas dicas, já baixei os seus tutoriais, muito bem elaborado, vou começar a estudar. Aproveitando a oportunidade, é possível fazer uma página inteira só usando os recursos gráficos do programa Flex?
    Um abraço!

  • Jorge (Brasil) September 10, 2008

    Olá, Mário. Meus parabéns! Também sou fã do seu blog. Comecei com o Flex a umas 2 semanas e muito do que aprendi foi por aqui. Só tenho uma pergunta a fazer: se eu quiser tirar alguma dúvida com você ou com outra pessoa que frequente o blog, onde eu a coloco? Abraços.

  • Mário Santos September 10, 2008

    Ved. Às vezes vejo pessoas importando librarias e mais librarias que só ocupam espaço quando se podem fazer as mesmas coisas quase sem trabalho, nesse exemplo dá mesmo pra ver a quantidade de código que poupamos… existem librarias que fariam esse trabalho, mas iriam acrescentar muito mais “lixo” ao nosso aplicativo, claro que o exemplo em cima pode ser mais limpo, extendendo o tile, mas é apenas para mostrar que por vezes o que parece deficil é bem facil :)

    Quanto ao aprendido ao fazer pagina, também é bastante util porque afinal o flex acaba por conseguir substituir qualquer frontend.. :P

    Quanto ao fã! Valeu, mas também foi graças ao seu blog que me deu inspiração pra montar o meu! :) Por isso também sou seu fã :=)

    Abraço.

    Nardelis.
    Como Ved referiu em cima (autor do blog vedovelli.com.br) e como acabei por referir mais em baixo, o flex consegue sem duvida substituir um frontend, embora se necessitar de alguns dados mais complexos terá mesmo que perceber um pouco de AS3, visto que todos os elementos visuais na hora da compilação do aplicativo viram AS3 puro :)

    Abraço.

    Jorge.
    Obrigado. Se quiser tirar duvidas relativas a uma entrada do blog pode coloca-la em resposta, mas o ideal será utilizar o pequeno fórum que construi para isso mesmo. Veja: http://forum.msdevstudio.com

    Abraço.

  • Nardelis (Brasil) September 12, 2008

    Valeu Mário, com o pouco tempo que freqüento seu blog aprendi bastante, pois a maioria do material localizado na internet é em inglês. Tem vários fóruns mais com pessoas já em nível avançado. Não quero atrapalhar os comentários referente ao assunto iniciado, você tem espaço definido para dúvidas? Instalei o Flex 3 com ajuda do seu tutorial, e deu tudo certo. Consegui o flex num blog que só falam num tal de Eclipse, não consegui definição dos tipos de flex, SDK, etc.. tão pouco o Eclipse. Afinal o flex precisa do Eclipse? O que é Eclipse?
    Desde já agradeço suas considerações.
    Um abraço

  • Mário Santos September 12, 2008

    Nardelis, tive um pouco de tempo e coloquei um post explicando as suas duvidas, veja se ajudou:

    http://msdevstudio.com/blog/2008/09/12/flex-sdk-builder-air-eclipse-as3-por-onde-comecar/

    quanto a outras duvidas pode usar o recem criado forum mesmo para duvidas não relativas ao blog:
    http://forum.msdevstudio.com

    Abraço.

  • weslei pimenta November 5, 2008

    Bom dia Mário , estou aprendendo aos poucos sobre a arquitetura do Flex porem gostaria de saber como integrar o flash e o flex, pois tenho uma tela com uma introdução animada e no ultimo frame a tela finaliza com o menu, como posso utilizar as variávis de dentro do swf pelo flex de forma que ao clicar ela chame uma página externa feita no flex?

  • Mário Santos November 5, 2008

    weslei, não entendi muito bem a tua duvida, você quer que ao clicar num item de um menu (feito em flex ?) abra uma nova pagina no browser com outro elemento também ele feito em flex ??

    Estará a querer fazer como no html normal ? ao clicar num link abrir uma pagina ?

    cumps.

  • Daliano November 6, 2008

    FAntastico Mário, eu já sou fã do flex a um bom tempo e venho sempre tentando aprender com material da net, mas com o ved e com vc consegui os melhores e mais simples material para iniciante…..

    continuem com o bom trabalho…….

  • Mário Santos November 6, 2008

    Oupa Daliano, valeu pelas palavras!!

  • Samuel September 17, 2010

    Muito interessante este Menu, teria como vc nos mostrar um exemplo utilizando FLEX 4??

Leave a Comment

Post