Assignment 6 — Adding the MapKit Framework

I thought I’d take a moment to post about a problem a couple of people have been having. If you’re getting the following error, it is probably the result of not having added the MapKit framework…

*** Terminating app due to uncaught exception ‘NSInvalidUnarchiveOperationException’, reason: ‘*** -[NSKeyedUnarchiver decodeObjectForKey:]: cannot decode object of class (MKMapView)’

Under Xcode 3.2 (the screenshots in the notes) MapKit is pre-populated in the Add → Existing Frameworks… dialog and simply requires selecting MapKit from the list. However under Xcode 3.1 you have to do a bit more work. Follow the steps below for adding MapKit to your project if you haven’t done so already…

1) Open Finder and browse to /Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS3.0.sdk/System/Library/Frameworks as shown below (you may need to adjust the path a little if using a SDK newer than 3.0 with Xcode 3.1)…

Finder Window

Finder Window

2) Select the MapKit.framework fold and drag-and-drop it into the root of your Xcode project as shown below…

DnD Framework into Xcode

DnD Framework into Xcode

3) You should uncheck the box that states “Copy items into destination group’s folder (if needed)”, and press Add…

Copy Dialog

Copy Dialog

4) The MapKit framework should now appear under your project with the rest of the frameworks and your app should now contain the necessary MapKit libraries to run.

The Added Framework

The Added Framework

Functionize User Script

Here’s another user script I wrote to save time typing that didn’t make the Advanced Xcode lecture notes…

#!/usr/bin/env ruby

STDIN.read.each do |line|
    puts line.rstrip.gsub(/\s*;/, " {\n\n}\n\n")
end

This script is intended to be used after copying method declarations from a header file into an implementation file. Once your method declarations are pasted into the .m file, simply select them and run the script. It will turn the declarations from this…

- (void)foo;
- (int)bar:(int)i;
- (IBAction)doSomething:(id)sender;
- (id)someReallyLongWindedMethod:(int)x
               thatSpansMultiple:(NSString *)y
                linesInTheHeader:(NSDictionary *)z;

…into stubbed out method implementations, like this…

- (void)foo {

}

- (int)bar:(int)i {

}

- (IBAction)doSomething:(id)sender {

}

- (id)someReallyLongWindedMethod:(int)x
               thatSpansMultiple:(NSString *)y
                linesInTheHeader:(NSDictionary *)z {

}

Lecture 17 — Advanced Xcode

Advanced Xcode

Advanced Xcode

Assignment 6

Due Date

Monday, November 2nd — 11:59pm

Background

This project is designed to give you some hands on experience with…

  • Using Xcode & Interface Builder
  • Declaring and wiring outlets and actions
  • Testing applications in the iPhone Simulator
  • Utilizing MapKit to display maps
  • Using delegation to customize app behavior

Task

For this assignment you will be writing an app that allows a user to take a tour of several pre-defined locations on a Map. Your application needn’t look identical to the one shown in the description, but must it contain the following elements…

  • A toolbar where the user can select which type of map they want to see — standard map, satellite, or a hybrid
  • A large map view that will contain pins for each pre-defined location that will display an annotation (with disclosure arrow) for the current pin that allows the user to get additional information
  • A second toolbar that contains several buttons…
    • A locate button that shows the user’s current location on the map
    • Previous and next buttons that allow the user to visit the previous/next site

Additionally, your application must also include a flip-side view that presents more detailed information for a given location…

  • The name of the location
  • An image associated the location
  • A multi-line description
  • A button to return to the map

Main App Behavior

When your app initially loads it should look similar to the screen shown below. When the app is launched all locations should be drawn on the map with pins.

If it is the first time that the user has ever launched the app, it should automatically select the first location from a list of locations, zoom in on it and display its annotation. If the user had previously launched the app then the map view, selected map style and show location status should be restored as well as opening the annotation of the last location selected by the previous/next buttons.

Initial Screen

Initial Screen

