So how did that happen? I have pretty much stopped checking my iTunes reports after 8 months of steady but lackluster performance. But then it all changed. I was writing a reply back to my friend about how my app was doing, and decided to include actual stats and so I logged in and downloaded my daily report, and immediately got struck by a WTF moment. All of a suddenly there was this “huge” spike and it was all coming from outside US.

I first thought it was a glitch, but then I realized it was not. It was indeed happening for the last 3 weeks, without me knowing anything about it. In fact the funny thing is, I stopped checking regularly around the time just before the spike seemed to have happened.

Anyways a good colleague of mine pointed out that it was indeed featured in the apps for kids category over in Europe.

This mainly speaks to the power of Apple’s marketing. Below is a pie chart that shows country distributions for Coloring Fun’s sales. US is still the second biggest but it took 8 months of sales to get there, whereas UK got to %26 in just less than 3 weeks.

Frankly I was never really sure for the potential for an application for kids. I used this more as a learning tool for understanding the iPhone SDK, something I can relatively quickly build and post it to the appstore. I did not really spend any time marketing it, even to the extent of submitting it to review sites. I guess this demonstrates that there indeed is a market for kid’s games. Especially the fact that being #2 in a kids game translates to #43 in overall games category and #79 in overall apps category shows that kid’s games are actually a substantial piece of the overall application sales traffic (at least in UK). And it also shows that a substantial group of people are indeed comfortable letting their young children play with their iPhones or iPod Touches.

Well now I am interested. I am currently working on updating the app as a first step. And we will see how this goes…

The code works most of the time if you use the UIGraphicsBeginImageContext, but then crashes randomly at some random CoreGraphics calls. The culprit in this case sounded like it was some thread safety issue, and turns out it indeed was. As documented in the SDK, when this API call is made, the drawing environment is pushed onto the graphics context stack immediately. And that seems to be what is causing our threading issues. The context stack becomes shared between the UI thread which does its regular drawing code and the background thread which does the background image manipulation.

Luckily fixing this problem is not hard. All you need to do is to stop using the UIKit APIs and go back to the lower level Quartz APIs.

    CGColorSpaceRef colorSpaceRef = CGColorSpaceCreateDeviceRGB(); 
    CGContextRef context = CGBitmapContextCreate(NULL, size.width, size.height,
                                                 BITS_PER_COMPONENT,
                                                 NUM_OF_COMPONENTS * size.width,
                                                 colorSpaceRef,
                                                 kCGImageAlphaPremultipliedLast);
    CGColorSpaceRelease(colorSpaceRef);
    CGRect rect = CGRectMake(0.0, 0.0, size.width, size.height);
    CGContextClearRect(context, rect);
 
    // Do your drawing and image manipulation..
 
    CGImageRef cgImage = CGBitmapContextCreateImage(context);
    UIImage *image = [UIImage imageWithCGImage:cgImage];
    CGImageRelease(cgImage);
    CGContextRelease(context);

The quality of the listed session topics are very high, and those are definitely not the same sort of information you can find in the upcoming WWDC 2009. Amongst them, the below 2 sessions sounded especially interesting to me: (along with my humble suggestions for additional content)

Designing and Developing Custom Cocoa Controls (Matt Gemmell): There is surprisingly very little information in the form of guidelines, best practices on this topic for both Cocoa and Cocoa Touch programming. Matt Gemmell has quite a few open source controls, so I am sure it would be great to hear about his experience. Even though it is not mentioned in his abstract, I hope that he can also touch a little bit on building Interface Builder plugins for those custom controls. But if not, the Apple docs on IBPlugin are comprehensive as well.

Foundations of Objective-C (Andre Pang): The best way to really master a language/framework is to go deep into its inner workings. Especially meta-programming is a very powerful tool, once you understand the underlying object model and runtime of that language. Frameworks like Core Data are built on top of the meta-programming principles. It would also be great to also briefly compare it to either Ruby or Python. There is also a pretty interesting screencast from PeepCode titled Objective C for Rubyists that approaches Objective C from the perspective of Ruby.

Social APIs:

Facebook Connect: Well finally the Facebook Connect is now available for the iPhone. Don’t miss the 5 minute introduction to implement Facebook Connect on the iPhone.

Twitter: Looks like I missed this one in my last post. This is written by Matt Legend Gemmell. He has a lot of other open source code on his site that is used by a long list of popular Mac apps. Note that Twitter is slowly phasing in OAuth based authentication and this library does not yet support that. And that brings us to …

OAuth: This is a library written by Karl Adam both for the Mac and the iPhone. In order to make OAuth work on the iPhone, you would need to host UIWebView so that users can authorize your app. Karl described using OAuth specifically for the iPhone here.

Networking and Web Service client libraries:

