Tag: Objective C

Welcome to the tutorial on creating the Mountains of the USA IPhone using XCode. The links to the completed lessons are located at the end of this post.

The tutorial examples uses the UINavigationController to manage the two screens. I built the first tutorial using a Window-Based Application project and then added the UINavigationController rather than use a Navigation Based project. This helped me understand the wiring of controllers to their interface counterparts and I believe provided a bit more flexibility. I learned to do this with Beginning iPhone 4 Development: Exploring the iOS SDK which was crucial to cracking the mysteries in writing IPhone apps.

The app will parse XML data containing the name, elevation, latitude and longitude of the highest 100 mountains in the USA. The XML data is loaded from a web server PHP script that allows for returning all 100 mountains or a selection above a specific elevation in feet. Then the location of any mountain is displayed in a map view.

The first screen contains the user input to search for USA mountains based on their elevation and displays the results in a UITableView. Touching a mountain the UITableView opens the second screen where you can see the location of the mountain in a MapView with an MKAnnotationView showing the pin location on the map and a title.

Prerequisites: This is designed for beginners who have experimented with XCode and IPhone projects and who want work through an example that connects concepts into a useful app.

You need to have XCode installed. I used XCode 4 and IOS 4.2 for the tutorial projects. You can use XCode 3 however many screens and menus have changed for the better I might add which will make you dig a bit to find a panel or window. Otherwise the functionality you need is the same.
[ad name=”Google Adsense”]
You need to know how to build a basic hello world XCode IPhone project and run in the Simulator. You should have some basic practice using Interface Builder and adding IBOutlets and IBActions in Objective C.

You need to be a practicing programmer in some language. You do not need to be a ninja. A basic understanding of Objective C is helpful but if you have programming background, you should pick up on the Objective C nuances.

IOS Classes Used: In the tutorial you use the UINavigationController, UITableView, UITableViewCell, UITableViewCellStyleDefault, MKMapView, MKAnnotationView, MKPinAnnotationView, NSNumber, NSNumberFormatter, NSNumberFormatterDecimalStyle, UIActivityIndicatorView, UISlider, NSMutableData, NSMutableArray, UIButton, NSString, NSUInteger, CLLocationCoordinate2D, UIAlertView and NSXMLParser.

[ad name=”Google Adsense”]
Currently there are nine lessons and this will provide a table of contents for them as they get posted. You can register below and you will get notifications when new lessons are posted.

• Lesson 1 – Setup the App
• Lesson 2 – Load XML Data
• Lesson 3 – Parse XML Data
• Lesson 4 – Add TableView
• Lesson 5 – Table Touch Interaction
• Lesson 6 – Add Slider to Search By Elevation
• Lesson 7 – Add Detail View
• Lesson 8 – Add MapView to Detail View
• Lesson 9 – Add Annotation to MapView

This is a basic IPhone client server example using PHP. This is a duplication of a Titanium example I created February 27th: see Titanium IPhone Client Server Echo Hello Example Using PHP.

This XCode example like the Titanium version simply sends text entered on the phone and returns it with the word “Hello” prefixed. It uses HTTP and the POST protocol. The server app is a simple PHP script.

This is the IPhone screen when the application first runs.

The text input will show the keyboard when typing. The send button closes the keyboard and starts the HTTP session. There is no error handling should the connection fail or the server fail.

This is an asynchronous example. So other operations could occur while the request to server is in process. For example the send button can be pressed over and over. So an activity indicator would be a nice improvement.

Source Download
XCode 4 Project

I used the IOS “View-based Application” when creating a new project in XCode. All the coding is in the AnimatedDieFaceViewController UIViewController.

NSUrlClientServerURLVariablesEx01ViewController.h

This sets out the interface for the view controller.

Line 2 contains a constant for the PHP script that received the name and returns the response. You need to replace the YOURDOMAIN and the PATH_IF_ANY_TO/ for your project. The php script is included in the download and is also listed at the end of this post.

The responseTextView is updated with the response from test02.php.

The receivedData NSMutableData object handles the byte data that will come from the server.
[ad name=”Google Adsense”]
The two IBOutlet variables for the controller to access UI components. The controller needs to read the user input from nameTextField and needs to update responseTextView with data received from the server.

