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:
 1 <?xml version="1.0" encoding="utf-8"?>
 2 <mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml"
 3   layout="absolute"
 4   title="TextMate meets Apollo"
 5   backgroundColor="0x000000">
 6   <mx:Label htmlText="TextMate meets Apollo"
 7     fontSize="28"
 8      color="0xFFFFFF"
 9     horizontalCenter="0"
10     verticalCenter="0"/>
11 </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:
 1 <?xml version="1.0" encoding="UTF-8"?>
 2 <application xmlns="http://ns.adobe.com/apollo/application/1.0.M3"
 3  version="1.0"
 4  appId="HelloWorld">
 5  <properties>
 6      <name>Example for building an Apollo Application with TextMate</name>
 7      <publisher>sectore [www.websector.de]</publisher>
 8      <description>A sample Apollo application</description>
 9  </properties>
10  <rootContent systemChrome="standard" transparent="false">HelloWorld.swf</rootContent>
11 </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:

 1 # Source some support functions we need.
 2 . "${TM_SUPPORT_PATH}/lib/html.sh"
 3 . "${TM_SUPPORT_PATH}/lib/webpreview.sh"
 4 
 5 html_header "TextMate meets Apollo"
 6 
 7 echo '<h2>Building Apollo App"'
 8 echo $APOLLO_APP
 9 echo '"</h2>'
10 echo '<p>'
11 amxmlc $TM_PROJECT_DIRECTORY/$APOLLO_APP
12 echo '</p>'
13 
14 echo '<h2>Test Apollo App "'
15 echo $APOLLO_DESCRIPTOR
16 echo '"</h2>'
17 echo '<p>'
18 adl $TM_PROJECT_DIRECTORY/$APOLLO_DESCRIPTOR
19 echo '</p>'
20 
21 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