iOS - Hello World

These notes were adapted from http://codewithchris.com/how-to-make-an-iphone-app/
SEE http://codewithchris.com/hello-world-iphone-app/ FOR GRAPHICS

Objective #1: Use the Xcode IDE v 4.6.3

See http://codewithchris.com/xcode-tutorial/

Objective #2: Create an iOS Hello World app.

Open Xcode
Click the File/New/Project... menu command unless the Xcode welcome screen opens first.
Click Application under the iOS category in the left panel. Select "Single View Application" on the right side and click Next.
Type the following values

Product Name: HelloWorld
Organization Name: Your Name
Company Identifier: com.johndoe (your name substituted for johndoe)
Class Prefix: empty
Devices: iPhone
Use Storyboards: checkmark
Use Automatic Reference Counting: checkmark
Include Unit Tests: do not checkmark

Click Next
Navigate to the location where you would like to save your project's main folder and leave the Source Control checkbox unchecked. Click Create.
Click the Run button in the upper left-hand corner to launch the app in the Simulator.
Your project consists of
- AppDelegate class
  - AppDelegate.h header file
  - AppDelegate.m implementation files
- ViewController class
  - ViewController.h header file
  - ViewController.m implementation file which manages a view
- MainStoryboard.storyboard view which describes the views and app flow
If you click on MainStoryboard.storyboard, Xcode's Interface Builder will display the view in a visual designer window.
See this image - http://codewithchris.wpengine.netdnacdn.com/img/your_xcode_project_app_flow.jpg
The AppDelegate object is the entry point to the application. When the app is executed, it creates a ViewController object. The ViewController object then sets up and renders the view described in MainStoryboard.storyboard XML file.
Click on View Controller in the View Controller Scene panel. This is the ViewController.xib file that contains the default view which the ViewController class manages.
In the Library Pane in the lower-right corner of the screen, scroll to find "Label” in the list of Objects. Click, drag, and drop a Label object into the view.
With this label selected, type "Hello World" into the text property in the Property Inspector in the upper-right corner of the screen.
You can resize the label as desired.
Since the ViewController class manages the view, it must be able to reference the view when it needs to do something with it. The ViewController object has a view property that "points" to the memory location of the view object.
Click on the ViewController.m implementation file and find this viewDidLoad method:

- (void)viewDidLoad
{
   [super viewDidLoad];
   // Do any additional setup after loading the view,
   // typically from a nib.
}

This code executes immediately when the view has been loaded. (The term "nib" is the old name for what is now "xib".)
You can programmatically add more objects to the view within this viewDidLoad method as in:

- (void)viewDidLoad
{
    [super viewDidLoad];

    // Create the label object and set its frame
    UILabel *label = [[UILabel alloc]
    initWithFrame:CGRectMake(0, 0, 200, 50)];

    // Set the text property of the label
    label.text = @"Hello Again!";

    // Add the label object to the view
    [self.view addSubview:label];
}
self is a keyword that refers to this object. In this case, self refers to the ViewController instance. So self.view is accessing the view property of this ViewController object. The view calls its addSubview method to place the label UILabel element in it.
Click on the Run button.
Here’s the code to create a new instance of a class

[[ClassName alloc] init];

The alloc method allocates space in memory for the object and then the init method is executed. Often there’s code in the init method to initialize the object. When we created a new UILabel earlier in this tutorial, we used:

[[UILabel alloc] initWithFrame:CGRectMake(0, 0, 200, 50)];

The initWithFrame method is another initialization method but this one takes in some coordinates to specify where to place the label on the screen with given x and y-coordinates and a width and height.

Objective #3: Add components to a view.

From the Object Library in the lower right corner of the screen, drag a Label, Text Field, and a Round Rect Button into the view.
Set the text property of the button to Switch Text. Widen the button and label elements a little bit by adjusting them in Interface Builder.
The ViewController class manages the view so it’s the place where you add code to handle a button click.

However, first, the ViewController needs to have references to the UILabel and the UIButton that were added to the view. Interface Builder has an easy drag-and-drop way for us to create the properties in our ViewController and also assign the UIElements we create in Interface Builder to these properties of the ViewController.

First, click the ViewController.xib file in your navigator so that you see the Interface Builder view.

Next, it's helpful to click an icon called the “Assistant Editor” (looks like a tuxedo) located in the upper-right corner of Xcode. Clicking that screen will give you a split window view. On the left hand side, you’ll have the Interface Builder view of ViewController.xib. On the right hand side, you should be looking at ViewController.h.

