iOS Tutorial Part I

The CelebrityViewController

First, we want to create a UI so the user can create a Celebrity object that is stored to the API. To do this, we will modify the SecondViewController to provide this.

First, we refactor the template SecondViewController to be called CelebrityViewController by renaming everything since refactor does not work so good in xCode. Also make sure that the scene is set to Custom Class with CelebrityViewController in the storyboard editor.

Next, we add the necessary UI components to the CelebrityViewController. We will add the following elements:

1. UIButton to hold the Celebrity image.
2. UITextField for Celebrity first name.
3. UILabel next to the first name text field as a label.
4. UITextField for Celebrity last name.
5. UILabel next to the last name text field as a label.
6. UINavigationBar with a title “Add a Celebrity”.
7. UIBarButtonItem with a title “Done”.

And the Scene should look like this:

Next we create the CelebrityViewController.h.

#import
#import "Celebrity.h"
#import "AppDelegate.h"
#import "FatFractal.h"

@interface CelebrityViewController : UIViewController {
    UIImagePickerController *picker;
}

@property (strong, nonatomic) Celebrity *celebrity;
@property (nonatomic, retain) IBOutlet UITextField *firstNameField;
@property (nonatomic, retain) IBOutlet UITextField *lastNameField;
@property (nonatomic, retain) IBOutlet UIBarButtonItem *doneButton;
@property (nonatomic, retain) IBOutlet UIButton *selectImageButton;
- (IBAction) doneAction:(id)sender;
- (IBAction) addImage;
- (void) imagePickerController:(UIImagePickerController *) Picker didFinishPickingMediaWithInfo:(NSDictionary *)info;
- (void) imagePickerControllerDidCancel:(UIImagePickerController *) Picker;
- (void) addCelebrity;
- (void) addGender;
@end

What this does is:

1. Import the Celebrity class, AppDelgate class and FatFractal class.
2. Add a UIImagePickerController to the interface to select the image for the Celebrity.
3. Add the properties for:
   1. The Celebrity object that is made part of this class.
   2. The two UITextFields (firstNameField, lastNameField).
   3. The UIBarButtonItem with IBOutlet for the “doneAction” button
   4. The UIButton with IBOutlet for the “addImage” button.
4. Add the methods for:
   1. addImage (brings up the UIImagePickerController).
   2. doneAction (handles the click on the “done” button).
   3. addGender presents a UIAlertView to select the gender for the Celebrity.
   4. addCelebrity CRUD Creates the Celebrity (if all data is present).
   5. imagePickerControllerDidCancel handles UIImagePickerController cancel event.
   6. didFinishPickingMediaWithInfo handles UIImagePickerController image selection event.

Next, we modify the CelebrityViewController.m file.

First, let’s synthesize the necessary properties.

@synthesize doneButton, selectImageButton, firstNameField, lastNameField, celebrity;

Next, we create the methods we need in CelebrityViewController.m

The addImage method brings up the UIImagePickerController to select an image from the device:

-(IBAction) addImage {
    picker = [[UIImagePickerController alloc] init];
    picker.delegate = (id)self;
    if ([UIImagePickerController isSourceTypeAvailable:UIImagePickerControllerSourceTypeCamera]) {
        picker.sourceType = UIImagePickerControllerSourceTypeCamera;
    } else {
        picker.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;
    }
    [self presentModalViewController:picker animated:YES];
}

The imagePickerController: didFinishPickingMediaWithInfo: method will get the image, add it to the UIButton selectImageButton, clear the title and, most importantly, add the image data to the Celebrity object.

- (void)imagePickerController:(UIImagePickerController *) Picker didFinishPickingMediaWithInfo:(NSDictionary *)info {
    UIImage *celebrityImage = [info objectForKey:UIImagePickerControllerOriginalImage];
    if(celebrityImage != nil) {
        [selectImageButton setBackgroundImage:celebrityImage forState:UIControlStateNormal];
        [selectImageButton setTitle:@"" forState:UIControlStateNormal];
        celebrity.imageData = UIImagePNGRepresentation(celebrityImage);
    }
    [self dismissModalViewControllerAnimated:YES];
}

The imagePickerControllerDidCancel method just dismisses the UIImagePickerController.

- (void)imagePickerControllerDidCancel:(UIImagePickerController *) Picker {
                        [self dismissModalViewControllerAnimated:YES];
                    }

Next, we add in the addGender method to get the gender information for the Celebrity using a UIAlertView.

