Lessons learned

Last week I was not able to post any entry in my blog, lots of work was done last week. Code refactoring, javascript validators, Smarty templates formatting are some major areas I worked on.

There was too many good things I learned. Firstly I took javascript validation part for my project, I found there were so much redudant code I written when I started working on the project. After taking some deep grasp on it, I was able to implement new validation function which does most kind of validation for me. This was the great achievement from last week. I wrapped my 1000 lines of code within just 100 lines, I am feeling very good about this. I share the code with some other team members and they were happy about the approch I took.

Smarty was one more things which was looking very egly no proper identetion, formatting, comments. No uniformity within the codes. I clean up most of the smarty templates, there are still some more which I will clean up this week.

In PHP, I clean up most part of PHP script, I feel very sorry that I didnt concetrated initially on my code which leads to this.

Some notes I took from this incident
-Always write good code, think before writing the code.
-Analyse it in every aspect, how it can help you in future.
-Is your code is easy to modify in future.
-Can I use the same code in other projects too.

I already started implementing this earlier but not on this project, that was mistake from my side.

But finally I am happy that I clean up many things last week.

Cheers!!

Flex Builder crashes delete .snap file

It happen several times with us our flex builder suddenly crashes. Some time ago I come across the solution. If you ever have experince the problem flex builder crashing which give error message like following.

Remove .snap file from the development directory. At default location .snap file located at \.metadata\.plugins\org.eclipse.core.resources. Just remove .snap file and start your flex. Once drawback of doing this your project gets deleted from flex navigator you need to import it again.

ExternalInterface to Make your flex methods Callable via HTML/Javascript

Its greate Experience working with addCallBack method and finally I got it working. I tried various ways. First I simply register the method in flex using addCallBack function but I didnt succeeded. After looking through live docs and reading more about it I come know swf initiates the and talks with browser that swf is ready to accept the call from HTML pages. How did I achieve this?

Here is my Mxml code

MXML Application:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” creationComplete=”initApp();”>
<mx:Script>
<![CDATA[

import flash.external.*;
import mx.controls.Alert;
public var readyTimer:Timer;
public var javascriptMethodCounter:int = 0;

public function initApp():void
{
if (isContainerReady())
{
// If the container is ready, register the SWF's functions.
setUpCall();
}
else
{
/* If the container is not ready, set up a Timer to call the
container at 100ms intervals. Once the container responds that
it's ready, the timer will be stopped. */
readyTimer = new Timer(100);
readyTimer.addEventListener(TimerEvent.TIMER, timerHandler);
readyTimer.start();
}
}

public function showAlert(message:String):void
{
javascriptMethodCounter++;
javascriptCounterText.text = javascriptMethodCounter + " times javascript function called ";
javascriptMessageLogger.text = message;
}

public function timerHandler():void
{
if (isContainerReady())
{
// If the container is ready, register the SWF's functions.
setUpCall();
readyTimer.stop();
}
}

//setup the callback function so that HTML can call flex methods
public function setUpCall():void
{
ExternalInterface.addCallback("showAlert",showAlert);
}

//Checks wheather HTML page is loaded or not.
private function isContainerReady():Boolean
{
var result:Boolean = ExternalInterface.call("isReady");
Alert.show("Result :"+result)
return result;
}
]]>
</mx:Script>
<mx:Panel x=”10″ y=”10″ width=”386″ height=”200″ layout=”absolute”>
<mx:TextArea x=”10″ y=”36″ width=”346″ height=”114″ id=”javascriptMessageLogger”/>
<mx:Label x=”10″ y=”10″ text=”times javascript function called” width=”260″

id=”javascriptCounterText”/>
</mx:Panel>

</mx:Application>

Above code comprises of following method :

initApp : This methods will get call on the creationComplete of an event. This checks wheather swf is ready for

to accept call from HTML/javascript or not.

isContainerReady: this simply call one javascript function which returns boolean value.

timerHandler: after calling isContainerReady function if result if false, we register a timer which gets call

