Friday, February 24, 2012

R u ready for the first Mega IT Show in Singapore for the year 2012?

Have a spoilt PC? Mobile Phone? Printer? IT Gadget? Want to get a new replacement? How about spending some time going down to the first IT Show in Singapore for the year 2012?


IT Show 2012

More information about the event:
Date : 8 - 11 March 2012
Venue : Levels 1, 2, 3, 4 & 6
Suntec Convention Hall Singapore
Opening Hours : 12 noon - 9 pm


I wonder... should I or should I not get a new...

* Click here to find out more about 'IT Show 2012'.

Friday, February 17, 2012

AS 3: Handling Text URL Links in the TLF TextField of Flash

It used to be pretty easy in the past. You just need to add a EventListener of TextEvent.LINK to the textfield and you can capture the url that the user has click on. But Adobe have made some new improvements to the TLF Textfield and I am going to show you how to capture the URL that the user has clicked, when it comes to TLF Textfield.

Let us take a look at the source code first.
<?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)"
      backgroundColor="#CCCCCC">
 <fx:Script>
  <![CDATA[
   import flashx.textLayout.conversion.TextConverter;
   import flashx.textLayout.elements.LinkElement;
   import flashx.textLayout.events.FlowElementMouseEvent;
   
   import mx.events.FlexEvent;
   
   protected function creationCompleteEvent(event:FlexEvent):void
   {
    //Populate the Flex 4 TextArea with some contents
    //Follow with a Listener for clicking on urls.
    var htmlText:String = "Click <a " +
     "href='http://nekyouto-tech.blogspot.com/'>" +
     "here</a> for my blog.";    
    txt.textFlow = TextConverter.importToFlow(htmlText,
     TextConverter.TEXT_FIELD_HTML_FORMAT);
    txt.textFlow.addEventListener(FlowElementMouseEvent.CLICK,
     clickTextURLEvent);
    
    //Populate the Flex 3 TextArea with some contents
    //Follow with a Listener for clicking on urls.
    htmlText = "Click <a " +
     "href='event:http://nekyouto-tech.blogspot.com/'>" +
     "here</a> for my blog.";  
    oldTxt.htmlText = htmlText;
    oldTxt.addEventListener(TextEvent.LINK, clickTextURLEvent);
   }
   
   //A function that will handle the url request from both 
   //TextArea Components
   private function clickTextURLEvent(event:Event):void 
   {
    var url:String;
    
    if(event as TextEvent)
    {
     url = TextEvent(event).text;
    }else if(event as FlowElementMouseEvent){
     var link:LinkElement;
     link = FlowElementMouseEvent(event)
      .flowElement as LinkElement;    
     url = link.href;    
    }
    navigateToURL(new URLRequest(url), "_blank");
    event.stopImmediatePropagation();
    event.preventDefault();
   }
   
  ]]>
 </fx:Script>
 <s:layout>
  <s:VerticalLayout verticalAlign="middle" horizontalAlign="center"/>
 </s:layout>
 <s:Label text="Flex 3 Text Area"/>
 <mx:TextArea id="oldTxt" editable="false" selectable="false"/>
 <s:Spacer height="10"/>
 <s:Label text="Flex 4 Text Area"/>
 <s:TextArea id="txt" editable="false" selectable="false"/>
</s:Application>

The result of the above will show a Flex 3 TextArea followed by a Flex 4 TextEvent.
Observe how the codes differ.

* Click here to view the demo of this example.
^ Click here for the source files of this demo.

Friday, February 10, 2012

AS3: Playing with Regular Expressions

How useful can Regular Expressions be? This is a question I have been continuously asking myself. Hence I have done up a simple demo of Regular Expression and you can easily identify how much time it can actually save you.

Let's take a look at the source code first.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute"
    creationComplete="creationCompleteEvent(event)">
 <mx:Script>
  <![CDATA[
   import mx.events.FlexEvent;
   
   //Dummy text for testing
   [Bindable]
   private var testStr:String = "info@info.com " +
    "apple@apple.com bestkirdape@gmail.com " +
    "best_kird_ape@gmail.com The above are " +
    "dummy email address.";
   //Regular Expression for checking email address
   private var emailRegExp:RegExp = /\b[\w\.-]+@[\w\.-]+\.\w{2,4}\b/gi;
   
   //The pattern you want the text that was found by the
   //Regular Expression to change into.
   private var pattern:String = "<a href='event:mailto:$&'>$&</a>";
   
   //Click Handler for button
   protected function clickHandler(e:MouseEvent):void
   {
    lblResult.htmlText = String(lblInput.text).
     replace(emailRegExp,pattern); 
   }
   
   //Upon clicking on the link in the validated result,
   //open up the email address.
   protected function linkHandler(e:TextEvent):void
   {
    navigateToURL(new URLRequest(e.text),"_self");
   }
   
   //Once the view have been created validate the Dummy text
   //using the Regular Expression and display the result.
   protected function creationCompleteEvent(e:FlexEvent):void
   {
    btnChange.dispatchEvent(
     new MouseEvent(MouseEvent.CLICK));
   }
  ]]>
 </mx:Script>
 
 <mx:VBox width="100%" 
    height="100%"
    paddingLeft="50"
    paddingRight="50"
    paddingBottom="50"
    paddingTop="50"
    verticalAlign="middle"
    horizontalAlign="center">
  <mx:TextInput id="lblInput"
       width="100%"
       height="20%"
       text="{testStr}"/>
  <mx:Button id="btnChange" 
       label="Change Text Now..."
       click="clickHandler(event)"/>
  <mx:TextArea id="lblResult"
      width="100%"
      height="20%"
      link="linkHandler(event)"/>
 </mx:VBox>
