AIR Tutorials and News

Back in November we mentioned that Adobe had agreed to work with ARM Holding to push Flash and AIR into ARM chips for TV and Mobile Phones.  Now Adobe have got it on with Intel to get Adobe Flash light built-into the Intel CE3100 chip (which will appear in TV’s, set-top boxes, blu-ray players and other AV devices).

Quoted from the Intel press release:

“Optimizing Adobe Flash Technology on Intel® Media Processor CE 3100 Will Enable Rich and Seamless Web Content on TV…

The high-definition capabilities of the Adobe Flash Platform, together with the Intel® Media Processor CE 3100, the first in a new family of purpose-built Intel System on Chips (SoCs) for CE devices, creates a powerful entertainment hub capable of delivering rich Web content and Adobe Flash based applications to an array of Internet-connected CE devices. Intel and Adobe are working together to optimize both the Adobe Flash Player and Adobe Flash Lite™ for the CE3100. Intel plans to ship the first CE3100 with support for an optimized implementation of Adobe Flash Lite before mid-2009...”

Lets hope that the new Flash chips are Flashable

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.

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

I recently released an AIR application called ‘Snippet Manager‘ which was build using Flex (in a basic text editor, not Flex Builder). Today I decided to see if it would work on Linux. I’m happy to report snippet manager works just as well as it does in Windows.

Here are the steps I used to install Adobe AIR on Linux (Ubuntu).

Note: On my system, I used VM Player (the Free Virtual Machine Player) inside Windows XP. I then downloaded a Linux Ubuntu 8.10 image (I got mine from vmplanet.net).

Step 1
Download the latest Adobe AIR Installer for Linux. At the time of writing, the Adobe AIR for Linux is in Beta.

Download Adobe AIR Linux Installer

Download the Linux install file from: http://labs.adobe.com/downloads/air_linux.html

If your browser is set to download files to your desktop (FireFox default on Ubuntu), you should see something like this:

Air Installer file on Linux Desktop

Step 2
The next thing to do is find out your installer files location path. You can do this by right clicking on the file and selecting ‘Properties’. You should see something like this:

AIR Installation File Location

On my system, the file location is /home/vmplanet/Desktop/adobeair_linux_b1_091508.bin - the chances are the ‘vmplanet’ part of the path will be your own username.

Step 3 and 4
Now we need to change the file permissions (this could probably be done in the properties window, but we will do it in a terminal just to be sure!)

Open a terminal window (select terminal from the applications list). Type in the following command to change to the same directory as the installation file:

cd /home/vmplanet/Desktop

(you will probably need to change the path a little to match your own)

Now to change the file permissions, type:

chmod 777 adobeair_linux_b1_091508.bin

The final step will execute the installer file (installs Adovbe AIR). In your terminal window, type:

./adobeair_linux_b1_091508.bin

then press enter. The . (dot) at the front of your path is required!

Installing AIR on Linux Command Window

You should now have Adobe AIR installed and ready on your Linux box.

To test it out, try installing our Snippet Manager application

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

Sitepen, the authors of the popular open source javascript library Dojo, have released a new set of extentions specifically designed for Adobe AIR.

Dojo Extensions for Adobe AIR is available right now.

Sample Application:

“Created by SitePen and co-sponsored by Adobe®, the Dojo Toolbox was developed using the Dojo Toolkit and Adobe® AIR™. The Dojo Toolbox offers a great user experience and simplifies your creation of amazing web applications.”

They have created the entire API using the namepace of ‘dair’ (I image that is: Dojo Adobe Integrated Runtime, but don’t quote me on that!), you can use:
dair.AIR, dair.Console, dair.Window, dair.Application, dair.fx, dair.Sound, dair.Video, dair.Icon and dair.File. They will be releasing dair.Chrome pretty soon too.

Dojo is release under the Open Source BSD-license…. Nice!

It has been announced that ARM Holdings, one of the largest chip designers, will work with Adobe to bring AIR and Flash 10 to various devices. These include mobile phones, set-top boxes, mobile Internet devices, televisions, automotive platforms and personal media players.

The driving force of this partnership stems from an initiative to address the challenges of Web browsing on a broad range of screens, and remove the barriers to publish content and applications seamlessly across screens. Read more about this at: www.openscreenproject.org

The new chip will hopefully be available sometime in late 2009, so there is still plenty of time to learn all you can about AIR

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

Earlier this week, Adobe announced the release of AIR 1.5. There are 3 highlighted features in this update along with some bug fixes.

Encrypted local database
“While encrypting data in AIR has been possible since AIR 1.0, using the Encrypted Local Store (ELS)—the new encryption support—offers better support for encrypted larger data files and is generally more convenient since many developers prefer to persist using the local database.”

Flash Player 10 capabilities
“We’ve updated the version of Flash Player included with AIR to version 10.”

WebKit update - Squirrelfish
“Our internal tests show that HTML-based AIR applications run as much as 35% faster for many types of operations.”

Major Adobe Authoring software also have available updates to support AIR 1.5, these include Adobe Flash CS4 Professional, Flex Builder 3 and Dreamweaver CS4. There is also an update for Aptana.

Read some more details over at Adobe Dev Center

Just noticed there have been over 25 Million AIR application installations in just 9 months, that is impressive even for Adobe!