The one IBAction method kicks off the client server process with the send button.

#import <UIKit/UIKit.h>
#define kTextUrl @"http://www.YOURDOMAIN.com/PATH_IF_ANY_TO/echo_hello.php"

@interface NSUrlClientServerURLVariablesEx01ViewController : UIViewController {
    UITextField     *nameTextField;
    UITextView      *responseTextView;
    NSMutableData   *receivedData;
}
@property (nonatomic, retain) IBOutlet UITextField *nameTextField;
@property (nonatomic, retain) IBOutlet UITextView *responseTextView;
@property (nonatomic, retain) NSMutableData *receivedData;

- (IBAction)makeRequest;

@end

NSUrlClientServerURLVariablesEx01ViewController.m

This sets out the interface for the view controller. Five methods are used to handle the request to and response from the server.

The makeRequest method initiates the request to the server is on line 10.

Four methods on lines 91, 99, 106 and 127 are required because line 27 makes this controller the delegate for NSURLConnection.

The makeRequest method on line 10 is fired from the send button. It performs two tasks. One is assembling the parts of the nsMutableURLRequest object such as the protocol and name value pair parameter. The POST protocol is set on line 18 and line 20 creates the name=whatever_the_user_enters name value pair needed for the server script. The second task is making NSURLConnection and testing if it can work.

Lines 91 – 97 contains the connection didReceiveResponse method. This is needed to clear the data received because of the nature of multiple times it can be called.

The connection didReceiveData method on line 99 – 104 starts collecting the byte data received over the network.

If there is a problem with the connection the connection didFailWithError method occupying lines 106 to 125 is called. Here you can create a better UIAlertView and perhaps relegate the error codes to a trace log.

Finally should everything go well and all the data is received, the connectionDidFinishLoading method on lines 127 – 139 updates the UITextView with our results.

//
#import "NSUrlClientServerURLVariablesEx01ViewController.h"

@implementation NSUrlClientServerURLVariablesEx01ViewController
@synthesize nameTextField;
@synthesize responseTextView;
@synthesize receivedData;

// Send button Touch Up Inside
- (IBAction)makeRequest
{
    NSLog(@"%s", __FUNCTION__);
    //Allocate NSURL object
    NSURL *nsURL = [[NSURL alloc] initWithString:kTextUrl];
    // Allocate NSMutableURLRequest
	NSMutableURLRequest *nsMutableURLRequest = [[NSMutableURLRequest alloc] initWithURL:nsURL];
    // Set HTTP method to POST
	[nsMutableURLRequest setHTTPMethod:@"POST"];
    // Set up the parameters to send.
    NSString *paramDataString = [NSString stringWithFormat:@"%@=%@", @"name", nameTextField.text];
    NSLog(@"%s - paramDataString: %@", __FUNCTION__, paramDataString);
    // Encode the parameters to default for NSMutableURLRequest.
	NSData *paramData = [paramDataString dataUsingEncoding:NSUTF8StringEncoding];
    // Set the NSMutableURLRequest body data.
	[nsMutableURLRequest setHTTPBody: paramData];	
    // Create NSURLConnection and start the request.
    NSURLConnection *nsUrlConnection=[[NSURLConnection alloc]
                                    initWithRequest:nsMutableURLRequest 
                                    delegate:self];
    // Successful connection.
    if (nsUrlConnection) {
        NSMutableData *data = [[NSMutableData alloc] init];
        self.receivedData=data;
        [data release];
    } 
    // Unsuccessful connection.
    else {
        responseTextView.text =  [NSString stringWithFormat :@"Unable to make connection!"] ;
    }  
    // Clean up
	[nsURL release];
	[nsMutableURLRequest release];
    // Close keypad.
    [nameTextField resignFirstResponder];
    

}
- (void)dealloc
{
    [nameTextField release];
    [responseTextView release];
    [receivedData release];
    [super dealloc];
}

- (void)didReceiveMemoryWarning
{
    // Releases the view if it doesn't have a superview.
    [super didReceiveMemoryWarning];
    
    // Release any cached data, images, etc that aren't in use.
}

