DPS923 MAP523 Lab 1

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 Friday, January 24.

.

DPS923 MAP523 Lab 1 – due Fri Jan 24

Due date: Friday, January 24, at 6:00pm ET

Grade value: 4% 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

You need an iOS app that displays information about you.

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

.

Specifications

lab1-at-launchCreate a new iOS app, using the Single View Application template. The name of the app should be “AllAboutMe“.

It should target the iPhone, and do not use source control (e.g. git).

Before you begin adding objects to the user interface, get a head shot picture of yourself (aka selfie). Crop and resize it so that it is 100 pixels wide, and 150 pixels tall. It must be a PNG. Use any Mac, Windows, or online program to get this done.

Then, add your picture to your project:

  • right-click the Supporting Files group
  • choose “Add Files to <projectname>…”
  • browse to choose your file, and click the Add button (make sure that you check/mark the “Copy items…” check box!)

Now, your picture will be available in the Utility area’s  “Media library”.

In the upper area of the view controller’s view, there will be three user interface objects:

  • label – UILabel
  • image view – UIImageView (which is the container for your photo)
  • text area – UITextView

The label will display your name. The image view will show your picture, and appears when you drag your photo from the media library to the design surface. 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.

Add your photo: Select your photo from the media library area. Drag it to the upper-right area of the view. Use the blue-dashed guides to position your photo. On an iOS app, you almost NEVER position user interface objects on an edge – you should always leave a margin/border.

Add a label: From the object library area, drag a label to the view. Double-click it, and replace the selected text with your name. Alternatively, you can use the Attributes Inspector area of the right-side utility area to do this.

Add a text view: Drag a text view to the view. In the Attributes inspector, un-check (clear) the “Editable” behaviour. We want this text view to be read-only, because we will programmatically add its content, which will be something like “I am in the CPA program, in semester 5, and my GPA is 3.21.”

At this point, run your app (Command+R), just to verify that you’re making progress.

In the lower area of the view, there will be five user interface objects:

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

Add a segmented control: The top segmented control will display two segments, for two School of ICT academic programs, CPA and BSD. The initially-selected segment will be YOUR program of study. You can do this configuration in the utility area’s Attributes Inspector.

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

Add a label: This label simply describes the next two controls with static text (“My GPA is…”).

Add a slider: 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.

Add a text field: The text field will display the current value of the slider. This value will be set in your view controller code. For best results, set its “Keyboard” to “Numbers and Punctuation”.

Lay out the user interface objects so that everything looks nice and aligned. You can run your app again, just to make sure that it appears the way you want it to.

Then, continue with the sections below, to make the app work the way it should.

.

Making connections between the user interface and our source code

Writing code for this Lab 1 is a two-step procedure:

  1. Add outlets and actions to the view controller interface (.h)
  2. Writing code in the view controller implementation (.m)

.

Add outlets and actions

As you have learned, a storyboard is a resource file that holds the user interface objects, as configured by the Interface Builder editor.

To get programmatic access to the user interface objects, we connect them to declared properties and methods in the view controller’s .h (interface) source code file.

Before doing this, arrange the Xcode windows and tool areas. Select (to display) Main.storyboard. Select (click) the dock just below the scene, so that the scene is outlined with a blue line. Open the Assistant Editor (toolbar icon, or Option+Command+return). Make sure the .h (interface) source code file is displayed; if not, change to it (the keyboard shortcut to toggle between a class .h and .m source code file is Control+Command+up-arrow).

Add a method: Any of four user interactions will cause the text view to update. Either of the segmented controls could be tapped, or the slider moved, or the text field changed.

Therefore, it makes sense to create a single method that will perform the text view update. Then the user interaction events could call this method.

So, let’s add the following instance method to the .h file:

– (IBAction)updateTheTextView:(id)sender;

This is the method signature/declaration that should be used for methods that will be the “action” for user interface objects. (IBAction makes the method visible to Interface Builder, and the (id)sender parameter represents the object that raised or caused the event.)

Then, implement the method in the .m file:

– (IBAction)updateTheTextView:(id)sender
{
// …your code goes here…
}

Build your project (Command+B) to make sure that there are no coding errors.

Before continuing, make sure that the ViewController.h interface is showing in the right-side editor panel area.

.

Making connections

For the new/beginner iOS app programmer, this next procedure can seem different from other platforms, and challenging to understand. We’ll take you through, step-by-step.

First, add connections, from the following five user interface objects, to ViewController.h. All will be outlets.

  1. text view – suggested name tvResult
  2. segmented control (first one) – suggested name segProgram
  3. segmented control (second one) – suggested name segSemester
  4. slider – suggested name slGPA
  5. text field – suggested name tfGPA

.

What did we just do? We added references to our view controller, so that we can read or write (i.e. get or set) the values of the user interface objects.

Next, we want to add two more connections. They will be actions.

  1. slider – suggested name changedSlider
  2. text field – suggested name changedTextField