The application must support allowing the user to switch between the 3 various map types. Below shows the resulting screen after the user presses the satellite segment.

Satellite View

Satellite View

If the user presses the disclosure arrow on an annotation, it should trigger a flip-style animation to a view that shows details about the location that was selected. Below, we see this animation mid-flip.

Animating to the Flip-Side

Animating to the Flip-Side

The flip-side view must neatly present the title of the location and associated image. Additionally, the description associated with the location is shown in a multi-line text view that allows the user to scroll. This back-side view should also contain a button to return back to the front-size of the application. None of the fields on the flip-side should be editable by the user. When the user presses the button to return back to the map the view should animate (flip) back to the front.

Location Details on the Flip-Side

Location Details on the Flip-Side

If the user presses the previous or next buttons they should be displayed the previous/next location in the list. These navigation buttons should act in such a way that they wrap around. When navigating in either direction, the new location should be centered on the map and its annotation should be automatically opened. Below we see the result of the user pressing the next button.

Navigating to the Next Location

Navigating to the Next Location

If the user presses the show location button (bottom left of the screen shot below), then the users location should be shown on the map as illustrated below. You shouldn’t recenter the map, but just show the user’s location. Note that this button acts much like a toggle button — when the user presses the button it should appear on until they press it again to turn it off (similar to the the Maps app).

Showing Location

Showing Location

The user should be able to pan and zoom with the map. Below is an example of pinching to zoom out.

Zoomed Out

Zoomed Out

Persisting Data

For this assignment, you need to persist and restore the following 4 pieces of data between app launches…

  1. The map style selected — when the app exits the current map style should be saved and when the app starts back up both the map and control should be put back as the user left them.
  2. The current location — the last location that the user had opened using the navigation buttons should be remembered, such that if the user clicks next, the pick up where they left off.
  3. The map region — the last view that the user had should be restored when re-opening
  4. Show location state — if the user had their location shown on the map when exiting, it should be restored and put back on upon restart.

Provided Resources

For this assignment I’ve provided a zip file that contains the following:

  • A sample locations.plist data file
  • 5 photos (JPGs) that are referenced in the data file
  • The icons (PNGs) that I used for displaying the location, previous and next

The plist data file describes the various locations. The plist is structured as an array of dictionaries, where each dictionary represents a specific location. Each location contains the following 5 keys/values…

  • title — the name of the location (a string)
  • description — the description of the location (a string)
  • image — the name of an image file that should be displayed for the location (a string)
  • latitude — the latitude of the location (a number/real)
  • longitude — the longitude of the location (a number/real)

Hints

As usual, the first thing I’d probably do is to print out images of the font and flip-side screens and identify outlets, ivars, action methods, etc. Next, I’d probably recommend building the font-side part of the app and get that working. Then add in the annotations and the flip-side view. Lastly, I’d add in the ability to save and restore the required preferences.

You might be tempted to use a utility app for this project, though that’s not what I did. I stuck with a view-based app and built out a second view controller and then programmatically displayed the second view.

Poke around UIBarButtonItem to figure out how to get a highlighted button style when the show location button is pressed (as shown in the example above). You’ll find something that gives you that highlighted (and regular) look.

Your best reference for MapKit is probably the MapKit Framework Reference API docs.

Additional Ideas

The following items are provided as thoughts as to how you might extend or improve the project beyond the basic requirements. You are not required to implement any of these.

  • Create different lists of locations and provide a UI to let the user choose which one(s) to view
  • Try out alternate color combinations — just don’t make my eyes bleed
  • Feel free to play with the layout and style of elements — just be sure that things are neatly aligned and that there is at least some justifiable method to your madness
  • Add your own images

Grading

Your projects will be graded on the following criteria:

  • Correctness of application
  • Appearance of application
  • Adherence to Objective-C and iPhone coding conventions
  • Neatly formatted and indented code
  • Well documented header files
  • Absence of significant performance issues
  • Absence of memory leaks

Submission

