Flex and Java Developers needed!

My company HeyMath! is looking for experienced Flex and Java Developers. We do not follow a general recruitment process. We run a portal DevHunt! to hunt developers.

The portal has series of puzzles to test the developers skills. The developer has to solve these technical puzzles to get through. For more details register at DevHunt! and have fun.

The Hunted Prey will get the worth of their salt.

Disable AIR auto-update - No way to automate

Recently i got a requirement that when an AIR application is installed and run by the user, AIR should not check for auto-updates. After googling for few hours i found that it is highly impossible to automate this.

Adobe provides a solution to stop AIR engine to check for updates. The application http://airdownload.adobe.com/air/applications/SettingsManager/SettingsManager.air provides the option to disable / enable updates. But this requires a manual effort.

Adobe should have provided the option to enable / disable auto-updates at the application level. Each AIR application should have the option to set auto-update option. If an application has disabled auto-updates, then when the AIR engine loads it should check this option and should not try to update.

If any of you guys have a workaround, i would love to hear it.

Runner-up at RIAthon 08

It was an exciting and eventful day at The Lalit Ashoka Hotel, Bangalore. The "Flash Ahead" event started as scheduled. We had a chance to watch the special preview of CS4 products, power of Flash Catalyst and Gumbo ( flex4 ).

And to talk about the RIAthon event, there were 10 finalists looking to grab the iPhone. Each team was asked to demo their application for a max of 3 mins. When our turn came, Ananth did all the talking, and i controlled the application. It was a wonderful demo by Ananth, as we were inching towards the iPhone. We were confident of winning the RIAthon 08 title, but we did not want to have any expectations.

Everyone was ready to hear the results. Harish announced the results in the reverse order. Our application GeoScope won the runner-up title of RIAthon 08 contest. We got a Sony home theatre system as the prize. The winner of the event was Krishna Prathap and his friend, for the application called FlexStats. He is also from chennai, and we know him personally. We are also happy that chennai grabbed the top two positions in the event.

It was an exciting evening for us as we signed off in a winning note. We thank Adobe for conducting this event, and congratulate them for making this as a big success. We are looking forward to participate in more events of this kind.

GeoScope - Application for riathon 08 event

It has been a long time since my last post. I was busy with my day-to-day activities and could not find time to post. One of my resolution for this year is to post without long break up. Hope i can do it :).

Last year November (around 20th) Adobe announced a contest named "riathon 08" for Flash, Flex, AIR developers. Checkout the announcement here. The contest is specific to India region.

I was really excited and eager to participate in the contest. Ananth had few ideas for the application. Whatever idea we finalize, it has to be simple and doable in 4 days time. After few discussions he came up with the idea which produced a simple and cool app "GeoScope". I am happy with the way the app has come out in a short time.

About GeoScope:
"GeoScope" is a mashup application which combines the power of Google maps and YouTube. This application does not require any user accounts to use it.

"GeoScope" allows users to search YouTube videos based on the location in the map. All the user has to do is browse the Google map, and click any of the location. "GeoScope" lists down the videos that are available in that location. users can play the YouTube videos instantaneously.

Features:
1. Search YouTube videos through Google maps.
2. Searched videos can be played instantaneously.

Open-source libraries:
1. Google maps API - free license
2. YouTube API. - free license

Team Information:
1. Prabhakaran
RIA Developer, HeyMath!
CFUG Manager

2. Anantharaman
CTO, HeyMath!
CFUG Manager

The Event has been postponed to 17th Jan 2009. Checkout the new dates here.

We have submitted our application and keeping our fingers crossed for the result. Ananth is confident of grabbing an iPhone. Lets see!!!

Flex game for SEO contest

The flex game is open to all users...The URL for the game is http://labs.heymath.com/Fleximagically%20Searchable/...
The game is pretty straight forward. The term "Fleximagically searchable" is hidden in a set of images. The user has to find where the term is hidden within the time given. More the user plays the game, higher is the possibility of getting listed in the top 10 players.

Keeping my fingers crossed to see how google indexes the flash content :).

"Fleximagically Searchable" contest

Sometime back Ryan Stewart announced a Flex SEO contest  hoping that the community can learn the best way to expose data from a Flex application to search engines. Soon after the announcement came, my CTO Ananth was charged up to make use of this opportunity to create flex contents that are search engine friendly. So he urged my team mate Alagu (who is new to flex envi) to take part in the contest.

