How to use the Model View Presenter design pattern to create your component

In this sample we'll create a basic login component to show you how to implement the Model View Presenter Design Pattern using Nabiro Framework.

To put in place this MVP architecture we'll create 4 files:

1) main mxml file
2) Login view : views.login.view.Login
3) Login view interface: views.login.view.ILogin
4) Login presenter: views.login.presenter.Login

In this sample we'll not use a Model.

MAIN MXML FILE
The main mxml file where we simply create an instance of your login component

<?xml version="1.0" encoding="utf-8"?>
<mx:Application layout="absolute"
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	xmlns:view="views.login.view.*">
	
	<view:LoginView />
	
</mx:Application>

THE VIEW INTERFACE
This interface must extends the IView Nabiro class and define all the required getters and setters. These public methods will be used from the presenter to update the view (or get info from that) and our View must implement it.

package views.login.view {
	
	import com.gnstudio.nabiro.mvp.core.IView;
	
	public interface ILogin extends IView	{
		
		
		function get user():String;
		function get pass():String;
		
		function set userError(str:String):void;
		function set passError(str:String):void;
		
	}
}

VIEW The component layout. Usually this component will contain only MXML code and the getters/setters called from the presenter to update the view or get info from that. To accomplish this we need to implement the IView interface. Furthermore we'll create a presenter instance to communicate with it (i.e. calling the Submit method when button is clicked)

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox width="400" height="300"
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	xmlns:ui="com.gnstudio.nabiro.ui.*"
	implements="views.login.view.ILogin"
	horizontalAlign="center" 	
	>

	<mx:Script>
		<![CDATA[
			
			import mx.collections.IViewCursor;
			import views.login.presenter.Login;
			
			private var presenter:Login;
			
			
			/**
			 * This method is called at the component creation time 
			 *  
			 */	
			override protected function createChildren():void {
				    
				    super.createChildren();
				    
				    // Create a new Presenter Istance
		   			presenter = new Login(this);
		   			
			}
			
			
			
			
			/**
			 * Username text 
			 */			 
			public function get user():String{
				return userName.text;
			}
			
			
			
			/**
			 * Password text 
			 */
			public function get pass():String{
				return passWord.text;
			}
			
			
			
			
			/**
			 * Display message on Username Field.
			 * We use the ContextMessageTextField Nabiro component, useful to display message below TextFields
			 */			
			public function set userError(errorMsg:String):void {
				userName.contextMessage = errorMsg;
			}
			
			
			
			
			/**
			 * Display message on Username Field.
			 * We use the ContextMessageTextField Nabiro component, useful to display message below TextFields
			 */	
			public function set passError(errorMsg:String):void {
				passWord.contextMessage = errorMsg;
			}
			
			
			
		]]>
	</mx:Script>


	<!--- UserName TextInput Field -->
	<ui:ContextMessageTextField id="userName" errorContextColor="0xFFCC00" />
	
	<!--- PassWord TextInput Field -->
	<ui:ContextMessageTextField id="passWord" errorContextColor="0xFFCC00" />
		
	<!--- When clicked the submit method inside the presenter is called -->
	<mx:Button label="Submit" click="presenter.submit()" />
	
	
	
</mx:VBox>

PRESENTER The presenter will contain the component logic and it will update the view showing some error messages when fields are blank

package views.login.presenter {
	
	import com.gnstudio.nabiro.mvp.core.Presenter;
	import views.login.view.ILogin;
	
	public class Login extends Presenter
	{

		// View Reference		
		private var view:ILogin
		
		
		
		/**
		 * Constructor
		 * 
		 * @param 	view			an IView object
		 * @param 	parameters		list of additional parameters
		 */
		public function Login(v:ILogin=null, ...props) {
			
			super(v, props);
			
			// Inizialize the view reference
			view = v;
			
		}
	
		
		
		/**
		 * Submit the formk
		 * This method is usually called from the View and it should include all the form logic.
		 *  
		 * In this sample we display an error message if username and password are empty.
		 * 
		 */
		public function submit():void {
			
			// Check if username field is blank
			if (view.user == "")
				view.userError = "UserName can't be  blank";
			else
				view.userError = "";
				
				
			// Check if password field is blank	
			if (view.pass == "")
				view.passError = "Password can't be blank";
			else
				view.passError = "";
		}
		
			
			
	}
}

---

NOTE: remember to add the SWC component inside your /lib folder