Create your first Flex-based Apollo application using the Apollo SDK

Back to: Apollo Documentation home page

For a quick, hands-on illustration of how Apollo works, use these instructions to create and package a simple SWF-based Apollo "Hello World" application using the Flex and Apollo SDKs.

To begin, you must have installed the Apollo runtime and set up your development environment. See the following sections:

Contents
Create the application XML file Write the application MXML code Compile the application Test the application Package and run the application

Create the application XML file

Each Apollo application requires an application descriptor file. This XML file serves as a manifest, defines various properties of the application, and is embedded in the application AIR when it is packaged for distribution.

To create the application descriptor file, use your favorite text editor to create an XML file named ApolloHelloWorld-app.xml and then add the following text:

<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/apollo/application/1.0.M3" 
    appId="ApolloHelloWorld" version="1.0">

	<properties>
		<name>Hello World</name>
		<description>A test Apollo application.</description>
		<publisher>Apollo Test</publisher>
		<copyright>2007</copyright>
	</properties>

       <rootContent systemChrome="none" transparent="true"
                    visible="false">ApolloHelloWorld.swf</rootContent>
 
      <icon>
          <image16x16>icons/SampleIcon16.png</image16x16>
          <image32x32>icons/SampleIcon32.png</image32x32>
          <image48x48>icons/SampleIcon48.png</image48x48>
          <image128x128>icons/SampleIcon128.png</image128x128> 
      </icon>
</application>

Write the application MXML code

Like all Flex applications, Flex-based Apollo applications contain a main MXML file. Apollo applications, however, are contained within the ApolloApplication component instead of the Application component. ApolloApplication component provides the window and basic window control chrome needed to run your application on the desktop.

To create the Hello World application:

Using your favorite text editor, create a file named ApolloHelloWorld.mxml and add the following MXML code:

<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute" title="Hello World">
</mx:ApolloApplication>

Next, add a Label component to the application (place it inside of the ApolloApplication tag) and set the text property of the Label component to "Hello Apollo" and set the layout constraints to always keep it centered, as shown here:

<?xml version="1.0" encoding="utf-8"?><?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" title="Hello World">
    <mx:Label text="Hello Apollo" horizontalCenter="0" verticalCenter="0"/>
</mx:ApolloApplication>

Add the following style block:

<mx:Style>
    Application
    {
        background-image:"";
        background-color:"";
        background-alpha:"0.5";
    }
</mx:Style>

These style settings apply to the entire application and render the window background a slightly transparent gray. The entire application code should now look like this:

<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" title="Hello World">
    <mx:Style>
        Application
        {
            background-image:"";
            background-color:"";
            background-alpha:"0.5";
        }
    </mx:Style>
    <mx:Label text="Hello Apollo" horizontalCenter="0" verticalCenter="0"/>
</mx:ApolloApplication>

Compile the application

If you already use the Flex SDK for developing Flex applications, you should be familiar with this step. You need to the compile the MXML into a SWF file so that you can run and debug the application.

To compile the application:

Open a command prompt in Windows or a terminal on the Mac and navigate to the source location of your Apollo application.
Enter the following command: amxmlc ApolloHelloWorld.mxml

(This is assuming that you have added the Apollo command-line tools to your class path. See Adding the Apollo tools to your class path.)

Your application is compiled into a SWF file.

Note: If the application does not compile, make sure that you fix any syntax or spelling errors that you may have inadvertently entered into the code. Errors and warnings are displayed in the console window used to run the amxmlc compiler.

For more information about using the compiler, see Compiling an Apollo application with the amxmlc compiler.

Test the application

To run and test the application from the command line, you use the Apollo Debug Launcher (ADL) to launch the application using its application descriptor file.

From the command prompt, enter the following command: adl ApolloHelloWorld-app.xml

The resulting Apollo application should look something like this (the green background is the user's desktop):

Using the horizontalCenter and verrticalCenter properties of the Label control, the text is placed in the center of the window. Move or resize the window as you would any other desktop application.

For information about debugging with ADL, see Debugging an Apollo application using the Apollo Debug Launcher (ADL).

Package and run the application

You are now ready to package the "Hello World" application into an AIR file for distribution or testing from the desktop. An AIR file is an archive file that contains the application files. You distribute the AIR to users who then use it to install the application.

To create an AIR file:

Ensure that your application has no compile errors and runs as expected.
From the command prompt, enter the following command:
adt –package ApolloHelloWorld.air ApolloHelloWorld-app.xml ApolloHelloWorld.swf

You can now run the application from the desktop as your users would by double-clicking the AIR file.

For more information about using ADT, see Packaging an Apollo application using the Apollo Developer Tool (ADT).

Back to: Apollo Documentation home page