Create your first Flex-based Apollo application in Flex Builder

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 Flex Builder and the Apollo Extensions for Flex Builder.

Contents
Create an Apollo project Write the application code Test the application Package and run your application

---

Create an Apollo project

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

• Installing the Apollo runtime and sample applications
• Set up instructions for Flex Builder users

To create the project in Flex Builder, follow these steps:

1. Open Flex Builder 2.0.1.
2. Select File | New | Apollo Project (if you are using the Eclipse plug-in configuration, select File | New | Other, expand the Flex node, and select Apollo Project).
   The New Apollo Project dialog box is displayed.
3. Leave the Basic option selected, and then click the Next button.
4. In the next page of the dialog box, type ApolloHelloWorld as the Project Name, and leave the Use Default Location option selected. Then click the Next button.
5. In the next page of the dialog box (for setting build paths), make no changes, and click the Next button.
   The Application XML Properties panel is displayed.
6. Specify the following settings for the Apollo application, and then click the Finish button:

   ID	ApolloHelloWorld
   Name	Hello World
   Publisher	Apollo Test
   Description	A test Apollo application.
   Copyright	Copyright © 2007

The Description and Copyright fields are optional for this Hello World example. However, set the other fields with the values shown.

Next, set the application's window transparency:

1. Open the HelloWorld-app.xml file from the Project Navigator. The file is opened in the Flex Builder text editor.
2. In the rootContent node of the application, set the systemChrome and transparent attributes to the following:
   systemChrome="standard" transparent="false"
3. Save your changes and then close the HelloWorld-app.xml file.

Write the application code

To write the "Hello World" Apollo application's code, you edit the application's MXML file (ApolloHelloWorld.mxml), which should be open in the editor. If it isn't, use the Project Navigator to open the file.

All Apollo applications are contained within the MXML ApolloApplication tag, which creates a simple window that includes basic window controls such as a title bar and close button.

Add the code as specified in the following steps:

1. Add a title attribute to ApolloApplication component, and assign it the value "Hello World":

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

2. 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"?>  
   <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>

3. 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>

   Test the application

   The Apollo Extensions for Flex Builder include the Apollo runtime so you that can test the application layout and sizing directly from Flex Builder:

   1. Click the Debug button in the main Flex Builder toolbar.
      This is the Debug button:
      You can also select the Run | Debug | ApolloHelloWorld command.
      
      The resulting Apollo application should look something like this (the green background is the user's desktop):
      
      
      
      
   2. 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.

   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 Problems view in Flex Builder.

   Package and run your application

   You are now ready to package the "Hello World" application into an AIR file for distribution. An AIR file is an archive file that contains the application files (all of the files contained in the project's bin folder). You distribute the AIR to users who then use it to install the application.

   To create an AIR file using Flex Builder:

   1. Ensure that your application has no compile errors and runs as expected.
   2. Select File | Export.
   3. Select the Deployable AIR File option from the Apollo folder and then click the Next button.
   4. Specify the export destination. By default, the name and location of the AIR file is based on the name of your project and is located in project's folder in your Flex Builder workspace. You may change this if you wish. Click the Finish button to create the AIR file.

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

   
   

   ---

   Back to: Apollo Documentation home page