every 100ms to register the swf communication. When successful timer get stoped and call setUpCall method.

setUpCall: Simply registers the Flex method with ExternalInterface addCallBack method.

showAlert: This is the method which we are registered to be callable via HTML

Controls :

javascriptMessageLogger : Displays the message passed via javascript method

javascriptCounterText: Shows the number of times methods get called from javascript.

HTML code:

<script language=”javascript”>
var interfaceObj;

function callFlexMethod()
{

if(navigator.appName.indexOf(“microsoft”)!=-1)
{
alert(“Microsoft”);
interfaceObj = window["ExternalInterface1"];
}
else
{
interfaceObj = document["ExternalInterface1"];
}
}

// ——- Private vars ——-
var jsReady = false;

// ——- functions called by ActionScript ——-
// called to check if the page has initialized and JavaScript is available
function isReady() {
return jsReady;
}

// called by the onload event of the <body> tag
function pageInit() {
// Record that JavaScript is ready to go.
jsReady = true;
callFlexMethod();
}

</script>

isReady : Simply returns the state of jsReady variable

pageInit: this method get called on onload event of page. This function makes jsReady true and get the copy of swf object into interfaceObj variable

callFlexMethod: Determines the browser type and get the proper object out of it

Form Element:

Enter Text : <input type=”text” id=”myText”><input type=”button” value=”Send to Flex” onclick=”interfaceObj.showAlert(document.getElementById(‘myText’).value);”>

myText: This is where we enter the message we want to passed to flex method.

Button : Onclick of button showAlert method of flex application get call with value from textInput.

I was able to successfully makes flex methods available to javascript and call it from javascript. One more thing it should be run from webserver.

“for in” loop to print object properties with Javascript/Actionscript

Do you want to know object properties of any object? Its very easy listing all the properties and values with javascript/actionscript using “for in” looping structure.

Lets see how.

Syntax:

for(prop in object)
{

}

Above structure shows how to apply “for in” structure on object.

How it works?
-Its start collecting all properties name to the left side variable (prop) with in the bracket.

Eg.

<script language=”Javascript”>
var obj = new Object(); //Create new object
obj["firstName"]=”vijay”; //Assign property firstName with value vijay
obj["lastName"]=”khambalkar”;//Assign property lastName with value Khambalkar
var str=”"; //variable which will hold property values
for(prop in obj)
{
str+=prop + ” value :”+ obj[prop]+”\n”;//Concate prop and its value from object
}
alert(str); //Show all properties and its value
</script>

I used this technique many times while working with actionscript and javascript. This all me to see all properties and its individual value to track.

Coldfusion use cfexecute to execute server side executable

For Quite some time I was thinking of how we can execute any executables on the server. While browsing the net for coldfusion articles I am across cfexecute tag. So finally I got the tag which satisfy my needs.

We have some third party executables which converts our files into different format. But how to use this utility via web using coldfusion was question mark for us. Originally the idea was there in my mind about such kind of tag. Which I thought coldfusion must be offering, thats true it offered such tag. Coldfusion is Great!

We will like this.

-We will upload file on the server on to the specified url
-will use cfexecute command with script once the file is uploaded and will pass necessary arguments.

Cfexecute tag looks like

<cfexecute
name = ” Application Name “
arguments = “arguments”
outputFile = “Output file name”
timeout = “Timeout interval”>
…
</cfexecute>

name :
attributes require the application absolute path which we want to execute at the server side.

arguments :
arguments required by the application eg filename and output file format

outputFile :
This dump the response messages into specified file. eg. File is successfully converted.

timeout:
This is the timelimit till the coldfusion server waits for the response from application.

You can find more information about the cfexecute at the livedocs.

How to Get Mouse Coordinates with Javascript !!!

Yesterday while working on a script and I wanted to know the cursor X, Y coordinates. Suprisingly I forgot how to get the X and Y coordinates of mouse. After thinking for some time, its strike that everything related to the current state is stored in events. So How to get the X and Y positions.

-capture mousemove event and list down all its properites

This is how I find X and Y coordinates

