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

Developing a good application - part1

These days we get to see more and more web applications showing its face. Everyone speak about web2.0. Web applications are moving from a traditional page by page navigation to single page.Unlike olden days where the application doesn't care about users,usablity, etc...these days the developers are more concerned about the user satisfaction, user experience...Every developer bound to discuss about the best way to develop an application.
I have just made a small research on this. I put in few details on this

1. For any application, be careful of first time users.
2. Don't make them get stuck while experiencing your application.
3. Make simple interactions.
4. Help them with a step by step information.
5. Use Activity based planning
6. List down all the possible feature list
7. Decide what to be done and what not

Welcome

This is my first post. This is a place where you will find discussions about all the latest cutting edge technologies. I love to share my knowledge to everyone. I would love to see comments of yours. I welcome all kinds of comments