One option is to replace the standard camera controls with a custom interface, but that’s a whole lot of work if you just want to prevent the user from taking a photo with the front camera. Fortunately there’s another option: put a transparent button over the “switch camera” button, which will intercept touch events and show an alert dialog. It sounds simple, but as you’ll see there are a few tricks to actually getting this to work.

We’re going to use UIImagePickerController’s cameraOverlayView property to add our button to the view hierarchy. We can’t simply provide a UIButton object though. In the latest iOS SDK, cameraOverlayView is automatically resized to fill the entire screen, while we only want to cover a small corner of it. Instead, we’re going to put the button inside a UIView subclass that will be used for layout and a few other tasks. Go ahead and create this UIView subclass in your project, call it ELCCameraOverlayView, and delete any methods the Xcode template includes by default.

We’ll need a button, so let’s start by giving our new subclass a UIButton instance variable named _button with a corresponding button property. Declare this as you’d declare any synthesized property, but let’s override the default setter method to also add it to the view hierarchy.

- (void)setButton:(UIButton *)button;
{
    if ( _button != button )
    {
        [_button removeFromSuperview];
        [_button release];
        _button = [button retain];
	if ( button != nil )
        	[self addSubview:button];
    }
}

You might create the button in another class (such as a view controller) and assign it to our custom class, but you can also create a standard button in your initWithFrame: method. Note that we still have to call addSubview: here as we’re not using the property accessor method (which is discouraged in init methods).

- (id)initWithFrame:(CGRect)frame;
{
    if ( ( self = [super initWithFrame:frame] ) )
    {
        _button = [[UIButton alloc] initWithFrame:CGRectMake( 240.0f, 0.0f, 80.0f, 80.0f )];
        [self addSubview:_button];
    }
 
    return self;
}

With the button in place, let’s move on to intercepting touch events which would normally go to the “switch cameras” button. We can do this by overriding the UIView methods which are called to determine if an event occurred within a view’s frame or not. Just check to see if the event took place within the button’s frame rectangle.

- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event;
{
    if ( [super hitTest:point withEvent:event] == self.button )
        return self.button;
 
    return nil;
}
 
- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event;
{
    if ( CGRectContainsPoint( self.button.frame, point ) )
        return YES;
 
    return NO;
}

It may seem like we’re almost done at this point. If you set the camera overlay view to an instance of this class you’ll see the “switch camera” button should no longer work, and if you give the button an action method you can pop up an alert message telling users not to use the front camera. However, if you rotate the phone to landscape mode, you’ll notice that while the “switch camera” button is re-positioned, our custom button is not! To see what I mean, try setting a custom background color on our button so you can see it on screen.

This is a tricky problem. Unlike UIViewController, our UIView subclass does not have any way of telling when the interface orientation is changed. This doesn’t even matter though, since UIImagePickerController doesn’t actually change its interface orientation, it simply re-arranges the camera buttons while remaining in UIInterfaceOrientationPortrait!

The way I’ve solved this problem is to use the accelerometer to determine the device orientation. It might sound complicated, but it’s actually not a lot of work. Start by adding a new instance variable _interfaceOrientation and property interfaceOrientation to your class, of type UIInterfaceOrientation. We’ll also override its setter method to call setNeedsLayout whenever its changed.

- (void)setInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation;
{
    if ( _interfaceOrientation != interfaceOrientation )
    {
        _interfaceOrientation = interfaceOrientation;
        [self setNeedsLayout];
    }
}

Now let’s move the button whenever the orientation changes, and implement the required UIAccelerometerDelegate method.

- (void)layoutSubviews;
{
    CGFloat width = CGRectGetWidth( self.button.frame );
    CGFloat height = CGRectGetHeight( self.button.frame );
 
    switch ( self.interfaceOrientation )
    {
        case UIInterfaceOrientationPortrait:
        case UIInterfaceOrientationPortraitUpsideDown:
            self.button.frame = CGRectMake( CGRectGetMaxX( self.bounds ) - width, 0.0f, width, height );
            break;
        case UIInterfaceOrientationLandscapeRight:
            self.button.frame = CGRectMake( CGRectGetMaxX( self.bounds ) - width, CGRectGetMaxY( self.bounds ) - height - 50.0f, width, height );
            break;
        case UIInterfaceOrientationLandscapeLeft:
            self.button.frame = CGRectMake( 0.0f, 0.0f, width, height );
            break;
    }
}
 
- (void)accelerometer:(UIAccelerometer *)accelerometer didAccelerate:(UIAcceleration *)acceleration;
{ 
	CGFloat x = -[acceleration x]; 
	CGFloat y = [acceleration y]; 
	CGFloat angle = atan2(y, x); 
 
	if ( angle >= -2.25f && angle <= -0.25f )
	{
        self.interfaceOrientation = UIInterfaceOrientationPortrait;
	}
	else if ( angle >= -1.75f && angle <= 0.75f )
	{
        self.interfaceOrientation = UIInterfaceOrientationLandscapeRight;
	}
	else if( angle >= 0.75f && angle <= 2.25f )
	{
        self.interfaceOrientation = UIInterfaceOrientationPortraitUpsideDown;
	}
	else if ( angle <= -2.25f || angle >= 2.25f )
	{
        self.interfaceOrientation = UIInterfaceOrientationLandscapeLeft;
	}
}

We’re almost done! Just make sure to start and stop the accelerometer in your init and dealloc methods.

- (id)initWithFrame:(CGRect)frame;
{
    if ( ( self = [super initWithFrame:frame] ) )
    {
        _interfaceOrientation = UIInterfaceOrientationPortrait;
        _button = [[UIButton alloc] initWithFrame:CGRectMake( 240.0f, 0.0f, 80.0f, 80.0f )];
 
        [[UIAccelerometer sharedAccelerometer] setDelegate:self];
        [self addSubview:_button];
    }
 
    return self;
}
 
- (void)dealloc;
{
    [[UIAccelerometer sharedAccelerometer] setDelegate:nil];
    [_button release];
    [super dealloc];
}

Finished! If you haven’t tested your overlay yet, you can add it to your UIImagePickerController as so.

UIImagePickerController *controller = [[UIImagePickerController alloc] init];
ELCCameraOverlayView *view = [[ELCCameraOverlayView alloc] initWithFrame:controller.view.frame];
 
[view.button addTarget:self action:@selector(selectFrontCamera:) forControlEvents:UIControlEventTouchUpInside];
 
controller.sourceType = UIImagePickerControllerSourceTypeCamera;
controller.cameraCaptureMode = UIImagePickerControllerCameraCaptureModePhoto;
controller.cameraDevice = UIImagePickerControllerCameraDeviceRear;
controller.delegate = self;
controller.cameraOverlayView = view;
 
[self.navigationController presentModalViewController:controller animated:YES];
[controller release];
[view release];

Don’t forget to provide the button’s action method. You could show an alert, for instance.

- (void)selectFrontCamera:(id)sender;
{
    NSString *title = NSLocalizedString( @"Front Camera Disabled", @"" );
    NSString *message = NSLocalizedString( @"The front camera does not have sufficient resolution.", @"" );
    NSString *button = NSLocalizedString( @"Okay", @"" );
    UIAlertView *alert = [[UIAlertView alloc] initWithTitle:title message:message delegate:nil cancelButtonTitle:button otherButtonTitles:nil];
 
    [alert show];
    [alert release];
}

I’ve uploaded the complete ELCCameraOverlayView class files here. Leave a comment if you have any questions!

While I know many of iCodeBlog’s readers are veteran developers, this tutorial (and many in this series) are going to be geared towards the more novice developer. This group is often overlooked when it comes to tutorials, and my hope is to help lay a solid foundation for them (in addition to honing the skills of the veteran developers). So, let’s dig in.

