Friday, January 17, 2014

Problems with special characters on the web...

Sometimes when I was writing or editing a post on my blog, I'm encountering numerous situations where a ' or a " can mess up your contents when you publish it. The same problem also occur when I'm creating the asdocs for flex projects. If you have entered > or < characters not as a html node but part of your text, you might have problems creating the asdocs.

After look through numerous sites, I think that 'HTML entities' is one of
the better alternatives for Encoding and Decoding HTML Entities. On top of
that, it has also provided a list that shows all the special characters
and the corresponding HTML Entities.

* Click here for the website 'HTML Entities'.
^ Click here for my previous post on how to create asdocs for your flex projects.

Sunday, January 12, 2014

Playing with timestamp...

While playing with timestamp across various types of platform / coding environment, it can get pretty annoying as you manipulate the data. And if you are going to create a countdown timer to a particular date, you would have to find the difference of today's date and the selected date, and that's when timestamp will step into the picture. Luckily there's...

Epoch Converter
That can help us to make our work much more easier.
Besides for the tool that helps you to identify the actual date from the given
timestamp, there's tools to help you to identify the difference between 2 dates,
the week of the current date, etc... It also provides a guide that provides the
syntax for finding timestamp across the various types of platform too. :D
And if you playing/working with all these date data on a daily basis, you will
definitely find this website to be pretty helpful. :D

* Click here for the 'Epoch Converter' website.

Friday, January 3, 2014

Flex: JSON Deserialization

JSON a much shorter and faster response as compared to XML. Therefore, although some third party api out there still gives you the option of returning the results in XML format, it also gives you the option of getting the results in JSON format too. So I'm just doing up a simple JSON Deserialization example. :D

Main Application Class - SimpleJSONDeserialize.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">
 <fx:Declarations>
  <s:HTTPService url="http://maps.googleapis.com/maps/api/geocode/json" 
        method="GET" 
        concurrency="single" 
        useProxy="false" 
        id="httpService" 
        result="httpServiceResultEvent(event)" 
        fault="httpServiceFaultEvent(event)">
   <s:request xmlns="">
    <address>{txtInput.text}</address>
    <sensor>false</sensor>
   </s:request>
  </s:HTTPService>
 </fx:Declarations>
 <fx:Script>
  <![CDATA[
   import com.adobe.serialization.json.JSON;
   
   import model.MapResult;
   import model.MapServiceResult;
   
   import mx.collections.ArrayCollection;
   import mx.rpc.events.FaultEvent;
   import mx.rpc.events.ResultEvent;
   
   import org.osflash.vanilla.Vanilla;
   
   private var mapResult:MapServiceResult;
   
   [Bindable]
   private var resultCollection:ArrayCollection;
   
   //Upon clicking on the button, we will trigger the request
   protected function searchBtnClickHandler(event:MouseEvent):void
   {
    httpService.send();
   }
   
   //Upon making a successful request
   protected function httpServiceResultEvent(event:ResultEvent):void
   {
    //Converts the json result to a Object.
    var tempJSONObject:Object = JSON.decode(String(event.result));
    
    //Converts the Object into a Object of class type MapServiceResult
    mapResult = new Vanilla().extract(tempJSONObject, MapServiceResult);
    
    //Since we couldn't bind a Vector to a Datagrid directly,
    //we will just push the results to a ArrayCollection and
    //bind it to a DataGrid.
    resultCollection = new ArrayCollection();
    for each(var item:MapResult in mapResult.results)
    {
     resultCollection.addItem(item);
    }
    resultCollection.refresh();
   }
   
   //Upon making a failure request
   protected function httpServiceFaultEvent(event:FaultEvent):void
   {
   }
  ]]>
 </fx:Script>
 <s:VGroup width="100%" 
     height="100%" 
     verticalAlign="middle" 
     horizontalAlign="center">
  <s:Label text="Please enter an address:"/>
  <s:HGroup horizontalAlign="center">
   <s:TextInput id="txtInput"/>
   <s:Button label="Search Now!" 
       id="searchBtn" 
       click="searchBtnClickHandler(event)"/>
  </s:HGroup>
  <s:DataGrid dataProvider="{resultCollection}" 
     width="400" 
     height="300">
   <s:columns>
    <s:ArrayList>
     <s:GridColumn headerText="Formatted Address"
          dataField="formattedAddress"/>
    </s:ArrayList>
   </s:columns>
  </s:DataGrid>
 </s:VGroup>
</s:Application>

