Using TextMate for building Apollo applications: Setting up

Posted on March 31, 2007

In my previous entry I described "5 reasons for building Apollo applications as a Flash Developer". Today I'll give you an introduction for building an Apollo application without Flex Builder 2 using Apollo SDK (Alpha) and TextMate.

Instruction

  • Download Flex 2.0.1 SDK and the Apollo SDK.
  • Open Terminal and create a new folder typing mkdir /Applications/flex_sdk2.
  • Unzip both downloaded files. Type in your opened Terminal window unzip /{downloadFolder}/flex_sdk_2.zip -d /Applications/flex_sdk2 and unzip /{downloadFolder}/apollo_sdk_alpha1_031907.zip -d /Applications/flex_sdk2. Accept the replacing of "Version.as" and "mxmlc.jar" twice. Note: Don't unzip the files using Stuffit Expander.
  • For installing the Apollo runtime open the /Applications/flex_sdk2/runtime in Finder and double-click the Adobe Apollo.dmg file. Drag the Adobe Apollo.frameworkfolder contained in the *.dmg file to the /Applications/flex_sdk2/runtime directory.
  • Configure the environment variable $PATH in your .bash_profile with pico. Type in Terminal pico .profile and add the following line export PATH=$PATH:/Applications/flex_sdk2/bin/. Save and close pico. Refresh .bash_profile typing (Note the double points with space) . .bash_profile and check it with echo $PATH.
  • Open TextMate and create a new project named textMateMeetsApollo.tmproj.
  • Place a root content for Apollo creating a new file HelloWorld.mxml including following code:
<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml"
  layout="absolute"
  title="TextMate meets Apollo"
  backgroundColor="0x000000">
  <mx:Label htmlText="TextMate meets Apollo"
    fontSize="28"
    color="0xFFFFFF"
    horizontalCenter="0"
    verticalCenter="0"/>
</mx:ApolloApplication>

In this case it's a simple Flex file including a Label component.

  • Then add a XML file called HelloWorldApp.xml which defines the properties for your Apollo application:
<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/apollo/application/1.0.M3"
    version="1.0"
    appId="HelloWorld">
    <properties>
        <name>Example for building an Apollo Application with TextMate</name>
        <publisher>sectore [www.websector.de]</publisher>
        <description>A sample Apollo application</description>
    </properties>
    <rootContent systemChrome="standard" transparent="false">HelloWorld.swf</rootContent>
</application>
  • For easier handling define a TextMate command to compile your Apollo application. Open the project information panel and add two shell variables named APOLLO_APP and `APOLLO_DESCRIPTOR.
  • Finally create a command opening the command panel. Add a new bundle named Apollo and a new command called "build" as well. For running the compiler I've chosen STRG+ENTER.

Source of TextMates build command:

# Source some support functions we need.
. "${TM_SUPPORT_PATH}/lib/html.sh"
. "${TM_SUPPORT_PATH}/lib/webpreview.sh"

html_header "TextMate meets Apollo"

echo '<h2>Building Apollo App"'
echo $APOLLO_APP
echo '"</h2>'
echo '<p>'
amxmlc $TM_PROJECT_DIRECTORY/$APOLLO_APP
echo '</p>'

echo '<h2>Test Apollo App "'
echo $APOLLO_DESCRIPTOR
echo '"</h2>'
echo '<p>'
adl $TM_PROJECT_DIRECTORY/$APOLLO_DESCRIPTOR
echo '</p>'

html_footer

Screen shots

TextMates output window

Apollo window

Download

Source: textMateApolloExample.zip

Links

Feedback and suggestions

Feedback and suggestions for improvement are welcome, especially smarter commands for TextMate ;-) .

And is there anyone out there to create an Apollo bundle script for TextMate feel free to drop a comment, too.

Update (04/04/07)

I've just found that Tyler Hall has already build an Apollo bundle for TextMate. Check it out!

Any feedback?

comments powered by Disqus