Sunday, March 31, 2013

Blogger: How difficult can find and replace be?

Conclusion: very difficult. I was looking through the photos on my blog and I suddenly realised that some of my photos were showing up in a dimension than were even much more bigger than my screen. Therefore, I wanted to do a quick find and replace. However, it seems that Blogger doesn't provide such a functionality. Hence, after spending a bit of time googling, I finally found a faster way to do it. (Rather than exporting all the post data into a xml file and delete all my post away followed by the step of importing all the modified post data into the blog again, this is indeed a much more faster method.)

* Click here for the 'find' and 'replace' solution for 'Blogger'.

Wednesday, March 27, 2013

Flex 4: Simple 2 Way Binding

In the older versions of flex, we can make use of the 'Bindable' tag to reduce the amount of coding required. However, once we give users the ability to change a value of a component that was previous bind to a value, that's where all the extra coding comes in. Therefore in the newer version of flex, we have the privilege to do 2 way binding, which is pretty helpful. Anyway let's take a look at the codes of the simple demo that I have created.

Source Code for the main application - 'Simple2WayBinding.mxml'
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" 
      xmlns:mx="library://ns.adobe.com/flex/mx"
      backgroundColor="#CDCDCD" 
      creationComplete="creationCompleteEvent(event)" xmlns:zcs="com.zcs.*">
 <fx:Declarations>
  <zcs:OppositeBooleanObj id="oppObj"/>
  <zcs:OppositeBooleanObj id="oppObj1"/>
 </fx:Declarations>
 <fx:Script>
  <![CDATA[
   import mx.binding.utils.BindingUtils;
   import mx.events.FlexEvent;
   
   protected function creationCompleteEvent(event:FlexEvent):void
   {
    //We are creating a 2-way binding using the following liners.
    //As you can see, the selected value of the following
    //checkboxes, 'chk1' and 'chk4' will be bind 2-ways.
    BindingUtils.bindProperty(chk1, "selected", chk4, "selected");
    BindingUtils.bindProperty(chk4, "selected", chk1, "selected");
   }
  ]]>
 </fx:Script>
 <fx:Binding twoWay="true" 
    source="chk1.selected" 
    destination="chk2.selected"/>
 <s:VGroup width="100%" 
     height="100%"
     verticalAlign="middle"
     horizontalAlign="center">
  <s:Spacer height="100%"/>
  <s:HGroup verticalAlign="middle" 
      horizontalAlign="center"
      width="100%">
   <s:TextArea borderVisible="false"
      contentBackgroundAlpha="0"
      textAlign="center"
      width="100%" height="20">
    This is using <fx:Binding> to bind the 
    values of the properties together.
   </s:TextArea>   
  </s:HGroup>
  <s:HGroup verticalAlign="middle" 
      horizontalAlign="center"
      width="100%">
   <s:CheckBox label="This is (1)."
       id="chk1"/>
  </s:HGroup>
  <s:HGroup verticalAlign="middle" 
      horizontalAlign="center"
      width="100%">
   <s:CheckBox label="This will always have the same value as (1)."
      id="chk2"/>
  </s:HGroup>
  <s:Spacer height="100%"/>
  <s:HGroup verticalAlign="middle" 
      horizontalAlign="center"
      width="100%">
   <s:TextArea borderVisible="false"
      contentBackgroundAlpha="0"
      textAlign="center"
      width="100%" height="20">
    This is using a '@' symbol before the curly brackets
    to bind the values of the properties to a object.    
   </s:TextArea>   
  </s:HGroup>
  <s:HGroup verticalAlign="middle" 
      horizontalAlign="center"
      width="100%">
   <s:CheckBox label="This is (2)."
      selected="@{oppObj.value1}"/>
  </s:HGroup>
  <s:HGroup verticalAlign="middle" 
      horizontalAlign="center"
      width="100%">
   <s:CheckBox label="This will always have a different value as (2)."
       selected="@{oppObj.value2}"/>
  </s:HGroup>
  <s:Spacer height="100%"/>
  <s:HGroup verticalAlign="middle" 
      horizontalAlign="center"
      width="100%">
   <s:TextArea borderVisible="false"
      contentBackgroundAlpha="0"
       textAlign="center"
      width="100%" height="20">
    This is using 'BindingUtils' to bind the value of the
    property of this check box to '(1)'.
   </s:TextArea>   
  </s:HGroup>
  <s:HGroup verticalAlign="middle" 
      horizontalAlign="center"
      width="100%">
   <s:CheckBox label="This will always have the same value as (1)."
      id="chk4"/>
  </s:HGroup>
  <s:Spacer height="100%"/>
 </s:VGroup>
</s:Application>

