Sunday, July 31, 2011

Why choose PHP?

There were many types of server side scripting environment out there. For example: there's php, asp, asp.net etc. But I choose php most of the time because its free and it's easy to use.


Let's look at the scripts below:
I am using a flash file to communicate to the server side script.
package com.phppostget
{
 import com.zcs.net.NetConnect;
 
 import flash.display.MovieClip;
 import flash.display.Sprite;
 import flash.events.Event;
 import flash.events.MouseEvent;
 import flash.net.NetConnection;
 import flash.net.URLVariables;
 import flash.text.TextField;
 
 public class Main extends Sprite
 {
  //This is a class that I had written to simplify 
  //the connection to a server side script
  private var tempConnect:NetConnect;
  //Create pointers to the movieclips and textfield on Stage
  public var _send_mc:MovieClip = new MovieClip();
  public var _btn_mc:MovieClip = new MovieClip();
  public var _value1_txt:TextField = new TextField();
  public var _value2_txt:TextField = new TextField();
  public var _value3_txt:TextField = new TextField();
  public var _input1_txt:TextField = new TextField();
  public var _input2_txt:TextField = new TextField();
  public var _input3_txt:TextField = new TextField();
  public var _url_txt:TextField = new TextField();
  public var _result_txt:TextField = new TextField();
  
  public function Main(){
   //Setup all the pointers to the respective movieclips and textfields
   //and setup the listeners to all these Movieclips and buttons
   _btn_mc = this.getChildByName("btn_mc");
   _btn_mc.gotoAndStop(1);
   _btn_mc.addEventListener(MouseEvent.CLICK, changeMethodEvent);
   _send_mc = this.getChildByName("send_mc");
   _send_mc.addEventListener(MouseEvent.CLICK, sendDataEvent);
   _value1_txt = this.getChildByName("value1_txt") as TextField;
   _value2_txt = this.getChildByName("value2_txt") as TextField;
   _value3_txt = this.getChildByName("value3_txt") as TextField;
   _input1_txt = this.getChildByName("input1_txt") as TextField;
   _input2_txt = this.getChildByName("input2_txt") as TextField;
   _input3_txt = this.getChildByName("input3_txt") as TextField;
   _url_txt = this.getChildByName("url_txt") as TextField; 
   _result_txt = this.getChildByName("result_txt") as TextField; 
  }
  
  //Simple listner to toggle the POST and GET state 
  //upon clicking on the Movieclip
  private function changeMethodEvent(event:Event):void{
   if(_btn_mc.currentFrame == 1){
    _btn_mc.gotoAndStop(2);
   }else{
    _btn_mc.gotoAndStop(1);
   }
  }
  
  //Sending the values to the server side script
  //upon clicking on the Send button
  private function sendDataEvent(event:Event):void{
   var tempXMLStr:String = "<"+_input1_txt.text+">" + _value1_txt.text + "";
   tempXMLStr += "<"+_input2_txt.text+">" + _value2_txt.text + "";
   tempXMLStr += "<"+_input3_txt.text+">" + _value3_txt.text + "";
   var tempXML:XML = new XML(tempXMLStr);
   
   tempConnect = new NetConnect(_url_txt.text, tempXML, Number(_btn_mc.currentFrame));
   tempConnect.addEventListener(NetConnect.PARSE_NET_OK, showResultEvent);
  }
  
  //When the server side script returns a result, show it on the result textfield
  private function showResultEvent(event:Event):void{
   if(_btn_mc.currentFrame == 1){
    _result_txt.text = "POST: ";
   }else{
    _result_txt.text = "GET: ";
   }
   var urlVar:URLVariables = new URLVariables(tempConnect.getResult());
   _result_txt.appendText(urlVar.msg);
  }
 }
}

Look at the source code of this php file. I don't need to bother about the calls to this php using a POST or a GET method. $_REQUEST will handle both POST and GET method calls. Isn't that great?
<?php
  //Regardless of POST or GET, grab the values that 
  //were send to this php files
  $name = $_REQUEST["name"];
  $desc = $_REQUEST["desc"];
  $info = $_REQUEST["info"];
  //output a simple message with the values that were 
  //pass into this php file
  echo "msg=Hello ".$name.", the following are your description:".$desc." and here are your info.".$info."&misc=";
?>

Click here for the demo of this post.
Click here for the source files of this post.

One of Windows OS missing component

