Archive for June, 2010


Tip: Animating UIButton

File this one under “obvious once you think of it”: if you want to have a UIButton with some kind of animation effect, but that seems complicated since a UIButton can only have a single image specified; well then as described here, just create an animatable UIImageView,

NSArray *images = [NSArray arrayWithObjects:

   [UIImage imageNamed:@"image0.png"],

   [UIImage imageNamed:@"image1.png"],


imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image0.png"]];

imageView.animationImages = images;

then add it as a subview of a custom button!

UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];

button.bounds = self.imageView.bounds;

[button addSubview:self.imageView];

[button addTarget:self action:@selector(buttonTouched:) forControlEvents:UIControlEventTouchUpInside];

Which can then be made into a UIBarButtonItem if you like,

UIBarButtonItem *barButton = [[[UIBarButtonItem alloc] initWithCustomView: button] autorelease];

And then just call [imageView startAnimating] to get your pretty pulsating or whatever action going.


TwitterConnect: DDSocialDialog

Here’s a handy piece of UI support for the next time you need to put a Twitter login into your app: DDSocialDialog!

I am working on an iPhone/iPad universal app these two weeks, and it allows user to share over Facebook, Twitter or Plurk social services.

And since FacebookConnect SDK had provided a well-known dialog design, I would like to follow it, and to create a similar dialog UI for consistent user experiences in my app.

DDSocialDialog is a UIView subclass looks like FacebookConnect dialog,


And it comes with some features:

  1. Easy to use, just like UIAlertView.
  2. A DDSocialDialog dialog with an empty contentView for customizing.
  3. A extended DDSocialLoginDialog dialog for retrieving username and password.
  4. Two themes: Twitter and Plurk. And you can create your own if you like.
  5. Optimized for different resolutions, including iPhone, iPad and iPhone 4 (Retina Display, 960 by 640).
  6. Support orientations, you can rotate with keyboard on or off. This part is acting better than FacebookConnect SDK.

Yes, what’s not to like there? Certainly vastly more attractive and functional than our wireframe quality Twitter login views to date, that’s for sure. Haven’t had any requests for Plurk yet … actually, we were completely unaware of its existence until just now … but hey throwing that in as a bonus can’t hurt. Code is on github, enjoy!


Irregular Buttons

Let’s say that you want to have buttons that are irregularly shaped, and there’s some reason that the standard hit testing which does not check image content is undesirable for some reason, like if you have overlapping buttons like this:

overlapping buttons.png

… well, first off, you should fix your interface. But let’s assume further that there actually is a good reason, like “you’re being paid” for instance, to implement something like the above: well, then, here is how to go about turning a button’s UIImage into a hit testing mask:

Irregularly Shaped UIButtons with update here linking to latest code.

There is an alternative implementation here, as well:

OBShapedButton: Non-rectangular buttons on the iPhone

So there you go. Even if you design sensible interfaces so this exact application isn’t of great interest to you, these implementations involve UIImage content dissection that could very well be of use in other situations, so the code’s worth a look.


PayPal MPL

So you may have noticed in that list of commercial components yesterday that there was one called “PayPal Integrator”. That was a particularly interesting one, we thought, as we’re not particularly interested in commercial credit card or cheque processors at the moment, but we do have a PayPal account; and we weren’t aware it was possible to connect to PayPal from an iPhone app, so how are they managing that?

Turns out that there is indeed an iPhone friendly official PayPal library, the “Mobile Payments Library” — and it’s been in public beta for two months, and there’s already apps in the store using it, like this sample:


That is indeed vastly more convenient than redirecting people buying physical goods out of your app to a Safari page as we’ve been doing, isn’t it? OK, onto the ever-lengthening list of things to do as soon as possible, let us add “checking out the PayPal library”!


Connectivity Components

So, you got a need for some unfamiliar kind of connectivity in your iPhone/iPad/Cocoa app? Well, there’s these people /n software who have quite the extensive selection for you, here’s the ones that are shipping for the iPhone in particular:

IP*Works! — FTP, HTTP, SMTP, POP, IMAP, LDAP, DNS, RSS, SMS, Jabber, SOAP, WebDav, RAS, XML, and more


IP*Works! S/MIME — secure SMTP, POP, IMAP, NNTP, and more

IP*Works! SSH — SFTP, SCP, tunneling, and more

IP*Works! Secure SNMP — SNMP agent and manager toolkit

Paymentech Integrator

Vital/TSYS Integrator

FDMS Integrator

E-Payment (cc/ACH) Integrator

E-Banking (OFX) Integrator