Like the previous assignment, you are required to submit a zip file of your project directory. Be sure to manually remove the build directory before zipping things up.

To submit the assignment, open up a terminal, navigate to your zip file then issue the command:

submit cs491i assignment6 Assignment6.zip

If developing on your own Mac, you’ll need to transfer the file into your GL account (via SCP), then SSH into GL and issue the submit command.

Lecture 16 — Debugging and Xcode Shortcuts

Debugging and Xcode Shortcuts

Debugging and Xcode Shortcuts

Course Blog Now iPhone Friendly

WordPress just updated their site such that if you visit the site from an iPhone you are automatically presented with an iPhone friendly version of the page. So, if you visit the course pages on your iPhone you should now see something like this…

Course Blog

Course Blog

They are even serving the HTML correctly such that you can add it to the home screen with an icon like so…

Added to Home Screen

Added to Home Screen

Final Project — Initial Presentation

Due Date

Slides must be submitted electronically by: Monday, October 26th — 11:59pm
Presentations will occur in-class on: Tuesday, October 27th and Thursday, October 29th (as needed)

Background

You will be presenting an in-class overview of your application proposal. This presentation serves several purposes:

  • As part of developing software, you are frequently required to develop and express your ideas for building out new components. This exercise is designed to give you some experience presenting your ideas to a group of of your peers.
  • Several proposals had a good bit in common — this allows you to learn what other people are working on and gives you an opportunity to team up to work on the final project if you wish.
  • This presentation will give you the opportunity to express areas of concern (i.e. not sure how I’d do something) and solicit feedback.
  • It will allow others to ask (brief) questions of the presenter which may expose something that you haven’t thought about, etc.
  • Provides a venue to start to think about and formalize aspects of your project that you will need to document as part of your final (formal) written proposal.

Slides

You should prepare some slides for use in your presentation. Specifically, I’m looking for the following…

  • Title slide — name of app & group members
  • Overview slide — a couple of bullets which summarize what your app does
  • Mock-up slides — you should put together some basic mock-ups which show what you are envisioning in terms of a UI. You should have 2 or more mock-ups (but no more than 4).
  • Thoughts slide — this is a catch-all for noting significant APIs, data sources, issues, questions, etc.
  • Questions & Comments — signals the end of your presentation and opens things up for brief Q&A.

Presentation

You should aim for keeping your presentation around the 3 minute mark — if you grossly exceed this time limit, you’ll be cut off. You should practice your presentation ahead of time to work out kinks and make sure you have adequate time.

You should start your presentation by first introducing yourself (and team members), move onto your material and end with the opportunity for people to ask (very brief) questions.

The order of presenters will be determined in Thursday night’s class and emailed out after class.

Example

Below is an example presentation, again based off of the stocks app that was shown as an example in the initial written proposal.

Sample Slides

Sample Slides

Mock-Up Advice

There are varying techniques for mocking-up or wire-framing user interfaces. I’ve tried to give you some different approaches in the provided example slides. Some of the more common approaches I’ve run into include…

  • Sketching it by hand
  • Using an image editing program to compose a UI from a bunch of images representing different widgets
  • Designing using something presentation software (i.e. PowerPoint, Open Office Impress, Keynote, etc.)
  • Building the actual GUI with canned data — this might be easier than you think, especially given the how powerful Interface Builder is)

Some stencils you might find useful for designing iPhone user interfaces…

Sketching related items you might find useful…

Submission

Your slides must be submitted as a PDF document. Both Macs and Linux have supported exporting/printing to PDFs for some time. If writing your proposal in MS Windows there are a couple of free PDF generation options including: Save as PDF Plugin for MS Office or PDFCreator (a PDF print driver for MS Windows).

If you are working with a partner, only one of you should submit the slides.

Submit using the command:

submit cs491i initialpresentation slides.pdf

If authoring on your own machine, you’ll need to transfer the file into your GL account (via SCP) and then SSH into GL and issue the submit command.