Being a Windows User for more than 10 years, I always felt that the OS could improve further. Rather than making all the cosmetic changes to the Environment, I would prefer them to add useful utility and components to help the users to increase their productivity.

'TeraCopy' was definitely one of the best components that I would strongly encourage all the Windows User to install. This is because the original Windows Copy and Paste could only provide basic information like how much percentage of the total files had been copied and how long does it take to finish copying all the files. Although these were useful information to a user, but if you are copying files from different folders and an error occurred suddenly, you will need to copy all the files again as the default Windows File Copying System does not provide enough information to tell you what are the files that had been copied. This is a tedious job especially when you are copying a large volume of files.

With the help of 'TeraCopy', one will be provided with all the important information that the default Windows File copying system were lacking. Trust me, try installing the software for a few days and you were never ever want to use the default Windows File copying system again.

Click here to find out more about 'TeraCopy'.

Sunday, July 24, 2011

Flash / Flex AS3: Bubbling Events

In AS3, there will be numerous situation where you would encounter the word bubble in the creation of a new Event. So what does "bubble" means? This is how I would interpret the term "bubble". "Bubble" means that you will allow the dispatch event to move from the lowest position of a interface to move all the way to the stage.

Still confused? No worries, I have created a simple project to demo the uses of a 'Bubble' event.



 
  
 
 
  
 
 
 



 
 
  VBox{
   paddingLeft:10;
   paddingRight:10;
   backgroundAlpha:0.2;
   backgroundColor:#00FF00;
  }
 
 
  
 
 
 
  
  
   
   
    
    
     
     
      
      
       
       
      
     
    
   
  
 


Click here to view the demo.
Click here to download the source file of the demo.

Note: if you want the event to be capture by all the levels, comment away the following line of code "event.stopPropagation();".

Sunday, July 17, 2011

Flex AS3: Creating a Customized Tool Tip in Flex

Are you bored with the current look of the Tool Tip in Flex? I'm getting a bit sick with the look of the Tool Tip and I have managed to find a few ways to work around the look of the Tool Tip. Here is one of the ways that I have been using.

Firstly, we would need to create a class to extends a Tool Tip Interface in flex.



 
 
  
 
 
  
 
 
 


After creating the class, this is the how you could use the customise tool tip in your Flex Application.


 
  
   
  
  
  
  
  
 

Click here to view the demo listed in the above.
Click here to grab the source files for this demo.

Saturday, July 9, 2011

Flash AS3: globalToLocal & localToGlobal

The reason I had written about these 2 functions in Flash AS3, was mainly because of the fact that I keep forgetting about how to use these functions in Flash. Here you go, 2 similar outputs with 2 different ways of writing the swf file.


GlobalToLocal Implementation:
Actionscript codes:
//Create a array to store the highest MC in a (3*3) grid
var mcArray:Array = new Array();
//Maximum level of each box
var noOfBaseMc:int = 6;
//Variable to store number of level
var randomInt:int = 0;
//temp Obj to store MovieClip
var tempMC:Object;
//instance of bgMC;
var newMC:bgMC;
//temp Obj to store parent of MovieClip
var tempParent:Object;
//Creating a Grid
for(var g:int = 0; g < 3; g ++){
 for(var h:int = 0; h < 3; h ++){
  //Select random number of level
  randomInt = Math.floor(Math.random() * noOfBaseMc) + 1;
  tempMC = stage;
  //Stacking the levels within each MovieClip 
  //and add the highest level to the array 'mcArray'
  for(var i:int = 0; i < randomInt; i ++){
   newMC = new bgMC();
   if(i == 0){
    newMC.x = (150 * (g + 1)) - 70;
    newMC.y = (125 * (h + 1)) - 50;
   }
   tempMC.addChild(newMC);
   tempMC = newMC;
   tempParent = newMC.parent;
   while(tempParent != stage){
    tempParent = tempParent.parent;
    //Changing the frame of the MovieClip 
    //darker the color, higher the level
    newMC.gotoAndStop(newMC.currentFrame + 1);
   }
  }
  tempMC.rotation = Math.floor(Math.random() * 360);
  mcArray.push(tempMC);
 } 
}
//Create a tag MovieClip
var tempTagMC:tagMC = new tagMC();
tempTagMC.visible = false;
stage.addChild(tempTagMC);

stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveEvent);

//On mouse move, show the tag MovieClip when rollover 1 of the grid boxes
//the tag will move with the mouse cursor and display the contents
function mouseMoveEvent(event:MouseEvent){
 for(var j:int = 0; j < mcArray.length; j ++){
  if(mcArray[j].hitTestPoint(stage.mouseX, stage.mouseY,true)){
   tempTagMC.x = stage.mouseX + 2;
   tempTagMC.y = stage.mouseY + 2;
   tempTagMC.visible = true;
   tempTagMC.text_txt.wordWrap = true;
   tempTagMC.text_txt.autoSize = "left";
   //Display the global coordinates (X,Y) of mouse cursor
   tempTagMC.text_txt.htmlText = "Global: X=" + stage.mouseX + " Y=" + stage.mouseY;
   //Display the local coordinates (X,Y) of mouse cursor 
   //in the MovieClip using globalToLocal function
   var tempPoint:Point = mcArray[j].globalToLocal(new Point(stage.mouseX,stage.mouseY));
   tempTagMC.text_txt.htmlText += "Local: X=" + tempPoint.x + " Y=" + tempPoint.y;
   //Display number of level of MovieClip
   var level:int = 1;
   tempParent = mcArray[j].parent;
   while(tempParent != stage){
    tempParent = tempParent.parent;
    level ++;
   }
   tempTagMC.text_txt.htmlText += "Level: " + level;
   tempTagMC.text_txt.width = 120;
   tempTagMC.bgMC.height = tempTagMC.text_txt.height + 4;
   tempTagMC.bgMC.width = tempTagMC.text_txt.width + 4;
   return;
  }
 }
 tempTagMC.visible = false;
}
Output:
Click here for the demo.

Explanation:
When it comes to the function of globalToLocal, there are a few parameters need.

Formula for globalToLocal:
{A}.globalToLocal(new Point({B}.x,{B}.y));

Paramters:
  • {A} - The container that you want to pass the coordinates to
  • {B}.x, {B}.y - Usually this refers to the stage mouseX and mouseY


LocalToGlobal Implementation:
Actionscript codes:
//Create a array to store the highest MC in a (3*3) grid
var mcArray:Array = new Array();
//Maximum level of each box
var noOfBaseMc:int = 6;
//Variable to store number of level
var randomInt:int = 0;
//temp Obj to store MovieClip
var tempMC:Object;
//instance of bgMC;
var newMC:bgMC;
//temp Obj to store parent of MovieClip
var tempParent:Object;
//Creating a Grid
for(var g:int = 0; g < 3; g ++){
 for(var h:int = 0; h < 3; h ++){
  //Select random number of level
  randomInt = Math.floor(Math.random() * noOfBaseMc) + 1;
  tempMC = stage;
  //Stacking the levels within each MovieClip 
  //and add the highest level to the array 'mcArray'
  for(var i:int = 0; i < randomInt; i ++){
   newMC = new bgMC();
   if(i == 0){
    newMC.x = (150 * (g + 1)) - 70;
    newMC.y = (125 * (h + 1)) - 50;
   }
   tempMC.addChild(newMC);
   tempMC = newMC;
   tempParent = newMC.parent;
   while(tempParent != stage){
    tempParent = tempParent.parent;
    //Changing the frame of the MovieClip 
    //darker the color, higher the level
    newMC.gotoAndStop(newMC.currentFrame + 1);
   }
  }
  tempMC.rotation = Math.floor(Math.random() * 360);
  mcArray.push(tempMC);
  tempMC.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveEvent);
  tempMC.addEventListener(MouseEvent.MOUSE_OUT, mouseOutEvent);
 } 
}
//Create a tag MovieClip
var tempTagMC:tagMC = new tagMC();
tempTagMC.visible = false;
stage.addChild(tempTagMC);