Source Code for the simple Object used in this demo - 'OppositeBooleanObj.as'
package com.zcs
{
 import flash.events.Event;
 import flash.events.EventDispatcher;
 import flash.events.IEventDispatcher;
 
 public class OppositeBooleanObj extends EventDispatcher
 {
  private var _value1:Boolean = true;
  private var _value2:Boolean = false;

  [Bindable(event="value1Changed")]
  public function get value1():Boolean
  {
   return _value1;
  }

  //change the value of 'value2' when 'value1' changes
  //We are dispatching the event 'value2Changed' to
  //trigger data binding.
  public function set value1(value:Boolean):void
  {
   _value1 = value;
   _value2 = !_value1;
   dispatchEvent(new Event("value2Changed")); 
  }
  
  [Bindable(event="value2Changed")]
  public function get value2():Boolean
  {
   return _value2;
  }

  //change the value of 'value1' when 'value2' changes
  //We are dispatching the event 'value1Changed' to
  //trigger data binding.
  public function set value2(value:Boolean):void
  {
   _value2 = value;
   _value1 = !_value2;
   dispatchEvent(new Event("value1Changed"));
  }
 }
}
* Click here for the demo shown in this post.
^ Click here for the source files for the demo.

Saturday, March 23, 2013

AS3: How to enable Double Clicking

Well, probably everyone knows about this, but just if case you are new to the as3 world... Here goes.

Here's the codes for my main application file.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" 
      xmlns:mx="library://ns.adobe.com/flex/mx"
      backgroundColor="#CDCDCD">
 <fx:Script>
  <![CDATA[
   [Bindable]
   private var _enabledDoubleClick:Boolean = false;
   
   [Bindable]
   private var _bkgdColor:uint = 0xFFFFFF;
   
   //Upon each successful double click, we will change the 
   //background color of the box. :D
   protected function doubleClickHandler(event:MouseEvent):void
   {
    _bkgdColor = Math.random() * 0xFFFFFF; 
   }
  ]]>
 </fx:Script>
 <s:VGroup width="100%" 
     height="100%"
     verticalAlign="middle"
     horizontalAlign="center">
  <s:Spacer height="100%"/>
  <s:HGroup verticalAlign="middle" 
      horizontalAlign="center"
      width="100%">
   <s:TextArea borderVisible="false"
      contentBackgroundAlpha="0"
      width="50%" height="50">
    Double Clicking will only work when the CheckBox is selected. 
    (When the checkbox is selected, it will bind the value of the 
    CheckBox to a Boolean variable that will change the value of 
    the property doubleClickEnabled of the box below.)
   </s:TextArea>
  </s:HGroup>
  <s:HGroup verticalAlign="middle" 
      horizontalAlign="center"
      width="100%">
   <s:CheckBox selected="@{_enabledDoubleClick}"
       label="Enable Double Clicking?"/>
  </s:HGroup>
  <s:HGroup verticalAlign="middle" 
      horizontalAlign="center"
      width="100%">
   <s:BorderContainer width="50%"
          height="50%"
          backgroundColor="{_bkgdColor}"
          cornerRadius="10"
          mouseChildren="false"
          doubleClickEnabled="{_enabledDoubleClick}"
          doubleClick="doubleClickHandler(event)">
    <s:layout>
     <s:HorizontalLayout horizontalAlign="center"
           verticalAlign="middle"/>
    </s:layout>
    <s:Label text="Try Double Clicking Me!"/>
   </s:BorderContainer>
  </s:HGroup>
  <s:Spacer height="100%"/>
 </s:VGroup>
</s:Application>

* Click here for the demo shown in this post.
^ Click here for the source files for the demo.

Friday, March 15, 2013

AS3: event.stopImmediatePropagation() v.s. event.stopPropagation()

When you are working on a flash/flex project and there's multiple layers inside the project, there ought to be changes where you have multiple places listening for the same Events. Luckily for us, there are ways to stop the Events from dispatching upwards. However there seems to be 2 different methods to stop it and what's the difference between the 2 methods event.stopImmediatePropagation() and event.stopPropagation()? I have created a simple demo to show you the differences between both methods.

