SoftLayer Mobile: Now a Universal iOS Application
By Pawel Kijowski in Development, SoftLayerLast month, we put SoftLayer Mobile HD out to pasture. That iPad-specific application performed amazingly, and we got a lot of great feedback from our customers, so we doubled-down on our efforts to support iPad users by merging SoftLayer Mobile HD functionality with our standard SoftLayer Mobile app to provide a singular, universal application for all iOS devices.
By merging our two iOS applications into a single, universal app, we can provide better feature parity, maintain coherent architecture and increase code reuse and maintainability because we’re only working with a single feature-rich binary app that provides a consistent user experience on the iPhone and the iPad at the same. Obviously, this meant we had to retool much of the legacy iPhone-specific SoftLayer Mobile app in order to provide the same device-specific functionality we had for the iPad in SoftLayer Mobile HD, but I was surprised at how straightforward that process ended up being. I thought I’d share a few of the resources iOS includes that simplify the process of creating a universal iOS application.
iOS supports development of universal applications via device-specific resource loading and device-specific runtime checks, and we leveraged those tools based on particular situations in our code base.
Device-specific resource loading allows iOS to choose the appropriate resource for the device being used. For example, if we have two different versions of an image called SoftLayerOnBlack.png to fit either an iPhone or an iPad, we simply call one SoftLayerOnBlack~iphone.png and call the other one SoftLayerOnBlack~ipad.png. With those two images in our application bundle, we let the system choose which image to use with a simple line of code:
UIImage* image = [UIImage imageNamed: @"SoftLayerOnBlack.png"];
In addition to device-specific resource loading, iOS also included device-specific runtime checks. With these runtime checks, we’re able to create conditional code paths depending on the underlying device type:
if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) { // The device is an iPad running iOS 3.2 or later. } else { // The device is an iPhone or iPod touch. }
These building blocks allow for a great deal of flexibility when it comes to creating a universal iOS application. Both techniques enable simple support based on what device is running the application, but they’re used in subtly different ways. With those device-specific tools, developers are able to approach their universal applications in a couple of distinct ways:
Device-Dependent View Controller:
If we want users on the iPhone and iPad applications to have the same functionality but have the presentation tailored to their specific devices, we would create separate iPhone and iPad view controllers. For example, let’s look at how our Object Storage browser appears on the iPhone and the iPad in SoftLayer Mobile:
We want to take advantage of the additional real estate the iPad provides, so at runtime, the appropriate view controller is be selected based on the devices’ UI context. The technique would look a little like this:
@implementation SLMenuController ... - (void) navigateToStorageModule: (id) sender { UIViewController<SLApplicationModule> *storageModule = nil; if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) { storageModule = [SLStorageModule_iPad storageModule]; } else { storageModule = [SLStorageModule storageModule]; } [self navigateToModule: storageModule]; } ... @end
“Universal” View Controller
In other situations, we didn’t need for the viewing experience to differ between the iPhone and the iPad, so we used a single view controller for all devices. We don’t compromise the user experience or presentation of data because the view controller either re-scales or reconfigures the layout at runtime based on screen size. Take a look at the “About” module on the iPhone and iPad:
The code for the universal view controller of the “About” module looks something like this:
@implementation SLAboutModuleNavigationViewController … - (id) init { self = [super init]; if (self) { _navigationHidden = YES; _navigationWidth = [[UIScreen mainScreen] bounds].size.width * 0.5; } return self; } … @end
There are plenty of other iOS features and tricks in the universal SoftLayer Mobile app. If you’ve got a SoftLayer account and an iOS devices, download the app to try it out and let us know what you think. If you were a SoftLayer Mobile HD user, do you notice any significant changes in the new app from the legacy app?
-Pawel
P.S. If you’re not on iOS but you still want some SoftLayer love on your mobile device, check out the other SoftLayer Mobile Apps on Android and Windows Phone.