Introduction

Generally, when you make a “Hello World” project, the goal is to get the text “Hello World” to display on the screen or the console. On the iPhone/iPad, there are quite a few ways to display text on the screen (labels, text areas, text views, core text, etc…). Today we are just going to focus on drawing the text using a UILabel.

There are two ways to get a UILabel to display on the screen. The first is to use Apple’s Interface Builder tool. Interface Builder is an extremely handy tool for creating iOS interfaces visually. It supports drag and drop and allows you to configure all of the properties of each of the elements. While it is a great tool, I want to show you a bit what’s happening under the hood in code. It is important not to lean on Interface Builder as a crutch when creating interfaces as there are times when you will have to add UI elements manually. That being said, I will have an intro to Interface Builder tutorial up later in this series.

Creating The Project

Before we begin make sure you have read and understand the following tutorial:

Back To Basics – Getting Set Up For iOS Development

This tutorial will ensure that you have the proper environment set up for iOS development.

When you first launch XCode, you are prompted with a screen similar to this one:

To create a new project, simply click on Create a new XCode project. This will bring up a wizard guiding you through the initial project set up.

Built into XCode are several different project templates to be used as a base for the most common projects that you might want to create. Each one comes with some specific “boiler plate” code to quickly get you up and running.

We are going to start by clicking on View-based Application. This will give us enough code to have a simple view on the screen. A UIView is the simplest of display objects. Every other UI element that you draw on the screen will inherit from UIView. In the case of a view-based application, we are given a full screen blank view to start with. We can then add display objects as subviews.

After selecting View-based Application, click next. This screen will show some simple project options such as name, company identifier, and Device family.

Here’s a bit about each:

• Name: This is simply the name of the application. Don’t worry you are not bound to this and you can easily change the display name.
• Company Identifier This is unique id used to identify your application. It will be prepended to your project name to form the unique id that the app store uses. Identifiers are usually of the form com.companyName.projectName.
• Device Family: This will be either iPhone or iPad. You can always upgrade to universal later (tutorial to come).

The Files

Once your project has been created, you will have 6 files of interest (for this tutorial’s sake):

HelloiPhoneAppDelegate.h/m

The app delegate is the point of entry for your application. It’s a singleton class (meaning there is only one), and it is responsible for displaying the main window/view of the application. You generally want to keep this class pretty lean and offload the work somewhere else. It’s often a n00b mistake to want to work on your UI/logic in the app delegate. For this project, we are not going to touch it at all. Just note that it is what’s launching your main view.

MainWindow.xib

Xib files are to be used with Interface Builders. They are basically xml files that Interface Builder uses to represent a user interface. In this case the MainWindow.xib (pronounced nib), is responsible for loading up our Window and Main ViewController (HelloiPhoneViewController). The View Controller could have been loaded programmatically in the App Delegate, however Apple has chosen to load in using a nib in Interface Builder for this template. I’m not going to go into detail about that in this tutorial, but you can see for yourself by opening up MainWindow.xib and look under objects.

HelloiPhoneViewController

iOS development tends to really enforce Model-View-Controller design patterns. This is basically the idea of separating the view code from the model code (using the controller code as the glue). Generally, in iOS when you have a view controller, it has a corresponding nib file(the view) to go along with it. HelloiPhoneViewcontroller.xib is where you would drag and drop UI elements to customize the view using the Interface Builder tool. As I mentioned in the beginning, we are going to ignore this file and add our text manually.

The Code

Well, this has been quite a bit of talk just to get us to the simple code below. Open up the file HelloiPhoneViewController.m and find the method called - (void) viewDidLoad . This method fires automatically when the view is first loaded. Make sure to uncomment it if it’s commented out. Inside of this method, add the following code:

1
2
3
4
5
6
7
8
9
10
11

- (void)viewDidLoad {
    [super viewDidLoad];
 
    CGRect frame = CGRectMake(10, 10, 300, 25);
    UILabel *helloLabel = [[UILabel alloc] initWithFrame:frame];
    helloLabel.text = @"Hello iPhone!";
    helloLabel.textColor = [UIColor blueColor];
    helloLabel.textAlignment = UITextAlignmentCenter;
    [self.view addSubview:helloLabel];
    [helloLabel release];
}

Let’s break down this code:

Line 4: This creates a frame. Think of a frame as a box. The first two parameters are the starting x and y locations of the box, and the second two are the width and height of the box. Every display object you will create has a frame. It tells the device how big and where to draw a view.

Line 5: On this line we create a new label object. The alloc says “give me the memory large enough for a UIlabel” and the init initializes all of the view properties. You will never really see these two methods called apart from each other. We call one of the copy constructors of UILabel called initWithFrame. This allows us to pass in the view’s frame on initialization.

Lines 6-8: In these 3 lines, we configure various properties of a UILabel. The first is the actual text to be displayed, the second is the color of the text, and the third tells the text to center inside of it’s frame. There are quite a few options you can set with regards to any UI element and they can be found in the documentation for that particular object.

Line 9: This is where we actually get the label to display. All views are subviews of some other view (even your main view is a subview of the window). We are basically attaching our label to the main view to be drawn. Without this line, your label would never be seen.

Line 10: I don’t want to go too much into this right now, but The iOS platform (as of iOS versions < 5) doesn’t have garbage collection. What this means is, we need to handle our memory management ourselves. That being said, as a general rule, whenever you do an “alloc init” on an object, you must have a corresponding release call to give that memory back to the system. Otherwise, you have a memory leak. More to come on this.

Running The Application

OK, now that we have the code in place it’s time to run it in the simulator. To do this, select iPhone X.X Simulator in the dropdown at the very top of XCode (currently mine says 4.3). Then click the Run button. Your code will be compiled and the simulator will start. You should now see your _beautiful Interface_.

Well, it’s not much to look at, but try reading the documentation and adding some other interface elements to the view. Or, read the documentation for UILabel and change some of the properties.

If you have any questions or comments, feel free to leave them in the comments section of this post or send them to me on Twitter.

You can download the source code for this tutorial here.

Happy iCoding!

This post is part of an iOS development series called Back To Basics. You can keep up with this series through the table of contents, RSS feed, or Twitter.

This is my first foray into the AssetsLibrary Framework which was introduced with iOS 4.0. If you’re not already familiar with the framework, I highly suggest checking out both of these posts:

Asset Libraries and Blocks in iOS 4

Cloning UIImagePickerController using the Assets Library Framework

These should give you a solid picture of how to work with ALAssetLibrary, ALAssetGroup, and ALAsset.

One of the obvious changes I’ve made to the project is a reorganization of the code. Classes are broken out for clarity as you can see here:

Old Tree:

New Tree:

On major change to the project is how you present the new ELCImagePickerController. This is mainly due to an issue we uncovered with a redundant call to [super init] which was causing a substantial memory leak. Here’s the new way of showing the image picker:

ELCAlbumPickerController *albumController = [[ELCAlbumPickerController alloc] initWithNibName:@"ELCAlbumPickerController" bundle:[NSBundle mainBundle]];ELCImagePickerController *elcPicker = [[ELCImagePickerController alloc] initWithRootViewController:albumController];
 
[albumController setParent:elcPicker];
 
[elcPicker setDelegate:self];
 
ELCImagePickerDemoAppDelegate *app = (ELCImagePickerDemoAppDelegate *)[[UIApplication sharedApplication] delegate];
 
[app.viewController presentModalViewController:elcPicker animated:YES];
 
[elcPicker release];
 
[albumController release];

One interesting optimization I was able to make was on the loading of large albums which was previously taking several seconds. Since ALAssetGroup uses a block to enumerate assets, I just fire off a reloadTable call after a short delay:

