Sofa's blog about design, code Ampersand everything else.

« Previous Interning At Sofa Thursday the 28th of May, 2009 Gameboards and GUIs Next »

Cocoaheads Presentation 

by Klaas Pieter Annema

Yesterday I talked about iPhone development and our latest application during CocoaHeads Amsterdam.

To be able to graduate I had to show that I am able to hold a presentation about a product in a corporate environment. Because everybody here at Sofa already knows what products I worked on and because we're not really a corporate environment, it felt useless to do the presentation for my colleagues. So I arranged that I could give it during CocoaHeads Amsterdam.

My presentation was about two things; general iPhone development and a user interface demo of our new iPhone application: Cards. You know the one I couldn't talk about in my previous post. Here are the slides:

View Controllers

The first thing I talked about were view controllers. View controllers are the base of almost all iPhone applications. View controllers are extremely integrated into the iPhone, it's almost impossible to write a normal application without them. Luckily, they're also pretty easy to learn.

View controllers give you a lot of flexibility, but also restrict you in some ways. They're powerful because they allow view customization at a lot of points in time. View controllers also have some restrictions, the most important one is that it's not easy to use them to show non-fullscreen views. Apple's method to present view controllers all assume the view will be fullscreen. If you want to manage a non-fullscreen view hierarchy with a custom view controller, you'll have to call all the methods, that make using view controllers so powerful, yourself.

The methods I'm talking about can be divided in two groups. Methods that are meant to show the view and methods that are meant to hide it (Note: Apple's grouping is better, but I used these for presentational purposes).

Showing

  • - (void)loadView
  • - (void)viewDidLoad
  • - (void)viewWillAppear:(BOOL)animated
  • - (void)viewDidAppear:(BOOL)animated

Hiding

  • - (void)viewWillDisappear:(BOOL)animated
  • - (void)viewDidDisappear:(BOOL)animated

Basically the first two methods are for programmatically creating your views or customizing them after they're loaded from nib. The second two are for customizing your view before or after it's shown. A sample usage could be to setup a view for animation in viewWillAppear: and to actually run the animation in viewDidAppear: The ‘Hiding’ methods can be used to tear down anything. You could, for example, remove notifications.

After that I showed some simple animations of the actual showing and disappearing of views using a normal view controller and a navigation controller. I also explained a bit about how navigation controllers are stacks and how these work. Both explanations are outside the scope of this post, if you want to learn about any of these, take a look at the documentation.

URL Requests

The second part of iPhone development I talked about is delivering content to your application. There are two ways of doing this. Bundle it in your application and/or use Apple's frameworks to get information from the phone or get it from the cloud. For me, NSURLRequest has helped a lot with the latter.

I used two examples to show how NSURLRequest works. One to show how to do a HTTP POST request and the other to show how to fetch a UIImage from the web. You could use the code snippets in my presentation, but to make your live a bit easier I've also created a sample application that fully implements both examples.

Cards

An image of the Cards icon.

The last thing I talked about and probably the reason why you are still reading this, is our latest application: Cards.
Warning: everything I show from this point on, including the icon and the name is work in progress and can still change. The application has not been released and we cannot tell when it will. We are not in any way associated with the Cards application that is already available in the App Store.

Cards is the application I talked about in my previous blog post. It's the application that learned me an incredible amount about creating user interfaces and the time it takes to build them. During my presentation I tried to explain why it takes that long and where that time is spent. Because I can't actually show a demo here, I'll use some screenshots to try and explain it again.

An image of the export data button One of the best examples is this button. It looks like and is a perfectly normal button, until you touch it. When touched the iPhone will begin working on formatting all your data into a format that can be send to the user. This can take a lot of time and we needed a way to show that the application is working, without blocking the user in any way.

An image of an animated export data button This is the result of that action a simple progress spinner that animates into the button. Now if you see this, you might think it's easy to implement. And it is if you have an example you can copy.

The hardest thing about creating a custom user interface like this is that you don't know if it'll work. A photoshop mockup is a great way to pre-visualize your user interface, but it's not interactive. You cannot test if a user interface works, without actually implementing it. And that's exactly where most of the time is spent when innovating. You keep re-implementing until you have the perfect solution.

Just to make what I said even clearer, the entire Cards user interfaces has been overhauled a total of three times. I had to re-implement almost every screen again. Although we pretty much nailed the interaction the first time around, we were never happy with the way it looked. So every time we went back to the drawing board designing and implementing most of the screens from scratch.

So I hope I made it a bit clearer why it takes so long to create our user interfaces. And I hope I made you anxious to start using Cards which will be released in the near future.

 

This is an archived version of the Sofa site