«
»

TUTORIAL JAVA + FLEX NA PRÁTICA 6/6

Esse artigo é continuação do
TUTORIAL JAVA + FLEX NA PRÁTICA 1/6
TUTORIAL JAVA + FLEX NA PRÁTICA 2/6
TUTORIAL JAVA + FLEX NA PRÁTICA 3/6
TUTORIAL JAVA + FLEX NA PRÁTICA 4/6
TUTORIAL JAVA + FLEX NA PRÁTICA 5/6

Na última parte do nosso tutorial vamos fazer a V(View) do nosso MVC, no caso são 2 tipos de arquivo, a interface em si e a Ação da mesma, lembrando que essa separação não é necessária, eu faço porque gosto de tudo bem dividido, isso ajuda e muito na manutenção ou até mesmo na alteração do Layout, uma vez eu já expliquei o porque disso no artigo Separando MXML do Action Script.

Para terminar com chave de ouro vamos ao código:

EstadoView.mxml

PLAIN TEXT
XML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2.  
  3. <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="518" height="422"
  4.      title="Cadastro de Estados" fontSize="10" xmlns="flexmdi.containers.*"
  5.      xmlns:controls="com.flexpernambuco.controls.*"
  6.      creationComplete="{init()}">
  7.  
  8.     <mx:ViewStack x="10" y="10" id="stack" width="486" height="362">
  9.  
  10.         <mx:Canvas label="View 1" width="100%" height="100%" id="canvasDefault">
  11.             <mx:Button x="138" y="330" label="Incluir" id="btnIncluir" click="{save()}"/>
  12.             <mx:Button x="209" y="330" label="Alterar" id="btnAlterar" click="{update()}"/>
  13.             <mx:Button x="284" y="330" label="Excluir" id="btnExcluir" click="{remove()}"/>
  14.             <mx :D ataGrid x="10" y="40" width="466" height="282" dataProvider="{controller.estadoList}" id="dgEstado">
  15.                 <mx:columns>
  16.                     <mx :D ataGridColumn headerText="ID" dataField="codEstado" width="70"/>
  17.                     <mx :D ataGridColumn headerText="Nome do Estado" dataField="nome"/>
  18.                     <mx :D ataGridColumn headerText="UF" dataField="uf" width="70"/>
  19.                 </mx:columns>
  20.             </mx :D ataGrid>
  21.             <mx:TextInput x="273" y="10" id="txtFind"/>
  22.             <mx:Button x="441" y="10" width="35" icon="@Embed(source='com/saberprogramar/assets/images/find-16x16.png')" id="btnFind" click="{find()}"/>
  23.         </mx:Canvas>
  24.  
  25.         <mx:Canvas label="" width="100%" height="100%" id="canvasForm">
  26.             <mx:Form x="10" y="67" width="466" height="131">
  27.                 <mx:FormItem label="ID:">
  28.                     <mx:TextInput width="72" id="txtIdEstado" editable="false" tabIndex="0"
  29.                         toolTip="Código Gerado Automático" text="{estado.idEstado.toString()}"/>
  30.                 </mx:FormItem>
  31.                 <mx:FormItem label="Nome:" required="true">
  32.                     <mx:TextInput width="339" id="txtNome" text="{estado.nome}" tabIndex="1"/>
  33.                 </mx:FormItem>
  34.                 <mx:FormItem label="UF:" required="true">
  35.                     <mx:TextInput width="43" id="txtUF" maxChars="2" text="{estado.uf}" tabIndex="2" />
  36.                 </mx:FormItem>
  37.             </mx:Form>
  38.             <mx:FormHeading x="157.5" y="21" label="Formulário de Estado" width="171"/>
  39.             <mx:Button x="160" y="206" label="Cancelar" id="btnCancelar" click="{cancel()}" tabIndex="5"/>
  40.             <mx:Button x="243" y="206" label="Confirmar" id="btnConfirmar" click="{confirm()}" tabIndex="4"/>
  41.         </mx:Canvas>
  42.     </mx:ViewStack>
  43.  
  44.     <mx:Script source="actions/EstadoAction.as"/>
  45.  
  46. </mx:TitleWindow>