// Show partial list while full list loads
 
[self.tableView performSelector:@selector(reloadData) withObject:nil afterDelay:.5];

Then when the block is finished enumerating, it’ll call reloadTable as well. On an album with roughly 1500 photos, it was pretty tough to reach the bottom of the tableview before the block finished enumerating. So this is a pretty decent solution to the issue. Originally, I experimented with lazy loading the assets as the user scrolled through the table, but ultimately wasn’t able to get the performance I wanted out of it.

This release of ELCImagePickerController should perform faster, and with a smaller memory footprint than before. I hope you enjoy it.

You can follow me on twitter @matt_tuzzolo or get in touch with us at http://www.elctech.com

ps. for an extra bonus, check out [ELCAsset toggleSelection];

Coming to you direct from Addison-Wesley Professional, which has published some of the leading books in the field, the Voices That Matter: iPhone Developers Conference is taking place October 16-17 in Philadelphia!

Take a look around at all the tech books you have on your physical and digital bookshelves. If you’ve been developing for the Mac, the iPhone and the iPad – chances are good that you rely on books by Steve Kochan, Erica Sadun, Aaron Hillegass and Jeff LaMarche. Even more, you probably follow the Tweets and blogs of folks like Graham Lee, Mike Lee, Matt Long and Chris Adamson. Wouldn’t it be great to meet and learn from these thought-leaders in person? Now you can at the Voices That Matter: iPhone Developers Conference!

You’ll acquire skills for mastering iOS development during a weekend of robust educational sessions. Our speakers are eager to share their knowledge, answer your questions and address your application needs. You’ll participate in interactive discussions that provide the perfect environment for an unbiased and effective learning experience.

SPECIAL SAVINGS! As someone that reads this blog, you can save $100 off the conference fee by providing priority code PHBLOGS when registering. Register Now!

Coupon Code: PHBLOGS

Apple’s done a great job of abstracting GPS, Cellular Triangulation, and Wifi Access Point location lookups into CoreLocation; making it extremely easy to determine the approximate location of your user regardless of their device and network connectivity. Additionally, Apple’s new iPhone Simulator finally supports CoreLocation as well. This significantly eases the process of testing your location code.

The first thing you’ll need to do is add the CoreLocation framework to your project. This is pretty straightforward. Command-Click on ‘Frameworks’ -> Add -> Existing Frameworks

Select ‘CoreLocation.framework’ and click ‘add’.

The class below implements the LocationManager delegate methods required to get the user’s location. You can just as easily implement the LocationManagerDelegate protocol in your AppDelegate or elsewhere in your App. Though I’ve found that having this class makes it super easy to drop in location support into new projects instead of having to cut/paste delegate methods (ugly). Anyway. Take a look:

//
//  LocationGetter.h
//  CoreLocationExample
//
//  Created by Matt on 9/3/10.
//  Copyright 2009 iCodeBlog. All rights reserved.
//
 
#import <uikit/UIKit.h>
#import <coreLocation/CoreLocation.h>
 
@protocol LocationGetterDelegate
@required
- (void) newPhysicalLocation:(CLLocation *)location;
@end
 
@interface LocationGetter : NSObject  {
    CLLocationManager *locationManager;
    id delegate;
}
 
- (void)startUpdates;
 
@property (nonatomic, retain) CLLocationManager *locationManager;
@property(nonatomic , retain) id delegate;
@end

Notice that we’re defining our own protocol with a method that takes the new CLLocation as a parameter. We’ll be implementing that delegate method in a minute. Now for the class

//  LocationGetter.m
//  CoreLocationExample
//
//  Created by Matt on 9/3/10.
//  Copyright 2009 iCodeBlog. All rights reserved.
//
 
#import "LocationGetter.h"
#import <coreLocation/CoreLocation.h>
 
@implementation LocationGetter
 
@synthesize locationManager, delegate;
BOOL didUpdate = NO;
 
- (void)startUpdates
{
    NSLog(@"Starting Location Updates");
 
    if (locationManager == nil)
        locationManager = [[CLLocationManager alloc] init];
 
    locationManager.delegate = self;
 
    // locationManager.distanceFilter = 1000;  // update is triggered after device travels this far (meters)
 
    // Alternatively you can use kCLLocationAccuracyHundredMeters or kCLLocationAccuracyHundredMeters, though higher accuracy takes longer to resolve
    locationManager.desiredAccuracy = kCLLocationAccuracyKilometer;
    [locationManager startUpdatingLocation];
}
 
- (void)locationManager:(CLLocationManager *)manager didFailWithError:(NSError *)error
{
    UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Error" message:@"Your location could not be determined." delegate:nil cancelButtonTitle:@"OK" otherButtonTitles: nil];
    [alert show];
    [alert release];
}
 
// Delegate method from the CLLocationManagerDelegate protocol.
- (void)locationManager:(CLLocationManager *)manage didUpdateToLocation:(CLLocation *)newLocation fromLocation:(CLLocation *)oldLocation
{
    if (didUpdate)
        return;
 
    didUpdate = YES;
    // Disable future updates to save power.
    [locationManager stopUpdatingLocation];
 
    // let our delegate know we're done
    [delegate newPhysicalLocation:newLocation];
}
 
- (void)dealloc
{
    [locationManager release];
 
    [super dealloc];
}
 
@end

CoreLocation gives you a few options for the accuracy of the user’s location. The more accurate the measurement, typically the longer it takes LocationManager to call it’s delegate method didUpdateToLocation. It’s just something to keep in mind when deciding what level of accuracy to use.

Next we need to actually invoke this code and start getting location updates. I usually do this in my AppDelegate’s didFinishLaunchingWithOptions, though you could also do it in viewDidLoad somewhere if you didn’t need to know the user’s location on app startup.

 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
 
    UIActivityIndicatorView *spinner = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhiteLarge];
	spinner.center = CGPointMake(self.viewController.view.frame.size.width / 2, self.viewController.view.frame.size.height / 2);
    [spinner startAnimating];
 
    [viewController.view addSubview:spinner];
 
    // get our physical location
    LocationGetter *locationGetter = [[LocationGetter alloc] init];
    locationGetter.delegate = self;
    [locationGetter startUpdates];
 
    // Add the view controller's view to the window and display.
    [window addSubview:viewController.view];
    [window makeKeyAndVisible];
 
    return YES;
}

Notice that I’ve set locationGetter’s delegate to self. So in your .h, make sure to add LocationGetterDelegate to the interface.

//
//  CoreLocationExampleAppDelegate.h
//  CoreLocationExample
//
//  Created by Matt Tuzzolo on 9/3/10.
//  Copyright iCodeBlog 2010. All rights reserved.
//
 
#import <uikit/UIKit.h>
#import "LocationGetter.h"
 
@class CoreLocationExampleViewController;
 
@interface CoreLocationExampleAppDelegate : NSObject  {
    UIWindow *window;
    CoreLocationExampleViewController *viewController;
    CLLocation *lastKnownLocation;
}
 
@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) IBOutlet CoreLocationExampleViewController *viewController;
@property (nonatomic, retain) CLLocation *lastKnownLocation;
 
@end

I’ve also added a CLLocation *lastKnownLocation that we’ll use in our delegate method (which comes next):

# pragma mark -
# pragma mark LocationGetter Delegate Methods
 
- (void)newPhysicalLocation:(CLLocation *)location {
 
    // Store for later use
    self.lastKnownLocation = location;
 
    // Remove spinner from view
    for (UIView *v in [self.viewController.view subviews])
    {
        if ([v class] == [UIActivityIndicatorView class])
        {
            [v removeFromSuperview];
            break;
        }
    }
 
    // Alert user
    UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Location Found" message:[NSString stringWithFormat:@"Found physical location.  %f %f", self.lastKnownLocation.coordinate.latitude, self.lastKnownLocation.coordinate.longitude] delegate:nil cancelButtonTitle:@"OK" otherButtonTitles: nil];
    [alert show];
    [alert release];
 
    // ... continue with initialization of your app
}