PayPal Integrator

QuickBooks (QBXML) Integrator

Amazon (S3/SQS/EC2/AWS) Integrator

Shipping (FedEx/UPS/USPS) Integrator

MS SharePoint Integrator

Not exactly what you’d call cheap any of these, but hey, if you need it right now then there you go!

h/t: iPhoneDevelopmentBits!


Gradient Buttons

So here’s another shininess option for your pretty shiny buttons:

I added two more button styles to the iPhone Gradient Buttons project and made stroke color and stroke weight configurable options. The two new styles look exactly like the old Black and White style, only the highlight state is a blue gradient. These simulate the style used in alert sheets in several Apple applications.


Some of the Core Graphics code was machine-generated and is in kind of rough shape, but it works…

“Machine-generated”? Say what? Well, as noted here earlier, it turns out that drawing program Opacity will export images as source!

… Opacity also now supports exporting an image as source code. This allows developers to build an image and immediately get the code to draw that image dynamically. Quartz, Cocoa, Cocoa Touch, and JavaScript Canvas are supported for creating drawing code for Mac, iPhone, and Web applications. Variables in an image will be automatically translated into variables in the source code as well, making it easy to create powerful and flexible drawing code…

Did you know that? We did not know that. That would have saved us a good bit of time … two days ago, actually. Well, next time we have some programmatic drawing to do, we certainly know what we’re going to check out!


And here’s another option for the pretty shiny thing … GlassButtons!


iPad Programming Roundup

So yeah, today we’re starting our first iPad-targeted app. Just right out there on the cutting edge, yep that’s us. Mind you, this is the first of three iPad-targeted projects waiting increasingly restively for us to get around to them, and the intended delivery dates were … well, let’s move on, shall we.

The upside of being so far behind the curve you’re starting to lose sight of it in the distance, of course, is that all the clever people who take on less work than you do have put out good stuff to get you up to speed quickly. So let’s round up some of those:

Apple’s iPad Programming Guide and iPad Human Interface Guidelines are the first things to read, of course.

iPad Multi-Touch is a cute little project from the inestimable Matt Legend Gemmell showing how to handle the eleven (11!!) simultaneous touch events that the iPad supports.

iPad VGA Output is another snippet from same showing how to handle a VGA adapter connected external monitor.

iPadFontExample shows how to set up your plist to access an embedded .otf font and use it in UILabel and with embedded UIWebView content.

Unsurprisingly, Ray Wenderlich of cocos2d tutorial profligatality has an excellent set on iPad idioms too:

iPad for iPhone Developers 101: UISplitView Tutorial

iPad for iPhone Developers 101: UIPopoverController Tutorial

iPad for iPhone Developers 101: Custom Input View Tutorial

How To Port an iPhone Application to the iPad

Over at Dr. Touch, there’s another good porting walkthrough … and an amusing reminder of why you really really should test every config you claim to support:

From iPhone to Hybrid

How to make your Hybrid-App crash for sure

Here’s an article on how to make dealing with UIPopover controllers more straightforward:

Rewriting a Public Cocoa Touch API

And one on adding a navigation controller stack in the detail view of the UISplitViewController template:

Fixing the UISplitViewController Template

And one on setting up document support and file sharing:

iPad SDK 3.2 Document Support

There is a good bit of advice out there on how to set up the increasingly multiplicious varieties of icons and launch images needed for a universally savvy iOS application; unfortunately, most of it is wrong and/or outdated. Take it straight from the now not NDA’d mothership, whenever you read this:

Build-Time Configuration Details and App Icons QA1686

although at time of writing this post appears to be correct about icon varieties current as of iPhone 4 release, and adds some useful commentary. Also of interest may be this application named ChopShop to aid your artist/programmer workflow.

And finally, here’s some worthwhile thoughts on general iPad app and website design:

Designing for iPad: Reality Check

10 Beautiful and Usable iPhone and iPad Interfaces

48 Creative iPad Application Websites


Here’s some more worthwhile tips on universal apps and such:

Migrating iPhone 3.x apps to iPad and iOS 4.0

And a better split view controller:

MGSplitViewController for iPad

And some good design advice:

Design for Mobile: iPad Design Tips

Another split view replacement, tab bar and navigation controller-friendly:

Open Source: Custom iPad UISplitViewController Allows Placement Inside Tab Bars


APNS certificate updating

So you’re having a good time being all snarky at your pet web developer because all of a sudden the APNS-dependent functionality isn’t working in your Big Secret Project, and paste into “their” bug the error listing you didn’t bother to actually read, and they pull you up short with