PLAIN TEXT
CODE:
  1. <mx:Script source="actions/EstadoAction.as"/>

Nesta linha é que dizemos onde está as ações desta View, então vamos criar este arquivo:

EstadoAction.as

PLAIN TEXT
ACTIONSCRIPT:
  1. // ActionScript file
  2. import com.saberprogramar.controllers.IEstadoController;
  3. import com.saberprogramar.events.EstadoEvent;
  4. import com.saberprogramar.models.entitys.Estado;
  5.  
  6. import org.swizframework.Swiz;
  7.  
  8. [Bindable]
  9. private var estado:Estado;
  10.  
  11. [Bindable]
  12. [Autowire(bean="estadoController")]
  13. public var controller:IEstadoController;
  14.  
  15. private function init():void{
  16.  
  17.     Swiz.addEventListener(EstadoEvent.SAVE,onSaveComplete);
  18.     Swiz.addEventListener(EstadoEvent.REMOVE,onRemoveComplete);
  19.  
  20.     findAll();
  21. }
  22.  
  23. private function findAll():void{
  24.     controller.findAll();
  25. }
  26.  
  27. private function save():void{
  28.     estado = new Estado();
  29.     stack.selectedChild = canvasForm;
  30. }
  31.  
  32. private function update():void{
  33.  
  34.     if (dgEstado.selectedItem != null){
  35.  
  36.         dgEstado.setStyle("bordercolor",'black');
  37.         dgEstado.errorString = "";
  38.  
  39.         estado = dgEstado.selectedItem as Estado;
  40.         stack.selectedChild = canvasForm;
  41.  
  42.     }else {
  43.         dgEstado.setStyle("bordercolor",'red');
  44.         dgEstado.errorString = "Selecione um Estado para alterar";
  45.     }
  46.  
  47. }
  48.  
  49. private function remove():void{
  50.  
  51.     if (dgEstado.selectedItem != null){
  52.  
  53.         dgEstado.setStyle("bordercolor",'black');
  54.         dgEstado.errorString = "";
  55.  
  56.         estado = dgEstado.selectedItem as Estado;
  57.  
  58.         controller.remove(estado);
  59.  
  60.  
  61.     }else {
  62.         dgEstado.setStyle("bordercolor",'red');
  63.         dgEstado.errorString = "Selecione um Estado para excluir";
  64.     }
  65.  
  66. }
  67.  
  68. private function confirm():void{
  69.  
  70.     estado.idEstado = new Number(txtIdEstado.text);
  71.     estado.nome = txtNome.text;
  72.     estado.uf = txtUF.text;
  73.  
  74.     controller.save(estado);
  75.  
  76. }
  77.  
  78. private function cancel():void{
  79.     estado = new Estado();
  80.     stack.selectedChild = canvasDefault;
  81. }
  82.  
  83. private function find():void{
  84.  
  85.     if (txtFind.text != null){
  86.         controller.findByName(txtFind.text);
  87.     }
  88.  
  89. }
  90.  
  91. private function onSaveComplete(event:EstadoEvent):void{
  92.     stack.selectedChild = canvasDefault;
  93.     findAll();
  94. }
  95.  
  96. private function onRemoveComplete(event:EstadoEvent):void{
  97.     stack.selectedChild = canvasDefault;
  98.     findAll();
  99. }

Algumas explicações:

PLAIN TEXT
ACTIONSCRIPT:
  1. [Bindable]
  2. [Autowire(bean="estadoController")]
  3. public var controller:IEstadoController;