Model class for HttpServiceResults - MapServiceResult.as
package model
{
 public class MapServiceResult
 {
  public var status:String;
  private var _results: Vector.;

  public function get results():Vector.
  {
   return _results;
  }

  /**
   * Vanilla class will handle all these mapping, hence
   * it will map the object results into the Vector
   * of type MapResult.
   * 
   * But when we are getting a empty string rather than
   * an Array, we will have to handle such a condition 
   */
  public function set results(value:*):void
  {
   _results = new Vector.;
   if(String(value) != "")
   {
    _results = value; 
   }
  }
 }
}

Model class for individual Result - MapResult.as
package model
{
 public class MapResult
 {
  //Vanilla will map all the values of 
  //address_components into the Vector 
  //addrComponents.
  [Marshall (field="address_components")]
  public var addrComponents: Vector.;
  [Marshall (field="formatted_address")]
  public var formattedAddress:String;
  public var types: Vector.;
 }
}

Model class for individual address_components - AddrComponents.as
package model
{
 public class AddrComponents
 {
  //Vanilla will map the value of the field 
  //long_name to longName 
  [Marshall (field="long_name")]
  public var longName:String;
  [Marshall (field="short_name")]
  public var shortName:String;
  public var types: Vector.;
 }
}
* Click here for the source files for the demo.
  (This requires a valid Google Geocoding API key, but currently it will work if you
  are running it locally.)
^ Click here to find out more about the Vanilla as3 library.
~ Click here to find out more about the as3corelib.

Tuesday, October 15, 2013

Flex: XML appending

How to append a new node into a XML object in Flex/as3? Here's a simple example that teaches you how to append a XML node. Here's a guide on how to do it. But do take note that you have to use either _ or a letter for the first character of the name of the new node that you are trying to insert. However if you want to use numbers for the first character, there's a way to do it too. :P Besides for the ways that I have listed in this post, you can use dot notation (.) to append a new node too. :)

Source Code for the main application - 'SimpleXMLManipulation.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" 
      creationComplete="creationCompleteEvt(event)" 
      xmlns:local="*">
 <fx:Declarations>
  <local:SimpleXMLConverter id="converter"/>
 </fx:Declarations>
 <fx:Script>
  <![CDATA[
   import mx.events.FlexEvent;
   
   protected function creationCompleteEvt(e:FlexEvent):void
   {
    converter.init();
   }
  ]]>
 </fx:Script>
 <s:VGroup width="100%" 
     height="100%" 
     verticalAlign="middle" 
     horizontalAlign="center">
  <s:Label text="Original XML"/>
  <s:TextArea text="@{converter.simpleXML}"/>
  <s:Spacer height="10"/>
  <s:HGroup>
   <s:VGroup horizontalAlign="center">
    <s:Label text="Modified XML using appendChild()"/>
    <s:TextArea text="{converter.simpleXML1}" 
       editable="false"
        width="30%" 
       minWidth="300"/>  
   </s:VGroup>
   <s:VGroup horizontalAlign="center">
    <s:Label text="Modified XML using []"/>
    <s:TextArea text="{converter.simpleXML2}"
       editable="false"
       width="30%" 
       minWidth="300"/>   
   </s:VGroup>
  </s:HGroup>
 </s:VGroup>
</s:Application>

