Adobe AIR on your Phone and TV

In this Air/Flex tutorial you will learn how to create a Flex Tree component using data from an external XML file.

What we will cover

• mx:WindowedApplication
• mx:Script
• mx:XML
• mx:HTTPService
• mx:Panel
• mx:Tree
• Custom ActionScript Functions
• Compiling a Flex Applicaton using amxmlc
• Testing the AIR/Flex application using adl

Prerequisite

In order to fully make use of the tutorial,
you should already have the AIR SDK Installed.
You should also have the Flex SDK
(you do NOT need Flex Builder for this tutorial).
Simply download the flex sdk zip file, unzip all files to your computer
(I will refer to c:\flex\ in this tutorial, but you can use a different location if you like).

Overview

You will create 3 files during the course of this tutorial. One is the mxml file (flex),
one is the AIR application file (xml) and the last one is the xml data file (used to store the tree data).
We will not cover any ‘design patterns’ in this tutorial.

Part 1 – Creating the AIR application descriptor file

Whenever you build an AIR application, you need to have the basic xml descriptor file.
The file can be thought of as the application configuration. In this example, we will keep this very simple.
tree-app.xml

<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/1.0">
  <id>tutorial.first.flex.my</id>
  <version>1.0</version>
  <filename>tree</filename>
  <initialWindow>
    <content>tree.swf</content>
    <visible>true</visible>
    <width>300</width>
    <height>350</height>
  </initialWindow>
</application>

Save the above code as ‘tree-app.xml’ to your test application folder (c:\flex\myapps\tutorial_1\tree-app.xml) for example.

Part 2 – Creating the XML data file

We are going to load in the tree nodes from data stores as XML. Below is the example xml file we will be using.
myTree.xml

<?xml version="1.0" encoding="utf-8"?>
<myTree>
<node label="Root">
 <node label="Folder a">
  <node label="item 1 a"/>
 </node>
 <node label="Folder b">
  <node label="item 1 b"/>
  <node label="item 2 b"/>
 </node>
<node label="Folder c">
  <node label="item 1 c"/>
  <node label="item 2 c"/>
 </node>
 <node label="Folder d">
  <node label="item 1 d"/>
  <node label="item 2 d"/>
 </node>
</node>
</myTree>

Save the above code as ‘myTree.xml’ to your test application folder (c:\flex\myapps\tutorial_1\myTree.xml) for example.

Part 3 – AIR Flex MXML file.

This file contains both the Adobe Flex layout code and the ActionScript code (GUI and Logic).
When you have more experience using Flex, you may decide to split your layout code from your scripting code.
However, as this tutorial is for beginners, we are keeping things really simple. Below is the remaining code needed to build the test application.
tree-app.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication
 xmlns:mx="http://www.adobe.com/2006/mxml"
 xmlns:firstFlex="*"
 showFlexChrome="true"
 title="Load XML to Tree Component"
 layout="absolute"
 initialize="init();">

<mx:Script>
<![CDATA[
 // call this when the application initializes
 private function init():void {
  // send the http request
  httpTree.send();
 }

 // call this once the xml data has loaded
 private function treeLoaded():void {
  // assign the http result data as xml to tree element
  xmlTree = XML(httpTree.lastResult.node);
  treeTree.dataProvider = xmlTree;
 }
]]>
</mx:Script>

<mx:XML id="xmlTree"/>

<mx:HTTPService id="httpTree" url="myTree.xml"
  resultFormat="e4x" result="treeLoaded()"/>

<mx:Panel id="treePanel" title="My Tree"
  height="100%" width="100%">

<mx:Tree id="treeTree" dataProvider="{httpTree}"
  width="100%" height="100%" showRoot="false" labelField="@label"/>

</mx:Panel>

</mx:WindowedApplication>

Part 4 – Compile Flex MXML to SWF File

Before we test this as an AIR application we must first convert the MXML Flex file into a SWF file. To do this, following these instructions:

1. Open up a command shell (Select RUN from the Windows Start Menu, then type in cmd and press enter).
2. Change to the directory where you saved the above files (for example, you could type: cd c:\flex\myapps\tutorial_1).
3. Compile tree.mxml to tree.swf. Type: c:\flex\bin\amxmlc tree.mxml
4. Type: exit and press enter to close the command prompt.

Compile Flex MXML File to SWF

Part 5 – Run as AIR Application

Now we are going to run this application as an Adobe AIR application. Just do the following:

1. Open up a command shell (Select RUN from the Windows Start Menu, then type in cmd and press enter).
2. Change to the directory where you saved the above files (for example, you could type: cd c:\flex\myapps\tutorial_1).
3. Use ADL to run the application in development mode. Type: c:\flex\bin\adl tree-app.xml
4. You should now see your Flex / AIR application running (if not, please read over the make sure you never missed out any steps).
   
5. Type: exit and press enter to close the command prompt.

Run Flex AIR application using ADL

Tags: adl, amxmlc, Flex, mxml, tutorial, xml