logo
  • Home
  • Acerca
  • Autores
  • Faq
  • Rede
  Twitter   Feed-me! RSS!

Componente de Destaque – Flex 4

Colocado por DClick Team na(s) categoria(s): 1, 2009, 4, 6, action, Actionscript, Adobe, Air, app, AR, back, BI, blog, boolean, class, classe, Componente, Componentes, components, control, Destaque, efeito, exemplo, Flex, Flex Components, function, fundo, IE, if, int, interface, library, MXML, O, on, painel, pt, Ria’s Geral, spark, TAT, Twitter, UI, UX, XML em 02 28th, 2011 | Sem comentários

aqui a biblioteca que contém o componente, e adicioná-la na pasta libs do seu projeto.

2. Agora precisamos incluir a classe principal do componente no Application do nosso projeto Flex.

PLAIN TEXT
ACTIONSCRIPT:

  1. xml version=“1.0″ encoding=“utf-8″?>
  2. “http://ns.adobe.com/mxml/2009″
  3. ? ? ? ? ? ?? ? xmlns:s=“library://ns.adobe.com/flex/spark”
  4. ? ? ? ? ? ?? ? xmlns:mx=“library://ns.adobe.com/flex/mx”
  5. ? ? ? ? ? ?? ? xmlns:zoom=“br.com.dclick.components.zoom.*”>
  6. ? ?
  7. ? ? ? ?
  8. ? ?
  9. ? ?

3. Devemos extender os objetos que desejamos destacar e implementar a interface br.com.dclick.components.zoom.IZoomItem, no meu exemplo, eu extendi a classe Panel que ficou assim.

PLAIN TEXT
ACTIONSCRIPT:

  1. package
  2. {
  3. ? ? /**
  4. ? ?? * @author Bruno Sales
  5. ? ?? * Created: 28/02/2011
  6. ? ?? */
  7. ? ? import br.com.dclick.components.zoom.IZoomItem;
  8. ? ?
  9. ? ? import spark.components.Panel;
  10. ? ?
  11. ? ? public class PanelZoom extends Panel implements IZoomItem
  12. ? ? {
  13. ? ? ? ? public function PanelZoom()
  14. ? ? ? ? {
  15. ? ? ? ? ? ? super();
  16. ? ? ? ? }
  17. ? ? ? ?
  18. ? ? ? ? public function useBackgroundZoomContainer():Boolean
  19. ? ? ? ? {
  20. ? ? ? ? ? ? return false;
  21. ? ? ? ? }
  22. ? ? }
  23. }

4. Observe o método useBackgroundZoomContainer():Boolean da interface IZoomItem, ele serve para auxiliar quando estamos tentando destacar um componente com fundo transparente, como no caso apresentado o meu Panel não tem um background transparente, então eu retorno false no método.

5. Aplicar a minha nova classe PanelZoom ao meu Application.

PLAIN TEXT
ACTIONSCRIPT:

  1. xml version=“1.0″ encoding=“utf-8″?>
  2. “http://ns.adobe.com/mxml/2009″
  3. ? ? ? ? ? ?? ? xmlns:s=“library://ns.adobe.com/flex/spark”
  4. ? ? ? ? ? ?? ? xmlns:mx=“library://ns.adobe.com/flex/mx”
  5. ? ? ? ? ? ?? ? xmlns:zoom=“br.com.dclick.components.zoom.*”
  6. ? ? ? ? ? ?? ? xmlns:local=“*”>
  7. ? ?
  8. ? ? ? ?
  9. ? ?
  10. ? ?
  11. ? ? width=“200″ height=“200″/>
  12. ? ?

6. Executar o projeto e clicar no novo painel segurando o SHIFT para testar o efeito.

Agora já podem abusar do componente e extender qualquer tipo de componente visual. Espero que tenham gostado!



Veja o post original no blog do autor aqui!  

DClick Team