He took this as a challenge and started to learn flex and in a span of 25 days and he has completed a flex gaming application which is due for a public launch. The game follows the rules

• It has to be a Flex application


• “Fleximagically Searchable” must be dynamically loaded. It can’t be static text inside of your application. - But I don’t care how you load it, in fact that might make a difference in how Google ranks you.


• The first link must be deep linked directly into where you load “Fleximagically Searchable” into your application. Feel free to use any deep linking methods out there.


• Nothing in your code can dynamically load the phrase automatically. It has to be the result of a user interaction.


• You must provide source code and be willing to talk about exactly what you did.


• Multiple entries are allowed if you want to try different things.

The game has come out well in a short span of time. Soon i will post the URL for the game

Adobe Open Screen Project

Recently Adobe has announced that they are working on a revolutionary "Open Screen Project". This is a great news for flash developers in this planet. Open Screen Project enables developers and designers to publish their content across various devices like Mobile, Computers, Consoles, TV etc....

So it going to be "One Runtime....All Screens". This is clearly a sign of Adobe ruling the RIA world. Future of RIA looks exciting...Looking forward to this project :)

30onair at Chennai Flex User Group

March 1 2008 - Chennai Flex User Group officially launched Adobe AIR 1.0 and flex 3. The event was organized by Ananth and me, along with the support of John Koch. The event was scheduled for 11.00 am at HeyMath! office. Around 12 members from the group attended the launch event. The event was kicked off with a presentation by Kevin Lynch. The presentation was around 10-15 mins. After that it was time to distribute AIR t-shirts and Flex 2.0 text book to all the members. Thanks to Adobe for the support. Then we guys had discussions on Adobe technologies especially Flex and AIR. It was very very formal. Everyone had their chance to speak on it.
After the heated discussions we had snacks as refreshments. Thanks to HeyMath! for the support. As we reached the end of the event, we still haven't shoot the "30 sec on Adobe Technologies" video with the members. First to come up for the shoot was Sahil Haslani. He spoke about "Why Flex?" for 30 secs. Next it was my CTO Ananth, who initially took few minutes to think but came with a stunning explanation about "Why Adobe?". As usual he couldn't resist using the whiteboard :).
Next it was Viswanathan who spoke about "Why Flex?" and to follow him was my colleagues Umesh and Shankar

Anantharaman - 30onair - Why Adobe?


Sahil - 30onair - Why Flex?


Viswanathan - 30onair - Why Flex?



Umesh - 30onair - Why Adobe?




Sankar - 30onair - Why Adobe?

Create a table using CSS

Days back my colleague asked me to create a table without using <table> tag. So i did a small sample which uses CSS to create a table. Its pretty simple and straight forward. I have put down the HTML and CSS below

/***************************************HTML***********************************/
<html>
<head>
<link href="table.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="table">
<ul>
<li class="title">Player Name</li>
<li class="even">Sachin</li>
<li class="odd">Gilchrist</li>
<li class="even">Dhoni</li>
<li class="odd">Ponting</li>
</ul>
<ul>
<li class="title">Country</li>
<li class="even">India</li>
<li class="odd">Australia</li>
<li class="even">India</li>
<li class="odd">Australia</li>
</ul>
<ul>
<li class="title">Ranking</li>
<li class="even">1</li>
<li class="odd">2</li>
<li class="even">6</li>
<li class="odd">10</li>
</ul>
</div>
</body>
</html>


/************************************************table.css************************************/
.table
{
background:#333;

}
.table ul
{
float:left;
margin:0;
padding:0;
border:1px solid #C9C9C9;
}
.table ul li
{
list-style:none;
padding:5px 10px;
}
.table ul li.title
{
font-weight:bold;
background:#333;
color:#fff;
}
.table ul li.even
{
background:#fff
}
.table ul li.odd
{
background:#FFFFE6
}

Hope this helps css designers around.

Creating a curve through CSS (without using an image)

Few days back i was just browsing through one of the website casually, and one thing that drew my attention was the curve used in the website. Immediately i started to inspect the code and i was amazed to see that no images were used to create that curve. It was done purely through CSS. Then i spent few hours to learn the CSS trick and i prepared my own.

I have put my HTML code and the CSS that i created. I am sure that this will help the CSS designers around the world.

/****************************HTML code**************************************/

