Special

Introducing the “Welcome to Xojo” Bundle!

New to Xojo and looking for guidance? We've put together a terrific bundle to welcome you! Xojo Bundle

This bundle includes six back issues of the magazine -- all of year 14 in printed book and digital formats -- plus a one-year subscription so you'll be learning all about Xojo for the next year. It's the perfect way to get started programming with Xojo. And you save as much as $35 over the non-bundle price!

This offer is only available for a limited time as supplies are limited, so hurry today and order this special bundle before the offer goes away!

Article Preview


Buy Now

PDF:

Feature

Optimizing iPhone WebApp

How REALbasic enabled us to release our iPhone WebApp on schedule

Issue: 7.6 (September/October 2009)
Author: Mattias Sandstrom
Article Description: No description available.
Article Length (in bytes): 5,965
Starting Page Number: 13
RBD Number: 7608
Resource File(s): None
Related Web Link(s):

http://developer.apple.com
http://www.einhugur.com

Known Limitations: None

Excerpt of article text...

In a rush to complete Tangix's first WebApp for the iPhone, a simple WebApp providing an interface from the iPhone into our online certification system, we ran across some serious performance issues. Inside the WebApp we display statistics per country and have a small flag icon displayed together with the numbers. The flag itself is not big (16 by 11 pixels, less than 4kB in size) and the system was fast and responsive over WiFi during the development phase of the project. However, targeting the iPhone platform is something different -- network connectivity could range from EDGE (230kbp/s on a sunny day) via 3G and all the way to broadband WiFi access (several Mbp/s). The initial solution for how to handle the flag icons were not ideal over the cellular network, as the multiple requests for the various flags simply took too much time to complete. To make matters worse, we designed the WebApp to be offline-capable meaning that all flag icons have to be downloaded, not just the 15 flags needed to display the statistics (as other flags could be needed on other occasions). There are 247 flag icon files and about 500 kB in total. The value of beta--testing Luckily this problem was noticed when beta--testing and we had a day to figure out a solution to this problem before launching the WebApp. Analyzing the traffic between the iPhone and the server, each of the 247 flag files were requested from the server and the whole process took about two minutes before the WebApp got responsive again - this over the 3G network. The download speed was not an issue, but the network latency made the requests crawl and the number of requests made matters worse. Latency over a cellular network is generally very high, adding about 600 milliseconds to the round--trip time. Now we understood the problem and could start working on a solution. We decided to change the WebApp from displaying the flag icon in an IMG--tag that changes the SRC parameter to point to the correct flag (that is made available in the offline cache) to instead use a single picture (stored in the iPhone offline cache) that is instead a mosaic of all flags. Instead of an IMG tag, an HTML5 CANVAS container will be used to display the flag which is cut out from the mosaic of flags. The flag is then drawn in the CANVAS' 2D context - a cool way to learn this new HTML5 feature! Creating a quick REALbasic hack This presented us with a new challenge; to create the mosaic and to create the index to make it possible to find the right flag icon -- a perfect job for a quick REALbasic hack. The task is simple enough -- we will loop through the directory with flag files, add them to a mosaic Canvas, create the index data needed for the WebApp to locate the correct flag again and save the completed mosaic together with the index information. This being a hack we will not pay much attention to details such as handling preferences, make it possible to select different directories or output files, UI etc -- we will just get the job done as quickly as possible. As iPhone WebApps are created using Apple's Dashcode and running JavaScript, the idea to store and reload the positioning index is to use JavaScript's eval() function that takes a serialized variable as input and returns the JavaScript object (see separate sidebar for a explanation). The REALbasic hack thus needs to create a text output as indicated in Code Listing #1 together with the mosaic picture. A JavaScript function will then iterate through the array or objects comparing the ISO code of the requested flag and return the proper x and y coordinates from the mosaic. JavaScript does not have the equivalent to the Dictionary class of REALbasic so we need to iterate the array (simple but crude solution) and return the proper object with the coordinates. Getting the job done... In REALbasic, creating a simple window with a Canvas control (canTarget) for the resulting mosaic, a TextEdit (edtSerialized) control for the index information output and an untitled PushButton (to scare uninitiated users off) and placing the short loop in the Action() event of the PushButton -- there you have the minimum ingredients for a quick hack! (please note that this is not the programming style to recommend or endorse for anything else) The resulting window is shown in Figure 1 and Code Listing #2. Out of habit, the GraphicsFormat plugin from Einhugur is used to read the PNG files and convert them into picture objects. We have been burned too many times relying on REALbasics's native Picture handling and cross--platform issues to simply not care about the native picture loading and saving functions and instead use PngImporter and PngExporter classes from Einhugur's GraphicsFormat plugin that never relies on any system components (QuickTime, GDI etc) to do the work. Opening the directory with the flag icons we iterate through all files and add them to an internal Picture object (destPicture) while adding information to the index string (s). All flags are considered to be 16x11 pixels, which is a simplification as the Swiss and Nepalese flags are differently shaped and slightly smaller, but the extra white background is ok in this application. Looping, the resulting mosaic and text is placed in the Canvas and TextEdit field. The mosaic (shown in Figure 3) is also exported using the PngExporter.SaveToFile() function to another hard--coded location. And we are done with the hack! Wrapping it all up For the iPhone WebApp, we changed from using IMG tags to CANVAS tags and then used the drawImage() function of the 2D context of the CANVAS to cut out the correct flag from the mosaic and draw it into the CANVAS, see figure 3. All in all, this was a simple solution making it possible for us to launch the WebApp on schedule - all thanks to a quick hack in REALbasic that took less than an hour to complete. Web Resources: http://developer.apple.com http://www.einhugur.com

...End of Excerpt. Please purchase the magazine to read the full article.

Article copyrighted by REALbasic Developer magazine. All rights reserved.


 


|

 


Weblog Commenting and Trackback by HaloScan.com