Escrito por DClick Team @ http://blog.dclick.com.br/pt/
Saiba mais sobre o autor na sua pagina de perfil
Outros posts do autor:
» PureMVC Object C - Para Iphone
» Criando uma Vitrine Virtual – Aula 1
» DClick Holmes Preview

Deixe um comentário



Spam Protection by WP-SpamFree

Componente de Destaque – Flex 4

Colocado por DClick Team na(s) categoria(s): 1, 2009, 4, 6, action, Actionscript, Adobe, Air, app, AR, back, BI, blog, boolean, class, classe, Componente, Componentes, components, control, Destaque, efeito, exemplo, Flex, Flex Components, function, fundo, IE, if, int, interface, library, MXML, O, on, painel, pt, Ria’s Geral, spark, TAT, Twitter, UI, UX, XML em 02 28th, 2011 | Sem comentários

aqui a biblioteca que contém o componente, e adicioná-la na pasta libs do seu projeto.

2. Agora precisamos incluir a classe principal do componente no Application do nosso projeto Flex.

PLAIN TEXT
ACTIONSCRIPT:

  1. xml version=“1.0″ encoding=“utf-8″?>
  2. “http://ns.adobe.com/mxml/2009″
  3. ? ? ? ? ? ?? ? xmlns:s=“library://ns.adobe.com/flex/spark”
  4. ? ? ? ? ? ?? ? xmlns:mx=“library://ns.adobe.com/flex/mx”
  5. ? ? ? ? ? ?? ? xmlns:zoom=“br.com.dclick.components.zoom.*”>
  6. ? ?
  7. ? ? ? ?
  8. ? ?
  9. ? ?

3. Devemos extender os objetos que desejamos destacar e implementar a interface br.com.dclick.components.zoom.IZoomItem, no meu exemplo, eu extendi a classe Panel que ficou assim.

PLAIN TEXT
ACTIONSCRIPT:

  1. package
  2. {
  3. ? ? /**
  4. ? ?? * @author Bruno Sales
  5. ? ?? * Created: 28/02/2011
  6. ? ?? */
  7. ? ? import br.com.dclick.components.zoom.IZoomItem;
  8. ? ?
  9. ? ? import spark.components.Panel;
  10. ? ?
  11. ? ? public class PanelZoom extends Panel implements IZoomItem
  12. ? ? {
  13. ? ? ? ? public function PanelZoom()
  14. ? ? ? ? {
  15. ? ? ? ? ? ? super();
  16. ? ? ? ? }
  17. ? ? ? ?
  18. ? ? ? ? public function useBackgroundZoomContainer():Boolean
  19. ? ? ? ? {
  20. ? ? ? ? ? ? return false;
  21. ? ? ? ? }
  22. ? ? }
  23. }

4. Observe o método useBackgroundZoomContainer():Boolean da interface IZoomItem, ele serve para auxiliar quando estamos tentando destacar um componente com fundo transparente, como no caso apresentado o meu Panel não tem um background transparente, então eu retorno false no método.

5. Aplicar a minha nova classe PanelZoom ao meu Application.

PLAIN TEXT
ACTIONSCRIPT:

  1. xml version=“1.0″ encoding=“utf-8″?>
  2. “http://ns.adobe.com/mxml/2009″
  3. ? ? ? ? ? ?? ? xmlns:s=“library://ns.adobe.com/flex/spark”
  4. ? ? ? ? ? ?? ? xmlns:mx=“library://ns.adobe.com/flex/mx”
  5. ? ? ? ? ? ?? ? xmlns:zoom=“br.com.dclick.components.zoom.*”
  6. ? ? ? ? ? ?? ? xmlns:local=“*”>
  7. ? ?
  8. ? ? ? ?
  9. ? ?
  10. ? ?
  11. ? ? width=“200″ height=“200″/>
  12. ? ?

6. Executar o projeto e clicar no novo painel segurando o SHIFT para testar o efeito.

Agora já podem abusar do componente e extender qualquer tipo de componente visual. Espero que tenham gostado!



Veja o post original no blog do autor aqui!