nesta parte do código estamos fazendo a escuta da nossa controladora, repare que me refiro a interface e não a que implementa a mesma, isso é o que muitos chamam de Programação Orientado a Interface, como essa escuta vai lá no nosso Bean.mxml e procura um bean com nome de "estadoController", lembrando:

PLAIN TEXT
XML:
  1. <controllers:EstadoController id="estadoController"/>

e como o nosso bean está mensionando a implementação e não a interface, ele instancia a implementação, é ou não é inteligente o Swiz :)

outra coisa que vale a pena explicar e somente isso a mais é a escuta que adicionamos aos nossos eventos no método init:

PLAIN TEXT
ACTIONSCRIPT:
  1. Swiz.addEventListener(EstadoEvent.SAVE,onSaveComplete);
  2. Swiz.addEventListener(EstadoEvent.REMOVE,onRemoveComplete);

quando fazemos esse comando acima estamos dizendo para nosso view ficar esperta, ou seja, ficar escutando qualquer disparo desses eventos, quando for disparado um dos eventos ele executa o método que se encontra no segundo parametro, exemplo o onSaveComplete que, por sua vez recebe como parametro um EstadoEvent. Lembra que no controller tem um método que dispara os nossos eventos, não lembra né, também teria esquecido :) , lembrando:

PLAIN TEXT
ACTIONSCRIPT:
  1. public function onSave(event:ResultEvent):void{
  2. Swiz.dispatchEvent(new EstadoEvent(EstadoEvent.SAVE));
  3. }

ou seja, quando é feito esse disparo é executado o nosso onSaveComplete, para quem já conhece de eventos em Flex nenhuma surpresa, somente o fato de estar usando o dispatchEvent e addEventListener do swiz e não os do SDK do próprio flex, isso tem uma explicação, o famoso Mediate do Swiz, que não vamos entrar no mérito neste tutorial, ok!

Agora como respiro final deste tutorial o Index.mxml modificado para chamar a view que acabamos de criar

index.mxml

PLAIN TEXT
XML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
  3.     preinitialize="{iniciar(event)}">
  4.  
  5.     <mx:Script>
  6.         <![CDATA[
  7.             import com.saberprogramar.views.EstadoView;
  8.             import mx.managers.PopUpManager;
  9.             import org.swizframework.Swiz;
  10.             import mx.events.FlexEvent;
  11.  
  12.             private function iniciar(event:FlexEvent):void{
  13.                 Swiz.setStrict(false).loadBeans( [Beans] );
  14.                 chamarView();
  15.             }
  16.  
  17.             private function chamarView():void{
  18.                 PopUpManager.createPopUp(this,EstadoView,false);
  19.             }
  20.  
  21.         ]]>
  22.     </mx:Script>
  23.  
  24. </mx:Application>

Como minha hospedagem não suporta java não tem como mostrar o resultado final :( mais....

Caso queira o projeto em java é só baixar aqui (sem as libs).

Caso queira o projeto em flex é só baixar aqui.

Bem, é isso, uffa, nunca imaginei que criar um tutorial fosse tão dificil e demorado :( espero que o resultado tenha sido bom :)

Considerações:

Antes de mais nada peço desculpas se o tutorial não foi muito bem explicado, se dei importância demais onde não era para dar e o que era importante não comentei, sei lá, esse tipo de coisas que pecamos por falta de experiência como blogueiro ;) mais podem ter certeza que o intuito foi o dos melhores e espero que ajude alguém, principalmente a usar MVC no flex, coisa que é muito falada mais tem poucos exemplos, principalmente na língua portuguesa.

Objetivo:

Mostrar que realmente sei o que falo que sei em meu currículo, mesmo não tendo nenhum portfólio, já que não considero meu portfólio o que faço na empresa onde trabalho, o portfólio é da empresa. Procuro contatos profissionais e serviços no que envolve desenvolvimento de sites e sistemas, quem tiver interessado é só entrar em Contato, Obrigado.

