This weekend I tried to make an "Air" client for search using "Adobe Community Help. I had no prior experience with Flex and AIR. My first attempt ended as a simple project for college, a spaghetti code. All examples found on the web or official documentation are based on massive use mxml code. I ended up having a glorious mxml file. Huge   .

Some smart guys are telling you to split your mxml using an ActionScript file but is like putting the trash under the carpet. It is still spaghetti code but in two dishes.

I tried to remember how I would have programmed it in Java Swing.  9 years have passed since then but I remembered.  TableModel,  DefaultListModel,  ButtonModel etc. they all came out from a dark corner of my memory. Yes ! I remembered, Swing MVC.

A typical sample from documentation…..

<?xml version="1.0" encoding="utf-8"?>
 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
     <mx:Panel x="10" y="10" width="350" height="200"
title="Rate Customer Service">
         <mx:ComboBox id="cbxRating" x="20" y="20"
width="100">
             <mx:dataProvider>
                 <mx:Array>
                     <mx:String>Satisfied</mx:String>
                     <mx:String>Neutral</mx:String>
                    
<mx:String>Dissatisfied</mx:String>
                 </mx:Array>
             </mx:dataProvider>
         </mx:ComboBox>
         <mx:Button x="140" y="20" label="Send"/>
    </mx:Panel>
 </mx:Application>

We fill in some text and then press Add. After we press add the text box is cleared and the text is added into de the list. In the end wee look into it and try to make a reusable component.

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.

package org.bserban.flex.simplemvc.model
 {
     import mx.collections.ArrayCollection;
     /**
     * Model class used to store list data and to
     * provide access to the list content.
     *
     * For demo purposes, we have only addElement.
     */
     [Bindable]
     public class ListModel
     {
         public var items :ArrayCollection = new ArrayCollection();
         private static var instance:ListModel;
         public function ListModel(){
             instance=this;
         }
         /**
          * For this demo we treat this class as singletone.
          * If list is reused the component that reuse it
          * must keep reference to model and controler.
          */
         public static function getInstance():ListModel{
             if(instance == null){
                 instance = new ListModel();
             }
             return instance;
         }

         /**
          * Add a new element to the list, the model is bindable,
          * no further actions are required, the view
          * is notified automatically.
          */
         public function addElement(itm:String): void{
             items.addItem(itm);
             trace(" item added, now we have:"+items.length);
         }
     }
 }

package org.bserban.flex.simplemvc.controller
{
import org.bserban.flex.simplemvc.model.ListModel 
import mx.utils.StringUtil;

 public class Controller{

 private var model:ListModel = ListModel.getInstance();
 /**
 * Glue the interaction between view and model.
 */
 public function Controller(){
 }
 /*** add a new item into the list model.*/
 public function addPerson(name:String):void{
   if(name==null || StringUtil.trim(name).length==0){
      trace("emptyname");
   }else{           
      model.addElement(name);
   }
 }
}
}  
  
 
  

                <?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication
xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
height="226" width="235">
     <mx:Script>
         <![CDATA[
         import mx.controls.List;
         import org.bserban.flex.simplemvc.model.ListModel;
         import org.bserban.flex.simplemvc.controller.Controller;
         [Bindable]
         private var model:ListModel = ListModel.getInstance();
         private function clickHandler():void
             {
                 var controler:Controller = new Controller();
                 controler.addPerson(personTxt.text);
                 personTxt.text="";
             }
         ]]>
     </mx:Script>
     <mx:TextInput x="10" y="10" id="personTxt" text=""
width="145"/>
     <mx:Button x="163" y="10" label="Add" id="btnAdd"
click="clickHandler()"/>
     <mx:List x="10" y="40" width="218"
dataProvider="{model.items}"></mx:List>
</mx:WindowedApplication> 
 
 
  

Cheers,