</mx:Application>
Although the source codes might look pretty short but it's actually something that was pretty useful.

The user will enter some text into the text field and upon clicking on the button, the program will automatically change all the text into clickable urls. Isn't that great? This have definitely shorten the amount of time required to write out individual functions to create the same effect.

* Click here to view the demo of this example.
^ Click here for the source files of this demo.

~ Click here for one of the best guide to get your way around Regular Expressions.

Saturday, February 4, 2012

AS3: Valid Date Validator + ASDoc

I used to search over the web for a AS3 date validator back then and after spending some time searching and trying, I am going to share the class that I have written in the past with you. XD
(Note: By the way I have added a bit of extra stuff in the AS3 file. Take a look and it might turn out to be pretty handy in code writing in the future. :D)

The following would be the source file of my Main Application in Flex.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute"
     creationComplete="creationCompleteHandler(event)">
 
 <mx:Script>
  <![CDATA[
   import com.date.DateChecker;
   
   import mx.events.FlexEvent;
   
   //String to store the minimum year
   private var tempTxtMin:Number;
   
   //This function will be executed onve the button have
   //been clicked.
   protected function button1ClickEvent(event:MouseEvent):void
   {
    if(txtMin.text == "")
    {
     tempTxtMin = -1;
    }else{
     tempTxtMin = Number(txtMin.text);
    }
    //The following will check the given fields and
    //check if they were valid dates.
    lblResult.text = digestErrorIntoString(
     DateChecker.shortStrDateChecker(txtDay.text,
     txtMonth.text,
     txtYear.text,
     tempTxtMin));
    lblResult1.text = digestErrorIntoString(
     DateChecker.strDateChecker(txtDate.text,
     "/",
     tempTxtMin));
    lblResult2.text = digestErrorIntoString(
     DateChecker.strDateChecker(txtDate1.text,
      "-",
      tempTxtMin));
   }
   
   //Base on the the result that you are getting in
   //DateChecker.strDateChecker or DateChecker.shortStrDateChecker
   //output a string for the respective results
   private function digestErrorIntoString(error:int):String
   {
    var resultStr:String = "";
    switch(error)
    {
     case 0:
      resultStr = "This is a valid Date.";
      break;
     case 1:
      resultStr = "Please enter a numeric number " +
       "for the day of the month.";
      break;
     case 2:
      resultStr = "Please enter a numeric number " +
      "for the month of the year.";
      break;
     case 3:
      resultStr = "Please enter a numeric number " +
      "for the year that you are query.";
      break;
     case 4:
      resultStr = "Please enter a date between 1 - 31.";
      break;
     case 5:
      resultStr = "Please enter a month between 1 - 12.";
      break;
     case 6:
      resultStr = "Please enter a year that is greater " +
       "than " + String(tempTxtMin) + ".";
      break;
     case 7:
      resultStr = "This date doesn't exist.";
      break;
     case 8:
      resultStr = "Please enter the date according to the" +
       " format that was shown in the above.";
      break;
    }
    return resultStr;
   }
   
   //Upon Creation Complete of this class, populate some content.
   //And do a check on the fields.
   protected function creationCompleteHandler(event:FlexEvent):void
   {
    // TODO Auto-generated method stub
    txtMin.text = "1960";
    txtDay.text = "9";
    txtMonth.text = "8";
    txtYear.text = "1965";
    txtDate.text = "9/8/1959";
    txtDate1.text = "30-2-2012";
    button1ClickEvent(null);
   }
   
  ]]>
 </mx:Script>
 
 <mx:VBox width="100%" height="100%" verticalGap="10"
    horizontalAlign="center"
    verticalAlign="middle">
  <mx:HBox width="100%" horizontalAlign="center"
     horizontalGap="0">
   <mx:Label text="Minimum Year Allow:"/>
   <mx:TextInput id="txtMin" restrict="0-9" maxChars="4"/>
  </mx:HBox>
  <mx:HBox width="100%" horizontalAlign="center"
     horizontalGap="0">
   <mx:Label text="Enter a date:"/>
   <mx:TextInput id="txtDay" restrict="0-9" maxChars="2"/>
   <mx:Label text="/"/>
   <mx:TextInput id="txtMonth" restrict="0-9" maxChars="2"/>
   <mx:Label text="/"/>
   <mx:TextInput id="txtYear" restrict="0-9" maxChars="4"/>
   <mx:Label text="(Ex: DD/MM/YYYY)"/>
  </mx:HBox>
  <mx:HBox width="100%" horizontalAlign="center"
     horizontalGap="0">
   <mx:Label text="Result of the above:"/>
   <mx:Label id="lblResult"/>
  </mx:HBox>
  <mx:HBox width="100%" horizontalAlign="center"
     horizontalGap="0">
   <mx:Label text="Enter a date:"/>
   <mx:TextInput id="txtDate" restrict="0-9/"/>
   <mx:Label text="(Ex: DD/MM/YYYY)"/>
  </mx:HBox>
  <mx:HBox width="100%" horizontalAlign="center"
     horizontalGap="0">
   <mx:Label text="Result of the above:"/>
   <mx:Label id="lblResult1"/>
  </mx:HBox>
  <mx:HBox width="100%" horizontalAlign="center"
     horizontalGap="0">
   <mx:Label text="Enter a date:"/>
   <mx:TextInput id="txtDate1" restrict="0-9 \-"/>
   <mx:Label text="(Ex: DD-MM-YYYY)"/>
  </mx:HBox>
  <mx:HBox width="100%" horizontalAlign="center"
     horizontalGap="0">
   <mx:Label text="Result of the above:"/>
   <mx:Label id="lblResult2"/>
  </mx:HBox>
  <!-- Upon clicking on this button, 
  run the event 'button1ClickEvent'-->
  <mx:Button label="Check Now" click="button1ClickEvent(event)"/>
 </mx:VBox>