#pragma mark - View lifecycle

/*
// Implement viewDidLoad to do additional setup after loading the view, typically from a nib.
- (void)viewDidLoad
{
    [super viewDidLoad];
}
*/

- (void)viewDidUnload
{
    [super viewDidUnload];
    // Release any retained subviews of the main view.
    self.nameTextField = nil;
    self.responseTextView = nil;
    self.receivedData = nil;
    // e.g. self.myOutlet = nil;
}

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    // Return YES for supported orientations
    return (interfaceOrientation == UIInterfaceOrientationPortrait);
}
#pragma mark -
#pragma mark NSURLConnection Callbacks
// Connection response.
- (void)connection:(NSURLConnection *)connection didReceiveResponse:(NSURLResponse *)response 
{
    NSLog(@"%s - Response Code: %d\n", __FUNCTION__, [(NSHTTPURLResponse *)response statusCode]);
    NSLog(@"%s - Content-Type: %@\n",  __FUNCTION__, [[(NSHTTPURLResponse *)response allHeaderFields] objectForKey:@"Content-Type"]);
    // Clear the NSMutableData receivedData.
    [receivedData setLength:0];
}
// You got data.
- (void)connection:(NSURLConnection *)connection didReceiveData:(NSData *)data 
{
    NSLog(@"%s", __FUNCTION__);
    // Append the data to our NSMutableData receivedData.
    [receivedData appendData:data];
}
// Sorry Dude, connection failed gloriously.
- (void)connection:(NSURLConnection *)connection didFailWithError:(NSError *)error 
{
    NSLog(@"%s", __FUNCTION__);
    
    // Create noxious error message.
    NSString *errorMessage = [[NSString alloc]initWithFormat: @"Connection failed! Error - %@ (URL: %@)", [[error userInfo] objectForKey:NSURLErrorFailingURLStringErrorKey]];
    // Throw up a noxious error message.
    UIAlertView *alert = [[UIAlertView alloc] 
                        initWithTitle:@"Sorry Dude!"
                        message:errorMessage 
                        delegate:self
                        cancelButtonTitle:@"Close"
                        otherButtonTitles:nil];
    [alert show];
    // Clean up
    [connection release];
    self.receivedData = nil; 
    [alert release];
    [errorMessage release];
}
// Finally the data is completely loaded.
- (void)connectionDidFinishLoading:(NSURLConnection *)connection
{
    NSLog(@"%s", __FUNCTION__);
    // Encode received data to NSUTF8StringEncoding
    NSString *receviedDataAsString = [[NSString alloc] initWithData:receivedData encoding:NSUTF8StringEncoding];
    NSLog(@"%s - receviedDataAsString: %@", __FUNCTION__, receviedDataAsString);
    // Show received data in the responseTextView.
    responseTextView.text = receviedDataAsString;
    // Clean up.
    [receviedDataAsString release];
    [connection release];
    self.receivedData = nil;
}
@end

[ad name=”Google Adsense”]

NSUrlClientServerURLVariablesEx01ViewController.xib

This is the layout of the interface.

There is another UIView behind the UILabel, UITextField and UIButton. The UIView background is set to a light gray to give a panel effect.

The UITextField is preloaded with a value.

Below the UIView at the top is a UITextView. It is also preloaded with a message on how to use the app.

The IBOutlets are for the UITextField and the UITextView so their properties in the controller code can be read or changed. The UITextField is read on line 20. The UITextView is changed on line 134.

The view outlet was set when I choose the IOS View-based Application to create the XCode project.

The IBActions are for the one UIButton when the Touch Up Inside event is initiated. You can see the method makeRequestlinked to the UIButton.

[ad name=”Google Adsense”]
echo_hello.php – Server Script
Very simple echo script. The name identifier on line 20 of NSUrlClientServerURLVariablesEx01ViewController.m is picked up in the PHP $_REQUEST object as you might expect. The value of $_REQUEST[‘name’] is appended to ‘Hello’ plus a space and returned without any data markup. Nothing very fancy.

<?php
echo "Hello " . $_REQUEST['name'] . "!";
?>

