Home > 2010 Winter DPS913 > DPS913 APD601 Mac OS programming assignment

DPS913 APD601 Mac OS programming assignment


The Mac OS programming assignment enables you to create a simple but well-featured desktop app. It is due on Friday April 16 by 11:00pm, but will be accepted up to 6:00am on Wednesday April 21.

.

DPS913 APD601 Mac OS programming assignment – due Fri Apr 16

Due date: Friday, April 16, at 11:00pm

(will be accepted for full marks up to Wednesday April 21 at 6:00am)

Grade value: 10% of your final course grade

.

Objective(s)

This assignment is designed to leverage your knowledge of and experience with iPhone OS programming while creating an app for the Mac OS. We want to highlight a few areas where the Mac OS offers a rich, productive, and interesting programming experience.

.

Specifications

The FIFA World Cup is in June and July 2010. Your job will be to create an app that enables you to enter and edit team and match information for your favourite football teams. The data will be familiar, because you worked with it in a past assignment (Lab 4).

Your app will be a document-based app that uses Core Data for storage. The project’s name will be “MyWorldCup”.

There will be two entities, Team and Match. The Team entity will enable you to create national football team objects, with a mix of property types. The Match entity will enable you to create objects for the three matches each team plays in the opening round of the tournament.

You will be able to take advantage of Cocoa Bindings, and use one or more table views to display data. Of course, your app will support document persistence automatically.

The first job you should tackle (football joke!) is to create the Core Data model – the Team and Match entities.

Then, you can begin building the user interface.

Finally, you can work in Interface Builder and Xcode to bring the app to life.

.

Screen captures of the app

The following screen capture images show the app when first launched, and when data has been entered. The third image shows a new window object that shows a selected team’s web site.

Your screen layout may look different, and that’s OK.

Mac OS assignment - new

Here’s how this interface was built:

  • There are two “Table View” objects (NSTableView in an NSScrollView) in the upper-left area; each has two columns
  • Beside each table view, there are two “Push Button” objects (NSButton)
  • There are two “Image Well” objects (NSImageView) in the upper-right areas
  • In the middle of the window, there is another button, and a “Text Field” (NSTextField)
  • Below those, there is a “Wrapping Text Field” (NSTextField)

The top table view will hold a list of my “favourite” teams.

When a team has been selected/highlighted, the bottom table view will show the team’s scheduled matches.

Mac OS assignment - with data

The data for the app comes from the FIFA World Cup web site:

http://www.fifa.com/worldcup/

National flags were taken from the CIA web site; search Google by using these search words:

cia flags of the world

Mac OS assignment - web window

.

Core Data entities

The Core Data entities should have at least the following properties:

Team entity

  • Team name (string)
  • Team profile (string)
  • Photo of the team (binary)
  • National flag image (binary)
  • Web site URL (string)
  • Matches (relationship to the Match entity)

Match entity

  • Match date (date)
  • Opponent (string)
  • Team (relationship to the Team entity)

Note that we are using the Binary type for the images. This is different from our iPhone OS experience. The Cocoa Bindings feature on Mac OS offers us built-in value transformers, so we can use Binary here.

Here is an image of an example data model:

Data model

.

Guidance

For best results, make incremental progress. Most of the work you do will be done in Interface Builder, by applying concepts we have covered, and a few more that you will learn here.

In this section, we present a sequence of steps that you can follow. As noted above, create the Core Data entities, and then create the user interface.

The “teams” table view uses bindings to the Team Core Data entity. To get started, as you have learned, add an array controller to the “MyDocument” nib document. We suggest that you rename it to “Teams”, because we will have two array controllers in a few minutes.

Select the Teams array controller, and show the bindings inspector. At the bottom, show the Managed Object Context area. Bind to File’s Owner, and set the Model Key Path to managedObjectContext.

In the Cocoa Bindings examples you have seen so far, we have bound the array controller’s Content Array to an array. We are using Core Data here, so this is how we bind to the data source.

Select the “teams” table view. Click the column that you intend to use for the team name string (click it three times probably) until the column is highlighted/selected, and the bindings inspector shows you the title “Table Column Bindings”. Open the Value area. Here, you want to bind to the Teams entity. The Controller Key is arrangedObjects (i.e. you want a collection of objects to be displayed in the table view). The Model Key Path – the attribute in the entity – is teamName (if you used the same attribute name as the example data model above).

At this point in time, you have configured the table view column to hold team names.

Next, configure the functionality of the “Add” and “Remove” buttons. On the nib document, select the Teams array controller. Show the connections inspector. Make a connection from the “add:” method to the “Add” button, and connect the “remove:” method to the “Remove” button.

At this point in time, you should be able to save your work, and run your app. The add button works, and you should be able to add a team name. You should even be able to save, close, and re-open a document.

.

Adding data for the “selected” team

The table view shows a list of team objects. When an item is selected/highlighted, the other user interface objects should show data for the selected team. Let’s make those connections now. The same pattern will be followed for all objects.