<html>
<head>
<title>Get Mouse Coordinates</title>
<script language=”javascript”>
var divObj;

/**
* capture mousemove event, this statement will cause browser to
* call getMouseCoordites function each time mouse moves
*/
document.onmousemove=getMouseCoordinates;

/**
*identify which event is supported
* Based on that collect pageX and pageY properties of the event object
* pageX and pageY gets the X and Y cursor coordinates
*/
function getMouseCoordinates(event)
{
ev = event || window.event;
divObj.innerHTML = “Mouse X:”+ev.pageX + ” Mouse Y:”+ev.pageY;
}

//assign the mouseCoord Object to divObj
function loadDiv()
{
divObj = document.getElementById(“mouseCoord”);
}
</script>
</head>

<body onLoad=”loadDiv()”>
<div id=”mouseCoord”>Mouse Coordinates position will be displayed here.
</div>
</body>
</html>

Script works well with Mozilla, For IE need to do further modification in finding the exact position by calculating different properties value.

Calling Javascript function from Flex Application

There are various ways of calling javascript from your flex application ie. navigateToURL, ExtenalInterface. ExternalInterface is most elegent and simple way of calling javascript from flex application.

ExternalInterface API has also support browser checks. ExternalInterface class has static method call(javascriptFunctionName, ArgumentList, …) to which you can specify the method you need to call.

Success of the call method depends on the HTML pages with allowScriptAccess attribute which is within <object> or <embed> tag of HTML and it must be set to “always” or “sameDomain”.

Your typical flex Application with ExternalInterface will look like

ExternalInterfaceApp.mxml

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”>
<mx:Script>
<![CDATA[

import flash.external.*;
import mx.controls.Alert;

public function javascriptAlert():void
{
var javascriptFunction:String = "showAlert";
var message:String = messageText.text;
if(ExternalInterface.available)
{
ExternalInterface.call(javascriptFunction, message);
}

}
]]>
</mx:Script>
<mx:TextInput x=”10″ y=”20″ text=”Enter Message” id=”messageText”/>
<mx:Button x=”178″ y=”20″ label=”Call Javascript Function” click=”javascriptAlert()”/>

</mx:Application>

ExternalInterface.available property is to identify wheather your flash player supports ExternalInterface API or Not.

Javascript in HTML page

<script language=”javascript”>
function showAlert(message)
{
alert(“message from flex :”+ message );
}
</script>

You need to include this javascript into the HTML page.

In above example browser alert will be get displayed with the message you entered in the input box.

MSSQL ISNULL good function to replace null values

MSSQL has a nice function to replace null values conditinally

ISNULL(columnName, newValue)

This function requires two parameter columnName and new value to be replaced in place of null.

This function help me alot to solve the problem at database level instead at the coding level.

Generate XML from mysql table using PHP

Its very easy generating xml from php. I have created the following script to achieve this. The same script I used to create simple query analyser using flex.

<?
header(“content-type:text/xml”);
function getXML($sql=”Default Query”)
{
$conn=mysql_connect(“hostName”,”userName”,”password”);
$db=mysql_select_db(“databaseName”);
$result = mysql_query($sql,$conn);
$columns=”";
echo “<records>”;
while($row=mysql_fetch_assoc($result))
{
$columns.=”<record>”;
foreach($row as $key => $value)
{
$columns.=”<$key>$value</$key>”;
}
$columns.=”</record>”;
}
echo $columns;
echo “</records>”;
}
getXML(“SELECT * FROM tableName”);

?>

This simple function is very useful in different manner. You can used it when you want to write ajax application, Flex Application.

Limiting Numbers of Posts in WordPress

I have been customizing wordpress, I stuck around the problem for Limiting Number Of Posts per page. After digging into the code I found the tables wp_options which allows setting of wordpress.

This table has columns option_name and option_value. I change the option_value for the post_per_page to number of want to limit my post.

You can see the details for this row by running query below

SELECT *
FROM `wp_options`
WHERE option_name = ‘posts_per_page’
LIMIT 0 , 30