Source code for the XML manipulating class
package
{
 import flash.events.Event;
 import flash.events.EventDispatcher;
 
 [Bindable]
 public class SimpleXMLConverter extends EventDispatcher
 {
  //XML String
  private var simpleXMLString:String = "" +
   "";
  
  //XML that contains the above simpleXMLString
  private var _simpleXML:XML;
  
  [Bindable(event="simpleXMLChanged")]
  public function get simpleXML():String
  {
   return _simpleXML;
  }

  public function set simpleXML(value:String):void
  {
   //If the input value isn't a valid XML,
   //we will set it to empty.
   try
   {
    _simpleXML = XML(value);
   }catch(e:Error)
   {
    _simpleXML = new XML();
   }
   
   //Modified XML using appendChild()
   simpleXML1 = XML(_simpleXML.toXMLString());
   if(simpleXML1)
   {
    var dummyXMLNode:XML;
    var dummyXMLNodeStr:String;
    dummyXMLNodeStr = "<" + name1Str + name2Str + ">";
    dummyXMLNodeStr += valueStr;
    dummyXMLNodeStr += "";
    dummyXMLNode = new XML(dummyXMLNodeStr);
    simpleXML1.appendChild(dummyXMLNode);
    if(simpleXML1.level1.length() > 0)
    {
     for(var i:int = 0; i < simpleXML1.level1.length(); i ++)
     {
      simpleXML1.level1[i].appendChild(dummyXMLNode);
     }
    }
   }
   
   //Modified XML using []
   simpleXML2 = XML(_simpleXML.toXMLString());
   if(simpleXML2)
   {
    simpleXML2[name1Str + name2Str] = 
     valueStr;
    if(simpleXML2.level1.length() > 0)
    {
     for(i = 0; i < simpleXML2.level1.length(); i ++)
     {
      simpleXML2.level1[i][name1Str + name2Str] = 
       valueStr;
     }
    }
   }
   
   //dispatching the 8 event to update the
   //respective text area
   dispatchEvent(new Event("simpleXML1Changed", 
    true, true));
   dispatchEvent(new Event("simpleXML2Changed", 
    true, true));
  }
  
  //XML that contains the modified XML based
  //on the above simpleXMLString and appendChild()
  private var _simpleXML1:XML;

  public function get simpleXML1():XML
  {
   return _simpleXML1;
  }

  [Bindable(event="simpleXML1Changed")]
  public function set simpleXML1(value:XML):void
  {
   _simpleXML1 = value;
  }
  
  //XML that contains the modified XML based
  //on the above simpleXMLString and []
  private var _simpleXML2:XML;

  public function get simpleXML2():XML
  {
   return _simpleXML2;
  }
  
  [Bindable(event="simpleXML2Changed")]
  public function set simpleXML2(value:XML):void
  {
   _simpleXML2 = value;
  }
  
  //The name of the empty node - part1
  private var name1Str:String = "empty";
  //The name of the empty node - part2
  private var name2Str:String = "node";
  
  //The value of the empty node
  private var valueStr:String = "dummyValue";
  
  public function init():void
  {
   simpleXML = new XML(simpleXMLString);
   
   //dispatching the event to update the main
   //respective text area
   dispatchEvent(new Event("simpleXMLChanged", 
    true, true));
  }
 }
}
* Click here for the demo shown in this post.
^ Click here for the source files for the demo.

Saturday, October 5, 2013

Flex 4: Disabling a Button Bar Button...

I was trying to disable one of the buttons that belongs to a 'Button Bar' component that comes with Flex 4. After spending a bit of time debugging and googling, I finally managed to come out with a decent solution to it...

Source Code for the main application - 'SimpleButtonBarEnabling.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" 
      creationComplete="creationCompleteEvent(event)">
 <fx:Script>
  <![CDATA[
   import mx.events.FlexEvent;
   
   protected function creationCompleteEvent(event:FlexEvent):void
   {
    //We are disabling the 4th button.
    otherInfo.enabled = false;
   }
   
  ]]>
 </fx:Script>
 <s:VGroup width="100%" 
     height="100%"
     verticalAlign="middle" 
     horizontalAlign="center" 
     gap="0">
  <!-- Create a Spark ButtonBar control to navigate 
   the ViewStack container. -->
  <s:ButtonBar dataProvider="{myViewStack}" 
      skinClass="CustomButtonBarSkin"/>
  
  <!-- Define the ViewStack and the three 
   child containers. -->
  <mx:ViewStack id="myViewStack" 
       borderStyle="solid" 
       width="50%"
       paddingBottom="10"
       paddingTop="10"
       paddingLeft="10"
       paddingRight="10">  
   <s:NavigatorContent id="search" 
       label="Search">
    <s:Label text="Search Screen"/>
   </s:NavigatorContent>
  
   <!-- set enabled="false" to disable the button -->
   <s:NavigatorContent id="custInfo" 
       label="Customer Info" 
       enabled="false">
    <s:Label text="Customer Info"/>
   </s:NavigatorContent>
  
   <s:NavigatorContent id="accountInfo" 
       label="Account Info">
    <s:Label text="Account Info"/>
   </s:NavigatorContent>
   
   <s:NavigatorContent id="otherInfo" 
        label="Others">
    <s:Label text="Others"/>
   </s:NavigatorContent>
  </mx:ViewStack>  
 </s:VGroup>
</s:Application>
And here's the custom skin class for the 'Button Bar' component.
<?xml version="1.0" encoding="utf-8"?>

<!--

    ADOBE SYSTEMS INCORPORATED
    Copyright 2008 Adobe Systems Incorporated
    All Rights Reserved.

    NOTICE: Adobe permits you to use, modify, and distribute this file
    in accordance with the terms of the license agreement accompanying it.

-->