In Interface Builder, select the user interface object. For example, select the national flag image. Next, show its bindings inspector, and open the Data area (use Data for NSData / binary values, and Value for string values).

As suggested above, you want to bind the user interface object to the team that is selected/highlighted on the table view. Therefore, bind to the Teams entity. This time, the Controller Key is selection. The Model Key Path is flagIcon (if you used the same attribute name as in the example data model above). For binary data – our images – we also need to select a Value Transformer; select NSUnarchiveFromData. You will also need to enable editing (by marking the appropriate check box).

The same pattern is followed for the team photo.

For the text fields (the URL and the team profile text), the same pattern is followed, but we do not need to use a Value Transformer.

At this point in time, save your work, and run your app. You should be able to add a team, and then click-drag-drop images from a web browser page into the image wells, and copy-paste text from a web browser page to the text fields. You should also be able to add another team (and its data), save, close, and re-open your document, and select a team to see its details.

Before moving on, let’s configure the “national flag” table view column to show the flag image. In the user interface object library, look for an “Image Cell” (NSImageCell). Drag and drop it on top of the “Text Cell” placeholder text in the table view.

Next, we’ll bind the table view column to the entity data. Click the table view until the inspector is titled “Table Column…”, and show its bindings inspector. Bind to Teams. The Controller Key is still arrangedObjects. The Model Key Path is flagIcon. We must configure a Value Transformer, NSUnarchiveFromData. (See the pattern here?)

You should be able to run your app, re-open a saved document, and see a small flag icon beside the team name in the table view.

.

Configuring the “matches” table view

The “matches” table view will enable you to add (and display) match information for a team that has been selected/highlighted in the “teams” table view.

Therefore, it is logically “bound” to the selected team. Here’s how we make this work.

Add another array controller to your nib document, and rename it to (for example) “Matches”. Then open its bindings inspector. It will need the same Managed Object Context settings as the “teams” array controller. And, you will connect its add: and remove: methods to the user interface button objects as you did for the other array controller.

However, we need to focus on the master-detail relationship by configuring another binding. Open the Content Set area. We want to logically bind the “matches” table view to the selected team’s list of matches/games, so that is what we do: Bind to the Teams entity. The Controller Key is selection (right?). The Model Key Path is matches.

Now we can move on to configuring the “matches” table view columns. The table view shows a list/collection of match/game objects, so it will be logically “bound” to the Match entity.

Click to select the “opponent” table view column, and show its bindings inspector. Set its Value area to bind to Matches. The Controller Key is (as you would expect) arrangedObjects. The Model Key Path is (as you would expect) “opponent” (if you used the same attribute name as in the example data model above).

Follow the same pattern for the match date and time column. We want to use a date formatter for this column, to ensure that it will accept (and display) data in the right format. In the library, look for a “Date Formatter” (NSDateFormatter). Drag and drop it on top of the column, and then set its attribute inspector settings to meet your needs.

At this point in time, your app will be able to handle match/game data. Try it and see.

.

Adding a new window that will display a team’s web site

The final task is to enable the user to visit the team’s web site without leaving your app. Similar in concept to an iPhone OS app, this requires another view object to be created, configured, and shown.

In your document nib, add a Window (NSWindow) object. Rename it to distinguish it from the other “Window” object (in the example, it was named WebSite). Open it in Interface Builder, so that you can configure it, and add user interface objects to it.

First, configure its attributes inspector. Un-check (clear) the Visible At Launch setting (so it doesn’t open until we want it to open).

Next, add a user interface object. The only object we want to add is a “Web View” (WebView). Find it in the library, drag and drop it, and then size it.

Now we have to write some code. As you did with iPhone OS apps, you need access to some user interface objects in your MyDocument controller code. Add IBOutlet-marked instance variables for the following:

  • The “teams” array controller, because we need access to the selected team (and its data)
  • The window object that will hold the web view
  • The web view, so we can configure its URL

You will also need a method to handle the button click to show the team’s web site.

Make sure you go back to Interface Builder and make the connections before returning to Xcode to write the method implementation.

Next, implement the method.

The URL is a string, and it’s stored in the array controller’s selection; extract it with valueForKey:. You will have to consult the NSArrayController documentation, and the documentation for its superclass, NSObjectController, for full details on the bits you need.

When you have the string, you send the web view the setMainFrameURL: message.

Finally, send the window the makeKeyAndOrderFront: message.

.

Send me your work

Make sure that you have configured your Xcode environment to avoid sending the intermediate build files. This will ensure that your uploads to me are the right size.

Follow these instructions to send me your work:

  1. Make sure your project works correctly
  2. Locate your MyWorldCup project folder in Finder
  3. Right-click the folder, and choose Compress “MyWorldCup”, which creates a zip file
  4. Visit this page: http://matrix.senecac.on.ca/~peter.mcintyre/dps913/, and upload MyWorldCup
.


Advertisements
Categories: 2010 Winter DPS913
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: