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?
| Date | : | 8 - 11 March 2012 |
| Venue | : | Levels 1, 2, 3, 4 & 6 Suntec Convention Hall Singapore |
| Opening Hours | : | 12 noon - 9 pm |
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.
<?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>
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.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)
<?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>
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.