Using sharedObject to store data at the client machine

July 18, 2007

The sharedObject class is used to store and read data on user’s computer or on a server. Local shared objects can be used as browser cookies. You can also store custome object into the sharedObject, this problem I got resolved with the help of google flex_india group. Thanks for their quick help on this matter.

Follow the thread for discuss issue about storing the custome object in the sharedObject

http://groups.google.com/group/flex_india/browse_thread/thread/92362f8ee4df6c1a/23d620ed37d81503

You can create the local shared object with following syntax:
//Create “testLocalSharedObject”
var testSO:SharedObject = SharedObject.getLocal(“testLocalSharedObject”);

To store any data into the sharedObject use data property.

//This will store the Β myname value, the same can be retrieved from it.
testSO.data.myname =”vijay khambalkar”;

//To store the this data into the local file, use flush method. This method writes the content immediately to the local file.
testSO.flush();

//To destroy object from the local file, use clear method. This method clears all the data from the sharedObject and deletes the sharedObject from the disk
testSO.clear()


Cairngorm Auto Code template generator

July 12, 2007

I know there are such tools available but building one is nice experience and then using it πŸ™‚

We are using cairngorm framework in our project. I found generating the cairngorm module classes is repeatative and time consuming. To make my life easier, I written a small utility with PHP which allows me to generate this classes by specifying the package and module name. This one I had done for my project. This can be utilize to generate module classes for any project. Generated files needs very few modification that may differ from the personal preferences.

It help me saving the lots of copy paste time.

Click here to generate the cairngorm classes.

suggest me if anyway I can make it better.


Autosuggest the Textbox in Flex

April 20, 2007

After a very long time I got time to code something. I thought what to write, various technology which one to go with PHP, Coldfusion, flex, javascript. After thinking for a min, I started with Flex. What to create? Autosuggest TextBox!.

So I created a autosuggest textbox, I quickly thought what all I need

Textbox, Allow user input.
Listbox, To hold the list the matched list from the textbox.
Tweening, Which will give a feel of panel movement comig out of the textbox with matched value.

Algorithm
=========
1.Track keyUp event on the textbox which in turn filter the main array which is holding the entire values.
2.Apply regExp which will hold the format to look for.
eg. typing A, should give me all the values starting from the ‘A’ character.
3.test the regular expression against the main array by looping over each value.
4.If test successful then hold these value into the new array which in turn binded with the list box.
5.Animate the list box with resize event if filteredArray has more values into it from the step 4.

Notes
=====
We can supply the list to main array from database, or keep it hardcoded.

You are ready with your autosuggest box.

Click here to view the Working sample

Happy coding πŸ™‚


Restricting the character entry into the TextInput

April 13, 2007

We were struggling from last several days about how to restrict some special character entry into TextInput field. We tried applying our own logic for implementing this functionality by tracking the keydown event and checking the ascill/regular expression but did not succeeded into this.

Finally I thought to look into the help and suprisingly we find that TextInput has restrict property to which we can supply the range of character that the TextInput should accept.

<mx:TextInput x=”104″ y=”151″ width=”190″ id=”charInput” restrict=”a-z A-Z”/>

Complex problem always has very simple solution πŸ™‚


PHP Method Call via URL

February 15, 2007

We are developing a Flex Application with PHP as a middleware. Flex Httpservice component we are using to communicate with the PHP. We have several developers who are doing separate modules. They doing both Flex as well as PHP code. I thought its not proper and need to have a solution where our code will reside on the single url.

How we achieve this?

I thought of developing a architecture which will take a className and methodName from URL and call methods and the supplied object dynamically.

eg. http://localhost/PHP/Flex/index.php?className=MyClass&methodName=getUser

This above url calls getUser method on MyClass Object. I used call_user_method function of PHP which allows me to achieve this.

One trick for this part is also instantiating the object dynamically. I coded like this

function getObject($class)
{
static $instance ;

if(!isset($instance))
{
$instance =& new $class;
}

return $instance;
}

getObject method accepts className and checks wheather that object exists or not. If object is not set then it creates a object and just return it.

It was a great experience while building something which allows my developers to simplify their code integration. Now every developers is working on their respective classes and using this method.

Cheers πŸ™‚


Flex Builder crashes delete .snap file

December 15, 2006

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.
Flex error message
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.Snap file location


ExternalInterface to Make your flex methods Callable via HTML/Javascript

December 15, 2006

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&#8221; 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.

Screenshot for the javascript flex communication for the above application