HTTP Server: So you need a small HTTP server running on your iPhone. (Perhaps to communicate with another phone?) Well you are in luck. There is a Cocoa based HTTP server originally for the Mac, that now also works on the iPhone. Check out their sample for the iPhone.

Quick SMTP client : May be you don’t want to wait for iPhone 3.0 for full UI based email support in your app. Or may be you need something with no UI. This is a quick SMTP client to send one-off emails from your app.

HTTP wrapper – ASIHTTPRequest: Here is a great wrapper around CFNetwork APIs to do HTTP requests. It supports all of GET/POST/PUT/DELETE requests, cookies, Basic/Digest/NTLM authentication support, GZIP for response data and more.

Restful Client, ObjectiveResource: This is an interesting library. It is an implementation of ActiveResource for ObjectiveC. Basically it attempts to simplify communicating with the RESTful servers, if you choose to have a RESTful server implementation in the back end. The project is very active and you can read more about it on iPhoneOnRails.com.

Image processing:

Simple Image Processing: CoreImage and CoreImage filters are unfortunately not available for the iPhone. However there is a simple open source library for the iPhone that performs some image processing tasks like edge detection, gaussian blurs, histogram equalization etc.

Maps:

Route Me: Again if you can’t wait for the 3.0 release, or if you want to ensure your app works downlevel, or if you like to use other alternative tilesets from Microsoft Virtual Earth, Open Street Map or CloudMade, then this library is for you.

Plotting and graphing:

Core Plot: This is another very interesting open source project, that is planning to provide 2D data visualization. This is still in its early stages, but you can check-out source code from the trunk and start playing.

Utilities, toolkits, UI widgets:

Three20: This is Joe Hewitt’s collection of IPhone UI classes that were originally seen in the iPhone Facebook app. Includes things like an improved photo viewer, Internet aware high performance table view controllers and other utility classes. Very useful stuff. He also very recently added some CSS-like styling support.

UIColor Utilities: Some very useful helper method additions for the UIColor to directly handle RGBA to UIColor additions, additional named colors, color space helpers etc.

Regex – RegexKitLite: Arguably one of the biggest omissions from a modern framework like Cocoa Touch, is the lack of a built-in support for regular expressions. The upcoming NSPredicate support in 3.0, will bring advanced string searching but it is still not regex. RegexKit is a 3rd party open source library for the Mac OS X. RegexKitLite is a lighter weight version of RegexKit that works on the iPhone.

Plausible Crash Reporter: So you want to know if and why your apps are crashing out on the field. This library records the crash info on disk and then the next time your app launches, you can send the crash info back to your server to further analyze.

Project and file templates for static libraries: Well this last one is from me. There is a more detailed blog post on this one.

So this is it for now. Happy code sharing!

To help building static libraries for the iPhone, I decided to create a project template and file template. The project template includes 2 targets. One is the actual static library itself and the other is a unit test target. The file template simplifies creating unit test classes, by including the necessary header files and boiler plate code. I have included the Google Toolbox for Mac’s iPhone unit testing facilities and the OCMock framework in these templates.

The source code for the templates are checked into my github repository. You can take a look at the instructions to install and use them over there. Once you create your static library, including that in your application project is quite straightforward. Just follow the below steps to add it to your project file:

• Drag and drop the “your_static_library.xcodeproj” file to your application project’s “Groups & Files” sidebar. Make sure that “Copy Items” is unchecked and “Reference Type” is “Relative to Project” in the dialog that pops up when you drop the static library project.
• Link your static library to your application project. In this case, select the project you just added, and check the checkbox to the far right for the library target. Leave the unit test target as is.
• Add the static library headers to your application project. Double click on your application project to open “Project Info” dialog. Switch to the “Build” tab and first search for the “Other Linker Flags” setting and set it to -ObjC. Then search for the “Header Search Paths” setting and set it to the relative path to the header files in your static library.
• Add your static library as a dependency to your application. This ensures that the your static library project is also compiled when you compile your application. To do this, double click on your application target switch to the “General Tab” of the “Target Info” dialog. Add the static library target by clicking the + sign in the direct dependencies section.

Now you are ready share your library code with any number of applications you build. You can of course apply the same steps to other 3rd party libraries that you find on the web. Happy application building!

A friend of mine came up with the original idea and also provided me with 10 of the original drawings. My dear wife, Oya Karatal, helped with coloring the drawings and picking the colors for the color palette. And I did the programming.

JSON Library

Currently, there are 3 choices that I know of:

JSON Framework: I used this one in one of my projects, and did not run into problems. Recently after the update to the new SDK 2.2, you may need to make a quick change to your project as outlined at the end of this discussion.

Touch JSON: This one is from the same project owners as the TouchXML.

