Developping a contact manager application (CManager) - Part 1

Creating the View

To create a view, we add a MXML file using one of the available AS Foundry framework types (CanvasView, HBoxView, VBoxView…) as the top-level tag. Application consists in a view with several « State » (MainView.mxml) :

  • BASE_VIEW_STATE to allow for contact consulting and editing
  • ADD_CONTACT_VIEW_STATE to allow for contact adding.

We won’t dwell on the view’s source code, as it doesn’t contain anything but graphic component (its source code is supplied in the view’s package). We will focus on the ViewHelper which allows our view to interact with the rest of the application.

ViewHelper

Using MXML files to describe your application views is not recommended. Even if it may sometimes appear easier on first sight, in most of cases the resulting source code will be confusing and hard to maintain. The AS Foundry framework offers separation between formatting and view-logic code. Each view is associated with a ViewHelper, which contains :

  • the view-logic
  • the calls to the controller
  • the events
  • the model-triggered notifications’ handling and data-binding

This way, the view can be depicted with MXML tags. The view-logic separation allows for easier code maintenance, reusability or extensibility. We create the MainViewHelper class which contains a binding to the contacts’ list. As an IObserver implementor, our ViewHelper can register to the ContactModel and be notified by overriding the update method.

View and ViewHelper as the View participant of the MVC paradigm.

View and ViewHelper as the View participant of the MVC paradigm.

//helper/MainViewHelper.as
package org.servebox.sample.contactapplication.helper
{
import org.servebox.sample.contactapplication.model.ContactModel;
import flash.events.Event;
import flash.utils.getQualifiedClassName;
import org.servebox.foundry.model.ModelLocator;
import org.servebox.foundry.observation.IObservable;
import org.servebox.foundry.observation.Notification;
import org.servebox.foundry.view.ViewHelper;
import org.servebox.sample.contactapplication.control.MainController;
import org.servebox.sample.contactapplication.model.notification.ContactListNotification;
import org.servebox.sample.contactapplication.service.value.vo.ContactVO;
import org.servebox.sample.contactapplication.view.MainView;
 
public class MainViewHelper extends ViewHelper
{
...
	/**
	 *  get the contact list
	 * */
 
	public function retrieveContactList() : void
	{
		MainController.getInstance().getContactList();
	}
 
	/**
	 * Register as an observer of the ContactModel
	 * allow to get notification from ContactModel.
	 * */
	override public function registerToModels():void
	{
              var model : IObservable = ModelLocator.getInstance().getModel(
		getQualifiedClassName( ContactModel )
	     );
	     model.registerObserver(this);
	}
 
	/**
	 * triggered after a notification from ContactModel
	 * */
	override public function update( o:IObservable, n:Notification) :void
	{
		//perform an action after being notified by the ContactModel
		dispatchEvent( new Event("ContactListChange") );
	}
}
...

Please verify your imports.

Adding the view to the application

Before adding the view to the application, we must link it to its « helper ». We simply have to add this tag to the MXML code :

<?xml version="1.0" encoding="utf-8"?>
<!-- view/MainView.mxml -->
<view:HBoxView
xmlns:view="org.servebox.foundry.view.*"
xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%"
height="100%"
horizontalAlign="center"
horizontalCenter="0">
<!-- association de la vue avec MainViewHelper.as -->
<helper:MainViewHelper id="helper" autoRegisterBasedOnQualifiedClassName="true"/>
</view:HBoxView>

We then add the view to our application, for example by setting it inside a « ViewStack » :

<?xml version="1.0" encoding="utf-8"?>
<!-- src/main/flex/main.mxml –->
<control:MainApplication
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:control="org.servebox.sample.contactapplication.control.*"
xmlns:view="org.servebox.sample.contactapplication.view.*"
>
<!-- -->
<mx:ViewStack id="myViewStack" width="1024" height="720">
<view:MainView
id="mainView"/>
</mx:ViewStack>
</control:MainApplication>

Please verify your imports.

Page 1 Page 2 Page 3

Friday, April 24th, 2009 by Wajdi Hadj ameur
 

Sub-Pages

Categories

Archive

Links