-(void)addGender {
    UIAlertView *genderPicker = [[UIAlertView alloc]
    initWithTitle:@"Gender"
    message:@" Please select the gender for this Celebrity?"
    delegate:self
    cancelButtonTitle:@"Male"otherButtonTitles:@"Female",nil];
    [genderPicker show];
}

And now, we add the handler for the UIAlertView:

- (void)alertView:(UIAlertView *)alertView clickedButtonAtIndex:(NSInteger)buttonIndex {
    [self resignFirstResponder];
    if([[alertView buttonTitleAtIndex:buttonIndex] isEqualToString:@"Male"]) {
        celebrity.gender = @"male";
    }
    else if([[alertView buttonTitleAtIndex:buttonIndex] isEqualToString:@"Female"]) {
        celebrity.gender = @"female";
    } else {
        NSLog(@"Something bad happened");
    }
    [self addCelebrity];
}

We use the two UITextFields to capture celebrity.firstName and celebrity.lastName values when the doneButton is clicked. At this point, we do not bother to check for nil values as we will deal with that next when we attempt to call addCelebrity.

-(IBAction)doneAction:(id)sender {
    // dismiss keyboard
    [firstNameField resignFirstResponder];
    [lastNameField resignFirstResponder];
    if(firstNameField.text.length > 0) celebrity.firstName = firstNameField.text;
    if(lastNameField.text.length > 0) celebrity.lastName = lastNameField.text;
    [self addCelebrity];
}

Next, we add the addCelebrity method that:

1. Checks that the user is logged in, and if not, calls the asynchronous showLoginWithDelegate: action: selector: method in AppDelegate.
2. Checks that all required information is complete.
3. If all present, persists the Celebrity object to the API using the synchronous method createObj: atUrl: from the FatFractal class.
4. If successful, clears celebrity contents and creates a new empty one.

- (void)addCelebrity {
    // check logged in
    if(![[FatFractal main] loggedIn]) {
        [(AppDelegate *)[[UIApplication sharedApplication] delegate]
        showLoginWithDelegate:self action:@selector(addCelebrity) message:@"Please Login"];
    }
    else {
        // check requisite info exists
        if ((celebrity.firstName == nil) || (celebrity.lastName == nil)) {
            UIAlertView *failview = [[UIAlertView alloc]
            initWithTitle:@"Add Celebrity Failed"
            message:@"You must provide first and last name for this celebrity"
            delegate:nil
            cancelButtonTitle:@"OK"
            otherButtonTitles:nil];
            [failview show];
        }
        else if (celebrity.imageData == nil) {
            UIAlertView *failview = [[UIAlertView alloc]
            initWithTitle:@"Add Celebrity Failed"
            message:@"You must provide an image for this celebrity"
            delegate:nil
            cancelButtonTitle:@"OK"
            otherButtonTitles:nil];
            [failview show];
        }
        else if (celebrity.gender == nil) {
            [self addGender];
        } else {
            NSError *error;
            [[FatFractal main] createObj:celebrity atUrl:@"/Celebrity" error:&error];
            if(error) {
                NSLog(@"CelebrityViewController addCelebrity failed: %@", [error localizedDescription]);
            } else {
                [selectImageButton setBackgroundImage:nil forState:UIControlStateNormal];
                [selectImageButton setTitle:@"Add Image" forState:UIControlStateNormal];
                firstNameField.text = nil;
                lastNameField.text = nil;
                celebrity = nil;
                celebrity = [[Celebrity alloc]init];
            }
        }
    }
}

Lastly, make sure and connect up your UIComponents in the MainStoryboard.storyboard.

firstNameField
Referencing Outlet to CelebrityViewController/firstNameField

lastNameField
Referencing Outlet to CelebrityViewController/lastNameField

selectImageButton
Referencing Outlet to CelebrityViewController/selectImageButton
Sent Events/ Touch Down to CelebrityViewController/addImage

doneButton
Referencing Outlet to CelebrityViewController
Sent Actions to CelebrityViewController/doneAction

That’s it! Now, we can select and image from the phone that was taken by the device camera or saved to the phone from the browser or other application, enter the first and last name, add the gender using the UIAlertView and the new Celebrity is stored to your API.

As mentioned previously, NoServer APIs can store any type of object, not just JSON or text. In this case, we have stored a Celebity object that contains an image (NSData) with a single method and can retrieve it the same way. And that is what we will do next.

Go ahead and add a few celebrities to you API as we will need them for the next section.

Final result - successfully added a Celebrity:

NEXT: Add the UI Components to CelebrityViewController