Currently Browsing: Flash Builder

How to Create a Hello World Application in Flash Builder

Posted by Brett Widmann on Mar 6, 2010 in Flash Builder | 0 comments

This tutorial is very similar to my previous post on the same concept in Flex 3, except I am going to spend a little more time highlighting some of the key differences in Flash Builder and its predecessor Flex 3.

Initial Observations

One of the first things you’ll notice visually is the new default styling Flash Builder brings to the table. The default styling is not only a more fresh approach, but more appealing than Flex 2 and 3. The buttons are more polished and refined, and the overall styling is much slicker. Also, no more default blue background! The screenshot below is the code from my Flash Builder project. You can download the source files here.

The Code

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="436" height="248" creationComplete="mainFunction()">
<fx:Script>
<![CDATA[
import mx.controls.Alert;
// main function that fires when creation is complete
/* adds event listener to the button with the id "hello2"
* that listens for a mouseclick event and designates
* a function to be called when the mouse is clicked. */
private function mainFunction():void
{
this.hello2.addEventListener(MouseEvent.CLICK, helloFunction);
}
//function that is fired on click
private function helloFunction():void
{
Alert.show(‘Hello World!’, ‘Message 2′);
}
]]>
</fx:Script>
<!–Hello World Example 1 using inline MXML click events –>
<s:Label y="30" text="Hello World Example 1" color="#000000"
fontWeight="bold" horizontalCenter="2"/>
<s:Button y="50" label="Hello World 1"
click="Alert.show(‘Hello World!’, ‘Message’)"
id="hello1" color="#000000" horizontalCenter="1"/>
<!– Hello World Example 2 using event handlers in AS3 –>
<s:Label y="96" text="Hello World Example 2" color="#000000"
fontWeight="bold" horizontalCenter="2"/>
<s:Button y="125" label="Hello World 2"
id="hello2" color="#000000" horizontalCenter="1"/>
</s:Application>

You’ll notice that much of the code is very similar to Flex 3, if not the same. The only difference is that the mx namespace has been replaced with an s or an fx and that there are more XML namespace declarations in the Application tag. The neat thing with beta 2 of Flash Builder is the fact that you can still use the mx namespace, but Flash Builder kindly suggests to transition to the Spark library by stating:

I think that by going this route Adobe makes it easier for previous Flex users to migrate and become more comfortable with some of the new changes on older components within the platform.

As always, comments and questions are always welcome.

Happy coding!

Page 7 of 7« First «...3 4 5 67