<html>
<head>
<link href="curvedbox.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="curvedBox">
<span>
<span class="r1" ></span>
<span class="r2" ></span>
<span class="r3" ></span>
<span class="r4" ></span>
</span>
<div class="content">
Flex is a cross-platform development framework for creating rich Internet applications (RIAs). Flex enables you to create expressive, high-performance applications that run identically on all major browsers and operating systems.
</div>
<span>
<span class="r4" ></span>
<span class="r3" ></span>
<span class="r2" ></span>
<span class="r1" ></span>
</span>
</div>
</body>
</html>

/**************************curvedbox.css*****************************************/

body {background-color:#000;}

.curvedBox
{
width:300px;
}
.curvedBox .r1, .curvedBox .r2, .curvedBox .r3, .curvedBox .r4
{
background-color:#fff;
display:block;
overflow:hidden;
height:1px;
font-size:1px;
}
.curvedBox .r2, .curvedBox .r3, .curvedBox .r4
{
border-width:0 1px;
border-left:1px solid #fff;
border-right:1px solid #fff;
}
.curvedBox .r1 {margin:0 6px;}
.curvedBox .r2 {margin:0 3px;}
.curvedBox .r3 {margin:0 2px;}
.curvedBox .r4 {margin:0 1px;height:2px;}

.curvedBox .content
{
background:#fff;
border-left:1px solid #fff;
border-right:1px solid #fff;
padding:0 5px;
}

Cross borwser compatiblity - some facts for web developer

I just came across some interesting facts for a web developer.

Internet Explorer(both IE 6 & IE 7) is being used by around 65% of the users, Where as firefox is being used by around 25% of the users, and the remaining percentage goes to browsers like Safari, opera....
So if you are a web developer you should be aware of these facts and the application you develop should atleast support IE and Firefox. You should test your application for these two major browsers which takes up 90% of the market.

And when we look at the Operating Systems usage, Windows dominates the market with around 95% of the users, remianing 5% is being shared by Mac and Linux. So it is not a harm if you neglect the testing for mac and linux.

When we look at the screen resolutions being used, 1024 x 768 takes up 50% of the users and the remaining percentage covers all other resolutions. So the application you develop should look good in all the screen resolutions.

For more precise stastical data look here

Number handling - Actionscript

Round a number to few decimal places:

To round a number to few decimal places use the following samples

Round to one decimal place
Math.round(35.2499 * 10) / 10 // returns 35.2

Round to two decimal place
Math.round(35.2499 * 100) / 100 // returns 35.25

Round to three decimal place
Math.round(35.2499 * 1000) / 1000 // returns 35.25

Round a number to the nearest multiple of an integer:

To round a number to nearest multiple of an integer use the following samples

Round a number to nearest multiple of 5
Math.round(35.2499 / 5) * 5 // returns 35

Round a number to nearest multiple of 10
Math.round(35.2499 / 10) * 10 // returns 40

Capture the end of audio play - onPlayStatus

Few days back i was working with playing FLV through RED5 server. I got everything right except for capturing the end of audio play. I was trying to capture the end of play through "Netsream.Play.Stop" event. But this event got trigerred during the middle of the play. So i was looking for other options for capturing the STOP event.

I came through a event called onPlayStatus which gets trigerred after the audio plays completely. The code is

ns.onPlayStatus = function(info:Object)
{
trace("End of audio play");
}

For more information about this event check here

Fixing the "base" attribute for Flash embedded in IE

Few days back my tech lead helped me to crack the problem of relative URL issue in embedding flash in HTML document. Normally if you embed a SWF file in a HTML document which is placed at different level of that SWF, and if you try to load external resources(image,swf) relative to the swf, then SWF will look for the resource relative to the HTML.

To solve this issue you should use base attribute in the EMBED tag. The base attrribute should point to the directory of SWF file. So once this is done, the SWF will load the external resources correctly.

And today when i checked this in great Internet Explorer, it didn't work. To be frank i was not stunned to see this. IE has always been a nightmare for the developers. Then i tried various workarounds. One workaround worked for me. IE doesn't compile the EMBED tag. It renders the output based on the OBJECT tag and the PARAM tag. So i added a new PARAM tag with NAME attribute as base and VALUE attribute points to the directory of SWF file.

So now i am a happy man :)

My first feel of Adobe Flash CS3

Today i got a chance to get a feel of the latest version of flash - Adobe Flash CS3. It took a lot of time to install the application compared to flash 8. Once done i was really eager to use it.

- The first thing i noticed is the "TOOLBOX" in which all the tools are single lined, which can be toggled to the old way (double lined).

- Then i noticed the way all the panels are arranged. It was amazing. The panels can be grouped with or separated from each other (fig fl9.1)