This last piece takes care of storing the location, removing the spinner, and firing off an alert. If this was your code, you’d probably want to re-enable any UI elements that you’ve disabled and let the user start using your app.

Now build and run your app and you should see:

That’s it!

Here’s the Example Project for the post.

For those of you who don’t know me yet, my name is Matt Tuzzolo (@matt_tuzzolo). This is my first iCodeBlog post. I hope you enjoyed it.

Push notifications solved many of the issues associated with background processing. For example, when quitting the AIM application, the server could keep you logged in and send you a push notification when a new message arrived. You could then tap on a View button that would launch the app.

This solution is great and all, but it still requires that you have an active internet connection. As of iOS4, Apple has introduced a new type of notification that can be scheduled to fire within the device itself. It requires no complicated server programming, or additional configuration with iTunes. I am talking about Local Notifications.

Local notifications can be scheduled on the user’s iDevice to fire at any given time; you can even set them to be recurring. Today, we will explore these notifications and I will provide you with a simple example of how to schedule, view, and handle local notifications. Here is a quick screenshot of the project that we are going to create (note I am using the iPhone 4 simulator).

The project will allow a user to schedule a location notification to fire off at a given date. Using the text field, they are also able to specify some text for the notification. The table view below displays a list of all of the currently scheduled location notifications within the application.

So, by now (if you are an avid iCodeBlog reader), you are already a killer iPhone dev and I can rush through the stuff that is not related to the notifications. I will try to provide links to tutorials about sections that I rush through as well.

1. Create a View-Based Application

We will be using this as our starting point. Check out this tutorial if you are unfamiliar with doing this. Name the project Notifier.

2. Create All Properties and Dummy IBActions

This is usually a good first step when tackling an application like this. Let’s get everything set up in the .h and .m files so we only have to visit Interface Builder Once. Here is what our NotifierViewController.h file looks like.

@interface NotifierViewController : UIViewController<UITableViewDelegate,UITableViewDataSource> {
	IBOutlet UITableView *tableview;
	IBOutlet UIDatePicker *datePicker;
	IBOutlet UITextField *eventText;
}
 
@property (nonatomic, retain) IBOutlet UITableView *tableview;
@property (nonatomic, retain) IBOutlet UIDatePicker *datePicker;
@property (nonatomic, retain) IBOutlet UITextField *eventText;
 
- (IBAction) scheduleAlarm:(id) sender;
 
@end

Seems clear enough. We have 3 UI elements that we care about and one action. One thing to note is, your class should implement the UITableViewDelegate and UITableViewDataSource protocols. This is because we will be displaying a tableview containing all of the scheduled alarms.

Now, do all of the necessary steps in your .m file. This includes memory management for the IBOutlets and creating a dummy method for the scheduleAlarm IBAction. Your .m file should look something like this. Note: I have omitted import statements because my syntax highlighter wasn’t digging them.

@implementation NotifierViewController
 
@synthesize datePicker,tableview, eventText;
 
- (IBAction) scheduleAlarm:(id) sender {
 
}
 
- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
}
 
- (void)viewDidUnload {
	datePicker = nil;
	tableview = nil;
	eventText = nil;
}
 
- (void)dealloc {
    [super dealloc];
}
 
@end

Now it’s time to build our interface. Open Interface builder and construct an interface like this.

If you want my super sweet green button image, here it is:

After creating the interface, make sure you hook up all of the UI components to their corresponding IBOutlets and hook up the touchUpInside: method of the button the your scheduleAlarm: IBAction. For more info on hooking up IBOutlets, check out this tutorial.

3. Implement UITableViewDelegate and UITableViewDataSource Delegate methods to List Currently Scheduled Local Notifications

It may seem weird to implement the code to display the notifications before the code that creates them, however I like this approach better. This way, once we schedule the notifications, they automagically appear in our table. Add the following code to your .m file.

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    // We only have one section
    return 1;
}
 
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    // Return the number of notifications
    return [[[UIApplication sharedApplication] scheduledLocalNotifications] count];
}
 
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
 
    static NSString *CellIdentifier = @"Cell";
 
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier] autorelease];
    }
 
    // Get list of local notifications
    NSArray *notificationArray = [[UIApplication sharedApplication] scheduledLocalNotifications];
    UILocalNotification *notif = [notificationArray objectAtIndex:indexPath.row];
 
    // Display notification info
    [cell.textLabel setText:notif.alertBody];
    [cell.detailTextLabel setText:[notif.fireDate description]];
 
    return cell;
}

OK, finally some “real” code. Most of this code should seem pretty straight forward. If not, check out this tutorial on UITableViews.

So, the new code here is dealing with retrieving a list of scheduled notifications. Calling the scheduledLocalNotifications method of UIApplication will return an NSArray of all notifications scheduled by the current app. We just index into this array and grab each notification.

Finally, we are displaying the alertBody (text that displays when the notification fires) and the fireDate (date and time when the notification will display) in the tableview cell.

4. Scheduling Notifications

And now for the moment you’ve been waiting for… OK, probably not, but definitely the most exciting (least boring) part of this tutorial. Let’s implement that scheduleAlarm: IBAction that you framed out earlier. Update your .m file to contain the following code.

- (IBAction) scheduleAlarm:(id) sender {
    [eventText resignFirstResponder];
 
    NSCalendar *calendar = [NSCalendar autoupdatingCurrentCalendar];
 
    // Get the current date
    NSDate *pickerDate = [self.datePicker date];
 
    // Break the date up into components
    NSDateComponents *dateComponents = [calendar components:( NSYearCalendarUnit | NSMonthCalendarUnit |  NSDayCalendarUnit )
												   fromDate:pickerDate];
    NSDateComponents *timeComponents = [calendar components:( NSHourCalendarUnit | NSMinuteCalendarUnit | NSSecondCalendarUnit )
												   fromDate:pickerDate];
    // Set up the fire time
    NSDateComponents *dateComps = [[NSDateComponents alloc] init];
    [dateComps setDay:[dateComponents day]];
    [dateComps setMonth:[dateComponents month]];
    [dateComps setYear:[dateComponents year]];
    [dateComps setHour:[timeComponents hour]];
	// Notification will fire in one minute
    [dateComps setMinute:[timeComponents minute]];
	[dateComps setSecond:[timeComponents second]];
    NSDate *itemDate = [calendar dateFromComponents:dateComps];
    [dateComps release];
 
    UILocalNotification *localNotif = [[UILocalNotification alloc] init];
    if (localNotif == nil)
        return;
    localNotif.fireDate = itemDate;
    localNotif.timeZone = [NSTimeZone defaultTimeZone];
 
	// Notification details
    localNotif.alertBody = [eventText text];
	// Set the action button
    localNotif.alertAction = @"View";
 
    localNotif.soundName = UILocalNotificationDefaultSoundName;
    localNotif.applicationIconBadgeNumber = 1;
 
	// Specify custom data for the notification
    NSDictionary *infoDict = [NSDictionary dictionaryWithObject:@"someValue" forKey:@"someKey"];
    localNotif.userInfo = infoDict;
 
	// Schedule the notification
    [[UIApplication sharedApplication] scheduleLocalNotification:localNotif];
    [localNotif release];
 
	[self.tableview reloadData];
}

