With Dynamic Leap you will build exciting new software used on mobile devices like the iPhone, iPod Touch, iPad, Blackberry, and phones running Google’s Android.

Requirements:

• Strong programming skills in C, Objective-C, C++ and Java
• Bachelor in Computer Science or equivalent
• A minimum of one year work experience in the industry
• Positive attitude and enthusiasm
• Attention to details

Preferred skills:

• Familiarity with Mac OS X and iPhone OS development
• User-interface programming experience

Step 5 – Handling control events

Now we will write a few lines of code to update the number of vertices when the value of the slider changes.

1. Switch to XCode. Select PolygonViewController.m. Import PolgonView.m and add the following body to the “changeValue:” method:
   

   #import "PolygonViewController.h"
   #import "PolygonView.h"
   
   @implementation PolygonViewController
   
   - (IBAction)changeValue:(id)sender {
   	NSUInteger vertices = (NSUInteger) _slider.value;
   
   	_verticesLabel.text = [NSString stringWithFormat:@"%d", vertices];
   	[_polygonView setVertices:vertices];
   }
   

   Build and run the application. Initially the screen looks like before, but try to drag the slider and the polygon appears! When the slider is moved the label changes numbers and the polygon changes its shape.

2. Let’s make the polygon show from the start. We’ll use “viewDidLoad” to initialize the PolyView and the label with the initial value of the slide. Uncomment viewDidLoad and add the following highlighted line:
   

   - (void)viewDidLoad {
   	[super viewDidLoad];
   	[self changeValue:nil];
   }
   

   Build and run the application. Now the application always starts with a pentagon.

3. What if we want to save the number of vertices between runs? In this case we can use NSUserDefaults to persist the number of vertices. To do this we’ll add to “changeValue:” code to save the number of vertices:
   

   - (IBAction)changeValue:(id)sender {
   	NSUInteger vertices = (NSUInteger) _slider.value;
   
   	_verticesLabel.text = [NSString stringWithFormat:@"%d", vertices];
   	[_polygonView setVertices:vertices];
   
   	NSUserDefaults *userDefaults = [NSUserDefaults standardUserDefaults];
   	[userDefaults setInteger:vertices forKey:@"vertices"];
   	[userDefaults synchronize];
   }
   

   Now add to “viewDidLoad” code to restore the last saved value on startup:

   - (void)viewDidLoad {
   	[super viewDidLoad];
   	NSUserDefaults *userDefaults = [NSUserDefaults standardUserDefaults];
   	NSUInteger vertices = [userDefaults integerForKey:@"vertices"];
   
   	if (vertices != 0) {
   		_slider.value = vertices;
   	}
   	[self changeValue:nil];
   }
   

   Build and run. Change the slider position. Terminate the application and run it again. The application remembers the last position of the slider.

< Prev

Step 4 – Connect the UI elements to data

Now that we placed and configured the UI elements in the nib file using Interface Builder, we need to connect them. The Model View Controller design pattern specifies that the controller classes are intermediaries between data and the UI elements. A controller can change the attributes of visible elements that are declared as “outlets” to reflect the value of the data (the model). A controller can also modify the data as a result of a UI event through methods declared as “actions”.
In our Polygon application the “data” is an integer storing the number of vertices.
The “outlets” are:

• a label that displays the number of vertices as a string
• the slider that positions its cursor to reflect the number of vertices
• the polygon view that displays the polygon with the appropriate number of vertices

The “action” method is called each time the slider’s value is changed.
Let’s set this up.

1. Switch to XCode, and select PolygonVieController.h. Add three member variables to the controller class, each one corresponding to a UI element, and a method definition to handle the slider control “value change” event. We will mark the variables with the keyword IBOutlet, and the method with IBAction. These two keywords that are understood by Interface Builder, so we can graphically connect later the variables with the corresponding UI elements. Add the following highlighted lines to your code.
   

   #import <UIKit/UIKit.h>
   
   @class PolygonView;
   
   @interface PolygonViewController : UIViewController {
   	IBOutlet UISlider *_slider;
   	IBOutlet UILabel  *_verticesLabel;
   	IBOutlet PolygonView *_polygonView;
   }
   
   - (IBAction)changeValue:(id)sender;
   
   @end
   

   The line “@class PolygonView;” pre-declares the PolygonView class, so we do not need to import the whole PolygonView.h header file here. We will import PolygonView.h in the implementation file, where we actually make use of the PolygonView class methods.
   Note: Apple is recommending that we declare a property with a retain attribute for each IBOutlet instead of attaching the keyword to the member variable declarations themselves. This, however, complicates a little the code, so for the purposes of this tutorial I chose to ignore this recommendation. Production code, however, should be written obeying this rule.

   Save the file.

2. Select the PolygonViewController.m file and add an implementation for the changeValue method:
   

   #import "PolygonViewController.h"
   
   @implementation PolygonViewController
   
   - (IBAction)changeValue:(id)sender {
   }
   

   Save the file.

3. Switch back to Interface Builder, to PolygonViewController.xib. Select in the XIB window the File Owner. Select the “Connections” tab in the information window. You should see listed the 3 outlet variables ad the action. If not make sure you save PolygonViewController.h and redo this step. Drag and drop from the circle at the right of each of the outlets to the corresponding UI element in the view window.
   
   You will find that you can drag from an outlet only to UI elements of corresponding type. Make sure to drag from the outlet “_verticesLabel” to the label with the text “0″, and not to the other label.
   To connect the action drag and drop from “changeValue:” to the slider. When you drop a list of events will pop up. Choose the event “Value Changed“.
   At the end the “Connections” tab of the information window should look like this:
   
   Save the nib file.

Build and run the application. You should not get any compilation errors, but the application still does not do much. In the next step we’ll implement the action method.



< Prev Next >

Step 3 – Create the screen layout, and use PolygonView

We can create and edit graphically the UI for our iPhone application using Interface Builder. This tool creates and edits files with the extension xib. Note: The old extension for the resource files on Mac was nib, and this extension name is still used for the compiled xib files. The API and the documentation still refer to those resource files as nib files. We will also refer to them as nib files despite their xib extension.

1. In the “Resources” group in Groups & Files, double-click on the file PolygonViewController.xib. Interface Builder will launch shortly (it takes a little bit before starting up for the first time). Interface Builder will present you with 4 windows:
   • The main nib window – showing all the objects in the nib, both UI elements and controllers. This type of window is one per opened nib file. Make sure to choose the “list” view mode on the toolbar.
   • The view window – showing the view object and its children UI elements, the way they would show on the screen. For each nib we may have a number of this kind of windows, depending of how many UI objects we have at the top level of the nib hierarchy. For now it is only a gray rectangle the size of the iPhone screen.
   • The information window – there is only one such window, and it has 4 tabs that show different aspects of the currently selected item in one of the first two kinds of windows (the nib window or the view). It can show attributes, connections, size, or identity information, depending on what tab is selected on the top bar.
   • The library window – like the information window, there is only one such window. This window allows access to predefined and custom objects (controllers or UI elements) that can be dragged and dropped on the nib windows, or on the view windows.
2. Drag and drop two “Label” objects from the library window to the view window. Double-click the label elements one at a time and edit the text. Make one say “Number of vertices:” and the other “0″. Also drag and drop a “Slider” object and a “View” object. Rearange and resize the objects to look like this:Save the nib file.
3. Now, select the slider in the view window and choose the attributes tab in the information window. Change the field values in the Values section as follows: Minimum = 3, Maximum = 20, and Initial = 5. The info window should look like this.Save the nib file.
4. Select the view object you just dragged onto the main view window. In the information window select the identity tab. In the “Class” field select PolygonView from the drop down. Save the nib file.

Build and run the application. You should get no errors, and the screen should show now the UI elements. In the next step we will connect the UI elements using the controller class.



< Prev Next >

Step 2 – Create a custom view to display the polygon

To create a custom view we need to create a new Objective C class derived from UIView and implement its drawing method “drawRect:” to make it draw a polygon. Here is what we need to:

1. Select the “Classes” group in Groups & Files. Choose the menu “File/New File…”
2. From the “Cocoa Touch Class” group of templates select the “Objective-C class” template, and set the “Subclass of” drop down to UIView
3. Click “Next” and set the “File Name” to PolygonView.m
4. Edit the header file PolygonView.h that we just created to add a member variable called _vertices, and a method to set the number of vertices. This will tell the view how many vertices it needs to draw.
   

   #import <UIKit/UIKit.h>
   
   @interface PolygonView : UIView {
   NSUInteger _vertices;
   }
   
   - (void)setVertices:(NSUInteger) vertices;
   
   @end

   Note that I use the underscore notation in front of my member variables. This helps me distinguish member variables from local variables or arguments in method implementations. This notation is also KVC/KVO compliant.