Source code of the Main Application file - stopBubbleEventTest.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
    minWidth="955" minHeight="600" 
    xmlns:Comp="*" creationComplete="creationCompleteEvent(event)" 
    name="stage">
 <!-- Styling the VBox -->
 <mx:Style>
  VBox{
   paddingLeft:10;
   paddingRight:10;
   backgroundAlpha:0.2;
   backgroundColor:#00FF00;
  }
 </mx:Style>
 <mx:Script>
  <![CDATA[
   import mx.events.FlexEvent;
   
   //Upone creation complete of this mxml files
   protected function creationCompleteEvent(event:FlexEvent):void
   {
    //Add an Event Listener to the button / 
    //Upon clicking on the button, run the actions in clickEvent function
    btnClick.addEventListener(MouseEvent.CLICK, clickEvent);
    //Change the state of the checkbox of the highest level
    stageControls.chkOption.dispatchEvent(new MouseEvent(MouseEvent.CLICK));
   }
   
   private function clickEvent(event:Event):void{
    //Reset all the values in the textfields
    stageControls.txtResult.text = "";
    level0Controls.txtResult.text = "";
    level1Controls.txtResult.text = "";
    level2Controls.txtResult.text = "";
    level3Controls.txtResult.text = "";
    level4Controls.txtResult.text = "";
    stageControls.txtResult2.text = "";
    level0Controls.txtResult2.text = "";
    level1Controls.txtResult2.text = "";
    level2Controls.txtResult2.text = "";
    level3Controls.txtResult2.text = "";
    level4Controls.txtResult2.text = "";
    //Dispatch an event that will bubble / move all the way to the highest level
    btnClick.dispatchEvent(new DataEvent(DataEvent.DATA,true,false,"Click"));
   }
   
  ]]>
 </mx:Script>
 <mx:HBox width="100%" horizontalAlign="center">
  <mx:CheckBox id="chkEventType" selected="false"
      label="Are we using event.stopImmediatePropagation()?"/>
 </mx:HBox>
 <Comp:FormControls id="stageControls" 
        useImmediate="{chkEventType.selected}"
        top="30"/>
 <mx:VBox name="level0" width="100%" height="100%" verticalGap="0" top="80">
  <Comp:FormControls id="level0Controls"
         useImmediate="{chkEventType.selected}"/>
  <mx:VBox name="level1" width="100%" height="100%" verticalGap="0">
   <Comp:FormControls id="level1Controls"
          useImmediate="{chkEventType.selected}"/>
   <mx:VBox name="level2" width="100%" height="100%" verticalGap="0">
    <Comp:FormControls id="level2Controls"
           useImmediate="{chkEventType.selected}"/>
    <mx:VBox name="level3" width="100%" height="100%" verticalGap="0">
     <Comp:FormControls id="level3Controls"
            useImmediate="{chkEventType.selected}"/>
     <mx:VBox name="level4" width="100%" height="100%" verticalGap="0">
      <Comp:FormControls id="level4Controls"
             useImmediate="{chkEventType.selected}"/>
      <mx:Button id="btnClick" label="Click me..."/>
     </mx:VBox>
    </mx:VBox>
   </mx:VBox>
  </mx:VBox>
 </mx:VBox>
</mx:Application>
SOurce code of my custom component - FormControls.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" creationComplete="creationCompleteEvent(event)">
 <mx:Style>
  
 </mx:Style>
 <mx:Script>
  <![CDATA[
   import mx.events.FlexEvent;
   
   //This bindable variable will be used to determine the
   //following:
   //_useStopWithImmediate = false => 
   // we use event.stopPropagation();
   //_useStopWithImmediate = true => 
   // we use event.stopImmediatePropagation();
   [bindable]
   private var _useImmediate:Boolean = false;

   public function get useImmediate():Boolean
   {
    return _useImmediate;
   }

   public function set useImmediate(value:Boolean):void
   {
    _useImmediate = value;
   }
   
   //Upone creation complete of this view
   protected function creationCompleteEvent(event:FlexEvent):void
   {
    //Add the listeners for DATA
    this.parent.addEventListener(DataEvent.DATA, displayEvent);
    this.parent.addEventListener(DataEvent.DATA, display2Event);
   }
   
   //When the parent view had capture a call for DataEvent.DATA
   private function displayEvent(event:Event):void{
    if(chkOption.selected){
     txtResult.text = "Event had been listened at " +
      "first field of " + this.parent.name + ".";
     //Stops the event from bubbling / moving upwards
     //Remove this line to see how you can listen for the 
     //same event in all the selected levels
     if(_useImmediate)
     {
      event.stopImmediatePropagation();
     }else{
      event.stopPropagation(); 
     }
    }
   }  
   
   //When the parent view had capture a call for DataEvent.DATA
   private function display2Event(event:Event):void{
    if(chkOption2.selected){
     txtResult2.text = "Event had been listened at " +
      "second field of " + this.parent.name + ".";
    }
   }  
  ]]>
 </mx:Script>
 <mx:VBox width="100%">
  <mx:HBox width="100%">
   <mx:Text id="txtResult" text=""/>
   <mx:Spacer width="100%"/>
   <mx:CheckBox id="chkOption" 
       label="Select me to check for Event 1"/>
  </mx:HBox>
  <mx:HBox width="100%">
   <mx:Text id="txtResult2" text=""/>
   <mx:Spacer width="100%"/>
   <mx:CheckBox id="chkOption2" 
       label="Select me to check for Event 2"/>
  </mx:HBox>
 </mx:VBox>
</mx:Canvas>
* Click here for the demo shown in this post.
^ Click here for the source files for the demo.