- The coolest feature i see in this release is that you can skin the components in no time. Just double click on the component, the EDIT mode of that component movieclip will be opened up and you will see all the UI of the component for all the states. So you can directly change the skin from here.

- Then i thought i should do a sample application. So i placed a button component on the stage and added the AS 3.0. I added the following snippet

import flash.events.MouseEvent;
clickme_btn.addEventListener(MouseEvent.CLICK,clickHandler);
function clickHandler(event:MouseEvent):void{trace("You clicked me");}

When i run the application my attention turned to the output panel and compile errors panel, which is being combined with properties,filters,parameters panel.

- Then i thought of checking how the compiler errors are thrown, i made a syntax error at

clickme_btn.adEventListener(MouseEvent.CLICK,clickHandler);

To my surprise the button component which was placed on the stage collapsed (fig fl9.2). This is the first bug i came across in Flash CS3.

- The compiler errors was good to watch. This kind of interface will not be new for flex developers. The error thrown is now more specific. For the above code i got an error

1061: Call to a possibly undefined method adEventListener through a reference with static type fl.controls:Button

And at the bottom of the panel you will see a "Go to source" button which will take you to the line of the code where you made the mistake. This will add more value for the developers while debugging the application.

                         
       fig fl9.1                        fig fl9.2

This is just my first feel of Flash CS3. The support of AS3.0 will be a gift for flash developers who turned to flex. Is Flash CS3 the straight competitor for Flex 3 :). Now it will be a tough time for Silverlight. Lets wait n watch

I turned into a component developer

Now i am a component developer :). It took two years for me get into this. I was never intrested in doing this. But today i was forced(requested) to create a component, and it was a good one.
Now i firmly believe that a good Actionscript programmer should be able to develop components. Developing a component actually increases the programming skill. A good component has its own requirements.
1. It should be loosely coupled. The member variables and methods has to be encapsulated. Not all the varialbes can be exposed. The developer has to identify the right set of variables for exposing

2. The component should be re-usable at any point of time.

3. Should use getters and setters option. The member variables in the component should not be direct exposed. It has to be exposed through the get and set keywords
eg:
private var _age:Number
private function set age(val:Number):void
{
_age = val;
}
private function get age(val:Number):void
{
return _age;
}
The above code is self explanatory. Instead of exposing the variable _age directly, we are using setters and getters for variable age which directly affets _age.

4. A good component should allow the user to capture the changes that is happening in it. This can be achieved through Event metatag and dispatchEvent method.
To dispatch an event use dispatchEvent(new Event("click"));
If you are trying to dispatch a custom event you should use metatag
eg:
[Event(name="modified",type="flash.event.Event")]

5. If you are developing a flash component, it should allow the user to customize through component inspector

These are the main services a component should provide.
To get more information about the component development check here

Apollo is now Adobe AIR™

Adobe® has renamed their Rich Internet Application tool Apollo to Adobe® AIR(Adobe Integrated Runtime)™. Adobe labs was found quoted as

"Adobe® AIR™, formerly code-named Apollo, is a cross-operating system runtime that allows developers to use their existing web development skills(HTML, JavaScript, Flash, Flex, AJAX ) to build and deploy rich Internet applications to the desktop".

Developers can download the SDK of AIR™
To experience the AIR application you need to download and install the Adobe AIR Installer.
Experience the sample applications here.

Note: Before installing the Adobe AIR Installer, uninstall the Apollo alpha if it has been already installed

File upload in Flex + Ruby on Rails

Flex provides an API to upload and download a file. It uses the flash.net.FileReference class. Find the below code

Actionscript 3.0:

Call the "uploadFiles()" method to start uploading a file. Change the URLString variable to point to your controlle