//On mouse move, show the tag MovieClip when rollover 1 of the grid boxes
//the tag will move with the mouse cursor and display the contents
function mouseMoveEvent(event:MouseEvent){
 tempTagMC.text_txt.wordWrap = true;
 tempTagMC.text_txt.autoSize = "left";
 //Display the local coordinates (X,Y) of mouse cursor
 tempTagMC.text_txt.htmlText = "Local: X=" + event.target.mouseX + " Y=" + event.target.mouseY;
 //Display the global coordinates (X,Y) of mouse cursor 
 //in the MovieClip using localToGlobal function
 var tempPoint:Point = event.target.localToGlobal(new Point(event.target.mouseX,event.target.mouseY));
 tempTagMC.text_txt.htmlText += "Global: X=" + tempPoint.x + " Y=" + tempPoint.y;
 //Display number of level of MovieClip
 var level:int = 1;
 tempParent = event.target.parent;
 while(tempParent != stage){
  tempParent = tempParent.parent;
  level ++;
 }
 tempTagMC.text_txt.htmlText += "Level: " + level;
 tempTagMC.text_txt.width = 120;
 tempTagMC.bgMC.height = tempTagMC.text_txt.height + 4;
 tempTagMC.bgMC.width = tempTagMC.text_txt.width + 4;
 tempTagMC.x = tempPoint.x + 2;
 tempTagMC.y = tempPoint.y + 2;
 tempTagMC.visible = true;
}

function mouseOutEvent(event:MouseEvent){
 tempTagMC.visible = false;
}

Output:
Click here for the demo.

Explanation:
When it comes to the function of localToGlobal, there are a few parameters need.

Formula for localToGlobal:
{A}.localToGlobal(new Point({B}.x,{B}.y));

Paramters:
  • {A} - The container that currently holds the coordinates that you want to convert
  • {B}.x, {B}.y - the x and y coordinates of the point that you want to convert into a global coordicates


Click here for the source files of the examples in this post.

Saturday, July 2, 2011

PHP: Reusing your codes...

I'm sure back in the 90s, probably when you are creating a website, you might have create a webpage and replicate various parts of the webpage to another webpage in order to make your layout consistent. This might be pretty easy during the first 10 or 20 pages of the website. However as your website bigger and bigger, this might get more and more tedious and much more time will be needed for debugging and testing. That is why I'm going to show you how you can reduce all these crazy work if you are going to build a new PHP website. (Why PHP? Because it's free.)


In PHP, there is this special function known as 'include()' and by using this function, you can reuse a block of PHP codes across all your PHP webpages.

The following is a series of PHP files that I had created.

home.php
<?php
 //set the value of $section
 $section = "home";
 //include the header file to recycle your codings
 include("header.php");
 //Just display a simple message
 echo "Contents of ".$section." comes here.";
?>

contact.php
<?php
 //set the value of $section
 $section = "contact";
 //include the header file to recycle your codings
 include("header.php");
 //Just display a simple message
 echo "Contents of ".$section." comes here.";
?>

If you compare the contents of home.php and contact.php, you could easily identify the similarities and differences between both files and if you have taken a closer look, you could easily identify that I had included a php file named "header.php". This is the file that I will be reusing throughout my webpages.

And here's the source file for "header.php"
<?php
 //Create a table and base on the value of $section, toggle the state of the selected button.
 echo "<table cellpadding='0' cellspacing='0' border='0' width='100%' ><tr>";
 //If $section == home, make the text 'Home' unclickable else make it into a clickable hyperlink
 if ($section != "home"){
  echo "<td align='center'><a href='home.php'>Home</a></td>";
 }else{
  echo "<td align='center'><b>Home</b></td>";
 }
 //If $section == profile, make the text 'Profile' unclickable else make it into a clickable hyperlink
 if ($section != "profile"){
  echo "<td align='center'><a href='profile.php'>Profile</a></td>";
 }else{
  echo "<td align='center'><b>Profile</b></td>";
 }
 //If $section == product, make the text 'Product' unclickable else make it into a clickable hyperlink
 if ($section != "product"){
  echo "<td align='center'><a href='product.php'>Product</a></td>";
 }else{
  echo "<td align='center'><b>Product</b></td>";
 }
 //If $section == contact, make the text 'Contact Us' unclickable else make it into a clickable hyperlink
 if ($section != "contact"){
  echo "<td align='center'><a href='contact.php'>Contact Us</a></td>";
 }else{
  echo "<td align='center'><b>Contact Us</b></td>";
 }
 echo "</tr></table>";
 echo "<br>";
?>

If you look at "header.php", it's using a conditional statement to display the respective contents into "home.php" and "contact.php". Hence by reusing the "include()" function in PHP, you can save a lot of time copying and pasting the header and the footer of the website and probably various components or layout that you are going to use over and over again.

Note: this is also a useful way to store some variables that you might be using to make a connection to a mySQL server.

Click here for the example that I had created for the post.
Click here for the source codes of the example that I had created.