</mx:Application>

and here comes the AS3 Date checker class

package com.date
{
 public class DateChecker
 {
  public function DateChecker()
  {
  }
  
  /**
   * Used to check if the given string is a valid date
   * @param str - the string than you are checking 
   * for a valid date
   * @param divider - a string that will be used as a 
   * divider for str
   * @param minYear - the minimum year than the user 
   * can enter
   * @return one of the below integer (0-8)
   *   
0 - valid date *
1 - Invalid day (day must be a numerical value) *
2 - Invalid Month (month must be a numerical value) *
3 - Invalid Year (year must be a numerical value) *
4 - Invalid day (day must be in a range of 1 - 31) *
5 - Invalid Month (month must be in a range of 1-12) *
6 - Invalid Year (year must be > than the * minYear specified) *
7 - Date doesn't exist *
8 - the paramter str is not in the correct format */ public static function strDateChecker(str:String, divider:String = "/", minYear:Number = -1):int { var _strArray:Array = String(str).split(divider); //If the array has more than 3 items (e.g. 11/11/20/11) //it is not a valid date format, return error code 8 if(_strArray.length != 3) { return 8; }else{ return shortStrDateChecker(_strArray[0], _strArray[1], _strArray[2], minYear); } } /** * Used to check if the given strings turn out to be * a valid date * @param day - the day of the date that you are checking * in string format * @param month - the month of the date that you are checking * in string format * @param year - the year of the date that you are checking * in string format * @param minYear - the minimum year than the user * can enter * @return one of the below integer (0-8) *
0 - valid date *
1 - Invalid day (day must be a numerical value) *
2 - Invalid Month (month must be a numerical value) *
3 - Invalid Year (year must be a numerical value) *
4 - Invalid day (day must be in a range of 1 - 31) *
5 - Invalid Month (month must be in a range of 1-12) *
6 - Invalid Year (year must be > than the * minYear specified) *
7 - Date doesn't exist *
8 - the paramter day, month and * year is not given in the correct format */ public static function shortStrDateChecker(day:String, month:String, year:String, minYear:Number = -1):int { var _day:Number = Number(day); var _month:Number = Number(month); var _year:Number = Number(year); var _date:Date = new Date(); //if all 3 given parameters are either strings //or empty, return error code 8 if((isNaN(_day) || day == "") && (isNaN(_month) || month == "") && (isNaN(_year) || year == "")) { return 8; } //if given date is a String, return error code 1 if(isNaN(_day)) { return 1; } //if given month is a String, return error code 2 if(isNaN(_month)) { return 2; } //if given year is a String, return error code 3 if(isNaN(_year)) { return 3; } _month = Number(_month - 1); //if given day is a > 31 and < 0, return error code 4 if(_day > 31 || _day <= 0) { return 4; } //if given month is a > 12 and < 0, return error code 5 if(_month > 11 || _month < 0) { return 5; } //if given year is bigger than minYear, return error code 6 if(minYear != -1) { if(_year < minYear) { return 6; } } _date.fullYear = _year; _date.month = _month; _date.date = _day; //if the temp date and the given date doesn tally //, return error code 7 if(_date.date != _day || _date.month != _month || _date.fullYear != _year) { return 7; } return 0; } } }
* Click here to view the demo of this example.
^ Click here for the source files of this demo.