UIWebView Tutorial

In this post we will see a small demosntration of UIWebView control.

Design Phase: we will have one textField a button on the hit of which the Url mentioned in the textField will be displayed in the webview. Here's how our final design would look like

Step 1: Open the Xcode create a new project name it webviewdemo , now add a UIViewController subclass to your project and name it webviewController.

Step 2: Into the .h file of the webviewController create the object of the class UITextField, UIButton and UIWebView and a function which will be called on the touch of the UIButton, so here's how will you do it

@interface webviewController : UIViewController {

UIWebView *mywebview;

UITextField *txtfield;

UIButton *goButton;

}

-(void)goToURL;

@end

Now we are done with the .h file now go to the .m file of the webviewController and perform some basic settings like setting the frame for your controls, text etc in the init method

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {

if (self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil]) {

// Custom initialization

//setting the frame of text field

txtfield = [[UITextField alloc]initWithFrame:CGRectMake(20, 41, 225, 31)];

//setting the boarder style of the text field

[txtfield setBorderStyle:UITextBorderStyleRoundedRect];

//setting the Place Holder of the text field

[txtfield setPlaceholder:@"Enter URL"];

//setting auto correction type for text field

[txtfield setAutocorrectionType:UITextAutocorrectionTypeNo];

//setting the button

goButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];

[goButton setFrame:CGRectMake(253, 41, 47, 30)];

[goButton setTitle:@"Go" forState:UIControlStateNormal];

[goButton addTarget:self action:@selector(goToURL)forControlEvents:UIControlEventTouchUpInside];

//setting the frame of the webview

mywebview = [[UIWebView alloc]initWithFrame:CGRectMake(0, 78, 320, 402)];

//setting the background color of the view

[self.view setBackgroundColor:[UIColor blackColor]];

}

return self;

}

Go to loadView functions and add this view objects

- (void)loadView {

[super loadView];

[self.view addSubview:mywebview];

[self.view addSubview:txtfield];

[self.view addSubview:goButton];

}

Step 3: Now its time to give body to our function which we have declared earlier called

-(void)goToURL so here's the code for the body of this function

-(void)goToURL

{

NSURL *requestURL = [NSURL URLWithString:txtfield.text];

NSURLRequest *request = [NSURLRequest requestWithURL:requestURL];

[mywebview loadRequest:request];

}

In the above code I have used two classes called NSURL and the other called NSURLRequest.

NSURL class provide a way to manipulate the URL, in the object of NSURL (requestURL)  i am adding the URL which will be present in the Textfield.

In the other class thats NSURLRequest I have given the requestURL (object of NSURL class) to its object.

NSURLRequest has a class method called requestWithURL which creates and returns a URL request for a specified URL and takes the parameter of NSURL object.

The webView class has an object method called as the loadRequest which will connect to the given URL by initiating an asynchronous client request.

Step 4: Go to the AppDelegate.m file and add this view to your window

#import "WebviewDemoAppDelegate.h"

#import "webviewController.h"

@implementation WebviewDemoAppDelegate

@synthesize window;

- (void)applicationDidFinishLaunching:(UIApplication *)application {

// Override point for customization after application launch

webviewController *webViewVC = [[webviewController alloc]init];

[window addSubview:webViewVC.view];

[window makeKeyAndVisible];

}

Step 5: Press Build and go and you will get the following output.

This was simple demonstration of the UIWebView class, UIWebView class also has its own methods to go back and forward so if you just take a button or some other control and write this pice of code in it

[mywebview goBack];

                  OR

[mywebview goForward];

It will work just fine


Now lets say you have an HTML page in your resource group and you want that HTML page to be displayed in your web view control well you can do that as well with the help of this code that i have below

NSString *htmlFilePath = [[NSBundle mainBundle]pathForResource:@"myhtml"ofType:@"html"];

NSData *fileData = [NSData dataWithContentsOfFile:htmlFilePath];

[webviewObje loadData:fileData MIMEType:@"text/html" textEncodingName:@"UTF-8"baseURL:[NSURL URLWithString:@"http://www.google.com"]];

Code Explanation: In the above code htmlFIlePath is a string variable that will point to your HTML file which is located in the bundle (Resource group or any group), The NSData variable will contain the htmlFilePath i.e data regarding the HTML file and finally our instance of UIWebView class that's webviewObje has an instance method which is given above and with the help of this method you can load the HTML file in the iPhone simulator

Parameter explanation: 

loadData: It will take the instance of NSData class for the content of the main page

MIMEType: MIME stands for Multipurpose internet mail extension is basically a content type, you may refer this link for more details.

textEncodingName: The IANA encoding name as in utf-8 or utf-16.

baseURL: The base URL for the content, well if you ask me you can give any valid website name format and it will do the remaining trick for you

I hope this post was helpful to you