5. Switch to the file PolygonView.m and add an implementation for the method drawRect:
   

   - (void)drawRect:(CGRect)rect {
   CGFloat radius = self.bounds.size.width/2.5;
   
   	if (radius > self.bounds.size.height/2.5) {
   		radius = self.bounds.size.height/2.5;
   	}
   
   	CGFloat arc = M_PI * 2.0 / _vertices;
   	CGContextRef context = UIGraphicsGetCurrentContext();
   	CGContextBeginPath(context);
   	CGContextMoveToPoint(context, self.bounds.size.width/2, self.bounds.size.height/2 - radius);
   
   	for (NSUInteger i = 1; i < _vertices; i++) {
   		CGContextAddLineToPoint(context, self.bounds.size.width/2 + radius * sin(arc * i), self.bounds.size.height/2 - radius * cos(arc * i));
   	}
   
   	CGContextClosePath(context);
   	CGContextSetLineWidth(context, 5.0);
   	CGContextStrokePath(context); 
   }
   

   This method is executed whenever the OS decides that the view class needs to draw its UI on the screen. We are obtaining the current graphics context (the virtual “canvas” on which we draw), and we start building a drawing path (a collection of drawing commands). We including first a moving command for the “current point” (our virtual drawing cursor) to the location of out top vertex, and then we start adding line drawing commands to the current path from one vertex to the next until we’re done. At the end we close the open path (to create a closed polygon), we set the line width to 5, and we draw the lines in the path on the graphics context. To draw a solid polygon instead of only a polygon outline, you could replace the CGContextStrokePath call with CGContextFillPath.

6. We also need to add an implementation for the accessory method setVertices we declared in the header file
   

   - (void)setVertices:(NSUInteger)vertices {
   	_vertices = vertices;
   	[self setNeedsDisplay];
   }
   

   In this method, after we set the value of the _vertices member variable, we send a message to the OS to declare the currently displayed drawing invalid. If our view is visible the screen, the OS will call at its soonest opportunity our drawRect method so we redraw the UI correctly.

   With this we are done implementing our custom UIView class.

Build and project. You should get no errors. If you run the application you will see no changes to the UI. In the next step we will add some UI elements to the main view.



< Prev Next >

I decided to post a tutorial I am doing during the first class at the iPhone course I am teaching in Vancouver. This tutorial is meant to quickly introduce novices to the iPhone SDK development tools, showcase some fundamental design patterns and demonstrate how easy it is to get started developing for Apple’s iPhone, iPod Touch and the iPad. I will also publish specific iPad application development tutorials as soon as the iPhone 3.2 SDK becomes public, and the nondisclosure agreement with Apple permits.

What will you learn?

• Tools: how to use XCode to create a new iPhone application,  how to add a new class file and how to create your own view class. Using Interface Builder: drag and drop, inspector tabs, custom classes, connecting graphically objects, outlets and actions.
• Programming: practical examples of implementing the Model View Controller design pattern, outlets and actions, member variable naming conventions, forward class declaration, deriving classes, and overriding methods.
• Frameworks: UIKit concepts: creating a custom UIView by overriding drawRect, and the use of needsDisplay and needsLayout. Core Graphics concepts: context, path, current position, adding to path, stroke, fill.

Prerequisites

• You need an Intel based Mac. Unfortunately iPhone development cannot be done on a PC or on a Linux machine.
• You need to have at least some basic programming experience, preferably in an object oriented language. To understand Objective C is useful to read the language guide here.
• Download and install the latest iPhone SDK from here. For this you will need to  become a Registered iPhone Developer with Apple’s iPhone Dev Center. Note: The SDK is a free download for any registered iPhone developer, and you do not need to join (yet) the iPhone Developer Program which costs $99/year. You may want to join the iPhone Developer Program later when you decide to try your applications on real devices (iPhone or iPod Touch), but for now you can try everything on the iPhone Simulator which runs on your Mac.

Tutorial

We will create a small application with a custom made view that displays a regular polygon with a variable number of vertices (between 3 and 20). The application will also display the number of vertices, and will allow the user to change the number of vertices by moving a slider control on the screen.

Step 1 – Create a new project called Polygon

1. Make sure that the latest iPhone SDK is installed, and launch XCode.
2. Select the menu “File/New Project…”.
3. On the left column of the New Project dialog select “Application” under the “iPhone OS” section title. In the right window select “View-based Application”. Press “Choose…”, type in “Polygon” in the “Save As” field of the popup box, and click Save.

Note: Use the exact spelling and case for the project name, so you can just copy and paste code later in the tutorial.

Build and run the application. You should get no errors and the screen should show a gray view taking over all the screen except for the status bar. In the next step we will implement a custom view class that can draw a polygon on the screen.



Next >