The warning is perfectly clear:

certificate expired

The certs you created to connect to Apple’s APNS network expired. We need new PEM files. Preferably ones with longer durations than 3 months.

Oh, snap. Right then, since we’ve completely forgotten what the process was to get that set up in the first place, let’s walk through the replacement together so it’s here next time we need to know, shall we?

1. Examine your push services certs in Keychain Access.


Yes. Yes, that certainly is expired, our unfairly maligned web developer is quite correct. So we need to fix that with a non-expired one and then get it out to their server.

2. Go log in as the agent for this project to the Provisioning Portal. Find the App ID of the project in question. Click “Configure.”


So there’s a button “Generate a new Production Push SSL Certificate before your current one expires”, but nothing of the sort for the indeed now expired development cert. OK, guess we revoke it and issue a new one then. So we do that, with the certificate signing request that we keep saved to disk for all the various times we need to sign things, and it generates and we’re prompted to download the new “aps_developer_identity.cer” without issue. And then back at the above it shows that the expiry date is now Sep 21, 2010. Apparently there is a hard three-month limit. Bah.

3. Double-click the downloaded cert; and Keychain Access loads it, the key is there, looks good. Delete the expired certificate, which is still there and named identically to the new one, it’s not quite smart enough to keep things in order enough to remove obsolete ones apparently.

And from here on it should be the same as installing one’s cert from scratch on the server as discussed in links elsewhere, but let’s set them out again here in case those references disappear on us:

4. Right-click the new cert, export it as “apns-dev-cert.p12″; and the new cert’s private key, export it as “apns-dev-key.p12″.

5. Convert to PEM files in the Terminal with

openssl pkcs12 -clcerts -nokeys -out apns-dev-cert.pem -in apns-dev-cert.p12

openssl pkcs12 -nocerts -out apns-dev-key.pem -in apns-dev-key.p12

6. Remove passphrase (your server won’t like it, we found out setting this up the first time) with

openssl rsa -in apns-dev-key.pem -out apns-dev-key-noenc.pem

7. Combine them with

cat apns-dev-cert.pem apns-dev-key-noenc.pem > apns-dev.pem

8. With your newfound humility request that your web developer take that combined file and replace their current expired one, and …

wait with crossed fingers and bated breath

… everything starts magically working again. Ex-cellent.

So the lesson here, Dear Readers, is watch those APNS cert expiry dates, as apparently you can’t count on getting reminded of their expiry.

That, and don’t call out your friendly web developer unless you’re sure that the problem is actually not completely your fault. We’ll have to work on that one, yes.


Categories as Stylesheets

Here’s an interesting article on how to approach the problem of presenting unified interface adjustments, as in this problem you’ve probably encountered before:

… However, getting all the UI widgets to look similarly can be complex, particularly in large applications; what if your client or their designers change their minds about the font size or some background color right before shipping your project? Of course you can “search and replace” all occurrences of some color using Xcode, but you have the risk of leaving some unchanged widget somewhere. And believe me, this happens really often.

In this article I will discuss a simple approach, using Objective-C categories, to keep your styling information separated from the rest of the application, using a system that will be familiar to developers used to creating websites using CSS (Cascading Style Sheets).

The heart of it is to apply Objective-C niftiness by adding an NSObject category

… Why a category on NSObject? Because not everything you see on your iPhone screen is a subclass of UIView! UIBarButtonItems, for example, inherit from UIBarItem, which itself inherits from NSObject, and not from UIView. By the way, by extending NSObject, this code could also be used in Mac OS X applications, for example, without modification…

to add “cascadingStyle” property semantics

@implementation NSObject (AKCascadingStyle)

@dynamic cascadingStyle;

- (void)setCascadingStyle:(AKCascadingStyle *)style


   [style applyToObject:self];


- (id)cascadingStyle


   return [AKCascadingStyle styleFromObject:self];



and polymorphism of -applyToObject and -styleFromObject takes care of the ‘cascading’ bits.

Certainly worth a look at the code on github!


Safe Page Curl

If you want your app to have a page flip like Apple does in iBooks, the short answer is: No, you can’t do that, because Apple cheats and uses private APIs, as dissected here:

Apple’s iBooks Dynamic Page Curl

… but the long answer, if you really really want to have a page flip kinda-sorta like that, can be found here:

App Store-safe Page Curl animations

It’s a discussion of the Leaves project to fake the iBooks curl in an App Store-safe fashion, forked to twopages branch to extend to side by side pages.

This all looks like quite a bit of trouble to go to, but hey if you really really want it, there’s a start!