So, most of the explanation is in the comments. I’ll talk you through some of the less obvious stuff. The first tricky area is dealing with the NSCalendar. We just use the NSCalendar object to break up the date into components. Note: This demo does not require that we break the date up into components. You could have just as easily fed the date from the date picker into the notification fireDate. The reason that I’m showing you how to break it down is, you may have some sort of custom date logic to work with and this makes things much easier in the future.

Another important bit of code is where we set the alertBody or the notification. In this example we set it to the text that the user entered into the text field. You can set this to whatever you like.

The other thing I want to mention is the infoDict in the code. This dictionary is your chance to associate some additional information with the alert. For example, if you are using this alert in a game like We Rule to notify you when a crop is ready. You might want to set a key and value that contains the id of the crop that has completed. For now, we just set some arbitrary values and you can ignore them if you like.

After actually scheduling the notification, we just reload the tableview to get it to display immediately.

5. Handling Notifications After They Fire

The last piece of this puzzle is determining what to do when a notification fires. Fortunately, this step is very easy and handled inside of the appDelegate. When a notification fires, there are one of two situations. 1. The app is running and 2. The app is not running (or running in the “background”) .

Open up your app delegate .m file and add the following code.

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
 
    // Override point for customization after application launch.
 
    // Add the view controller's view to the window and display.
    [window addSubview:viewController.view];
    [window makeKeyAndVisible];
 
    application.applicationIconBadgeNumber = 0;
 
    // Handle launching from a notification
    UILocalNotification *localNotif =
    [launchOptions objectForKey:UIApplicationLaunchOptionsLocalNotificationKey];
    if (localNotif) {
        NSLog(@"Recieved Notification %@",localNotif);
    }
 
    return YES;
}
 
- (void)application:(UIApplication *)app didReceiveLocalNotification:(UILocalNotification *)notif {
    // Handle the notificaton when the app is running
    NSLog(@"Recieved Notification %@",notif);
}

The first thing we see here is the application badge number is getting set to 0. Whenever a notification fires, it will increase the badge count on the application. Next, we handle the case when the application launches from a notification. This happens when the user presses the view button on the notification. For now, we just NSLog the data, but you should handle the notification how you see fit for your app.

Finally, we implement the didReceiveLocalNotification method. This method is required if you want to handle notifications at all in your app. You will see this method fire when the app is running and you receive a local notification. When the app is running, you will not see the UIAlertView show up with the notification data.

And there you have it! The complete lifecycle of a local notification. You may download the source for this tutorial below. If you have any questions, feel free to post them in the comments section or write them to me on Twitter.

Notifier Source Code

]]> http://icodeblog.com/2010/07/29/iphone-programming-tutorial-local-notifications/feed/ 84 http://icodeblog.com/2010/04/22/how-to-integrate-google-analytics-tracking-into-your-apps-in-7-minutes/ http://icodeblog.com/2010/04/22/how-to-integrate-google-analytics-tracking-into-your-apps-in-7-minutes/#comments Thu, 22 Apr 2010 15:02:06 +0000 http://icodeblog.com/?p=1906 Ok, maybe that title is +- 3 minutes depending on how efficient you are ;).

What?

So, why would you want to integrate Google Analytics into your iPhone application. Duh, for the same reasons you would integrate it into your site. Google has extended their killer analytics platform to include mobile devices including the iPhone and Android devices.

The analytics API gives you some very powerful options to get as nitty gritty as you would like in your application tracking.

Why?

Uhh, because stats are freakin sweet. Even if you don’t have a million+ downloads of your app, it is still interesting to know how your users are using your application. Being able to track every single action made by a user is priceless when thinking about the direction of your app including what features to add, improve, or scrap.

Imaging spending all of your time on some complex feature to find out that only 1% of your users even care about that feature. How could you know that only 1% of your users actually care about that feature unless you are doing some sort of tracking.

So before you add that super duper all in one end all be all 1337 feature to your app, consider reading the rest of this tutorial and add stat tracking first. It is quick and painless and I promise that it will be totally worth it.

Configuring your Google Analytics Account

Google Analytics is a free server provided by Google. If you dont already have an account, you can sign up for one with your existing Gmail account. http://google.com/analytics. Sign up and log in.

The first thing you will want to do is Add a new Website Profile.

On the next page:

• Select Add a Profile for a new domain
• Enter in some URL – This doesn’t really matter since google doesn’t use it to identify your app. A good convention is iphone.yoursite.com or appname.yoursite.com so that you know these stats are for your iPhone app.
• Select your country and timezone
• Click Finish

Pretty simple… On the next screen, make sure you copy the Web Property ID. This number (begins with UA) is what we will be using to uniquely identify your application.

That’s all for the web side of things! Now on to the iPhone part.

Download the Google Analytics Library and Add It To Your Application

This could not be easier. Head on Over to http://code.google.com/apis/analytics/docs/tracking/mobileAppsTracking.html . They explain much of the steps so you could read the rest there, but I will lay them out in detail here with screesnhots. Download the Analytics SDK for iPhone and extract it.

There are 2 files that are important. Drag both files from the Library folder into your XCode project. These files are GANTracker.h and libGoogleAnalytics.a.

When XCode pops up the confirmation box, make sure that you check the box that says “Copy items into destination group’s folder (if needed)”. This will ensure that the code gets place in your project directory.

Include CFNetwork and Link Against the sqlite framework

The google analytics framework requires the use of CFNetwork (for interent connection detection) and the sqlite framework (most likely to store events when the user does not have internet).

Let’s start by adding CFNetwork to the project. Right click on the frameworks folder and select Add -> Existing Frameworks. Next, select CFNetwork.framework from the list and click Add.

Now we need to link the project against libsqlite3.0.dylib. To do this Click Project -> Edit Active Target “<project name>” where <project name> is the name of your XCode project.

Next, click the + button at the bottom to bring up the library picker. Select libsqlite3.0.dylib and click Add

Including and Initializing the Tracker

Since the Analytics tracker is a singleton class, we only have to initialize it once and the rest of the application can use the same instance.

Let’s start by opening up the app delegate and adding the code to import the Google Analytics framework.

#import "GANTracker.h"

Now you need to initialize the tracker… Make sure you have the UA number handy that you received from Google earlier. Add the following code to you applicationDidFinishLaunching method.

[[GANTracker sharedTracker] startTrackerWithAccountID:@"UA-15609865-3"
				dispatchPeriod:10
				delegate:nil];

Make sure you replace my UA number with yours. The dispatchPeriod variable tells the tracker how often to report back to Google. Google suggests using 10 seconds in their example so we’ll stick to that.

Tracking Pageviews and Custom Events

Google gives you 2 different ways to track how your users use the application. The first way is via pageviews. Pageviews work just like they do in the browser as if the user navigated to a new page in your website. Some examples of when to use pageview are when you have a tab interface or a flipside view controller. I would not suggest using a pageview every time the user performs an action such as click a button.

The second way is via custom events. These are really cool. With custom events, you can easily see HOW your users are using your application. Examples of events are button clicks, typing in a textbox, submitting high scores, etc…

We will see an example of implementing each of these methods and take a look at how they appear inside of the Google Analytics website.

Pageview method

Here is an example of a pageview when the user first launches the app. Put this code inside of your applicationDidFinishLaunching method.

NSError *error;
if (![[GANTracker sharedTracker] trackPageview:@"/app_launched"
                                        withError:&error]) {
     // Handle error here
   }

Note that the “app_launched” is essentially our page name similar to index.html or aboutus.php. You can add this code anywhere in you app that you want to add a page view. Make sure you include the GANTrack.h file and change the pagename for each new location.

Event method
Here is an example of an event that gets fired when the user presses a Save button.

