AIR Tutorials and News

With any fashionable programming technology, you’ll find many lists of what people consider the Best. Here we are listing some of those lists. Yes, Best Lists of Lists on Adobe AIR Applications.

First we will start with the latest Top 10 AIR application list published by Sean P Aune over at Mashable.

1. DeskTube
“DeskTube lets you get complete control over YouTube on your desktop. Search, watch, comment, get embed codes, upload your own videos and even download the…”

2. Dorame
“Dorame doesn’t add much to the Pandora listening experience, but it does give you the freedom of being outside of your browser…”

3. EarthBrowser
“EarthBrowser gives you live updates of clouds, earthquakes, the weather, satellite overlays, volcanoes, fires and a whole lot more.”

4. Feedalizr
“Many people have downloaded service specific apps like TweetDeck, Twhirl and so on, but Feedalizr rolls several social tools into one app…”

5. Google Analytics
“While most people love looking at statistics about their websites, Google Analytics can be a bit slow at times for those webmasters that use their tools…”

6. MiniTask
“A desktop tool for creating detailed to-do lists that you can separate out by categories, copy the items out to other programs…”

7. Posty
“Get all of your FriendFeed. Identi.ca, Jaiku, Pownce, Tumblr and Twitter updates in one handy application with built-in URL shortening, spell checking…”

8. TweetDeck
“While it seems that apps that only work with one social site are becoming passe, TweetDeck gives you so much control over how you see your Tweets, it is well worth it.  Your incoming messages are already split into columns for timeline, replies and direct messages…”

9. Twhirl
“The odds are fairly high that this is the application you installed Adobe Air for in the first place, but that doesn’t exclude it from the list in case it wasn’t.  Probably the most popular of the Twitter clients…”

10. Yammer
“Yammer, the private corporate microblogging service, gets a desktop client that runs on the Adobe AIR platform, allowing you to use all the features…”

Next up we have the ‘6 Adobe AIR Apps to check out‘ posted by Sarah Perez over on ReadWriteWeb

1. Twhirl
“It goes without saying that one of the most popular AIR applications is the Twitter client….”

2. Google Analytics
“For web site owners, measuring traffic and visitor stats are crucial tasks to managing the site and improving performance…”

3. RichFLV
“RichFLVis an AIR app that lets you edit Flash Video (FLV) files…”

4. AgileAgenda
“AgileAgenda is a project scheduling utility which lets project managers enter data about tasks…”

5. AOL Top 100 Videos
“This desktop widget lets you view the latest music videos, related artist videos, and special features provided by AOL…”

6. Xdrive Lite
“Xdrive Lite is a new AIR app that was just launched today, but it certainly has potential to be one of the better apps…”

There are many other top Air application lists including..

Top 10 Adobe AIR must see applications from webresourcesdepot - perhaps a little dated by todays standards, but still some nice ones in there!

Great Adobe AIR Applications to Check Out from Simon Whatley - written up a while back.

To complete this list of lists, here are some nice AIR Application resources:

RefreshingApps - Lists and reviews of Adobe AIR applications

Adobe AIR application showcase - Lists of applications used by big companys.

Adobe AIR Marketplace - resources and AIR applications by Adobe.

Enjoy these lists…

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

Today Ext LLC, the authors of the popular ExtJS JavaScript Library, released an updated version of Ext.AIR. The update includes many enhancements to sound support, windowing and database. They also include some new features for Ext AIR dealing with notifications, clipboard usage and the file system interactions. Here is a brief introduction to some of the notible features.

Ext.air.MusicPlayer

…supports all of the basic operations, stop, pause, play and skipTo along with supporting events. The MusicPlayer enables the developer to add music and podcasts to their AIR-enabled Ext application very quickly.

Ext.air.Notify

…allows you to notify users that something important has occurred even when your application may not be visible. By displaying these notifications at the operating system level it is sure to get the users attention without being lost within a browser tab.

Window and App API’s

Ext.air.NativeWindow now exposes methods to re-order windows, set a window as always on top, and enable full-screen mode. A new singleton, Ext.air.App will allow you to set your application to start on login and get the currently active window.

Ext.air.Clipboard

…allows you to interact with the system’s clipboard. Developers can determine if a particular format has data, set the data and get the data.

Ext.air.VideoPanel

…enables you to embed flash based video while maintaining the same functionality as an Ext.Panel…You can even watch the video fullscreen in high definition.

It’s still early days for Ext and AIR, but this is a great step to enabling developers to see the full potential of Adobe AIR and JavaScript.

With the above release, ExtJS have bundled in a sample application which uses the new Sound features (mainly). They are calling it ExtPlayer. It runs surprisingly well for a first example, however I could not get the timeline drag to move without the whole player moving too… but it is a great concept player.

ExtPlayer in action.

You can find out more about Ext.Air here

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

Snippet Manager is a desktop application built using Flex (MXML and ActionScript) for Adobe AIR.

Snippet Manager will allow you to create an unlimited number of code snippets and assign them to a category (which are also unlimited).
Version 1.0 supports the creation of Categories and Snippets, the Edit of Snippets and Categories, and the Deletion of Snippets and Categories.
Snippets are stored in the users directory (in plain text flat files), each computer user can maintain their own snippets library.

Below are the installation files. This will allow you to install the code snippet manager application on your operating system.