Developping a contact manager application (CManager) – Part 1

Connecting the view to the service

To load our contacts, the application will trigger the following operations sequence :

  • At application startup, the ViewHelper is called to retrieve the contacts’ list.
  • It triggers the getContactList method on the controller.
  • The controller creates a Responder instance (as explained below).
  • The controller asks the BusinessDelegate to launch a call to the remote service.
  • The BusinessDelegate calls the service and retrieve an ACT (Asynchronous Completion Token).
  • The BusinessDelegate sends the ACT to the Responder instance.
  • The service answers back and the ACT-linked Responder is triggered.
  • The Responder handles service returns and updates the value in the model.
  • A notification is sent to the observers
  • The ViewHelper can then retrieve data from the model and render the view accordingly.
Remote Services - Lifecycle

Remote Services - Lifecycle

Handling service returns (responder)

The main purpose of a responder is to manage the responses of a specific remote service method. Every responder should implement the IBusinessResponder interface. The fault and result methods are intended for handling the system errors (network failure for example) or to propagate the results.
In our present case, the ContactListResponder’s result method triggers the setter method into the ContactModel.

${JAVA_HOME} = C:\Program Files\Java\jdk1.5.0_17

Please verify your imports.

Rendering data

We start by creating a method into the MainViewHelper to trigger the retrieveContactList method into the controller.

Path= ... ;%JAVA_HOME%\bin

Please verify your imports.

We update MainView and its MainViewHelper. Then we just have to add the dataProvider property to the List component, plus one Button to retrieve the contacts’ list.

${CATALINA_HOME} = D:\Softs\apache-tomcat-6.0.16

Please verify your imports.

We create a binding on the getter method in the MainViewHelper, to feed the list. If you’re not familiar with binding, you should read this document : http://www.adobe.com/devnet/flex/quickstart/using_data_binding/.

Path= ... ;%CATALINA_HOME%\bin

Please verify your imports.

Creating the BusinessDelegate

Before adding the method to the controller, we must create our « BusinessDelegate ». When you use the AS Foundry framework, you should create a BusinessDelegate instance, in order to allow interactions between the remote service and the MVC participants. One of the main benefits is that changes made on the remote service won’t interfere with any other application’s components except the BusinessDelegate itself. There are other benefits to use the BusinessDelegates that you can figure out in the « Remote procedure call » article.

We create the MainBusinessDelegate into the package com.servebox.sample.contactapplication.business. Then we create the getContactList method wherein we link the ACT (Asynchronous Completion Token) to a IBusinessResponder instance. The responder handles the service response.

outputFolderLocation="/C:/Foundry/apache-tomcat-6.0.16/webapps/contactApplication/flex-gui-debug"

Please verify your imports.

We initialize the « BusinessDelegate » by overriding the initializeDelegates method into the controller. The remote service call is performed by the controller using the ContactListResponder class as « responder » (that we are going to create, later on).

serverRoot="C:\Foundry\apache-tomcat-6.0.16\webapps\contactApplication"

Please verify your imports.

Handling the service’s response

The getContactList method sends us back a ContactTO-typed TransferObject.

/C:/Foundry/apache-tomcat-6.0.16/webapps/contactApplication/flex-gui-debug

Please verify your imports.

The ContactVO class is a representation of our contact :

//model/ContactModel.as
...
public class ContactModel extends AbstractModel
{
	public function ContactModel()
	{
		super();
	}
}
...

Please verify your imports.

As we save our contact into the model, a notification is sent to all the « observers » and all the views are updated. When you click on the button to retrieve the contacts, you can now see your contacts’ list.

Displaying contact’s information

When we select a contact from the « list », we must display the whole contact’s data into the form. We create a « binding » that send us back the selected contact from the « list » :

//model/ContactModel.as
...
private var _contacts : ArrayCollection;
...
public function getContacts(): ArrayCollection
{
	_contacts.source.sortOn("lastName");
	return _contacts;
}
 
public function setContacts( ar : ArrayCollection ): void
{
	_contacts = ar;
	// Notification des observateurs éventuels
	notifyObservers( new ContactListNotification( null ) );
}
...

Please verify your imports.

The selectedContactChange event is triggered when the « list »’s selected item changes :

//control/MainController.as
...
public class MainController extends AbstractController
{
...
	/**
 	* MainController Singleton
 	* */
	public static function getInstance() : MainController
	{
		if(_mainControllerInstance == null)
		{
			_mainControllerInstance = new MainController();
		}
		return _mainControllerInstance;
	}
...
	/**
	 * Initialize Models
	 * */
	override public function initializeModels():void
	{
ModelLocator.getInstance().registerModel( getQualifiedClassName(ContactModel), new ContactModel() );
	}
...
	/**
	 * initialize business delegate
	 * */
	override public function initializeDelegates():void
	{
		//we will acces to the remote services
	}
 
...

Please verify your imports.

In the following step, we update MainView by feeding the « SmartForm » components’ source property and triggering the selectedContact getter method.

//control/MainApplication.as
...
package org.servebox.sample.contactapplication.control
{
	import org.servebox.foundry.control.AbstractApplication;
 
	public class MainApplication extends AbstractApplication
	{
		public function MainApplication()
		{
			super();
		}
 
		override protected function getControllerClass():Class
		{
			return MainController;
		}
	}
}
...

When we use the SmartForm, the ID property of each form item is linked to the properties of the object retrieved with the selectedContact method. The AS Foundry SmartForm makes it easier to insert and update data through the forms.
SmartForm uses object copies instead of references, which allows for example to enable the user to cancel its modification.
SmartForm allows for easy switch between READ mode and UPDATE mode.

You will find more information about SmartForm in the article Using SmartForm.

Download the CManager source code (first part tutorial).

In the following part of this tutorial, we will see how to create / update / delete contacts and set up a search engine.

Page 1 Page 2 Page 3

Friday, April 24th, 2009 No Comments by Jeff Mathiot