// ActionScript file
   import flash.net.FileReference;
   import flash.net.URLRequestHeader;
 
   private var uploadFileRefList:FileReference = new FileReference();
   private var uploadURLReq:URLRequest;
   private var URLString:String="upload/attachment";

   private function uploadFiles():void
   {
       uploadFileRefList.addEventListener(Event.SELECT, uploadSelectHandler);
       try {
               var success:Boolean = uploadFileRefList.browse();
       } catch (error:Error) {
               trace("Unable to browse for files. " + error);
       }
   }
   private function doUpload(file:FileReference):void
   {
       uploadURLReq = new URLRequest(URLString);
       file.addEventListener(Event.COMPLETE, uploadCompleteHandler);
       file.addEventListener(IOErrorEvent.IO_ERROR, uploadIoErrorHandler);
       file.addEventListener(ProgressEvent.PROGRESS, uploadProgressHandler);
       try
       {
           file.upload(uploadURLReq);
       } catch (error:Error) {
           trace("Unable to upload file. " + error);
       }
   }
   private function uploadSelectHandler(event:Event):void
   {
       doUpload(uploadFileRefList);
   }
   private function uploadProgressHandler (event:ProgressEvent):void
   {
       upload_btn.enabled=false;
       trace(Math.floor((event.bytesLoaded/event.bytesTotal)*100) + "% complete");
   }
   private function uploadIoErrorHandler (event:Event):void
   {
       trace("Upload failed: " + event);
   }
   private function uploadCompleteHandler (event:Event):void
   {
       upload_btn.enabled=true;
       trace("Upload successfull: ");
   }

Ruby on Rails:

Create a controller "upload" and place the below code

   def attachment
     render(:xml => "") if saveFileAttachment(params[:Filedata],params[:Filename].to_s)
end

Then create a helper method "saveFileAttachment"

def saveFileAttachment(pFile,pFileName)
vFilePath = "public/"+pFileName
return false unless File.open(vFilePath, "wb") { |vBuffer| vBuffer.write(pFile.read) }
return true
end

Developing a good application - part2

Every projet has its analysis phase which is crucial for its success. All the various possiblities has to analysed in this phase. From my experience i have put in few steps for designing a good usable software
1. Find out some real time users:
To kick start the project first find out real time users. They are the guys who is going to experience your product.
2. Figure out all the important activities:
Once you are done with the earlier step, figure out all the activities that needs to be performed in this analysis phase.
3. Figure out user model:
Collect all the services they expect from your product, from the user. An user model can simply be described as "The expectation for the software".
4. Sketch the first draft of the design:
Once you examine the user model, just create a rough draft of your product.
5. Iterate your design:
Do iterations of your design based on the user model. Create a design that would fit the user model.

Once you are done with the above steps you can start your program model i.e the way you program the software.

Test with real time users:
After the application is created, make the real time users test your application. Note the area where the users find it tough to use your system. Users will face a problem when they find program model not equal to user model

Create and load XML in PHP

This is a tutorial for creating a new XML file from PHP and loading the XML file.
This tutorial has two files generatexml.php and loadfeeds.php

Requirements:
1. PHP5
2. Apache
The XML files are generated in PHP with the help of DOM. The following are the PHP codes

Creating an XML :
Create a PHP file with the name generatexml.php and copy and paste the code in it

$dom = new DOMDocument("1.0");

//create the root node of the XML file
$root = $dom->appendChild($dom->createElement("demo"));

// this is used to create the FRONTEND node
$frontend = $root->appendChild($dom->createElement("frontend"));
//chlids of frontend node
//first node
$flash = $frontend->appendChild($dom->createElement("app"));
$flash->appendChild($dom->createTextNode("Flash"));
//second node
$ajax = $frontend->appendChild($dom->createElement("app"));
$ajax->appendChild($dom->createTextNode("Ajax"));

// this is used to create the SERVERSIDE node
$serverside = $root->appendChild($dom->createElement("serverside"));
//chlids of frontend node
//first node
$php = $serverside->appendChild($dom->createElement("app"));
$php->appendChild($dom->createTextNode("PHP"));
$php->setAttribute("type","opensource");
//second node
$rails = $serverside->appendChild($dom->createElement("app"));
$rails->appendChild($dom->createTextNode("Ruby on Rails"));

// this is used to create the BACKEND node
$backend = $root->appendChild($dom->createElement("backend"));
//chlids of frontend node
//first node
$mysql = $backend->appendChild($dom->createElement("app"));
$mysql->appendChild($dom->createTextNode("MySQL"));
$mysql->setAttribute("type","opensource");
//second node
$postgres = $backend->appendChild($dom->createElement("app"));
$postgres->appendChild($dom->createTextNode("PostgreSQL"));

//save the XML file created
$dom->formatOutput = true;
$dom -> save("demo.xml");

Loading an XML :
Create a PHP file with the name loadfeeds.php and copy and paste the code in it

$dom = new DOMDocument("1.0");
header("Content-Type: text/xml");
$dom ->load( 'demo.xml' );
echo $dom ->saveXML();

First execute generatexml.php to create a xml file "demo.xml" in the current directory.
Then execute loadfeeds.php to load the xml file