This is a basic IPhone example that demonstrates an animated UIImageView. The example demonstrates how to take a sequence of images and animate them.

To make the example interesting, I decided to use the roll of one die. This does not show a rolling 3D dice. Rather it is a sequential swapping of die faces on a single plane. When you start the die roll, you can choose when to stop. When the animation is stopped, I am using a random number to select which die value. As such the last animated die face is not the die face for the roll value. I set the animating fast enough for the simulator at least to make it difficult to see which die value was last animated when the stop button is released.

I also shows setting the user interaction states for when the die is being rolled and when it is not. I include some constants for determining the view state based on when the die is rolling or not. For example in this view the app is not animating so the roll button is enabled and the stop button is disabled.

The images for the die faces are very simple.

Source Download
XCode 4 Project

I used the IOS “View-based Application” when creating a new project in XCode. All the coding is in the AnimatedDieFaceViewController UIViewController.

AnimatedDieFaceViewController.h

This sets out the interface for the view controller.

The controller needs to set the enabled and alpha properties of the roll and stop button respectively named as rollButton and stopButton. To do this they are declared as IBOutlet so they can be linked up in the XIB file.

The rollDiceImageView UIImageView is where we will swap 6 images of die faces. Those are UIImage objects stored in the animationImages NSArray.

The method rollButtonPressed, stopButtonPressed, setAnimatingState, animateImages and stopAnimatingImages are explained with the implementation code.

#import <UIKit/UIKit.h>

@interface AnimatedDieFaceViewController : UIViewController {
    UIImageView *rollDiceImageView;
    UIButton *rollButton;
    UIButton *stopButton;
    NSArray *animationImages;

}
@property (nonatomic, retain) IBOutlet UIImageView *rollDiceImageView;
@property (nonatomic, retain) IBOutlet UIButton *rollButton;
@property (nonatomic, retain) IBOutlet UIButton *stopButton;
-(IBAction) rollButtonPressed:(id) sender;
-(IBAction) stopButtonPressed:(id) sender;
-(void) setAnimatingState:(int)animatingState;
-(void) animateImages;
-(void) stopAnimatingImages;
@end

[ad name=”Google Adsense”]

AnimatedDieFaceViewController.m

On lines 9 and 11 I declared two constants,ANIMATING_YES and ANIMATING_NO to indicate the animation state. Those are values to pass to setAnimatingState where the rollButton and the stopButton enabled and alpha properties are set.

In the viewDidLoad method starting on line 84, the animatingImages NSArray is populated with images.

Also initial properties for the rollDiceImageView UIImageView are set including

• image for the initial image when the app starts up.
• animationImages set to our animatingImages NSArray.
• animationDuration set to .5 or 1/2 of a second.
• animationRepeatCount set to 0 to keep the animation running indefinitely.

When the rollButton is pressed, the rollButtonPressed method is called on line 13 which in turn calls the animateImages method on line 18. It is in animateImages the the view state is set and the animation is started. The view state is set so the roll button is disabled and the stop button is enabled.

On line 26 the stopButtonPressed method leads us to the stopAnimatingImages method on line 31. In this method we compute a random number rollValue for the dice roll using arc4random on line 38.

Then on line 40 rollValue is used to determine which image in the animationImages NSArray to assign to the image property of rollDiceImageView UIIMageView.

Line 42 calls setAnimatingState to reset the roll to an enabled state and stop button to a disabled state.

#import "AnimatedDieFaceViewController.h"

@implementation AnimatedDieFaceViewController
@synthesize rollDiceImageView;
@synthesize rollButton;
@synthesize stopButton;

// State is animating. Used to set view.
static const int ANIMATING_YES = 1;
// State is not animating. Used to set view.
static const int ANIMATING_NO = 0;

