Lumine + ZendAmf + Flex 5/5
Olá pessoal !!!
Agora que temos nosso backend e regra de negocio pronta podemos implementar nossas views e actions.
Application
Iniciando pelo nosso application que terá apenas as configurações do Swiz e uma instância de nossa view :
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:swiz="http://swiz.swizframework.org" xmlns:views="br.com.flexria.views.*" layout="absolute" xmlns:local="*" creationPolicy="all" height="100%" width="100%"> <local:ApplicationSwizConfig/> <views:ContactView horizontalCenter="0" verticalCenter="0" width="600" bottom="20" top="20"/> </mx:Application>
Views
A aplicação possui 2 view extremamente simples ContactView e PhoneView, sendo que a segunda será utilizado como filha da primeira:
ContactView.mxml
<?xml version="1.0" encoding="utf-8"?> <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:views="br.com.flexria.views.*" creationComplete="{init()}" title="Contatos"> <mx:Script source="actions/ContactAction.as"/> <mx:ViewStack id="_vs" width="100%" height="100%"> <mx:Canvas width="100%" height="100%" id="_canvasList"> <mx:HBox left="20" right="20" top="5"> <mx:Label text="Nome"/> <mx:TextInput id="_txFind" width="80%"/> <mx:Button label="Buscar" click="find()"/> </mx:HBox> <mx:DataGrid id="_dataGrid" top="40" left="10" right="10" bottom="60" doubleClick="update()" doubleClickEnabled="true" dataProvider="{contactController.dataProvider}" > <mx:columns> <mx:DataGridColumn headerText="Nome" dataField="name"/> <mx:DataGridColumn headerText="Email" dataField="email"/> </mx:columns> </mx:DataGrid> <mx:ControlBar bottom="10" width="95%" horizontalCenter="0" horizontalAlign="left" verticalAlign="middle"> <mx:Button label="Novo" id="_btnCreate" click="{create()}"/> <mx:Button label="Editar" id="_btnUpdate" click="{update()}" enabled="{_dataGrid.selectedItem!=null}"/> <mx:Button label="Remover" id="_btnRemove" click="{remove()}" enabled="{_dataGrid.selectedItem!=null}"/> </mx:ControlBar> </mx:Canvas> <mx:Canvas width="100%" height="100%" id="_canvasForm"> <mx:TabNavigator width="100%" height="100%"> <mx:Form top="10" left="10" right="10" bottom="10" borderStyle="solid" label="Contato"> <mx:FormHeading label="{contact.id>0?'Editando':'Incluindo'} contato"/> <mx:FormItem label="Nome:" required="true"> <mx:TextInput width="339" id="_txtName" text="{contact.name}"/> </mx:FormItem> <mx:FormItem label="Email:"> <mx:TextInput width="339" id="_txtEmail" text="{contact.email}"/> </mx:FormItem> <mx:FormItem width="100%" direction="horizontal"> <mx:Button label="Cancelar" id="_btnCancel" click="{cancel()}"/> <mx:Button label="Confirmar" id="_btnConfirm" click="{save()}"/> </mx:FormItem> </mx:Form> <!--Instancia de PhoneView--> <views:PhoneView id="_phoneView" contact="{contact}" label="Telefones" enabled="{contact.id>0}"/> </mx:TabNavigator> </mx:Canvas> </mx:ViewStack> </mx:Panel>
PhoneView.mxml
<?xml version="1.0" encoding="utf-8"?> <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="{init()}"> <mx:Script source="actions/PhoneAction.as"/> <mx:ViewStack id="_vs" width="100%" height="100%"> <mx:Canvas width="100%" height="100%" id="_canvasList"> <mx:DataGrid id="_dataGrid" top="10" left="10" right="10" bottom="60" doubleClick="update()" doubleClickEnabled="true" dataProvider="{phoneController.dataProvider}" > <mx:columns> <mx:DataGridColumn headerText="Número" dataField="number"/> </mx:columns> </mx:DataGrid> <mx:ControlBar bottom="10" width="95%" horizontalCenter="0" horizontalAlign="left" verticalAlign="middle"> <mx:Button label="Novo" id="_btnCreate" click="{create()}"/> <mx:Button label="Editar" id="_btnUpdate" click="{update()}" enabled="{_dataGrid.selectedItem!=null}"/> <mx:Button label="Remover" id="_btnRemove" click="{remove()}" enabled="{_dataGrid.selectedItem!=null}"/> </mx:ControlBar> </mx:Canvas> <mx:Canvas width="100%" height="100%" id="_canvasForm"> <mx:Form top="10" left="10" right="10" bottom="10" borderStyle="solid"> <mx:FormHeading label="{phone.id>0?'Editando':'Incluindo'} telefone"/> <mx:FormItem label="Número:" required="true"> <mx:TextInput width="339" id="_txtNumber" text="{phone.number}"/> </mx:FormItem> <mx:FormItem width="100%" direction="horizontal"> <mx:Button label="Cancelar" id="_btnCancel" click="{cancel()}"/> <mx:Button label="Confirmar" id="_btnConfirm" click="{save()}"/> </mx:FormItem> </mx:Form> </mx:Canvas> </mx:ViewStack> </mx:Canvas>
Actions
E para finalizar as respectivas Actions para ContactView e PhoneView.
Essas action possuem os métodos que disparam os eventos de chamada ao servidor e métodos handler que serão chamados quando a requisição for completada.
Além disso temos a meta tag [Autowire] que faz a injeção do respectivo controller.
ContactAction.as
import br.com.flexria.controllers.ContactController; import br.com.flexria.events.ContactEvent; import br.com.flexria.vo.ContactVO; import org.swizframework.Swiz; import mx.events.CloseEvent; import mx.controls.Alert; [Bindable] private var contact:ContactVO=new ContactVO(); [Bindable] [Autowire] public var contactController:ContactController; /** * init() */ private function init():void { find(); Swiz.addEventListener(ContactEvent.SAVE_COMPLETE, saveCompleteHandler); Swiz.addEventListener(ContactEvent.REMOVE_COMPLETE, removeCompleteHandler); } /** * create() */ private function create():void { contact=new ContactVO(); _vs.selectedChild=_canvasForm; } /** * update() */ private function update():void { contact=_dataGrid.selectedItem as ContactVO; _vs.selectedChild=_canvasForm; } /** * cancel() */ private function cancel():void { contact=new ContactVO(); _vs.selectedChild=_canvasList; } /** * find() */ private function find():void { _vs.selectedChild=_canvasList; var event:ContactEvent=new ContactEvent(ContactEvent.FIND); event.contact=new ContactVO(); event.contact.name=_txFind.text; Swiz.dispatchEvent(event); } /** * save() */ private function save():void { contact.name=_txtName.text; contact.email=_txtEmail.text; var event:ContactEvent=new ContactEvent(ContactEvent.SAVE); event.contact=contact; Swiz.dispatchEvent(event); } /** * remove() */ private function remove():void { Alert.show("Deseja realmente excluir o registro selecionado?", "Excluir", Alert.NO | Alert.YES | Alert.NONMODAL, null, function(e:CloseEvent):void { if (e.detail == Alert.YES) { contact=_dataGrid.selectedItem as ContactVO; var event:ContactEvent=new ContactEvent(ContactEvent.REMOVE); event.contact=contact; Swiz.dispatchEvent(event); } }); } /** * saveCompleteHandler() */ private function saveCompleteHandler(event:Event):void { _vs.selectedChild=_canvasList; find(); } /** * removeCompleteHandler() */ private function removeCompleteHandler(event:Event):void { _vs.selectedChild=_canvasList; find(); }
PhoneAction.as
import br.com.flexria.controllers.ContactController; import br.com.flexria.controllers.PhoneController; import br.com.flexria.events.ContactEvent; import br.com.flexria.events.PhoneEvent; import br.com.flexria.vo.ContactVO; import br.com.flexria.vo.PhoneVO; import org.swizframework.Swiz; import mx.events.CloseEvent; import mx.controls.Alert; [Bindable] private var _contact:ContactVO; [Bindable] private var phone:PhoneVO=new PhoneVO(); [Bindable] [Autowire] public var phoneController:PhoneController; public function set contact(value:ContactVO):void { _contact=value; if (_contact != null && _contact.id > 0) { load(); } } /** * init() */ private function init():void { Swiz.addEventListener(PhoneEvent.SAVE_COMPLETE, saveCompleteHandler); Swiz.addEventListener(PhoneEvent.REMOVE_COMPLETE, removeCompleteHandler); } /** * load() */ private function load():void { _vs.selectedChild=_canvasList; var event:PhoneEvent=new PhoneEvent(PhoneEvent.LOAD); event.contact=_contact; Swiz.dispatchEvent(event); } /** * create() */ private function create():void { phone=new PhoneVO(); _vs.selectedChild=_canvasForm; } /** * update() */ private function update():void { phone=_dataGrid.selectedItem as PhoneVO; _vs.selectedChild=_canvasForm; } /** * cancel() */ private function cancel():void { phone=new PhoneVO(); _vs.selectedChild=_canvasList; } /** * save() */ private function save():void { phone.contactId=_contact.id; phone.number=_txtNumber.text; var event:PhoneEvent=new PhoneEvent(PhoneEvent.SAVE); event.phone=phone; Swiz.dispatchEvent(event); } /** * remove() */ private function remove():void { Alert.show("Deseja realmente excluir o registro selecionado?", "Excluir", Alert.NO | Alert.YES | Alert.NONMODAL, null, function(e:CloseEvent):void { if (e.detail == Alert.YES) { phone=_dataGrid.selectedItem as PhoneVO; var event:PhoneEvent=new PhoneEvent(PhoneEvent.REMOVE); event.phone=phone; Swiz.dispatchEvent(event); } }); } /** * saveCompleteHandler() */ private function saveCompleteHandler(event:Event):void { _vs.selectedChild=_canvasList; load(); } /** * removeCompleteHandler() */ private function removeCompleteHandler(event:Event):void { _vs.selectedChild=_canvasList; load(); }
Assim finalizamos nossa aplicação !!!
O código fonte da aplicação pode ser baixado aqui
Espero que esse tutorial possa ser utÃl aos desenvolvedores PHP que pretendem utilizar essa arquitetura em seus projetos e peço desculpas por algum erro ou se deixei de explicar algo durante o post.
Se houver alguma duvida podem podem perguntar via comentário no post ou email Q respondo na medida do possÃvel..
Abraço a todos e até a próxima !!!!
Tutorial : Lumine + ZendAmf + Flex 1/5
Tutorial : Lumine + ZendAmf + Flex 2/5
Tutorial : Lumine + ZendAmf + Flex 3/5
Tutorial : Lumine + ZendAmf + Flex 4/5
Tutorial : Lumine + ZendAmf + Flex 5/5
) devemos sempre optar por uma web livre e só assim se consegue a inovação!
