iOS Tutorial - Part 19 - Create a Web Application, UIWebView

Create a Web Application, UIWebView

Video Description 
Web Application is an App that is written with HTML,CSS,JavaScript and has a wrapper to be able to show on a device. In this tutorial we will learn how to create a web app. In order to create a web application, follow the bellow steps:
1. create a new project
2. From storyboard, drag and drop WebView from pallet to the view controller
3. Control drag from web View to it's controller to create a property for the webView
4. Drag and drop your HTML files, inside of the project (Make sure you copy as a reference folder)
5. In ViewController inside of viewDidLoad add the following lines:

- (void)viewDidLoad
{
    [super viewDidLoad];
 self.webView.delegate = self;
    self.webView.scalesPageToFit = YES;
    
    NSString *htmlFile = [[NSBundle mainBundle] pathForResource:@"bootstrap" ofType:@"html"];
    NSURL *url = [NSURL fileURLWithPath:htmlFile];
    
    NSURLRequest *request = [NSURLRequest requestWithURL:url cachePolicy:NSURLRequestReloadIgnoringCacheData timeoutInterval:0.0];
    
    [self.webView loadRequest:request];
}  

You are done. If you run the application it should show the HTML content.

Show a URL in the WebView

If you want to show a website, you need to change your request like bellow:

NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.google.com"]];

Add Back, Forward, Stop and Refresh button

You can easily add above buttons for your WebView without even writing any code for it. All you have to do is to add some buttons to the screen and from each individual button, control drag to the WebView. It shows a list containing reload, goBack, goForward, stopLoading. Based on your button click to any of these links and they will work.

Download

Download the Web App from here

iOS Tutorial - Part 18 - Create Protocol, prepareForSegue

Create Protocol, prepareForSegue

Video Description 

prepareForSegue

When we connect two view controllers from storyboard, the following method will be called when first view wants to transmits to the second view.

- (void) prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
{
    
}

Because this method is called before transition, so we can initialize or set some value for the next view controller. segue has two important property:

1)segue.identifier

In storyboard click on the arrow that links two view controllers then in attribute inspector tab on right side toolbar give the name in identifier field. Now in prepareForSegue we can check if the identifier matches the one that we are looking. The following is statement goes inside of prepareForSegue just to protect our application from any exception or crash.

- (void) prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
{
    if ([segue.identifier isEqualToString:@"AddContact"])
    {
        //Do something
    }
}

2)segue.destinationViewController

As it can be guessed destinationViewController represents the next view controller. We can cast it to the next class name.

Casting in Objective-C

In order to force the compiler to consider a different type for an object we use casting. It's so simple to use. Yo just have to add a desired type inside of () and you are done. For example here we want segue.destionationViewController to have a type of AddContactVC. We should write:

(AddContactVC *)segue.destinationViewController

You may ask why we should cast!!! If we don't cast, compiler couldn't understand what is our specific type so it cannot see the available methods.

Create Protocol

If we have two different view controllers and we want them to talk back and forth, we need to define protocol and delegate. If you remember in textField delegate methods we used some built-in protocols and delegates. In this tutorial we will create our own protocol and delegate methods.

Steps to Create Protocol (Custom Delegate)

We have two view controllers in this example (Contact List) first view controller is a table view controller that shows the contact and the second view controller is the place that we add contact to the list. First view controller would be our delegate and second view controller would be our delegator. Here are the steps for delegator class:

1)Create Protocol

Add the following lines inside of the .h file of delegator class (AddContactVC) before @interface:

@class AddContactVC;
@protocol AddContactVCDelegate
- (IBAction)dismissAddContactVC:(AddContactVC *)sender;
- (void)addContactName:(NSString *)name phone:(NSString *)phone;
@end

@class is kind of our promise to compiler that we will define AddContactVC class in the following. If we don't put @class compiler will give error that there is not a class called AddContactVC. @protocol defines the name of the protocol and start point of it's methods. @end defines the end of the protocol.

2)Create Delegate Property

Create a weak property for our delegate between @interface and @end of delegator .h file.

@property (nonatomic, weak) id <AddContactVCDelegate> delegate;

3)Use delegate property in .m file

Inside of delegator .m file we should use our delegate property in appropriate place. In this example we have two delegate methods. The first method should be called when the user taps on the done button. And the second one should be used when the user taps on the add button. Open AddContactVC .m file control+drag the done button and add button to the implementation portion and create IBAction, then inside of these methods we can use our delegate property like bellow:

- (IBAction)dismissAddContactVC:(UIBarButtonItem *)sender
{
    [self.delegate dismissAddContactVC];
}

- (IBAction)addContactPressed:(UIButton *)sender
{
    [self.delegate addContactName:self.nameField.text phone:self.numberField.text];
}

Second method not only notifies us about user interaction but also sends two parameters, which are name and phone so we can use them to add to our table.
Here are the steps for delegate class:

4)Set delegate equal to self

First step to tell the compiler that we want to implement some delegate is to put our class delegate equal to self. Most of the time the best place is when we create an instance of delegator class but in this example since we have the instance, which is

(AddContactVC *)segue.destinationViewController

So we don't need to instantiate another instance we can use it and set the delegate equal to self like bellow:

- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
{
    if ([segue.identifier isEqualToString:@"AddContact"]) {
        [ (AddContactVC *)segue.destinationViewController setDelegate:self];
    }
}

5)Add <delegateName> in front of @interface

The second step to tell the compiler that we want to implement some delegate methods is to declare the delegate name in fron of @interface of delegate class. Before doing that make sure you import the delegator class.

#import "AddContactVC.h"
@interface ContactTVC () <AddContactVCDelegate>

6)Implement the delegate methods

The last but not the least is implementing the delegate methods

- (void)dismissAddContactVC
{
    [self dismissViewControllerAnimated:YES completion:nil];
}

- (void)addContactName:(NSString *)name phone:(NSString *)phone
{
    [self.names addObject:name];
    [self.phones addObject:phone];
    [self.tableView reloadData];
    [self dismissAddContactVC];
}

First method uses dismissViewControllerAnimated:YES completion:nil, which is one of view controller methods for dismissing the modal view. Second method adds the arguments to the array and then it reloads the table view by a method called reloadData. Then it calls our method dismissAddContactVC to dismiss the modal view once the user add new contact.

Rename files in Objective-C

In .m or .h file select the name of the file you want to change, then right click on it, from the opening drop down menu select Refactor/Rename. Then specify your new name and press preview. It will show you all the changes, you can confirm the changes by clicking on save button.

Download

Download the Contact List App with protocol from here

iOS Tutorial - Part 17 - Modal Segue, Connect View Controllers

Modal Segue, Connect View Controllers

Video Description 

Modal Segue

It's fairly easy to present a modal view triggering by a button. You just need to have two view controllers in the story board. Inside of the initial view you add a button and control drag from that button to the other view controller. It shows you a drop down menu when you realese the mouse. Select modal from the options and you are done.

Download

Download the Contact List App with modal from here