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
<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/apollo/application/1.0.M3"
appId="com.adobe.mesh.HTMLFileExample" version=".4">
<properties>
<name>HTMLFileExample</name>
<description></description>
<publisher>Mike Chambers</publisher>
<copyright></copyright>
</properties>
<rootContent systemChrome="standard" transparent="false" visible="true">
fileexample.html
</rootContent>
</application>
fileexample.html
<html>
<head>
<script type="text/javascript" src="fileexample.js"></script>
</head>
<body onload="onLoad()">
<input type="button" value="Select a File" onClick="onFileClick();"><br />
<textarea rows="10" cols="40" id="output"></textarea>
</body>
fileexample.js
var apollo = window.runtime;
//called when page has loaded
function onLoad()
{
//set initial size of app window
window.resizeTo(400,300);
}
//called when button is pressed to select a file
function onFileClick()
{
//this will trace out the string to the command line
apollo.trace("hello");
//get a reference to the desktop
var f = apollo.flash.filesystem.File.desktopDirectory;
//listen for the select event
f.addEventListener(apollo.flash.events.Event.SELECT, onFileSelect);
//open the browse dialog
f.browse();
}
//called when user selects a file
function onFileSelect(e)
{
//print the path of the selected file
output.value = e.target.url;
}
You can test this by using ADL (included in the Apollo SDK) from the command line like so:
adl application.xml
You can download the code from here.
Post any questions in the comments.
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,
Kevin
PS - 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).
Kevin Hoyt
28 Mar 07 at 12:46 pm
Could you please do a System Notification Based Apollo Example? Thanks
Mike Henke
28 Mar 07 at 1:49 pm
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.
Jay
28 Mar 07 at 2:06 pm
Kevin,
I created a variable that points to window.runtime:
var apollo = window.runtime;
just to save some typing.
mike chambers
mesh@adobe.com
mike chambers
28 Mar 07 at 10:21 pm
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
Charlie
29 Mar 07 at 12:17 am
I think I answered my own questions, or rather this person did.
http://www.danieldura.com/archive/apollo-native-file-dialogs
Charlie
Charlie
29 Mar 07 at 7:56 pm
very
very
nice
thankss…
evden eve nakliyat
30 Mar 07 at 1:56 pm
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
JD
31 Mar 07 at 5:50 pm
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
JD
1 Apr 07 at 7:26 pm
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/
thanks
paul
Paul Hart
3 Apr 07 at 1:16 am
hello Mike
Some 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
sam
4 Apr 07 at 12:08 am
I tried your code and the app worked correctly on Windows, but the adl says ‘Bus error’ and crashes on Mac …
Yasu
5 Apr 07 at 4:01 am
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 ?
Yasu
5 Apr 07 at 8:30 am
Hi,
Could you please show an example of an existing Flex as3.0 project adapted to an Apollo project ?
cheers
Ian Stokes
Ian Stokes
10 Apr 07 at 2:01 pm
>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 chambers
mesh@adobe.com
mike chambers
10 Apr 07 at 2:28 pm
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!
de CHAVIGNY Herve
15 Apr 07 at 4:15 am
What about a filtering the files? Like only displaying Images.
Jason
6 Jun 07 at 7:20 am
Mike,
Apollo is a great framework. I have a startup problem. I want to build an apollo application using a master-slave concept. By that, I mean a master apollo application that launches several slave apollo applications. Kind of like the widget manager which launches other widgets. The apollo documentation is very basic and I could not find any example online either. How do I go about building such an application? The Window class API says that it should be used to launch other windows but I did not find any further informaton. Can you please give me some insight into this. I really appreciate your ideas on this. Thank you.
- venkat
venkat
21 Jun 07 at 7:17 am
Well, Apolle Runtime is good. I have also a startup problem. I work my idea. I want to build Apolle Messenger. It see like Linux Kopete 3.8.x.
How do I connect with liked client (example: Windows Live Messenger Network) with Apolle Messenger? Note that HotMail Network is new version! I need help for LanguagePicker in Flex / Apolle Application. But i can not find that google.com LanguagePicker for Apolle…
How do I check with deleted or blocked users from messenger or from adressbook?
look at http://www.checkmessenger.net (sorry i do not know in Language English? )!
If your blocked or deleted adressbook will to show about icon “Block” or “Delete/Block”.
But any ideas were cool and good …
Thanks you :-D
SnakeMedia
20 Jul 07 at 10:25 pm
Is it possible that noone can explain me, what a bus error is and what I have to do to avoid it? (I’m developing an air application with EXT js, and during the test, after several click/edit on the application components, it crashes and reports “bus error”) :(
iDave
8 Sep 08 at 3:44 am