This tutorial is the first part of a tutorial series on how to build a File Manager using Adobe Air's out of the box components. This file manager will have Drag & Drop capabilities, within the file manager itself, to copy or move files between directories. It will have native drag & drop capabilities to copy files from the desktop directly to the file manager. Or the other way around. Finally we will also add a navigational menu to the file manager to demonstrate some more useful out of the box Adobe Air components.
But before we go into all that let's create our first "Hello World" Adobe Air application.
Step 1
Create a new project in Flex Builder but this time select the radio button that says 'Desktop Application'
Depending on how you named your project you will see two files in your project. For example if you named it AirFileManager you will see an AirFileManager.mxml file and a AirFileManager-app.xml. The mxml file is the file where you will put the initial code.
Notice the WindowedApplication top level node that is created. This is the Adobe Air equivalent of the Application component in Flex. The main difference being that a WindowedApplication is not restricted to run in a browser, it runs on a desktop, and provides some extra features.
AirFileManager-app.xml file is an application descriptor file where you will configure certain parameters related to your Adobe Air Application. Parameters like transparency, system chrome, name, filename, copyright, window initial size and icon will be configured in this file.
Step 2
Add the following code:
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Button label="Click me" click="mx.controls.Alert.show('I have just created my first Adobe Air App!')"/>
</mx:WindowedApplication>
Step 3
Execute the Air app by clicking on the run method.
Congratulations! You have just created & executed your first Adobe Air app. But don't go out to celebrate yet... that was just to break the ice.
Let's make some modifications to the application descriptor.
Notice the systemChrome and transparency property. The systemChrome property tells Adobe Air whether to use the operating system native chrome or not. The transparency property is used to determine if the application window will be transparent or opaque. Note however that transparency is only supported if you set the systemChrome to none. If you set systemChrome to standard the operating system chrome is used and therefore Adobe Air can't support transparency as it is outside its control.
Note that the default value for the systemChrome is standard.
To test this feature add a backgroundAlpha of 0.5 to the WindowedApplication component.
And modify AirFileManager-app.xml to:
<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/1.5">
<!-- The application identifier string, unique to this application. Required. -->
<id>AirFileManager</id>
<!-- Used as the filename for the application. Required. -->
<filename>AirFileManager</filename>
<!-- The name that is displayed in the AIR application installer.
May have multiple values for each language. See samples or xsd schema file. Optional. -->
<name>AirFileManager</name>
<!-- An application version designator (such as "v1", "2.5", or "Alpha 1"). Required. -->
<version>v1</version>
<!-- Settings for the application's initial window. Required. -->
<initialWindow>
<content>[This value will be overwritten by Flex Builder in the output app.xml]</content>
<systemChrome>none</systemChrome>
<transparent>true</transparent>
</initialWindow>
</application>
Run the Adobe Air application and see the difference in the application window. It should look transparent now.
Deploying Adobe Air Applications
Now that you have created your first Adobe Air application, you should package it into an AIR file. If you are using Flex Builder:
- Right click your project folder and select Export
- In the next screen choose Release Build and click Next
- If you want to include the source code with your release click on Enable View Source and then click Next.
- In this screen you are asked for a digital certificate to include with your Adobe Air application. You can either specify a digital signature provided by a third party like Verisign or Thawte. If you don't have one then click Create to create your own self-signed digital certificate. Although you can can create your own digital certificate, it is not the best option as it doesn't provide assurance to the users that your application is safe or that it hasn't been tampered.
- Type your digital certificate password and click next
- Select the files you want to include in your package and then click finish.
- Your AIR installation package should have been created in the same directory as your project. Use this file to distribute your application.
That will be all for now. In the next part of this tutorial we will start adding the file manager components with which we will create a simple but yet powerful file manager in Adobe Air.
Click here to read the next part of this tutorial
