Simple HTML Based Apollo Example

Most of the docs and examples for the Apollo alpha are Flex / ActionScript focused (next beta will be more focused on HTML / JavaScript). However, you can build Apollo applications using just HTML and JavaScript.

Here is a simple example that shows how to build an HTML / JavaScript Apollo application, and how to access Apollo APIs from JavaScript. The application shows how to launch a file browser from the application, and access information about the selected file (you could then easily read in the contents of the file).


Note, that we are working on making it a little easier to access the Apollo apis from JavaScript.application.xml[code]HTMLFileExampleMike Chambersfileexample.html[/code]fileexample.html[code]
[/code]fileexample.js[code]var apollo = window.runtime;//called when page has loadedfunction onLoad(){//set initial size of app windowwindow.resizeTo(400,300);}//called when button is pressed to select a filefunction onFileClick(){//this will trace out the string to the command lineapollo.trace(“hello”);//get a reference to the desktopvar f = apollo.flash.filesystem.File.desktopDirectory;//listen for the select eventf.addEventListener(apollo.flash.events.Event.SELECT, onFileSelect);//open the browse dialogf.browse();}//called when user selects a filefunction onFileSelect(e){//print the path of the selected fileoutput.value = e.target.url;}[/code]You can test this by using ADL (included in the Apollo SDK) from the command line like so:[code]adl application.xml[/code]You can download the code from here.Post any questions in the comments.

16 Responses to Simple HTML Based Apollo Example

  1. Kevin Hoyt says:

    Hey Mike,I’ve been showing a similar example and find it particularly useful for HTML/JS/CSS developers in understanding Apollo. Nice to see it posted!Just a note that where you use “apollo” as the root package, in the Labs alpha release it’s actually still “runtime”. So:var f = runtime.flash.filesystem.File.desktopDirectory;Regards,KevinPS – If you’re at E-Tech, stop by and I’ll show you an HTML-based Apollo application I’m working on for managing HTML Apollo projects (smile).

  2. Mike Henke says:

    Could you please do a System Notification Based Apollo Example? Thanks

  3. Jay says:

    I have a Flex app the fires off html requests and I want to display the results in a tab or in a viewstack of some kind. Any examples of this technique would be great.

  4. mike chambers says:

    Kevin,I created a variable that points to window.runtime:var apollo = window.runtime;just to save some typing.mike chambersmesh@adobe.com

  5. Charlie says:

    Hi Mike,Neat example, it is nice to see the native dialog box being used.I was wondering if it would be possible to make a “save as” button that used a native file browser to select a file. When using the File.browse function I am not able to select a file that does not exist, like you would need for a save as button. Are there other variations of the browse method?Other than the FileReference.browse api docs I have not been able to find reference to how browse files.Thanks for the help,Charlie

  6. Charlie says:

    I think I answered my own questions, or rather this person did.http://www.danieldura.com/archive/apollo-native-file-dialogsCharlie

  7. evden eve nakliyat says:

    veryverynicethankss…

  8. JD says:

    Hello Mike,As I look at other offline app. solutions like “Dojo offline toolkit”, I am wondering where does the browser cache from the htmlControl get cached? I have examined some of the Apollo examples and can’t figure it out. Also I noticed that Apollo is said to be able to communicate with other applications. Is there an example of it communicating with a web browser such as IE, or Firefox?I am very excited about Apollo. 8)Thanks.-JD

  9. JD says:

    Hello again Mike,Something of interest would be if Apollo had it’s own protocol for websites to call and access similar to “javascript:alert(‘hello there’);”, maybe “apollo:someApolloMethod();”.-JD

  10. Paul Hart says:

    Hi Mike,I dont know where to post this but if you could shed any light on it this it would help.I regularly use the mxna aggregator but recently it’s been very unreliable have you any idea what’s going on?http://weblogs.macromedia.com/mxna/thankspaul

  11. sam says:

    hello MikeSome error will always occur when I make AIR file using this sample code ,”File I/O error” or “js error” ,can you tell me how to make the AIR file of this sample ?btw : the commands i made Air file…[b]alt -package fileexample.air application.xml [ fileexample.html | fileexample.js ] [/b]does it right ?Sam

  12. Yasu says:

    I tried your code and the app worked correctly on Windows, but the adl says ‘Bus error’ and crashes on Mac …

  13. Yasu says:

    I found that calling f.browse() results in bus error on Mac. I commented it out and the app didn’t crash. What’s bus error ?

  14. Ian Stokes says:

    Hi,Could you please show an example of an existing Flex as3.0 project adapted to an Apollo project ?cheersIan Stokes

  15. mike chambers says:

    >Could you please show an example of an existing Flex as3.0 project adapted to an Apollo project ?Here you go:http://video.onflex.org/2007/04/03/video-flex-app-to-apollo-app-in-under-5-minutes/mike chambersmesh@adobe.com

  16. de CHAVIGNY Herve says:

    I want use apollo with a hidden HTMLControl with this :function callNotePad() {var WshShell = new ActiveXObject(“WScript.Shell”);WshShell.Run(“C:\\WINDOWS\\notepad.exe”);}//——————————————–But I have a error !I want use apollo to do application that use microsoft wmi instructions.Please help me!