- (IBAction) saveTheWorld:(id) sender
{
	NSError *error;
	if (![[GANTracker sharedTracker] trackEvent:@"button_click"
				             action:@"save_the_world"
					      label:@"my_label"
					      value:-1
					  withError:&error]) {
		// Handle error here
	}
}

What’s really cool about event tracking is you have 3 levels of customization. You have the category, the action, and the label. How you organize it is up to you, but make sure the grouping makes sense. In the example above, I will use the category “button_click” every time a user clicks any button. The action will determine which button was clicked (in this case, it’s “save_the_world”). Finally, the label is just another level. I’d suggest using the UDID of the users device.

Now that we have implemented our code, let’s take a look inside of our Google Analytics account and see what the stats look like.

This is just some of our sample data from another app. Notice the interface is exactly the same as it is when you are tracking website statistics. It shows you unique visits as well as pageviews. You get all of the advanced reporting too including time spent on each “page”.

Now we take a look at events. To find the actions click Content -> Event Tracking inside of your Google Analytics Page.

In the above screenshot, we see tracking for an event called “clap”. It shows us the number of times the users “clapped” within a given day.

Conclusion

One last thing I want to mention before concluding this tutorial. Google Analytics stats are 1 day behind. What this means is, you won’t see your stats appear immediately. So, before you comment here because you don’t see the stats appearing, please please please wait one day and check your stats again. That is all

Be one of the cool kids, follow me on Twitter.

Happy iCoding

The problem

Assuming you are already familiar with Objective-C and Cocoa Touch, today I’ll be discussing how to create a productivity application which can read and write multimedia files – custom format files which will be a mixture of image and text data. If you look at the most of the Apple’s productivity applications you’ll notice they all use bundles as their output format. For those not familiar with the concept – the bundle is an actual file directory, which then holds different files, but to the user it’s presented as a single file – easier to copy around and in general to work with. I am going to be doing the same today by making my example application create different text and image files and then zip them together in a single file – this way the user could then copy this single file over trough iTunes via the file sharing feature.

ZipArchive overview

The star of today’s article is ZipArchive – the Objective-C library I’m going to use for compressing and uncompressing my custom zip files. It is completely free and you can download it from : http://code.google.com/p/ziparchive/

To use ZipArchive I download the library and add it to my Xcode project.

Now that I added the ZipArchive sources I am almost ready to create and extract zip archives. In fact ZipArchive uses the libz framework, so I need to add this framework to my XCode project too. Add->Existing Frameworks and I choose “libz.1.2.3.dylib”

ZipArchive is very straightforward to use, also because it offers just a handful of methods, let’s have a look together at what’s inside:

Creating a ZipArchive instance is super simple.

#import "ZipArchive.h"
 
ZipArchive* zip = [[ZipArchive alloc] init];

Create zip archives

Call CreateZipFile2: to create an empty zip archive file, or call CreateZipFile:Password: to create an empty zip archive which is password protected (the latter makes creating encrypted files really easy). NB: If your application is creating password protected zip files in general it uses encryption, so you would need to tick the encryption checkbox when you submit it to the App Store.

Once you create a zip archive you can add as many files as you like by calling addFileToZip:newname: and when you are done call CloseZipFile2. Or as they say “a line of code is worth thousand words”:

ZipArchive *zip = [[ZipArchive alloc] init];
 
[zip CreateZipFile2:@"archive.zip"];
 
[zip addFileToZip:@"photo1.png" newname: @"photo1.png"];
 
[zip addFileToZip:@"photo2.png" newname: @"photo2.png"];
 
[zip addFileToZip:@"../../test/IMG_0001.png" newname: @"photo3.png"];
 
[zip CloseZipFile2];

Now I really don’t think creating a zip archive gets any simpler than that. All of those methods return a boolean result, which you can check to see if the operation was successful, so you can implement also your error handling code along. To create a password protected file call:

[zip CreateZipFile2:@"archive.zip" Password: @"plaintextpassword"];

(I should really admit that ZipArchive’s the naming convention is strange: some names are CamelCase: , some camelCase:, some camel:Case: , some camelCase:case:, and sometimes a capital in the middle of the word “overWrite” – and this is a class with only 8 methods :)

Extracting zip archives

Extracting files from a zip archive is as simple as creating one. You open an archive using UnzipOpenFile: or UnzipOpenFile:Password: Now pay attention to the result of that operation- if the file exists, but UnzipOpenFile: returns NO, it might mean the archive is password protected. If the archive file has been successfully opened it means ZipArchive can read the contents and you can proceed to extracting the files to a destination of your choice by using UnzipFileTo:overWrite: If you pass YES as the second argument, the extracting operation will overwrite files at the target location.

ZipArchive *zip = [[ZipArchive alloc] init];
 
if ( [zip UnzipOpenFile:@"archive.zip"] ) {
 
[zip UnzipFileTo:@"tempFolder" overWrite:YES];
 
}
 
[zip UnzipCloseFile];

To gain a bit more control over what ZipArchive does you can set a class of yours as a delegate, here is the ZipArchiveDelegate protocol:

@protocol ZipArchiveDelegate <NSObject>
 
@optional
 
-(void) ErrorMessage:(NSString*) msg;
 
-(BOOL) OverWriteOperation:(NSString*) file;
 
@end

Now that you know everything there is to know about ZipArchive, I can start with my super duper productivity application …

Creating simple custom file format with ZipArchive

I’ll first create a class called CustomFile, which will be my data model – it will be responsible for reading and writing data to the file system. I’ll need few ivars and properties for them:

NSString* filePath;
 
//the file contents
 
NSString* title;
 
NSString* text;
 
UIImage* photo;

In filePath I’ll keep the absolute path to the location the file will be written to or red from. The rest of the ivars will be my file contents – 2 texts and 1 image. Now let me explain what this custom file format will be about – I will want to store in my files short articles – much similar to blog posts – my files will hold the title, the full text and a photo (if attached) of an article.

Some of you will ask why do I need a custom format for my files … can’t I just save a text file with the text and the image somewhere on my disk and then save their names in a sqlite database and done ? Nope, think trends, think iPad / iPhone 4.0 and think file sharing: as I said things are moving beyond apps which sole purpose is to amuse their users for about 5 to 10 minutes. If my app saves separate files of text and images, when the user wants to copy them from his iPad to his wife’s iPad he might miss one of those files and that will ruin the integrity of his document… So let’s look further what I have in mind:

My model’s initializer:

-(id)initWithFilePath:(NSString*)initPath
 
{
 
self = [super init];
 
if (self != nil) {
 
//set the file path
 
if (initPath != nil) {
 
self.filePath = initPath;
 
}
 
}
 
return self;
 
}

Nothing special, just making sure every instance of the model is related to a file path. So since all the file contents are also class properties, I can use them to fill in my file’s instance with content and then I will need a save method to save to the file system. And what I’d need is create a temp folder, save all my data as files there, and them zip’em! If you have a look in the code below, now that you know how to use ZipArchive the code is actually very straightforward:

-(void)saveFile
 
