Echo Web Framework

I finally took the plunge and picked up an iPhone a few days ago. While I was looking around for neat things that might be possible to do with it using Echo3, I ran into this page. It discusses the use of RFC 2397 (the "data" URL scheme) to embed images and even entire JavaScript/HTML applications into URLs. When you combine this with the fact that the iPhone now supports bookmarking web URLs and adding them to its "home screen", we have everything we need to create client-side Echo3 applications in JavaScript and package them up for offline iPhone use. That is, it's possible to create real Echo3 apps that can run even when the phone is out of network range or in "airplane mode".

There was one caveat: encoding URLs and applications using RFC 2397 is a horribly tedious process. My solution has been to throw together a proof-of-concept software development kit to take the pain out of it. You put in your JavaScript application and any other JS libraries you need, and out pops a ready-to-run offline Echo app for the iPhone. It can be downloaded from /content/echo3/iphone/echo-off-sdk.0.0.1.zip. Please bear in mind that this was written in one day with a cold and is thus the farthest thing from being polished.

For a simple proof-of-concept app, I've chosen the truly awful "Guess-A-Number" example. It looks just as ugly on the iPhone as it does on a desktop computer. Developing a library with a stylesheet and a few components to mimic the iPhone look&feel would go along way toward changing that. Additionally, in the case of "Guess-A-Number", it probably makes sense to change the text input field to a select field (numeric entry on an iPhone requires a few too many taps).

As well-engineered as the Mobile Safari browser is, it is necessarily different from a desktop computer's web browser. Echo3's "Pane" components, e.g., SplitPanes and WindowPanes, have fairly limited functionality on the iPhone in their current states. In my present opinion they are of no benefit to an iPhone-specific application's user experience. Other Echo components may need some teaking in order to work to their full potential.

The "SDK"

The offline SDK allows the developer to configure an application build using an XML file. Below is a sample used by the NumberGuessApp:

<build>
 <title>#Guess</title>
 <icon>NLogo.png</icon>
 
 <!-- EchoLite.js has no splitpane/windowpane support, no IE6 support, and no ARC support. -->
 <lib>EchoLite.js</lib>
 
 <lib>NumberGuess.js</lib>
 <image-namespace name="NumberGuessApp.Images">
  <image name="titleBanner">TitleBanner.png</image>
  <image name="congratulationsBanner">CongratulationsBanner.png</image>
 </image-namespace>
 
 <!--
 <save-html>out/out.html</save-html>
 <save-url>out/url.txt</save-url>
 -->

 <!-- The redirect and start pages should be deployed to the server -->
 <save-redirect>out/redirect.html</save-redirect>
 <save-start-page>out/start.html</save-start-page>
</build>

The lib elements define the JavaScript modules of the application. They'll be automatically compressed using Yahoo's YUI compressor.

The title and icon elements specify the page title and icon that will appear on the iPhone home screen.

The image-namespace elements of the build file will generate JavaScript code containing URLs that actually contain an image's data. In the above example, it will generate the following code:

NumberGuessApp.Images = {
    titleBanner: "data:image/png;base64,gHFhwf7234....",
    congratulationsBanner: "data:image/png;base64,f7ghw23HF7...."
};

You then use these objects to refer to your images, e.g.:

new EchoApp.Label({
    icon: NumberGuessApp.Images.titleBanner
})

The save-start-page element generates a trivial HTML page that links to the application. It's useful to bookmark it on your iPhone for repeated testing.

The save-redirect element generates the page containing the URL-embedded JavaScript application. It simply redirects to the application's data URL. When a user adds this page to his/her home screen, it will show up just like a normal iPhone application.

To build an offline Echo app using this SDK, run Apache Ant with a command line like the following:

ant -Dbuildfile=example/offline-build.xml

The code above will build the Guess-A-Number example. To build your own applications, simply replace the "example/offline-build.xml" portion of the path with your own. Or if you prefer you can put the whole works in the IDE of your choice and run the main() method of nextapp.echooff.EchoOff, specifying the build file of the application as the first command line paramter in your launch configuration.

For more info on iPhone development, I recommend reading the Apple docs @ http://developer.apple.com/iphone. You'll need to use/create an "AppleID" to access that site.

And, again, please bear in mind that this is only a proof-of-concept which was quickly thrown together. That said, I'm happy to offer any help if you'd like to try it out.

Download: /content/echo3/iphone/echo-off-sdk.0.0.1.zip

Online Application Start Page: /content/echo3/iphone/start.html (NOTE: This application is tested only in Mobile Safari and Firefox. It will definitely not work in any version of Internet Explorer, due to its lack of support for data URLs.)