Enter Project Name ‘Hello World’ and select a custom Project Location for your project files to be placed. Since we are creating a Web application that runs in Flash Player so select Application type accordingly.
We are not going to use any server side language to interact with our Hello World application so we will select None in Server Technology section. Press Next.

On Next wizard step we can specify a custom output folder where compiled swf file will be placed. Swf file is output of any Flash or Flex based project. SWF files are executed within Flash Player, which can be installed freely from Adobe website.

This Output folder will be made in root directory of Project, which we selected in first step. Let’s leave it to default suggested name and press Next.

Pressing next will bring focus to wizard step 3 where define and rename source folders and add new libraries to the project. However for our simple Hello World application we won’t be needing additional libraries than what is already provided in Flex framework.

So let’s press Finish Now. This will initiate a Project creation and loading sequence. Once project “Hello World” is created we can see the hierarchy of project files and folders in “Flex Navigator” panel (Window > Flex Navigator).

Main.mxml File
By default when a new project is created, its default .mxml file is loaded in editor you can obviously open it by double clicking file name in Flex Navigator.

Flex applications are written using MXML and/or ActionScript. MXML is an XML-based markup language that is primarily used to layout application display elements and associate behaviors with them. ActionScript is an ECMAScript-compliant object-oriented programming language that is primarily used for application logic. In Flex MXML and ActionScript code are compiled into binary SWF files.


Designing Our RIA
In Editor, two modes in which you can view an mxml file are Source and Design view. In above diagram Source view is enabled where you can see opening and closing Application tags and nothing in between. This indicates Application has no UI components defined that should be rendered by flash player.

Let’s now switch to Design view by pressing Design button on top of the code editor. Selecting Design view will show how our main.mxml file will be rendered in flash player, which in our case is blank since we have added no UI control so far. As soon as we select Design view, a set of panels open automatically to facilitated and speedup designing of application layouts. Panel we are interested right now is ‘Components’ panel.

Components panel displays all the, by default available UI Controls. We can also create custom UI Controls.

If not already selected, click on Label control that we just dragged to design area. Properties panel will update to show properties relevant to Label control. If Properties panel is not opened already, you can open it through Windows > Flex Properties.

Under Common section, change Text property of this Label control to ‘Hello World’. As soon as you tab out of Text property, Label’s new text is set in design area.

Running RIA
Let’s now run our simple Rich Internet Application. Save file for any changes and then select Run > Run Main from menu.

This will build the project and generate binary SWF file in bin-debug folder. IDE will go ahead and launch default browser with our Hello World RIA loaded in it.

Exercises:

1. What is Flex?
   
   
2. Why we needed MXML when we already had Action Script 3.0 for Flash?
   
   
3. Change Label to say something other than ‘Hello World’.
   
   
4. Add a Button, CheckBox, ComboBox and Date Chooser controls on design area?
   
   
5. What are the differences in properties panel, when you select above controls one by one?