Home > 2011 Winter DPS913 > DPS913 APD601 Lab 1

DPS913 APD601 Lab 1

January 18, 2011 Leave a comment Go to comments

Lab 1 gets you started with iOS programming. You will create an “all about me” app that enables you to use a number of user interface elements, work with the on-screen keyboard, and perform simple data round trips and type conversions. It is due on Tuesday January 25.

.

DPS913 APD601 Lab 1 – due Tue Jan 25

Assigned: During Week 2

Due date: Tuesday, January 25, 2011, at 9:50am ET

Grade value: 3% of your final course grade

Grading method: The following will be checked:

  • Completeness and adherence to iOS app coding principles
  • Correct interactive operation of the app’s logic

.

Objective(s)

Get started with user interface elements

Start to learn about layout capabilities and formatting in iOS apps

Begin using a number of Cocoa classes

Learn to use the delegation and target/action coding patterns

.

Introduction to the problem that you will solve

Professor's Lab 1 exampleYou need an iOS app that displays information about you.

When launched, the app displays current up-to-date information about you, including your program of study, semester of enrolment, and grade point average. The app will also enable you to change the displayed information.

A screen movie, in QuickTime format, can be downloaded from the link below. It shows the layout, features, and typical operation of the app:

Professor’s Lab 1 example

.

Specifications

Create a new iOS app, using the View-based Application template. The name of the app should be “AllAboutMe“.

In the upper area of the view, there are three user interface objects:

  • text field – UITextField
  • image view – UIImageView
  • text area – UITextView

The text field will initially display your name. You can set this in Interface Builder (IB). The image view will show your picture, and it must be 100px wide and 150px tall. The text area will display a string that is built from the settings in the user interface objects in the lower area of the view.

Here are a few more requirements, to be set/configured in IB:

  • text field – uncheck (clear) the checkbox for “Clear When Editing Begins”
  • text area – uncheck (clear) the checkbox for “User Interaction Enabled”; we want this text area to display only and not allow the user to tap/click in it

In the lower area of the view, there are four user interface objects:

  • two segmented controls – UISegmentedControl
  • slider – UISlider
  • text field – UITextField

The top segmented control will display two segments, for two School of Computer Studies programs, CPA and BSD. The initially-selected segment will be YOUR program of study.

The other segmented control will display four segments, for four semesters, 5 through 8. The initially-selected segment will be YOUR semester of enrolment.

The slider will have a minimum of 2.0, and a maximum of 4.0. The initial value will be YOUR current grade point average.

The text field will display the current value of the slider. This will be set in your view controller code.

Finally, the text area near the top of the screen will display a string with the current settings for all of the relevant user interface objects. As an example, it will say:

I am in the CPA program, in semester 5, and my GPA is 3.21

Lay out the user interface objects so that everything looks nice and aligned.

.

Guidance and tips for this lab

Before you begin, get a head shot picture of yourself. Crop and resize it so that it is 100 pixels wide, and 150 pixels tall. It must be a PNG. Use any Windows or Mac program to get this done. You can also use an online photo editor (like picnik.com).

Then, add it to your project:

  • right-click the Resources folder
  • choose Add > Existing files…
  • browse to choose your file, and click the Add button
  • check (mark) the checkbox for “Copy items into destination group’s folder (if needed)”, and click the Add button

Now, it will be available in IB’s Library tool, in the “Media” area.

What methods do you need?

If you watch the operation of the professor’s Lab 1 example, and think about what’s happening and what’s required, you will hopefully conclude that you will need about four methods:

  1. A method for initialization, when the app launches
  2. A method to update the string in the text area if the segmented control values change, or if the slider or bottom text field value changes
  3. A method to update the slider value if the bottom text field changes
  4. A method to update the bottom text field if the slider value changes

In addition to these methods, you will also need methods to handle keyboard operations, described later/below.

The initialization method will be an override for a superclass method. Use the viewDidLoad method.

The method to update the string in the text area will be called if either segmented control value changes. Using IB, you can connect multiple user interface objects to a single method. It will also be called if the slider or the bottom text field value changes. Because we need a separate method for each of those events, we’ll have those methods call this method.

The method to update the slider value if the bottom text field changes is simple. Convert the text field string into a float, and set the slider to this value. Then, call the method to update the string in the text area.

The method to update the bottom text field if the slider value changes is also simple. Get the slider value, and convert it to a text string for the bottom text field. Then, call the method to update the string in the text area.

.

Keyboard handling – dismiss the keyboard

In class, we discussed the iOS keyboard. The keyboard appears when the user taps/clicks in a UITextField. However, the keyboard does not automatically disappear. You must make it disappear.

When the user taps/clicks in a UITextField, it becomes the “first responder” to keyboard actions. Therefore, when we’re done entering text, we must tell the text field to “resign first responder” status.

While there are a few places that we could do this, we are suggesting the following:

  • the view controller interface should formally declare that it adopts the UITextFieldDelegate protocol
  • we implement the methods we need
  • in IB, we set the text field(s) delegate to the view controller, so that the methods will be called

To do this, there are two steps involved:

In the view controller’s .h interface, add the formal delegate declaration to the @interface declaration. After the superclass name, but before the opening brace, type this text:

<UITextFieldDelegate>

Then, in the view controller’s .m implementation, implement the textFieldShouldReturn: method. What does it look like? Download the ViewShifting example iOS app, and use its textFieldShouldReturn: method.

Coding challenge: What if a text field is active (i.e. the user tapped/clicked in it, and therefore it is the first responder), and then instead of tapping/clicking the “return” key on the keyboard, the user taps/clicks some other user interface object. What should happen? The keyboard should be dismissed. How can we do this? By testing whether a text field is the first responder. Where? In the method that handles the other user interface object?

.

Keyboard handling – shift the view

The other keyboard-related topic we discussed was the situation where a text field is positioned on the bottom part of the screen, where the keyboard would cover it after it slides up. How should this be handled?

Well, we want to shift the view up so that the text field still appears above the keyboard. After the keyboard is dismissed, we will shift the view back down to its original position. There are two methods in the ViewShifting example iPhone OS app; use them both:

  • textFieldDidBeginEditing:
  • textFieldDidEndEditing

.

Before you begin

Configure your Xcode environment as follows. This will ensure that your work can be uploaded for grading.

Background information: The as-installed configuration of Xcode places about 3MB of “intermediate build files” in your project folder. I do not need these files to build and run your project when I mark it. Therefore, the best thing to do is to change the location where the files are stored, so that they are not included in your project directory. (This will enable you to simply and successfully zip-and-send your project to me.)

I will ask ACS to configure this setting into the image, and will advise you when it becomes active.

Here’s how to do this: In Finder, create a folder called “Xcode Build Files” in your Documents folder.

Now, open Xcode. Open Preferences (on the Xcode menu, or by pressing Command+,). The Xcode Preferences panel has an icon strip along the top which enables you to click an icon to configure the settings for an Xcode functional area. Select the “Build” icon.

Now, change the “Place Intermediate Build Files in:” settings to use the “Customized location“, and enter “/Users/cs/Documents/Xcode Build Files” (which is the folder you just created above). To save your settings, click the Apply button and then the OK button. See the following image for guidance:

.

Submitting your work

Follow these instructions to send me your work:

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

.


Advertisements
Categories: 2011 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: