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
-
<?xml version=“1.0″ encoding=“utf-8″?>
-
-
<mx:TitleWindow xmlns:mx=“http://www.adobe.com/2006/mxml” layout=“absolute” width=“518″ height=“422″
-
title=“Cadastro de Estados” fontSize=“10″ xmlns=“flexmdi.containers.*”
-
xmlns:controls=“com.flexpernambuco.controls.*”
-
creationComplete=“{init()}”>
-
-
<mx:ViewStack x=“10″ y=“10″ id=“stack” width=“486″ height=“362″>
-
-
<mx:Canvas label=“View 1″ width=“100%” height=“100%” id=“canvasDefault”>
-
<mx:Button x=“138″ y=“330″ label=“Incluir” id=“btnIncluir” click=“{save()}”/>
-
<mx:Button x=“209″ y=“330″ label=“Alterar” id=“btnAlterar” click=“{update()}”/>
-
<mx:Button x=“284″ y=“330″ label=“Excluir” id=“btnExcluir” click=“{remove()}”/>
-
<mx
ataGrid x=“10″ y=“40″ width=“466″ height=“282″ dataProvider=“{controller.estadoList}” id=“dgEstado”> -
<mx:columns>
-
<mx ataGridColumn headerText=“ID” dataField=“codEstado” width=“70″/>
-
<mx ataGridColumn headerText=“Nome do Estado” dataField=“nome”/>
-
<mx ataGridColumn headerText=“UF” dataField=“uf” width=“70″/>
-
</mx:columns>
-
</mx ataGrid>
-
<mx:TextInput x=“273″ y=“10″ id=“txtFind”/>
-
<mx:Button x=“441″ y=“10″ width=“35″ icon=“@Embed(source=’com/saberprogramar/assets/images/find-16×16.png’)” id=“btnFind” click=“{find()}”/>
-
</mx:Canvas>
-
-
<mx:Canvas label=“” width=“100%” height=“100%” id=“canvasForm”>
-
<mx:Form x=“10″ y=“67″ width=“466″ height=“131″>
-
<mx:FormItem label=“ID:”>
-
<mx:TextInput width=“72″ id=“txtIdEstado” editable=“false” tabIndex=“0″
-
toolTip=“Código Gerado Automático” text=“{estado.idEstado.toString()}”/>
-
</mx:FormItem>
-
<mx:FormItem label=“Nome:” required=“true”>
-
<mx:TextInput width=“339″ id=“txtNome” text=“{estado.nome}” tabIndex=“1″/>
-
</mx:FormItem>
-
<mx:FormItem label=“UF:” required=“true”>
-
<mx:TextInput width=“43″ id=“txtUF” maxChars=“2″ text=“{estado.uf}” tabIndex=“2″ />
-
</mx:FormItem>
-
</mx:Form>
-
<mx:FormHeading x=“157.5″ y=“21″ label=“Formulário de Estado” width=“171″/>
-
<mx:Button x=“160″ y=“206″ label=“Cancelar” id=“btnCancelar” click=“{cancel()}” tabIndex=“5″/>
-
<mx:Button x=“243″ y=“206″ label=“Confirmar” id=“btnConfirmar” click=“{confirm()}” tabIndex=“4″/>
-
</mx:Canvas>
-
</mx:ViewStack>
-
-
<mx:Script source=“actions/EstadoAction.as”/>
-
-
</mx:TitleWindow>
-
<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
-
// ActionScript file
-
import com.saberprogramar.controllers.IEstadoController;
-
import com.saberprogramar.events.EstadoEvent;
-
import com.saberprogramar.models.entitys.Estado;
-
-
import org.swizframework.Swiz;
-
-
[Bindable]
-
private var estado:Estado;
-
-
[Bindable]
-
[Autowire(bean=“estadoController”)]
-
public var controller:IEstadoController;
-
-
private function init():void{
-
-
Swiz.addEventListener(EstadoEvent.SAVE,onSaveComplete);
-
Swiz.addEventListener(EstadoEvent.REMOVE,onRemoveComplete);
-
-
findAll();
-
}
-
-
private function findAll():void{
-
controller.findAll();
-
}
-
-
private function save():void{
-
estado = new Estado();
-
stack.selectedChild = canvasForm;
-
}
-
-
private function update():void{
-
-
if (dgEstado.selectedItem != null){
-
-
dgEstado.setStyle(“bordercolor”,‘black’);
-
dgEstado.errorString = “”;
-
-
estado = dgEstado.selectedItem as Estado;
-
stack.selectedChild = canvasForm;
-
-
}else {
-
dgEstado.setStyle(“bordercolor”,‘red’);
-
dgEstado.errorString = “Selecione um Estado para alterar”;
-
}
-
-
}
-
-
private function remove():void{
-
-
if (dgEstado.selectedItem != null){
-
-
dgEstado.setStyle(“bordercolor”,‘black’);
-
dgEstado.errorString = “”;
-
-
estado = dgEstado.selectedItem as Estado;
-
-
controller.remove(estado);
-
-
-
}else {
-
dgEstado.setStyle(“bordercolor”,‘red’);
-
dgEstado.errorString = “Selecione um Estado para excluir”;
-
}
-
-
}
-
-
private function confirm():void{
-
-
estado.idEstado = new Number(txtIdEstado.text);
-
estado.nome = txtNome.text;
-
estado.uf = txtUF.text;
-
-
controller.save(estado);
-
-
}
-
-
private function cancel():void{
-
estado = new Estado();
-
stack.selectedChild = canvasDefault;
-
}
-
-
private function find():void{
-
-
if (txtFind.text != null){
-
controller.findByName(txtFind.text);
-
}
-
-
}
-
-
private function onSaveComplete(event:EstadoEvent):void{
-
stack.selectedChild = canvasDefault;
-
findAll();
-
}
-
-
private function onRemoveComplete(event:EstadoEvent):void{
-
stack.selectedChild = canvasDefault;
-
findAll();
-
}
Algumas explicações:
-
[Bindable]
-
[Autowire(bean=“estadoController”)]
-
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:
-
<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:
-
Swiz.addEventListener(EstadoEvent.SAVE,onSaveComplete);
-
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:
-
public function onSave(event:ResultEvent):void{
-
Swiz.dispatchEvent(new EstadoEvent(EstadoEvent.SAVE));
-
}
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
-
<?xml version=“1.0″ encoding=“utf-8″?>
-
<mx:Application xmlns:mx=“http://www.adobe.com/2006/mxml” layout=“absolute”
-
preinitialize=“{iniciar(event)}”>
-
-
<mx:Script>
-
<![CDATA[
-
import com.saberprogramar.views.EstadoView;
-
import mx.managers.PopUpManager;
-
import org.swizframework.Swiz;
-
import mx.events.FlexEvent;
-
-
private function iniciar(event:FlexEvent):void{
-
Swiz.setStrict(false).loadBeans( [Beans] );
-
chamarView();
-
}
-
-
private function chamarView():void{
-
PopUpManager.createPopUp(this,EstadoView,false);
-
}
-
-
]]>
-
</mx:Script>
-
-
</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.