Once you have ViewController.xib on the left hand side and ViewController.h showing on the right hand side, hold down the “control” key on the keyboard, click the UILabel on the left-hand side and drag it over to the right-hand side, and drop it on an empty line below @interface ViewController : UIViewController. You should see a blue line follow your mouse as you drag it across the screen. A dialog window will pop up asking you to name the property. Type “helloLabel” and click “Connect”. This action will add the code

@property (strong, nonatomic) IBOutlet UILabel *helloLabel;

to the ViewController.h file.
Next, you’re going to do this for the UITextField element. Hold down “control” key, click your UITextField on the left-hand side and drag it over to the right hand side, and drop it on an empty line under the label property. Name this property “customTextField”.
Finally, do the same thing with the button and name it clickyButton.

Here is the ViewController.h header file that now contains three properties representing the three objects:

#import <UIKit/UIKit.h> 

@interface ViewController : UIViewController
   @property (strong, nonatomic) IBOutlet UILabel *helloLabel;
   @property (strong, nonatomic) IBOutlet UIButton *clickyButton;
   @property (strong, nonatomic) IBOutlet UITextField *customTextField;
@end

Objective #4: Handle user interaction with buttons and text fields.

Open the ViewController.m file and, in the method viewDidLoad, we’re going to add some code to change the text of the UILabel and the UIButton. Add the below two lines into your viewDidLoad method so that it looks like this:

- (void)viewDidLoad
{
    [super viewDidLoad];

    label.text = @"default text";
    [self.clickyButton setTitle:@"Clicky" forState:UIControlStateNormal];
}
To handle a button click, we need a method in ViewController.m that contains code to be executed when the button is clicked.

Then we connect this method to the button click event of the UIButton in our view.

Interface Builder provides an easy drag and drop way to create this method and all we need to do is fill in the code.

So once again, turn on Assistant Editor view where we have two panes.
The left-hand side should have ViewController.xib and the right hand side should show ViewController.m.

When we were creating properties, we had ViewController.h on the right pane, but this time, we’re creating a method to handle the button click so we want ViewController.m on the right hand side.
Add the below two lines into your viewDidLoad method so that it looks like this:

- (void)viewDidLoad
{
    [super viewDidLoad];

    self.helloLabel.text = @"default text";
    [self.clickyButton setTitle:@"Clicky" forState:UIControlStateNormal];
}

To handle a button click, we need a method in ViewController.m that the contains code we want to be executed when the button is clicked. Then we connect this method to the button click event of the UIButton in our view. Interface Builder provides an easy drag and drop way to create this method and all we need to do is fill in the code.

So once again, turn on Assistant Editor view where we have two panes. The left hand side should have ViewController.xib and the right hand side should show ViewController.m. When we were creating properties, we had ViewController.h on the right pane, but this time, we’re creating a method to handle the button click so we want ViewController.m on the right hand side.

Once you have both the xib file and the .m file visible, hold down “control” on your keyboard, click and drag the UIButton in the view over to the right hand side and drop it on an empty line just before @end. I named my method handleButtonClick.
Change the text of the label to whatever is in the text field when the Clicky button is clicked. In the handleButtonClick method that we created previously, add the single line of code below. Also, add a method below handleButtonClick called touchesBegan.
Another way to link the components with the ViewController is to right-click on a compenent to bring up its properties. Find Referencing Outlets property and verify that View Controller is selected.
Now if you run the app, you’ll be able to type in some text into the text field, tap outside to dismiss the keyboard and then click the button to change the Hello label text.

Objective #5: Explain the Model-View-Controller approach and the relationship between the View and the Controller.

See http://codewithchris.com/recap-of-user-interaction-demo for a discussion of the MVC (Model View Controller) Design Pattern.
View - The View is responsible for displaying the data on the screen from the Controller and receiving user gestures and relaying that back to the Controller.
Controller - The Controller is responsible for updating and retrieving information from the Model and handles user interaction from the View.
Model - The Model is responsible for retrieving the data from whatever data sources that powers the app (database, feeds etc).
There are some special roles and characteristics in the relationship between the Model, View, and Controller objects.
- The View never directly sends or receives information to/from the Model.
- The Controller serves as the “middle-man” between the View and the Model
- The Model never communicates with the View.
Open the ViewController.m file and in the method viewDidLoad, we’re going to add some code to change the text of the UILabel and the UIButton. Add the below two lines into your viewDidLoad method so that it
In the statements

