Building an HTML based Apollo Application

So after seeing just how darn good an HTML based Apollo application could be done, I wanted to see how I could build one as well.

Now I may be dumb - but I was surprised to find I couldn't use Flex Builder (by itself) to build an HTML based Apollo application. Flex Builder will only let you work with a Flex based Apollo application. You can't point the project to an HTML file.

On reflection I figure that is pretty obvious. I mean, it is Flex Builder, not HTML Builder, but I was still a bit surprised.

Luckily it isn't too hard. I had help from the Apollo Coders list. I don't know the guys name, but brodnack was his ID and I thank him for the help.

Let me be clear - I could be doing this completely wrong. But it worked for me.

So first off I created a super simple HTML file:

Hi, this is Raymond's first HTML apollo app.

And saved this to index.html in a new folder. Next I needed the XML file that Apollo uses to help define the application. I followed the format FlexBuilder used and named my index-app.xml. I got the XML from another FlexBuilder project. (I will probably make a simple snippet out of this for CFEclipse.) I edited a few of the entries in the XML:

appID - I set this to ApolloHTML
name - Ditto
description and publisher - I just typed something relevant for both

Lastly, I changed

<rootContent systemChrome="standard" transparent="false" visible="true">[SWF reference is generated]</rootContent>

to

<rootContent systemChrome="standard" transparent="false" visible="true">index.html</rootContent>

As you can see, I changed the value to point to my main application file.

So far so good. Now it's time for the command line tools. The first one I used was adl. This function lets you run your code as an Apollo app. All you have to do is point it at your XML file:

adl index-app.xml

So that was easy enough. I can now develop and just quickly run this command then to view the results. (And if I remember right, I can do this directly in Eclipse.)

Next - how do you build the AIR file so you can package your application up? One more command like - adt:

adt -package index.air index-app.xml index.html

The last argument can be a directory instead, which would have made sense if I had more files. This generated an AIR file I was then able to test with. I included the AIR on this post, but it's incredibly boring so don't bother downloading.

Comments

What? No screenshots? =)
# Posted By Tom Ortega | 3/29/07 3:28 PM
Hi Ray,
Check out the Apollo HTML dev docs, they have some great info on how it all fits together.
http://labs.adobe.com/wiki/index.php/Apollo:Docume...
# Posted By BJW | 3/29/07 5:25 PM
Wow, now that is a nice document. Much better than my blog entry. Thanks. :)
# Posted By Raymond Camden | 3/29/07 8:05 PM
This is great, but I am very very very new to Apollo, this is all good for static content, but what about server side code? is there anything out there for making an Coldfusion application into an HTML Apollo project?
# Posted By Raul | 3/29/07 8:16 PM
Raul, you are not going to be able to just package up a CF application. But you can use CF to act as a remote server for your Apollo apps. So for example, imagine you are building an Apollo app to manage inventory. The Apollo app could communicate with a remote CF server to get data updates. It could even work offline, syncing up with CF later.
# Posted By Raymond Camden | 3/29/07 8:24 PM
Great! thanks... I was wondering about the offline solution, I thought that was only for Flash based apps and Apollo, great... I will have to look more into Apollo, can you guys point me into the right direction? (books, getting started manuals, etc)
# Posted By Raul | 3/29/07 8:28 PM
I'd definitely start at labs.adobe.com.
# Posted By Raymond Camden | 3/29/07 8:31 PM
somewhat ot but in relation to "I will probably make a simple snippet out of this for CFEclipse." if you are on OS X check out TextExpander, I like this because it works in most applications and has some nice power moves.

http://www.smileonmymac.com/textexpander/
http://www.twit.tv/mb63
# Posted By Michael | 3/30/07 8:53 AM
Can the HTML component for Apollo render Flash that resides on a web page? I am playing around with this and the HTML pages render nicely but Flash content is not shown.

Thanks -
# Posted By Chris | 4/10/07 8:39 AM
I don't think that is supported. Did you try the Apollo Faq?
# Posted By Raymond Camden | 4/10/07 10:40 AM
Hi all,
Am new to Apollo.. I have been searching for desktop widgets, which runs without any engine. Finally i got this one. Can anyone tell me that can we build desktop widgets using HTML based Apollo.. R is it necessary to use FLEX Builder.
Thanks in advance
# Posted By shruthi | 4/23/07 5:56 AM
Well all Apollo apps needs the Apollo runtime, so I'm not sure if that classifies as something running without an engine. You do not need Flex Builder to create Apollo apps. Nor do you even need it to build Flex apps.
# Posted By Raymond Camden | 4/23/07 6:23 AM
Anyone solve this yet?

"Can the HTML component for Apollo render Flash that resides on a web page? I am playing around with this and the HTML pages render nicely but Flash content is not shown."

If you look <a href="http://aralbalkan.com/729" target="blank">here</a> at http://aralbalkan.com/729 you can see a nice little chart called Application Stack. Shows planned support for HTML / FLASH applications. Saw this same chart at MAX, but seems like they're only gunning for Flex/Flash and HTML/AJAX apps with the current AIR release.
# Posted By J Marziani | 6/14/07 4:29 PM