Blake Seely’s BSJSONAdditions: This one is little older and intended for the Mac originally. According to the author of the JSON Framework a little slower as per his performance benchmarks

DOM XML Library

IPhone SDK includes an event driven (SAX based) XML parser called NSXMLParser. But if you need DOM style parser, you are out of luck unless you use the libxml2 library directly. There is no MacOS X equivalent of NSXML on the IPhone.

However luckily there are at least 2 options that I know of that you might use if you really need the DOM tree:

TouchXML: Open source lightweight replacement for Cocoa’s NSXML cluster of classes based on libxml2.

Matt Gallagher: Wrote a lightweight wrapper on top of libxml2 and describes this in his blog entry.

However note that in a memory and CPU constrained environment like IPhone, it does make more sense to use an event driven parser (probably why Apple decided not to include NSXML in the first place). There is a recent SDK sample called XMLPerformance that shows parsing large number of items in an efficient way using both the NSXMLParser and the lower level SAX parser provided in libxml2.

Google Data APIs

So you would like to access Picasa, Google Calendar, Google Contacts and more… Well there is a very comprehensive ObjectiveC Client Library that you can include as a static library in your applications.

Twitter

Craig Hockenberry of the awesome Twitterific fame, made the source code of the Mobile Twitterific available to serve as a “Best Practices” document. There you can find how to connect to Twitter, get and post tweets etc.

Flickr

Unfortunately the well-known Cocoa API for Flickr is still not ported to the IPhone. However it looks like they are working on porting it to IPhone as of November 2008.

Game Engines

There are at least 3 game engines that I know of:

2D Gaming – Cocos 2D: This one is intended for 2D games, demos and other graphical/interactive applications. It is a port from the Python based cocos2d design. It uses Open ES 1.1, instead of the Quartz 2D and integrates the Chipmunk 2d physics engine.

3D Gaming – SIO2 Interactive: A 3D engine written in C using OpenGL ES.

3D Gaming – Oolong Engine: Mainly written in C++ with some ObjectiveC. Based on OpenGL ES 1.1 and includes the Bullet 3D physics engine.

You can also take a look at some IPhone game source code:

Tris: The source code for the Tetris clone that was pulled out of the Appstore earlier.

Molecules: This is not a game, but serves as a good tutorial for OpenGL ES development.

Unit Testing and Mock Frameworks

As of IPhone SDK 2.2, Apple now includes the OCUnit. This was discussed in the Stanford IPhone Application Programming course and you can download the presentation and the sample. So right of the bat you are now set up for unit testing, no more excuses.

Google actually has a more comprehensive framework in their Google Toolbox for Mac that even includes support for UI testing.

There is also a mock object framework called OCMock that is designed for MacOS X Cocoa, but with a little bit of work you can get that to work for your IPhone projects.

Anyways the point of this post is not really about different options for persisting and reading vector graphic files. I am rather planning to talk a bit about some of the tricky things I found out while trying to use the UIWebView programatically.

Loading the SVG file from your resources folder

This one is quite straightforward. You need to get the correct path for your resources folder and the SVG file in that folder, which can be easily accomplished using the below snippet:

NSString *filePath = [[NSBundle mainBundle]
	pathForResource:@"filenameWithoutExtension" ofType:@"svg";
NSData *svgData = [NSData dataWithContentsOfFile:filePath];

I also wanted to reference the javascript I used in the SVG file, instead of inline embedding. So I made sure that I set the baseURL correctly for the UIWebView to resolve the path to the javascript file in my resources directory:

NSString *resourcePath = [[NSBundle mainBundle] resourcePath];
NSURL *baseURL = [[NSURL alloc] initFileURLWithPath:resourcePath isDirectory:YES];
 
[self.webView 	loadData:svgData 
	MIMEType:@"image/svg+xml"	
	textEncodingName:@"UTF-8" 
	baseURL:baseURL];	
[baseURL release];

However to my surprise the above did not work for locating my script file in the SVG referenced as below:

<script type="text/ecmascript" src="foo.js"/>

Well it turns out the src attribute is not actually in the SVG 1.1 specification at all?? The way I solved that problem is to write a build script to embed the script inline to the svg file (i.e. a preprocessing step) and make it part of the build process. (More on that in a later post…)

UIWebView loading contents when it is off-screen

Another surprise was trying to be able to load the SVG file when the UIWebView was off-screen. My design hosted the UIWebView inside a UIScrollView and I was loading the current page and caching the next and previous pages to have a smooth transition as I swipe the scrollview. But it turns out UIWebView has an issue with loading when it is off-screen. I.e. it does not render its contents, when it comes back into screen unless you double tap into it. It sounds more like a bug to me.

To solve this problem, I delayed the actual loading of the SVG file till:

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView

for the current view that is becoming visible and I also made sure that once it is loaded when the UIWebView is visible, I don’t ask it to reload it every time the user swipes the view to left and right.

Calling a javascript function from Objective-C

Part of my application is implemented in Javascript and using the DOM to manipulate the SVG document. I need to be able to call some of my Javascript functions from my Objective-C code. This is fairly straightforward and well documented in the UIWebView reference documentation in the SDK. All you need to do is to create an NSString which contains the Javascript function call, and ask the UIWebView to execute it as shown below:

NSString *jsCommand = [NSString stringWithFormat:@"setActiveColor(%d, %d, %d);", 
	redColor, greenColor, blueColor];
[self.webView stringByEvaluatingJavaScriptFromString:jsCommand];

Javascript communicating back with Objective-C code

What happens when you need to call back your Objective-C code from Javascript? Unfortunately at the time of this writing, there is no proper API for this for the IPhone. (See Apple Documentation for how to do it in MacOS X using WebKit) Fortunately there is a hack, a lot of projects have been using. It basically involves communication through a custom protocol that you make up to pass some parameters and then parsing those parameters in your Objective C code to call your corresponding Objective-C methods.

Basically you create a protocol like below:

myapp:myfunction:myparam1:myparam2

And then in Javascript:

document.location = "myapp:" + "myfunction:" + param1 + ":" + param2;

Then back in your Objective-C code:

- (BOOL)webView:(UIWebView *)webView2 
	shouldStartLoadWithRequest:(NSURLRequest *)request 
	navigationType:(UIWebViewNavigationType)navigationType {
 
	NSString *requestString = [[request URL] absoluteString];
	NSArray *components = [requestString componentsSeparatedByString:@":"];
 
	if ([components count] > 1 && 
		[(NSString *)[components objectAtIndex:0] isEqualToString:@"myapp"]) {
		if([(NSString *)[components objectAtIndex:1] isEqualToString:@"myfunction"]) 
		{
 
			NSLog([components objectAtIndex:2]); // param1
			NSLog([components objectAtIndex:3]); // param2
			// Call your method in Objective-C method using the above...
		}
		return NO;
	}
 
	return YES; // Return YES to make sure regular navigation works as expected.
}

Hacky: yes. Gets the job done: yes

Disabling the selection flash

Once you do the above steps, you are basically mostly on your way to have a functioning application that makes use of UIWebView as a component. But as any good IPhone application, you need to add more polish and get rid of the user annoyances.

The first annoyance is, what happens when you tap inside the UIWebView control that is hosting an SVG file. There is a default behavior that happens for all image files, including SVG files. The background of the image (including the border area) flashes quickly to some default grayish color.

Turns out there is a way to turn this off through the use of the WebKit CSS property -webkit-tap-highlight-color, and setting the alpha of the color to 0, in my Javascript code does the trick:

document.documentElement.style.webkitTapHighlightColor = "rgba(0,0,0,0)";

Disabling the “action” pop-up

The second thing I needed to disable is the “action” popup that appears if you tap and hold the contents of the UIWebView for a few seconds. This is also controlled through a CSS property called -webkit-touch-callout, and setting that to “none” in this case does the trick:

document.documentElement.style.webkitTouchCallout = "none";

Disabling default zoom effect

The final user annoyance I had was the zooming effect that happens by default, when you double tap the content area. Well for many applications this may be a desired effect, but in my case, I needed to disable the zooming. I was hoping that there is another CSS property that is something like webkit-disable-doubletap-zoom but unfortunately no such property exists (at least as of this writing.)

The only other idea I came up with was to be able to detect double tapping and calling the standard preventDefault on the event when that touch happens in my Javascript code. But it turns out that SVG DOM does not at the moment fully implement the touch and gesture events. You should be able to use those when you are hosting regular HTML though.

The final approach I came up with was to be able to intercept the touch events before they even reach UIWebView and stop them in my Objective-C code. To do this, you need to read a bit more about how the touch events are routed in Cocoa. (Requires login to the IPhone Dev Center) Basically the idea is to override the hit testing part of the UIWebView and detect the double tap there. In order to that I subclassed UIWebView and overrode the hitTest method in my implementation. Other than that I keep it up the superclass to do the rest.

-(UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {	
	NSSet *touches = [event allTouches];
	BOOL forwardToSuper = YES;
	for (UITouch *touch in touches) {
		if ([touch tapCount] >= 2) {
			// prevent this 
			forwardToSuper = NO;
		}		
	}
	if (forwardToSuper){
		//return self.superview;
		return [super hitTest:point withEvent:event];
	}
	else {
		// Return the superview as the hit and prevent
		// UIWebView receiving double or more taps
		return self.superview;
	}
}

So this finally did the trick and I was able to prevent the double tap zooming effect as well.