AIR Tutorials and News

On Monday, Huw from SapphireSteel Software, announced the forthcoming release of ‘Amethyst’ - an IDE for Adobe Flex and AIR.

Amethyst will come as a free Personal addition or a commercial version (released later).

UPDATE: The Beta version is now available for download.

Free Personal Edition:

“Amethyst Personal is a free Flex/AIR IDE which will provide a project management, editing, building and launching environment for Flex/AIR/ActionScript. This will be completely free and may optionally be installed into the free Visual Studio ‘shell’ edition.”

Professional Edition:

“Amethyst Professional will provide a drag+drop visual design environment for Flex and AIR. The visual designer will integrate with Visual Studio’s Toolbox, Property panels and code editor to provide a seamless design-and-code experience which will be familiar to C# and VB developers…..”

They expect to release the Personal Edition next week, and the Professional edition should be available in a few months.

Could this really be an alternative to the Adobe Flex Builder? only time will tell.

Whilst working on an update to snippet manager, I was looking for the easiest way to introduce syntax highlighting and came up with one solution. I did not want to write syntax colouring procedures entirely in ActionScript, this seems like a bad idea to me as there are existing highlighting libraries available in JavaScript. So, I decided to try to encorporate an existing JavaScript library into a Flex application for AIR.

In this tutorial, I will show you a basic example of how to use the SHJS (Syntax Highlighting in JavaScript) library inside a Flex/AIR application.

For simplicity, In this example will use only the PHP Syntax Highlighting filter, but SHJS supports many more (Bison, C/C++, C#, ChangeLog, CSS, Diff, Flex, HTML, Java, JavaScript, LaTeX, Log files, M4, Makefile, Oracle SQL, Pascal, Perl, PHP, Prolog, Python, Ruby, Shell, SQL, Tcl, XML)

In order to run this example, there are some files from the SHJS library required, these are:

• sh_style.min.css
• sh_main.min.js
• sh_php.min.js

(You can grab these files from the SHJS sourceforge website - or download them in the example zip file below)

1. Create the AIR application file. highlight-app.xml

<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/1.0">
<id>highlight.syntax</id>
<version>1.0</version>
<filename>highlight</filename>
<initialWindow>
<content>highlight.swf</content>
<visible>true</visible>
<width>650</width>
<height>350</height>
</initialWindow>
</application>

2. Create the Flex application file. highlight.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:highlight="*"
showFlexChrome="true"
pageTitle="Syntax Highlight"
layout="absolute" title="Syntax Highlight"
initialize="init();">

<mx:Script>
<![CDATA[
private function init():void {
textZ.text = "<?php\n for($i=0;$i<100;$i++){\n  echo 'line '+$i+'<br />';\n }\n?>";
}
private function syntaxColoring():void {
htmlZ.htmlLoader.window.highlightString(textZ.text,'php');
htmlZ.htmlLoader.window.sh_highlightDocument();
}
]]>
</mx:Script>

<mx:Panel x="10" y="10" width="252" height="100%"
layout="absolute" title="Enter Code Below">
<mx:TextArea id="textZ" color="#000000"
fontSize="11" fontFamily="Courier New"
editable="true" wordWrap="true"
width="100%" height="100%"/>
</mx:Panel>
<mx:Panel x="375" y="10" width="252" height="100%"
layout="absolute" title="Highlighted Code">
<mx:HTML
id="htmlZ"
location="syntax.htm"
enabled="true"
paddingLeft="4"
paddingRight="4"
width="100%" height="100%"/>
</mx:Panel>
<mx:Button x="270" y="65" label="Highlight &gt;&gt;"
click="syntaxColoring()"/>

</mx:WindowedApplication>

3. Create the syntax highlighting html file. syntax.htm

<link rel="stylesheet" href="sh/sh_style.min.css">
<script src="sh/sh_main.min.js"></script>
<script src="sh/sh_php.min.js"></script>

<script>
function highlightString(st,lang) {
document.getElementById('sourcecode').className = 'sh_'+lang;
document.getElementById('sourcecode').innerText = st;
}
</script>
<pre id="sourcecode"></pre>

Syntax Highlighting Example Flex / AIR

Download all required files in this example: flex_syntax_highlight_example.zip

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