The presentation model (PM) approach is the recommended view layer architecture for Swiz.
The goal is to remove any logic from the view and let the PM handle the view logic. The PM has to be declared in the BeanProvider and the recommended way is to declare it as a Prototype so the PM will only be created (instantiated) when the corresponding view is added to the stage. | Code Block |
|---|
|
<?xml version="1.0" encoding="utf-8"?>
<swiz:BeanProvider xmlns:swiz="http://swiz.swizframework.org" xmlns:fx="http://ns.adobe.com/mxml/2009">
<fx:Script>
<![CDATA[
import example.model.presentation.MyPresentationModel;
]]>
</fx:Script>
<swiz:Prototype type="{MyPresentationModel}" />
</swiz:BeanProvider>
|
The view gets the PM injected and binds data from it and delegates all interactions (events) to the PM. | Code Block |
|---|
|
<?xml version="1.0" encoding="utf-8"?>
<s:SkinnableContainer xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" currentState="{model.currentState}">
<fx:Script>
<![CDATA[
import example.model.presentation.MyPresentationModel;
import
org.swizframework.events.BeanEvent;
[Bindable]
[Inject]
public var model:MyPresentationModel;
[PreDestroy]
public function cleanUp():void
{
dispatchEvent( new BeanEvent( BeanEvent.TEAR_DOWN_BEAN, model ) model.destroy();
}
]]>
</fx:Script>
<s:layout>
<s:VerticalLayout />
</s:layout>
<s:states>
<s:State name="default" />
<s:State name="detail" />
</s:states>
<s:List labelField="{model.listLabelField}" dataProvider="{model.dataProvider}" change="model.changeListIndex(event.newIndex)" />
<s:Label includeIn="detail" text="{model.selectedItem.title}" />
<s:Button includeIn="detail" label="Edit" click="model.edit()" />
</s:SkinnableContainer>
|
The PM is a independent unit and only gets data injected from the application layer. | Code Block |
|---|
|
package example.model.presentation
{
import flash.events.IEventDispatcher;
import org.swizframework.events.BeanEvent;
public class MyPresentationModel
{
[Dispatcher]
public var dispatcher:IEventDispatcher;
[Bindable]
public var currentState:String;
[Bindable]
[Inject("appModel.list")]
public var dataProvider:IList;
[Bindable]
public var selectedItem:Object;
public function MyPresentationModel()
{
}
public function changeListIndex(index:int):void
{
if(index != -1){
currentState = "edit";
selectedItem = dataProvider.getItemAt(index);
}else{
currentState = "default";
selectedItem = null;
}
}
public function edit():void
{
dispatcher.dispatchEvent(new MyEvent(MyEvent.EDIT, selectedItem));
}
public function destroy():void
{
dispatcher.dispatchEvent( new BeanEvent( BeanEvent.TEAR_DOWN_BEAN, this ) );
}
}
}
|
Having no logic in the view itself also means that you only have to unit test your PM. |