{
 
//create a temp directory
 
NSFileManager* fileManager = [NSFileManager defaultManager];
 
NSString* documentsDir = [filePath stringByDeletingLastPathComponent];
 
NSString *tmpPath = [documentsDir stringByAppendingPathComponent:@"tmp"];
 
[fileManager createDirectoryAtPath:tmpPath attributes:nil];
 
ZipArchive *zip = [[ZipArchive alloc] init];
 
[zip CreateZipFile2:self.filePath];
 
//save the texts
 
NSDictionary* texts = [NSDictionary dictionaryWithObjectsAndKeys:self.title,@"title",self.text,@"text",nil];
 
NSString* textsFile = [tmpPath stringByAppendingPathComponent:@"texts.plist"];
 
//save the image and add them to the zip file
 
if (self.photo!=nil) {
 
NSString* photoFile = [tmpPath stringByAppendingPathComponent:@"photo0.png"];
 
NSData *imageData = [NSData dataWithData:UIImagePNGRepresentation(self.photo)];
 
[imageData writeToFile:photoFile atomically:YES];
 
[zip addFileToZip:photoFile newname:@"photo0.png"];
 
[fileManager removeItemAtPath:photoFile error:NULL];
 
}
 
[texts writeToFile:textsFile atomically:YES];
 
[zip addFileToZip:textsFile newname:@"texts.plist"];
 
[fileManager removeItemAtPath:textsFile error:NULL];
 
if( ![zip CloseZipFile2] )
 
{
 
// error handler here
 
}
 
[fileManager removeItemAtPath:tmpPath error:NULL];
 
[zip release];
 
}

I am just putting the texts in a NSDictionary and saving it as a plist file, and then saving the image as a separate PNG file. Then I zip everything and remove all traces. Note how I create my temporary folder in the same location where the file is going to be saved (assuming it is indeed writable) Your own document centric application is probably much greater than putting together some texts and an image, but I’m sure this example already gives you the right direction.

Now that I have already my saving method, it’s very easy to put together also the one that reads the data from the file system.

-(BOOL)loadFile
 
{
 
//create a temp directory
 
NSFileManager* fileManager = [NSFileManager defaultManager];
 
NSString* documentsDir = [filePath stringByDeletingLastPathComponent];
 
NSString *tmpPath = [documentsDir stringByAppendingPathComponent:@"tmp"];
 
[fileManager createDirectoryAtPath:tmpPath attributes:nil];
 
ZipArchive *zip = [[ZipArchive alloc] init];
 
BOOL result = NO;
 
if([zip UnzipOpenFile:filePath]) {
 
//zip file is there
 
if ([zip UnzipFileTo:tmpPath overWrite:YES]) {
 
//unzipped successfully
 
NSLog(@"Archive unzip Success");
 
result= YES;
 
} else {
 
NSLog(@"Failure To Extract Archive, maybe password?");
 
}
 
} else  {
 
NSLog(@"Failure To Open Archive");
 
}

To load the file contents I have very similar approach: I get the directory of the file and create a temp folder in the same place and then I unzip it inside. Spoiler alert: All my documents are going to be saved in the Documents folder which is always writable, so no worries whether this little temp folder of mine can be crated or not. I chose for the Documents folder as this is the folder which you application can share with your computer via iTunes (in OS 3.2+)

Then onwards is also very simple, now the contents are extracted just load them back into the class instance:

if (result==YES) {
 
NSString* textFile = [tmpPath stringByAppendingPathComponent:@"texts.plist"];
 
NSDictionary* texts = [NSDictionary dictionaryWithContentsOfFile:textFile];
 
self.title = (NSString*)[texts objectForKey:@"title"];
 
self.text  = (NSString*)[texts objectForKey:@"text"];
 
NSString* tmpPhotoPath = [tmpPath stringByAppendingPathComponent:@"photo0.png"];
 
if ( [fileManager fileExistsAtPath:tmpPhotoPath] ) {
 
self.photo = [UIImage imageWithData: [NSData dataWithContentsOfFile:tmpPhotoPath] ];
 
}
 
}
 
//do cleanup
 
[fileManager removeItemAtPath:tmpPath error:NULL];
 
[zip release];
 
return result;
 
}

Now that I have my model working (a simple class to read and write my custom file format) I’ll create also the GUI of my example application – I assume you are already familiar with creating UITableControllers and binding GUI elements to your classes so I won’t go into details about those. I’ll just quickly make a resume of the app’s idea and let you dig into the source code, which is available for download at the end of the article.

I’ll create my main view controller to load the names of all files in my Documents directory which have extension “.mtt” – those are the files my application create and show them in a table:

My second view controller will be the application work area – a screen where you can load an image from your photo gallery and enter some texts (again if you are not familiar with the techniques to do all these, read a more introductiory article about iPhone programming)

So the idea of the demo app is simple, initially shows you a list of the available documents, if you click on one of them, the CustomFile class unarchives it and loads its contents into the second view controller, there you can change the contents and hit Save Document. If you want to create a new document you just choose the “New Document …” item from the list and this will just load the details view controller empty, so you can edit and save. Just download the source and run the app to get a feeling of the app and make sure to check the source to see how ZipArchive is being used.

Wrap up

I hope this article has been useful – I showcased ZipArchive and also did put some ideas together on how to create more elaborate document centric applications. The custom file format can be developed a lot further and the interface for editing multimedia contents could be improved dramatically on the iPad’s big screen.

The full source code of the demo application you can download here.

If you have comments or questions, please write in the comments below or ping me in twitter!

I wish you happy iCoding !

Marin Todorov

So, let’s face it, MANY applications in the app store are “Clunky”. They have jittery interfaces, poor scrolling performance, and the UI tends to lock up at times. The reason? DOING ANYTHING OTHER THAN INTERFACE MANIPULATION IN THE MAIN APPLICATION THREAD!

What do I mean by this? Well, I am essentially talking about multithreading your application. If you don’t know what is meant by multithreading, I suggest you read up on it and return to this post OR don’t worry about it because you don’t need much threading knowledge for this tutorial. Let’s dig in and I’ll give you an example of the problem.

The Problem

When you create an application, the iPhone spawns a new process containing the main thread of your application. All of interface components are run inside of this thread (table views, tab bars, alerts, etc…). At some point in your application, you will want to populate these views with data. This data can be retrieved from the disk, the web, a database, etc… The problem is: How do you efficiently load this data into your interface while still allowing the user to have control of the application.

Many applications in the store simply ‘freeze’ while their application data is being loaded. This could be anywhere from a tenth of a second to much longer. Even the smallest amount of time is noticeable to the user.

Now, don’t get me wrong, I am not talking about applications that display a loading message on the screen while the data populates. In most cases, this is acceptable, but can not be done effectively unless the data is loaded in another thread besides the main one.

Here is a look at the application we will be creating today:

Let’s take a look at the incorrect way to load data into a UITableView from data loaded from the web. The example below reads a plist file from icodeblog.com containing 10,000 entries and populates a UITableView with those entries. This happens when the user presses the “Load” button.

Wrong (download this code here to see for yourself)

@implementation RootViewController
@synthesize array;
 
- (void)viewDidLoad {
    [super viewDidLoad];
 
    /* Adding the button */
    self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"Load"
        style:UIBarButtonItemStyleDone
        target:self
        action:@selector(loadData)];
 
    /* Initialize our array */
    NSMutableArray *_array = [[NSMutableArray alloc] initWithCapacity:10000];
    self.array = _array;
    [_array release];
}
 
// Fires when the user presses the load button
- (void) loadData {
 
    /* Grab web data */
    NSURL *dataURL = [NSURL URLWithString:@"http://icodeblog.com/samples/nsoperation/data.plist"];
 
    NSArray *tmp_array = [NSArray arrayWithContentsOfURL:dataURL];
 
    /* Populate our array with the web data */
    for(NSString *str in tmp_array) {
        [self.array addObject:str];
    }
 
    /* reload the table */
    [self.tableView reloadData];
}
 
#pragma mark Table view methods
 
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return 1;
}
 
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return [self.array count];
}
 
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
 
    static NSString *CellIdentifier = @"Cell";
 
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault
                reuseIdentifier:CellIdentifier] autorelease];
    }
 
    /* Display the text of the array */
    [cell.textLabel setText:[self.array objectAtIndex:indexPath.row]];
 
    return cell;
}
 
- (void)dealloc {
    [super dealloc];
    [array release];
}
 
@end

