Lumine + ZendAmf + Flex 5/5

Colocado por Fábio Batista da Silva na(s) categoria(s): 1, 4, 6, action, Adobe, Adobe Flex, AMF, app, AR, Arquitetura, auto, back, backend, bar, BI, Bindable, busca, class, código, código fonte, control, Controls, DataGrid, DataProvider, demo, Desenvolvedor, desenvolvedores, dispatch, dispatchEvent, email, err, erro, event, EventListener, Evento, Eventos, events, Flex, Flex 2, Flex 3, Flex 4, fonte, for, framework, function, handle, ide, IE, if, Iniciando, Java, label, layout, MXML, Number, O, on, Pessoal, PHP, Projetos, pt, RIA, Ria’s Geral, servidor, tag, TAT, Tema, TextInput, Tutorial, tv, UI, update, Ved, vs, XML, XP, zend, zendAMF, zendFramework em 02 22nd, 2010 | Sem comentários

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

Veja o post original no blog do autor aqui!