.

What did we just do? We added methods (the “action” in the target-action design/coding pattern) to our view controller (the “target”). The “changedSlider” method will be called when the app’s user moves the slider. The “changedTextField” method will be called when the app’s user edits the text field.

Finally, we want to make two more connections, from the segmented controls, to the “updateTheTextView” method that was added earlier. To do this, Control+click-drag from one of the segmented controls, to the method in the code file. Hover the pointer on top of the method name, until Xcode surrounds/selects the method. Then release the pointer.

So, as you can see, it is possible to connect many user interface objects to one method.

Do it again, for the other segmented control.

You’re now (almost) done the user interface configuration, and can move on to coding.

.

Writing code

Show the ViewController.m implementation. Write code for the updateTheTextView method first.

.

updateTheTextView: method

This method will be called when any of the four user interface objects changes. It simply will set the text view’s “text” property to a string that has the current values of the four UI objects. (Well, actually only three, because the slider and its text field will hold the same value.)

As an new/beginner iOS app programmer, we suggest that you be explicit and clear in your coding. Yes, it’s possible to write a long line of code that creates the string, but we suggest that you break the task into down into discrete parts, for clarity.

Here’s how you get the current value for a control. Pay attention to the value’s type. If it’s a number, you will have to convert it to a string. Here’s an example for the first segmented control:

segProgram.selectedSegmentIndex returns an integer. It has two segments. Segment 0 (zero) represents the CPA program. Segment 1 represents the BSD program. Use the compact form of the C language’s conditional operator syntax to make a string:

NSString *program = (self.segProgram.selectedSegmentIndex == 0) ? @”CPA” : @”BSD”;

Next, make a string for the semester. Segment 0 (zero) represents semester 5. Segment 1 represents semester 6. And so on. Therefore, the actual semester is the selected segment, plus 5. Here’s the code:

NSString *semester = [NSString stringWithFormat:@”%d”, (self.segSemester.selectedSegmentIndex + 5)];

Finally, you need the GPA value. You can get it from the text field directly, as text, or you can get it from the slider. The “value” property of the slider holds its value, and it’s a float type. Therefore, the string format that you’ll want to use is: @”%1.2f”

Now that you have the three discrete strings, you can set the text view’s “text” property to a string that includes these three. Use the stringWithFormat: method to make a string.

.

viewDidLoad method

This method loads only once (during the lifetime of the app), when the view controller loads/initializes. We want to do two things here:

  1. set the GPA text field to the value of the slider
  2. call the updateTheTextView: method

.

Set the GPA text field’s “text” property value to the slider’s current value. Extract the value from the slider, and use the (previously mentioned) format string, @”%1.2f”.

Next, call the just-coded updateTheTextView: method. You don’t have anything to pass in as an argument, so you can simply use this syntax:

[self updateTheTextView:nil];

.

changedSlider: method

This method is called when the app’s user moves the slider. It must do two things:

  1. set the GPA text field to the value of the slider
  2. call the updateTheTextView: method

.

You should be able to write this code, based on previous experience.

.

changedTextField: method

This method is called when the user edits the GPA text field.

First, create a float variable to hold whatever the app’s user typed in. (At this point, we don’t care whether it’s a valid floating point number.)

float gpa = [self.tfGPA.text floatValue];

Next, constrain the value of “gpa” to between 2.0 and 4.0. Use if-else or () ? : ; (i.e. the ternary syntax).

Then, update the slider; it’s value property is get/set, so it’s easy to do.

Then, clean up the formatting of the text field, in case the user didn’t enter the right number of decimal places. Use the previously-suggested string format for this.

Finally, call the updateTheTextView: method.

.

Keyboard handling – dismiss the keyboard

In class, we discussed (or will discuss) 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.

Here’s the easiest way to do this, for a view that has only one text field.

  1. In the Interface Builder editor, make a connection, from the text field’s delegate, to the View Controller (icon in the dock below the scene)
  2. In the view controller’s implementation, implement the textFieldShouldReturn: method

.

You now have the experience to make the connection, so do it now.

In the .h interface file, add <UITextFieldDelegate> to the end of the “@interface…” statement.

Then, write the code in the .m implementation. The pattern to use is as follows:

– (BOOL) textFieldShouldReturn:(UITextField *)textField {

[textField resignFirstResponder];

returnYES;

}

.

Keyboard handling – shift the view

The other keyboard-related topic we discussed (or will discuss) 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 Move View example iOS app; use them both:

  • textFieldDidBeginEditing:
  • textFieldDidEndEditing

You do not have to re-code these methods. You have permission to use the code as-is.

In a future session, you will learn more about this topic, to cover more interesting scenarios.

.

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 or less)
  4. Login to My.Seneca, and in this course’s Assignments area, look for the Lab 1 upload link, and submit your work there

.

.

.

.

.

.

.

.

.

.

.

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