“Looks good to me”, you may say. But that is incorrect. If you run the code above, pressing the “Load” button will result in the interface ‘freezing’ while the data is being retrieved from the web. During that time, the user is unable to scroll or do anything since the main thread is off downloading data.

About NSOperationQueue And NSOperation

Before I show you the solution, I though I would bring you up to speed on NSOperation.

According to Apple…

The NSOperation and NSOperationQueue classes alleviate much of the pain of multi-threading, allowing you to simply define your tasks, set any dependencies that exist, and fire them off. Each task, or operation, is represented by an instance of an NSOperation class; the NSOperationQueue class takes care of starting the operations, ensuring that they are run in the appropriate order, and accounting for any priorities that have been set.

The way it works is, you create a new NSOperationQueue and add NSOperations to it. The NSOperationQueue creates a new thread for each operation and runs them in the order they are added (or a specified order (advanced)). It takes care of all of the autorelease pools and other garbage that gets confusing when doing multithreading and greatly simplifies the process.

Here is the process for using the NSOperationQueue.

1. Instantiate a new NSOperationQueue object
2. Create an instance of your NSOperation
3. Add your operation to the queue
4. Release your operation

There are a few ways to work with NSOperations. Today, I will show you the simplest one: NSInvocationOperation. NSInvocationOperation is a subclass of NSOperation which allows you to specify a target and selector that will run as an operation.

Here is an example of how to execute an NSInvocationOperation:

NSOperationQueue *queue = [NSOperationQueue new];
 
NSInvocationOperation *operation = [[NSInvocationOperation alloc] initWithTarget:self
    selector:@selector(methodToCall)
    object:objectToPassToMethod];
 
[queue addOperation:operation];
[operation release];

This will call the method “methodToCall” passing in the object “objectToPassToMethod” in a separate thread. Let’s see how this can be added to our code above to make it run smoother.

The Solution

Here we still have a method being fired when the user presses the “Load” button, but instead of fetching the data, this method fires off an NSOperation to fetch the data. Check out the updated code.

Correct (Download the source code here)

@implementation RootViewController
@synthesize array;
 
- (void)viewDidLoad {
    [super viewDidLoad];
 
    self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"Load"
       style:UIBarButtonItemStyleDone
       target:self
       action:@selector(loadData)];
 
    NSMutableArray *_array = [[NSMutableArray alloc] initWithCapacity:10000];
    self.array = _array;
    [_array release];
}
 
- (void) loadData {
 
    /* Operation Queue init (autorelease) */
    NSOperationQueue *queue = [NSOperationQueue new];
 
    /* Create our NSInvocationOperation to call loadDataWithOperation, passing in nil */
    NSInvocationOperation *operation = [[NSInvocationOperation alloc] initWithTarget:self
        selector:@selector(loadDataWithOperation)
        object:nil];
 
    /* Add the operation to the queue */
    [queue addOperation:operation];
    [operation release];
}
 
- (void) loadDataWithOperation {
    NSURL *dataURL = [NSURL URLWithString:@"http://icodeblog.com/samples/nsoperation/data.plist"];
 
    NSArray *tmp_array = [NSArray arrayWithContentsOfURL:dataURL];
 
    for(NSString *str in tmp_array) {
        [self.array addObject:str];
    }
 
    [self.tableView performSelectorOnMainThread:@selector(reloadData) withObject:nil waitUntilDone:YES];
}
 
#pragma mark Table view methods
 
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return 1;
}
 
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return [self.array count];
}
 
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
 
    static NSString *CellIdentifier = @"Cell";
 
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
    }
 
    [cell.textLabel setText:[self.array objectAtIndex:indexPath.row]];
 
    return cell;
}
 
- (void)dealloc {
    [super dealloc];
    [array release];
}

As you can see, we haven’t added much code here, but we have GREATLY improved the overall user experience. So, what did I do exactly?

1. Moved all of the processing (downloading) code from the loadData method to another method that could be run asynchronously
2. Created a new instance of NSOperationQueue by calling [NSOperationQueue new]
3. Created an NSInvocationOperation to call our method loadDataWithOperation
4. Added the operation to the queue
5. Released the operation
6. When the Data has been downloaded, we reload the table data in the main thread since it’s a UI manipulation

One thing to note here is we never actually tell the operation to run. This is handled automatically in the queue. The queue will figure out the optimal time run the operation and do it for you.

Now that you have your downloading and processing in a separate thread, you are now free to add things such as a loading view.

I will be expanding on this tutorial in the coming week and showing you how to cache data and display old data to the user while the new is loading. This is a popular technique used in many Twitter and News applications.

That concludes today’s tutorial.

Post questions in the comments or Ping me on Twitter.

Happy iCoding!

Back in September I posted a large post going over all the components required to implement the MapKit in your application. The MapKit is a framework introduced in iPhone OS 3.0 and allows developers to easily take advantage of Google’s mapping technology. In my first post I go over how to present a map as well as annotate the map with custom badges to highlight points of interest. The MapKit also gives developers access to reverse geocoding services from Google which I will cover in this post.

Reverse Geocoding

A users location is defined by coordinates. When using the Core Location services, or specifying where a map should center its view, coordinates will be the units developers will be working with. This is all well and good for presenting mapping information visually but there is a whole other set of information that can be derived from a set of coordinates.

• Country
• State
• Zip Code
• Address

Google provides the service to translate any coordinate set to an MKPlacemark object. An MKPlacemark object contains properties to access all this information. Let’s look into the process of getting this object.

Step 1

The first thing you need to do is make a “View Based Application”. Now we need to is pick a set of coordinates we want to use. I have decided to use the address of Arizona State University.

Longitude: -111.936619;

Latitude: 33.416199;

Make your AppDelegates .m file look like this:

- (void)applicationDidFinishLaunching:(UIApplication *)application {
    // Override point for customization after app launch
    [window addSubview:viewController.view];
    [window makeKeyAndVisible];
 
	CLLocationCoordinate2D coord;
	coord.longitude = -111.936619;
	coord.latitude = 33.416199;
 
	MKReverseGeocoder *geocoder = [[MKReverseGeocoder alloc] initWithCoordinate:coord];
	[geocoder setDelegate:self];
	[geocoder start]
}

Step 2

Now we need to implement the MKReverseGeocoderDelegate methods. There are only 2 delegate methods:

Called when an error occurs when fetching the reverse geocoder object

- (void)reverseGeocoder:(MKReverseGeocoder *)geocoder didFailWithError:(NSError *)error

Called when the ReverseGeocode object is successfully returned.

- (void)reverseGeocoder:(MKReverseGeocoder *)geocoder didFindPlacemark:(MKPlacemark *)placemark

Step 3

Now we have a MKPlacemark object to use. An MKPlacemark object conforms to the MKAnnotation protocol. So these objects could be added as annotations to an MKMapView. For more information on MKAnnotations reference part 1. The MKPlacemark object contains the following properties that you can access to use in your application.

To see all of these values make the success delegate method look like this:

- (void)reverseGeocoder:(MKReverseGeocoder *)geocoder didFindPlacemark:(MKPlacemark *)placemark
{
	NSLog(@"The geocoder has returned: %@", [placemark addressDictionary]);
}

You should see this output:

2009-12-22 11:23:05.492 ReverseGeocoder[2591:207] The geocoder has returned: {
    City = Tempe;
    Country = "United States";
    CountryCode = US;
    FormattedAddressLines =     (
        "200-206 E Lemon St",
        "Tempe, AZ 85281",
        USA
    );
    State = Arizona;
    Street = "200-206 E Lemon St";
    SubAdministrativeArea = Maricopa;
    SubThoroughfare = "200-206";
    Thoroughfare = "E Lemon St";
    ZIP = 85281;
}