-(IBAction) rollButtonPressed:(id) sender
{
    NSLog(@"rollButtonPressed");
    [self animateImages];
}
-(void) animateImages
{
    NSLog(@"animateImages");
    //Set view to animating state.
    [self setAnimatingState:ANIMATING_YES];
    // Start the animation
	[rollDiceImageView startAnimating];
}
-(IBAction) stopButtonPressed:(id) sender
{
    NSLog(@"RotatingDiceEx01ViewController.stopButtonPressed");
    [self stopAnimatingImages];
}
-(void) stopAnimatingImages
{
    NSLog(@"RotatingDiceEx01ViewController.stopAnimatingImages");

    // Stop the animation.
    [rollDiceImageView stopAnimating ];
    // Generate a random number from 0 to 5;
    int rollValue =  arc4random() %  6  ;
    // Assign image from the animationImages NSArray using the rollValue as index.
    rollDiceImageView.image = [animationImages objectAtIndex:rollValue];
    //Set view to not animating state.
    [self setAnimatingState:ANIMATING_NO];
}
-(void) setAnimatingState:(int)animatingState
{
    NSLog(@"RotatingDiceEx01ViewController/setAnimatingState(...) - animatingState %i:", animatingState);
    // Set view state to animating.
    if (animatingState == ANIMATING_YES)
    {
        rollButton.enabled = false;
        rollButton.alpha = 0.5f;
        stopButton.enabled = true;
        stopButton.alpha = 1.0f;
    }
    // Set view state to not animating.
    else if (animatingState == ANIMATING_NO)
    {
        rollButton.enabled = true;
        rollButton.alpha = 1.0f;
        stopButton.enabled = false;
        stopButton.alpha = 0.5f;
    }
}
- (void)dealloc
{
    [animationImages release];
    [rollDiceImageView dealloc];
    [rollButton dealloc];
    [stopButton dealloc];
    [super dealloc];
}

- (void)didReceiveMemoryWarning
{
    // Releases the view if it doesn't have a superview.
    [super didReceiveMemoryWarning];

    // Release any cached data, images, etc that aren't in use.
}

#pragma mark - View lifecycle

// Implement viewDidLoad to do additional setup after loading the view, typically from a nib.
- (void)viewDidLoad
{
    NSLog(@"RotatingDiceEx01ViewController.viewDidLoad");
    // Build an array of UIImage objects.
    animationImages = [[NSArray arrayWithObjects:
                        [UIImage imageNamed:@"die_face_01.png"],
                        [UIImage imageNamed:@"die_face_02.png"],
                        [UIImage imageNamed:@"die_face_03.png"],
                        [UIImage imageNamed:@"die_face_04.png"],
                        [UIImage imageNamed:@"die_face_05.png"],
                        [UIImage imageNamed:@"die_face_06.png"],
                        nil] retain ];
    // Set the starting image.
    rollDiceImageView.image = [UIImage imageNamed:@"die_face_01.png"];
    // Initialize the animation properties
    rollDiceImageView.animationImages = animationImages; // NSArray of UImage objects.
	rollDiceImageView.animationDuration = .5; // Default = .033333 1/30 sec
	rollDiceImageView.animationRepeatCount = 0; // 0 = continuous

    [super viewDidLoad];
}
- (void)viewDidUnload
{
    [super viewDidUnload];
    // Release any retained subviews of the main view.
    // e.g. self.myOutlet = nil;
    self.rollDiceImageView = nil;
    self.rollButton = nil;
    self.stopButton = nil;

}
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    // Return YES for supported orientations
    return (interfaceOrientation == UIInterfaceOrientationPortrait);
}
@end

[ad name=”Google Adsense”]

AnimatedDieFaceViewController.xib

This is the layout of the interface.

The UIButton with the Stop caption has its enabled property unchecked and its alpha property set to 0.5;

The dimensions of the UIImageView is set to 100 by 100. Each of the die face images are 100 by 100. The UIImageView is dead center in the UIView.

The IBOutlets are for the two UIButtons and the UIImageView so their properties in the controller code can be changed. You can see on lines 40, 97, 99, 100 and 101 setting rollDiceImageView UIImageView properties. In the setAnimatingState method starting on line 44 the alpha and enabled properties for the buttons are set.

The view outlet was set when I choose the IOS View-based Application to create the XCode project.

The IBActions are for the two buttons when the Touch Up Inside event is initiated. You can see the methods rollButtonPressed and stopButtonPressed linked to that event for each button.