EGL Development User Group - Group home

In the past various examples have been shown that demonstrate how easy it is to develop iPhone applications. With the advent of the iPad, I decided to write a sample with the following features:

• very easy to develop and enhance
• installable on the home screen
• works offline (when there is no Internet)
• automated packaging and upload to Apache
• compression on the server using gzip

The end result is attached, and all you need to do is customize and then run the enclosed deploy.xml Ant script. It will copy the entire application and all its required settings to an Apache server. A live version can be seen here.

Application Installation

Here is what the app looks like to your end-user when it is first launched:
 

A different UI can be shown before installation time. You could decide to not show the application's UI until users launch the application from their home screen, for instance. This would force them to perform the installation. Currently, the sample has the following simple logic:

  if ((safari.isIpad() || safari.isIphone()) && !safari.isFullScreen())    
    safari.alert("This application .... screen");
  end

If the user follows the installation instructions, they will get a custom icon on the home screen. You will find the icon in the WebContent directory, and it can be easily customized to your needs. This home screen icon launches the app without any browser bars, in less than 2 seconds.


On the iPhone, a splash screen will be shown while the application starts up. On an iPad, a screenshot of the most recent run of your application is shown. This allows you to return back to the exact same spot in your UI (assuming you can track that much), and reduce the amount of flickering that would otherwise occur during launching.

Scrolling

The iPhone and iPad scroll content using gestures and touch events. If you want to have only a portion of the screen be scrollable, you have to capture these events and handle them yourself. This logic is abstracted in the externalType called "Safari", enclosed in the sample project.

A special feature of the scrolling on iPad and iPhone is that it follows certain physical realities. When you flick a panel down or up, it will keep moving for a while. When you scroll past the end of the container, it gets "sticky" and bounces back like it is attached to its parent by an elastic band. All this logic is implemented in an EGL widget that is part of this sample project. Take a look at "ScrollPanel.egl" when you are interested.

The ScrollPanel widget is simple to use. It follows the API of any other container, so it has a children fields, etc. It can be added to any other container, such as a Box or a Div. This new widget hides a lot of the complexities of dealing with touch events, and you will find it to be a huge time saver.

HTML5 Caching

After running the app once from the home screen, it will be stored in the HTML5 resource cache (as we specified a cache manifest in our HTML file). This means all the files needed by the application are already copied to your iPad/iPhone and the application can launch in Safari even when there is no Internet connection. You can test this by turning your iPhone into airplane mode, or by disabling wi-fi on your iPad.

The way HTML5 caching works is that when the application is launched, the cache.manifest file is downloaded and compared with the previously downloaded version. If any byte in the contents differs, the entire application is reloaded. This means that if you want to invalidate the cache, you have to change the actual contents of the manifest file. That is why it contains a version field. Simply increase the number and the application will invalidate its cache. To see cache updates happen, you have to launch the app twice. Once to make Safari realize the cache is invalid and allow it to download the new files in the background. The second launch will then use the new version.

Automatic Upload to an Apache Server

One target in the Ant Script will take care of uploading the final end-result to a server. Customize the server name, target directory, userid, and password, and the Ant build automatically uploads the file to your server. Make sure to check the cache.manifest and increase its version number.

Eclipse Keyboard Shortcuts

After a while I really got fed up with mis-typing Alt+Shift+X,Q and I opened the preferences to Window > Preferences > General > Key. There I looked for "Run Ant Build", copied the command, and assigned F10 to it. Now, I just select the deploy.xml file and hit F10 to get it deployed.

More Examples

To see a larger, working example that also uses client-side storage and lots of compression on the server, take a look at iflip. It uses Google fast flips to find interesting news articles, downloads their contents and all their images, and stores the complete page into a browser-side database. This allows you to launch the application while being disconnected from the Internet and read all your news offline.

The application also uses nice transitions and scrolling animations to compliment the offline aspects of the web application.


Let me know what kind of iPad applications you can come up with!