Friday, June 8, 2012

Flex: I am the only 1....?

There are numerous situation that requires you to have a singleton object so that you prompt the user to enter a value (like a nickname) and you can easily slot them into the numerous places that you need to reflect the value. Therefore I'm making this demo to show you how to create a singleton object in flex.

This would be the main file of the project - SingleSingleton.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute" width="100%" height="100%" 
    xmlns:local="*">
 <mx:VBox width="100%" height="100%" 
    verticalGap="0" verticalAlign="middle">
  <mx:Spacer height="100%"/>
  <mx:HBox width="100%"
     horizontalGap="0" horizontalAlign="center">
   <mx:Spacer width="100%"/>
   <local:SimpleInputBox/>
   <mx:Spacer width="100%"/>
   <local:SimpleInputBox2/>
   <mx:Spacer width="100%"/>
   <local:SimpleInputBox/>
   <mx:Spacer width="100%"/>
  </mx:HBox>
  <mx:Spacer height="100%"/>
  <mx:HBox width="100%"
     horizontalGap="0" horizontalAlign="center">
   <mx:Spacer width="100%"/>
   <local:SimpleInputBox2/>
   <mx:Spacer width="100%"/>
   <local:SimpleInputBox/>
   <mx:Spacer width="100%"/>
   <local:SimpleInputBox2/>  
   <mx:Spacer width="100%"/> 
  </mx:HBox>
  <mx:Spacer height="100%"/>
  <mx:HBox width="100%"
     horizontalGap="0" horizontalAlign="center">
   <mx:Spacer width="100%"/>
   <local:SimpleInputBox/>
   <mx:Spacer width="100%"/>
   <local:SimpleInputBox2/>
   <mx:Spacer width="100%"/>
   <local:SimpleInputBox/>
   <mx:Spacer width="100%"/>
  </mx:HBox>
  <mx:Spacer height="100%"/>
 </mx:VBox>
</mx:Application>

This would be the one of file of the project - SimpleInputBox.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
   horizontalGap="0"
   creationComplete="creationCompleteEvent(event)">
 <mx:Script>
  <![CDATA[
   import com.zcs.SingletonObject;
   
   import mx.events.FlexEvent;
   import mx.binding.utils.BindingUtils;
   
   private var tempObj:SingletonObject;
   
   [Bindable]
   private var lblText:String = "Changing the value here " +
    "<br>will affect the others:";
   
   protected function changeEvent(event:Event):void
   {
    //Upon changing the text in SingletonObject,
    //Update the value of _txt in the SingletonObject
    tempObj.txt = txtInput.text;
   }
   
   protected function creationCompleteEvent(event:FlexEvent):void
   {
    //Create an instance of SingletonObject
    tempObj = SingletonObject.getInstance();
    //Bind the text of the TextInput field to
    //the _txt variable in the SingletonObject 
    BindingUtils.bindProperty(txtInput, "text", tempObj, "txt");
   }
   
  ]]>
 </mx:Script>
 <mx:TextArea htmlText="{lblText}"
     borderStyle="none" backgroundAlpha="0"/>
 <mx:TextInput id="txtInput"
      change="changeEvent(event)"/>
</mx:HBox>

This would be the one of file of the project - SimpleInputBox2.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
   horizontalGap="0"
   creationComplete="creationCompleteEvent(event)">
 <mx:Script>
  <![CDATA[
   import com.zcs.SingletonObject;
   
   import mx.events.FlexEvent;
   import mx.binding.utils.BindingUtils;
   
   private var tempObj:SingletonObject;
   
   [Bindable]
   private var lblText:String = "Changing the value here " +
    "<br><font color='#FF0000'>doesn't</font> affect the others:";
   
   protected function creationCompleteEvent(event:FlexEvent):void
   {
    //Create an instance of SingletonObject
    tempObj = SingletonObject.getInstance();
    //Bind the text of the TextInput field to
    //the _txt variable in the SingletonObject 
    BindingUtils.bindProperty(txtInput, "text", tempObj, "txt");
   }
   
  ]]>
 </mx:Script>
 <mx:TextArea htmlText="{lblText}"
       borderStyle="none" backgroundAlpha="0">
 </mx:TextArea>
 <mx:TextInput id="txtInput"/>
</mx:HBox>

This would be the Singleton Object of the project - SingletonObject.as
package com.zcs
{
 public class SingletonObject
 {
  private static var _instance:SingletonObject=null;
  
  //You need the following functions to create a 
  //singleton Object. SingletonObject(e:SingletonEnforcer)
  //and getInstance():SingletonObject
  //Rather than using new SingletonObject to create a new
  //object of the class, you need to use
  //SingletonObject.getInstance() to point to the Singleton
  //class.
  public function SingletonObject(e:SingletonEnforcer){
   trace("new singleton object created");
  }
  
  public static function getInstance():SingletonObject{
   if(_instance==null){
    _instance=new SingletonObject(new SingletonEnforcer);
   }
   return _instance;
  }
  
  //Created a variable _txt that will be used
  //in storing text.
  private var _txt:String = "Nothing here";

  [Bindable]
  public function get txt():String
  {
   return _txt;
  }

  public function set txt(value:String):void
  {
   _txt = value;
  }

  
 }
}

//This class is needed in creating a singleton class.
class SingletonEnforcer{
 
}

* Click here for the demo.
^ Click here for the source files.

No comments:

Post a Comment