Não posso deixar de falar da minha Gata, Fernanda minha Esposa EU TE AMO MUITO, obrigado pela paciência com o seu Geek, hehhe!

Vlw, até a próx. Bons estudos para Todos e um Abraço. FIM.

Popularity: 46% [?]

Tags: , , , , , , , , , , ,

Categoria(s):#JAVA + FLEX NA PRÁTICA, Adobe Flex, Blazeds, Data Service, Frameworks, Hibernate, Java, MVC, Spring, Swiz Framework


Outros Artigos:

This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.

20 Responses to “TUTORIAL JAVA + FLEX NA PRÁTICA 6/6”

  1. Mario Junior disse:
    28/05/2009 às 21:14

    Parabéns Janderson, tenho acompanhado seu desenvolvimento. Um abraço.

    Responder
  2. Willian Mano disse:
    28/05/2009 às 21:27

    Muito bom os posts.... so tenho q comecar a trab com java.. hehe (RoR owna)... muito bom... esperando agora o post de como integrar swiz com o amfphp... e entrando na onda das notas.. hehehe.. nota 10. xD

    Responder
  3. janderson disse:
    28/05/2009 às 23:39

    @Mario Junior, obrigado, e sempre gratificante ter pessoas qualificadas como você acompanhando o nosso crescimento profissional, abraços!

    @Willian mais uma vez obrigado, e pode deixar que não esqueci não, Swiz + amfphp vai ser meu próximo artigo ;) abraços!

    Responder
  4. Willian Mano disse:
    29/05/2009 às 15:12

    Grande Janderson consegui conectar o swiz com o amfphp... eu estava querendo usar o dynamic channel set la com aquelas configuracoes e portas e endPoint... configurei apenas no remoteObject mesmo e foi... se tem outra solução... estou ansioso em vê-la... hehe

    um abraço...

    Responder
  5. Daniel disse:
    30/05/2009 às 16:13

    Janderson,
    Ótimo tutorial. Acabei de lê-lo ontem e me interessei bastante pelo Swiz. Estou buscando por material na internet para aprender mais. A abordagem prática do seu tutorial realmente fez a diferença.
    Agora uma dúvida:
    A classe EstadoView(View) possui uma instância da classe Estado(Model), de certa forma isto não é um acoplamento? As classes 'Model' da aplicação não deveriam apenas ser acessadas pelas classes 'Controller'?
    Um abraço e até a próxima.

    Responder
  6. janderson disse:
    02/06/2009 às 9:34

    @Willian parabéns Dr. na verdade fiz do mesmo jeito que vc, por mais que pesquisei sobre essa integração e ler que o dynamic channel substituisse o nosso .xml de configuração do amfphp não consegui fazer funcionar então resolvi usar de maneira tradicional como vc fez.

    @Daniel bem vindo ao blog Daniel, obrigado pelos elogios, sobre a instancia da entidade Estado vc tem total razão, acabei criando um acoplamento muito grande, fora que a view não deveria se comunicar com o model diretamente, o mesmo acontece no backend(java) por mais que a entidade esteja na camada de negócios ela também possui dependência na camada de dados, porém... :)

    vc poderia resolver isso criando um VO que teria um tempo de vida curto, da view para controlller e na controller instanciar um model, mais acredite ninguém faz por ser uma atividade sem muitos beneficios, muda a entidade, tem que mudar a VO da entidade... vc acaba criando mais dor de cabeça, é o caso na teoria é bonito na prática ninguém faz :)

    Cumps.

    Responder
  7. Marcelo Daniel disse:
    02/06/2009 às 23:49

    Parabéns pelo excelente trabalho. Boas ações devem ser reconhecidas e honradas. Trabalho com flex e sempre fui defensor do cairngorm, mas pelo fato de vc escrever demais com ele, acabei gostando do swiz.

    Responder
  8. Daniel disse:
    05/06/2009 às 1:35

    Janderson, Boa noite.

    Teria como você fazer um tutorial de utilização da classe ChainCommand do Swiz? Estou estudando ela, mas pelo menos comigo está dando um erro estranho (as funções são executadas, mas no final dá um erro estranho, interno ao Swiz).

    Agora outra dúvida (antes de mais nada, desculpe-me por estar alugando o seu tempo, mas é que prefiro tirar dúvidas em português), o Swiz gera todas as instâncias das Classes 'Controller' como Singleton não é? Saberia me dize quais as vantagens? Pois estou criando uma aplicação de teste, que possui navegação por janelas, e isto está sendo um problema, pois alguns dados que eu trouxe do back-end ainda continuam mesmo depois de eu fechar a janela (TitleWindow). Haveria alguma problema se eu registrasse esses controles como Prototype?

    Obrigado e desculpe o incomodo.

    Responder
  9. janderson disse:
    08/06/2009 às 14:30

    @Daniel, desculpe pela demora para responder, sobre o ChainCommand normalmente não uso, prefiro usar o executeServiceCall (cada function do Delegate tem uma function na Controller), como pode ver no tutorial, porém estou com intenção, sendo que este mês estou bem enrolado, de criar um bônus neste tutorial, explicando como Usar o Mediate do Swiz, talvez poderia aproveitar e colocar o ChainCommand tbm.

    Sobre o Controller, eu até li novamente o Wiki do Swiz, porém não vi nada que confirmasse que o controller é um singleton (pode ser, ou se não a cada Autowire é instanciado um novo objeto do bean configurado, como é feito no Spring),e isso não é singleton. Singleton è quando um objeto só pode ser instanciado uma vez, no caso do Swiz, na factory interna do mesmo ele pode verificar se já foi instaciada e usar a mesma(singleton) ou pode instacia uma nova, neste caso tbm fiquei na dúvida, se é ou não é singleton. De qualquer forma este não deve ser o seu problema, ao fechar uma janela e abrir de novo concerteza teria que atualizar, pois pe feito mais uma requisição no RemoteObject, independente de ser singleton ou não teria que atualizar.

    Cunps.

    Responder
  10. andersen disse:
    08/06/2009 às 17:10

    Janderson,

    Sobre as libs, quais as necessarias?
    Parabens pelo tutorial.

    Obrigado.

    Responder
  11. Rafael disse:
    13/06/2009 às 12:26

    Parabéns.Há 1 mes aproximadamente, iniciei um projeto onde pensei em implementar o Swiz, mas pela falta de material acabei desistindo já que seria loucura da minha parte, e precisava da aplicação em pouco tempo.

    Quando li seu material nem acreditei, era tudo que eu estava precisando.Semana que vem vou pegar um tempo livre e refatorar meu projeto para usar o Swiz.

    Força ai, e continue firme com o blog que está ajudando muito a comunidade :D

    Responder
  12. janderson disse:
    13/06/2009 às 12:39

    @Rafael vlw Dr., muito obrigado pelo comentário, fico feliz em te ajudar, aliás, esse sempre é o objetivo ;) ajudar a comunidade, através dela que aprendi tudo o que sei.

    @Anderssen, como falei na primeira parte do tutorial as libs pode ser encontrada no exemplo do Rodrigo Fraga ;)

    Cumps.

    Responder
  13. TUTORIAL JAVA + FLEX NA PRÁTICA 7/6 - Bônus | SaberProgramar.com disse:
    20/07/2009 às 9:02

    [...] Esse artigo é continuação do TUTORIAL JAVA + FLEX NA PRÁTICA 1/6 TUTORIAL JAVA + FLEX NA PRÁTICA 2/6 TUTORIAL JAVA + FLEX NA PRÁTICA 3/6 TUTORIAL JAVA + FLEX NA PRÁTICA 4/6 TUTORIAL JAVA + FLEX NA PRÁTICA 5/6 TUTORIAL JAVA + FLEX NA PRÁTICA 6/6 [...]

    Responder
  14. Sérgio disse:
    09/08/2009 às 1:58

    Boa noite Janderson, parabens pelo tutorial ficou ótimo e me ajudou bastante.
    Bem eu estou fazendo meu TCC utilizando java, hibernate, spring, blazeds e flex.
    Não ia utilizar framework no flex pq como pode ver ja estou usando vários. Mas acabei encontrando seu tutorial e alterei meu projeto pra utilizar o swiz. Estou com um problema parecido com o do Daniel, minha aplicação possui abas, o usuário pode abrir quantas quiser e nestas abas o usuário pode ver cotações de empresas e bolsas de valores o meu problema é que quando eu atualizo uma aba, ele atualiza todas as outras, isso pq eu estou usando o bindable e se eu tiro o bindable os valores aparecem vazios. Não sei se os controlers são Singleton mas tem alguma forma de eu resolver este problema? Se voce tiver alguma idéia pq eu ja estou batendo com a minha cabeça na parede rsrs.

    Um abraço.

    Responder
  15. Sergio disse:
    09/08/2009 às 13:23

    Isso resolveu meu problema. Descobri que com o Prototype o swiz cria sempresa uma instância nova do controller.

    Abraço.

    Responder
  16. janderson disse:
    09/08/2009 às 16:45

    Muito interessante Sergio, obrigado por compartilhar a solução do seu problema, resumindo então, agora sabemos que o prototype que determina se o swiz usa padrão singeton ou não, estive analisando a classe Propotype do swiz e ela confirma tudo que falamos aqui. http://code.google.com/p/swizframework/source/browse/trunk/src/main/flex/org/swizframework/factory/Prototype.as?spec=svn38&r=38

    Mais uma vez obrigado Sergio, vivendo e aprendendo ;)

    Cumps.

    Responder
  17. Davi disse:
    10/01/2010 às 18:26

    Parabens Janderson!! andei estudando o Swiz e achei demais, além do mais sempre é bom ter bons artigos que ajuda as pessoas a espandir seus horizontes, parabéns mais uma vez, Abraços.

    Responder
  18. clonex8 disse:
    14/02/2010 às 19:42

    Ow cara, ótimo tutorial!! valeu, mas pramim só ficou uma dúvida. Seguinte, estou usando o tomcat 6, e quando vou no projeto flex, clico em Run As Flex Application... ele start normal, mas como faço para rodar no localhost? Em propriedades do projeto, Output Folder URL está vazio, e em RUN AS - Run Configuration está apostando para "C:Program Fileseclipseworkspacefiscalflexbin-debugindex.html"...
    Como faço para rodar em http://localhost:8080/meuproject/

    vlw.. desculpa a pergunta se for muito iniciante..

    Responder
    • jandersonfc disse:
      17/02/2010 às 2:42

      na verdade é uma pergunta válida, o que acontece é que seu projeto flex não está em nenhum servidor, e sim foi armazenado no seu workspace, por isso não adianta configurar para acessar um servidor que não vai funcionar, se quando vc criou o projeto flex vc mandou criar dentro da pasta webapps do tomcat, aí sim vc vai conseguir acessar via url localhost:8080 senão não adianta...

      Agora é claro que digo isso em nível de desenvolvimento, tipo..já está pronto, como juntar os dois e colocar em um servidor? só mandar exportar o projeto flex e colocar os arquivos que será gerado dentro do webcontent... que vai funcionar legal...

      Mas janderson, não tem um jeito de configurar para fazer isso automatizado? tem sim, para isso existe o maven, que já tem bastante material na net integrando java e flex, em casos mais simples tem tbm o ant mais esse só a nível de fazer a configuração para gerar o .war e tal... nada a nível de gerenciamento do projeto como é o maven...

      espero que tenha esclarecido ;)

      Cumps.

      Responder

Leave a Reply