Scripts: Simple mvc-my first mvc code

Model

The model contains the actual data, and for our example it should a class that hold list values. As I pointed out earlier we could use an ArrayCollection to store the list. For this we make an actionscript class named ListModel

The view should display model's changes and for this we mark the model class as [Bindable]. This is nice feature of ActionScript, no such thing in Java Swing.

Now, to add a new item in the list we simply nee an addElement function. In this example we make the model a singleton. This means that if we make more than one list they will share the same data.

01package org.bserban.flex.simplemvc.model
02 {
03     import mx.collections.ArrayCollection;
04     /**
05     * Model class used to store list data and to
06     * provide access to the list content.
07     *
08     * For demo purposes, we have only addElement.
09     */
10     [Bindable]
11     public class ListModel
12     {
13         public var items :ArrayCollection = new ArrayCollection();
14         private static var instance:ListModel;
15         public function ListModel(){
16             instance=this;
17         }
18         /**
19          * For this demo we treat this class as singletone.
20          * If list is reused the component that reuse it
21          * must keep reference to model and controler.
22          */
23         public static function getInstance():ListModel{
24             if(instance == null){
25                 instance = new ListModel();
26             }
27             return instance;
28         }
29 
30         /**
31          * Add a new element to the list, the model is bindable,
32          * no further actions are required, the view
33          * is notified automatically.
34          */
35         public function addElement(itm:String): void{
36             items.addItem(itm);
37             trace(" item added, now we have:"+items.length);
38         }
39     }
40 }

Controller

The controller is responsible for the interaction between view and model. In our case will make the validation of the text, it doesn't allow the view to add empty text into the list. Let's make a new class named Controller. As an exercise add also a sort function.

The controller holds a reference to the model and provides functions to the view. In a more advanced implementation the Controller would listen for events from the view and the decides what action should do.

01package org.bserban.flex.simplemvc.controller
02{
03import org.bserban.flex.simplemvc.model.ListModel 
04import mx.utils.StringUtil;
05 
06 public class Controller{
07 
08 private var model:ListModel = ListModel.getInstance();
09 /**
10 * Glue the interaction between view and model.
11 */
12 public function Controller(){
13 }
14 /*** add a new item into the list model.*/
15 public function addPerson(name:String):void{
16   if(name==null || StringUtil.trim(name).length==0){
17      trace("emptyname");
18   }else{           
19      model.addElement(name);
20   }
21 }
22}
23}  
24  

View

The view is the graphical representation of the component. Usually it is a an mxml file but it can be also an actions script file for advanced programmers. It binds his data to the model and use the controller to process the view events. Let's name it SimpleAirMVC.mxml. I added Air to its name because i decided to make an air project in Flex Builder.

01                <?xml version="1.0" encoding="utf-8"?>
02<mx:WindowedApplication
03xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
04height="226" width="235">
05     <mx:Script>
06         <![CDATA[
07         import mx.controls.List;
08         import org.bserban.flex.simplemvc.model.ListModel;
09         import org.bserban.flex.simplemvc.controller.Controller;
10         [Bindable]
11         private var model:ListModel = ListModel.getInstance();
12         private function clickHandler():void
13             {
14                 var controler:Controller = new Controller();
15                 controler.addPerson(personTxt.text);
16                 personTxt.text="";
17             }
18         ]]>
19     </mx:Script>
20     <mx:TextInput x="10" y="10" id="personTxt" text=""
21width="145"/>
22     <mx:Button x="163" y="10" label="Add" id="btnAdd"
23click="clickHandler()"/>
24     <mx:List x="10" y="40" width="218"
25dataProvider="{model.items}"></mx:List>
26</mx:WindowedApplication> 

This is a simple way to implement a MVC in a small application. Things can become more complicated if the application is big. If this is the case then you should look over Pure MVC framework or Cairngorm. They eliminate the dependencies between MVC layer by using events. It is an event driven approach.

You may download the source code here SimpleAirMVC

Scripts

Friday, January 7, 2011

Simple mvc-my first mvc code

Model

Controller

View

No comments:

Post a Comment