<!--- The default skin class for the Spark ButtonBar component. The buttons on the ButtonBar component
    use the ButtonBarLastButtonSkin, ButtonBarFirstButtonSkin and ButtonBarMiddleButtonSkin classes.  
    
      @see spark.components.ButtonBar
      @see spark.components.ButtonBarButton    
        
      @langversion 3.0
      @playerversion Flash 10
      @playerversion AIR 1.5
      @productversion Flex 4
-->
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
        alpha.disabled="0.5">

    <fx:Metadata>
    <![CDATA[ 
       /** 
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("spark.components.ButtonBar")]
    ]]>
    </fx:Metadata> 

    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>
    
    <fx:Declarations>

  <!--- Have removed the first and third button since it's not needed.  -->
  
        <!--- 
            @copy spark.components.ButtonBar#middleButton
            @default spark.skins.spark.ButtonBarMiddleButtonSkin
            @see spark.skins.spark.ButtonBarMiddleButtonSkin
  
   The middle Button will be used as the item renderer for all the
   buttons of this button bar. And we are enabling the buttons
   base on the data passed into this component.
        -->
        <fx:Component id="middleButton" >
            <s:ButtonBarButton enabled="{data.enabled}"/>
        </fx:Component>

    </fx:Declarations>

    <!--- @copy spark.components.SkinnableDataContainer#dataGroup -->
    <s:DataGroup id="dataGroup" width="100%" height="100%">
        <s:layout>
            <s:ButtonBarHorizontalLayout gap="-1"/>
        </s:layout>
    </s:DataGroup>

</s:Skin>
* Click here for the demo shown in this post.
^ Click here for the source files for the demo.

Friday, October 4, 2013

Renaming your recursive files and folder using a batch file.

Initially I was using a 3rd party software to do all the renaming work. But as I proceed, I ended up searching high and low for a method using a batch file (*.bat) to do all the tedious work. Therefore, after playing and modifying the code, I have ended up with this.

@echo off
setlocal enabledelayedexpansion
REM for renaming of recursive folders, sub folders
for /d /r %%f in (*.*) do (
set fn=%%~nxf

REM replace all the . with __ in the folder names (excludes extensions)
if not [!fn!]==[] ( 
if not ["%%~nxf"]==["!fn:.=__!"] ( 
echo ren "%%~f" "!fn:.=__!" 
ren "%%~f" "!fn:.=__!" 
)
)
REM replace all the -interface with nothing in the folder names
REM (excludes extensions) add a I in front of the folder name
if not [!fn!]==[] ( 
if not ["%%~nxf"]==["!fn:-interface=!"] ( 
echo ren "%%~f" "I!fn:-interface=!" 
ren "%%~f" "I!fn:-interface=!" 
)
)
)

REM for renaming of recursive files
for /r %%f in (*.*) do (
set fn=%%~nf

REM replace all the - with __ in the file names (excludes extensions)
if not [!fn!]==[] ( 
if not ["%%~nxf"]==["!fn:-=__!%%~xf"] ( 
echo ren "%%~f" "!fn:-=__!%%~xf" 
ren "%%~f" "!fn:-=__!%%~xf" 
)
)
REM replace all the -interface with nothing in the file names
REM (excludes extensions) add a I in front of the file name
if not [!fn!]==[] ( 
if not ["%%~nxf"]==["!fn:-interface=!%%~xf"] ( 
echo ren "%%~f" "I!fn:-interface=!%%~xf" 
ren "%%~f" "I!fn:-interface=!%%~xf" 
)
)
)
pause

* Click here to download the batch file that I have listed in this posted.
^ Click here to find out more about batch files in Windows.
~ Click here to find out the difference between %% and !! in a batch file.

Thursday, September 26, 2013

Windows: Create a automated action...

Not all software out there allows you to save a series of commands/actions and allows you to run them again without the need of opening the software. Even if it can allow you to do that using command prompt, not all the functionalities will not be provided to you. Luckily there are software like...

'AutoHotkey'
You can script the actions that you would like to perform in a particular
software. On top of that, you can generate the script into a normal
windows executable(.exe) file that allows you to share it with normal
Windows User.

However, I knew that there are numerous software out there that can provide
you with a GUI interface and record all the necessary steps that you would
like to perform over and over again. Ex: winautomation, Do It Again,
RoboTask, etc... But most of them requires a license, and since I'm
performing a easy task, therefore I would rather spend a bit of time
scripting the actions rather than paying for a license.

* Click here to find out more about 'AutoHotkey'.