@property (strong, nonatomic) IBOutlet UILabel *helloLabel;
@property (strong, nonatomic) IBOutlet UIButton *clickyButton;
@property (strong, nonatomic) IBOutlet UITextField *customTextField;

the keyword IBOutlet (as in "Interface Builder Outlet") indicates that the property can be exposed to Interface Builder and connect with UIElements created from Interface Builder.
Remember that other than dragging UIElements such as labels, text boxes and buttons to the ViewController.h file, another way to do expose them to Interface Builder is by manually typing the declaration statements in ViewController.h and then connecting each UIElement to that property by adjusting the Referencing Outlet on the property inspector that comes up when you right-click the UIElement in the Interface Builder panel.
Similarly, when you dragged the UIButton into ViewController.m and created a method to handle the button click, did you notice that the method was created with a keyword IBAction?

The IBAction keyword denotes that this method should be visible from Interface Builder so when you’re in Interface Builder and looking for a method to hook up to a certain event, you can see that method. The way in which we dragged the UIButton to ViewController.m to create the method is just one way to do so. Another way we could’ve done it is by typing out the IBAction method first in ViewController.m, and then going into Interface Builder, selecting the UIButton and selecting an existing IBAction method to connect with the click event.
To add additional properties to the controller such as string variables, you can add declaration statements in this format:

@property (attributes) ClassType PropertyName;
Typically the attributes will be replaced with strong, nonatomic. See this reference to understand this reference.
ClassType will be replaced with the name of the class of the object.
PropertyName will be replaced by a variable name like *firstName (if the variable is a reference to an object like NSString) or int (if the variable is a primitive data type like int, BOOL, or double).
Here is an example property declaration statement found in ViewController.h

@property (strong, nonatomic) NSString *titleText;

and a method that would make use of it in ViewController.m

- (void)sampleMethod
{
   // assigns the string literal "Some Title Text" to the property
   self.titleText = @"Some Title Text";

   // retrieves text from the property & assigns
   // it to another variable
   NSString *myStringVariable = self.titleText;
}
To declare and use a method named sampleMethod within a class implementation file such as ViewController.m, the method could be declared and implemented like this

- (void)sampleMethod
{
    // this method will do something
}

Note that the method will be private and can only be called by other methods in the same class in this way:

- (void)viewDidLoad
{
    // call the method called "sampleMethod"
    [self sampleMethod];
}
To declare and define a public method however so that it can be used in other classes, you must add a method prototype (aka method signature) to the interface in the class's header (.h) file as in:

@interface ViewController : UIViewController
   - (void)sampleMethod;
@end

It can be called by other classes in this way

// this is the .m file of another class
- (void)viewDidLoad
{
   // create a ViewController object and
   // assign it to the variable called "myViewController"    ViewController *myViewController = [[ViewController alloc] init];
   // call the "sampleMethod" method of the object
   [myViewController sampleMethod];
}

It can be called from within the same class by using self as in

[myViewController self.sampleMethod];
A method signature looks like this

-(ReturnType) methodName;

The method signature begins with a dash ( - ) to show that it is an instance method and not a static method which begins with a plus ( + ).

ReturnType specifies the type of data that is being returned by the method or void if nothing is returned.

More often, your method will accept parameters and a generalized method signature would look like this:

- (ReturnType)methodName: (parameterDataType)parameterName;

and a specific example like this:

- (int)addFive:(int)input

Here is the matching method definition:

- (int)addFive:(int)input
{
return input + 5;
}

Objective #6: Use Storyboards.

Storyboards are a way to visually design your user interface, app flow and transitions from view to view.
You can create a Navigation Controller by selecting the ViewController and then clicking the menu command Editor/Embed In/Navigation Controller
You can add a second View Controller by dragging one from the Library Pane onto your Storyboard.
To create your own UIViewController class rather than using the one that Xcode automatically generates, right-click on the root folder and select New File.../Objective-C Class. Type a name such as MapViewController and put UIViewController in the subclass box.
In the Storyboard, select the new ViewController and select MapViewController as the "Custom Class" in the Properties inspector.
Next, add a button onto the first view. Hold down the control key on the keyboard and click and drag a line from the button to the second ViewController. Choose "Push" when prompted for a transition. This is a "segue" between the views.
Run the app and navigate between the two views.
FINISH THESE NOTES BY PICKING UP FROM 1/3 OF THE WAY DOWN AT

http://codewithchris.com/xcode-tutorial-storyboards-mapkit-view-navigation/