<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Liz Arum&#039;s Blog &#187; Web Browser</title>
	<atom:link href="http://blog.lizarum.com/tag/web-browser/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.lizarum.com</link>
	<description>I teach tech and share it</description>
	<lastBuildDate>Thu, 29 Sep 2011 16:29:14 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.3</generator>
		<item>
		<title>iPhone Browser</title>
		<link>http://blog.lizarum.com/2009/10/iphone-browser/</link>
		<comments>http://blog.lizarum.com/2009/10/iphone-browser/#comments</comments>
		<pubDate>Tue, 06 Oct 2009 18:45:13 +0000</pubDate>
		<dc:creator>Lizabeth Arum</dc:creator>
				<category><![CDATA[iPhone Programming]]></category>
		<category><![CDATA[Teaching]]></category>
		<category><![CDATA[iPhone]]></category>
		<category><![CDATA[programming]]></category>
		<category><![CDATA[Web Browser]]></category>

		<guid isPermaLink="false">http://blog.lizarum.com/?p=133</guid>
		<description><![CDATA[Perhaps the most typical network task performed by many network applications is to load a web page. The functionality of Safari’s WebKit engine is available to you in the form of the UIWebView. What we did Created an application that loaded web pages. Open Xcode: Create a new Project (&#8984;+&#8679;+N). Make it a View-based Application [...]]]></description>
			<content:encoded><![CDATA[<p>Perhaps the most typical network task performed by many network<br />
applications is to load a web page.</p>
<p>The functionality of<br />
Safari’s WebKit engine is available to you in the form of the <strong>UIWebView</strong>.</p>
<h4>What we did</h4>
<p><strong>Created an application that loaded web pages.</strong><br />
</p>
<ol>
<li>Open <strong>Xcode</strong>:
<p></li>
<li>Create a new Project (&#8984;+&#8679;+N). Make it a <strong>View-based<br />
Application</strong><br /><img src="http://blog.lizarum.com/wp-content/uploads/2009/10/view_based.png" alt="view_based" title="view_based" width="600" height="443" class="alignnone size-full wp-image-136" /></p>
<p></li>
<li>
Name it <strong>Browser</strong></p>
<p></li>
<li>Open <strong>BrowserViewController.h</strong> and add pointers for <strong>IBOutlets</strong><br />
for <strong>urlField</strong> (a UITextField) and <strong>webView</strong> (a UIWebView).</p>
<p></li>
<li> This application brings up the keyboard. You will<br />
be managing a text field and you will want to <strong>dismiss the keyboard</strong> when the user either clicks a done button or presses <strong> return</strong>. </p>
<p>To dismiss the keyboard, you need to tell the text field to give up its role<br />
as the <strong>first responder</strong>, meaning the component that initially receives<br />
the user input.<br />
<code>[nameField resignFirstResponder];</code></p>
<p>If you look up the documentation for <strong>UITextField</strong>, you’ll see that it has a delegate property<br />
that is defined by the <strong>UITextFieldDelegate</strong> protocol, a defined group of<br />
related methods. <br /><img src="http://blog.lizarum.com/wp-content/uploads/2009/10/UItextFieldDelegate_doc.png" alt="UItextFieldDelegate_doc" title="UItextFieldDelegate_doc" width="565" height="272" class="alignnone size-full wp-image-135" /></p>
<p>Look up this protocol and you’ll see it has numerous<br />
methods that alert the delegate of events relating to the text field. One<br />
of them is <strong>textFieldShouldReturn</strong>, which looks like what you need in order<br />
to know when the user has tapped return.</p>
<p>Add<br />
the <strong>UITextFieldDelegate</strong> protocol declaration too. </p>
<p><code><br />
@interface BrowserViewController : UIViewController <strong>&lt;UITextFieldDelegate&gt;</strong>{</p>
<p></code></p>
<p></li>
<li>Add an instance<br />
method to handle the clicking of the <strong>go</strong> button. It will be of type <strong>IBAction</strong> Name it  <strong>handleGoTapped</strong>.Pass it <strong>(id)sender</strong></p>
<p>Instance methods follow the closed curly brace and precede the @end </li>
<li>Open the <strong>BrowserViewController</strong> nib in <strong>IB</strong> and create the User Interface.
<ul>
<li>A textField</li>
<li>A webView</li>
<li>A GO button</li>
</ul>
<p>
Add a <strong>Placeholder</strong> in the textField so that the user knows to type <strong>http://</strong> and set the keyboard to URL (&#8984;+1)</p>
<p></li>
<li>Make the connections.<br />
(control-click the text field to expose its outlets, and connect<br />
its <strong>Delegate</strong> to <strong>File&#8217;s Owner</strong>.)</p>
<p></li>
<li>Open up <strong>BrowserViewController.m</strong>. You&#8217;ll need to define the method to get the URL from<br />
the text field and have the web view load that site; this method will be<br />
called when the user clicks the <strong>Go</strong> button or when they hit <strong>Return</strong><br />
on the pop-up keyboard.</p>
<p>When the go button is pressed:</p>
<ol>
<li>Close the keyboard by calling <strong>resignFirstResponder</strong> on <strong><br />
urlField</strong></p>
</li>
<li>Call <strong>loadURL</strong> on <strong>self</strong></li>
</ol>
<p></li>
<li>To create the <strong>loadURL </strong>method
<ol>
<li>
Create a pointer named <strong>url</strong> of type<strong> NSURL </strong>and set it to:</p>
<p><code>[[NSURL alloc] initWithString: urlField.text]</code></p>
</li>
<li>Create a pointer named <strong>request<br />
</strong> of type <strong>NSURLRequest</strong> and set it to <br />
<code>[[NSURLRequest alloc] initWithURL: url]</code></p>
</li>
<li>Call <strong>loadRequest</strong> on <strong>webView</strong> and pass it <strong>request</strong>
</li>
<li>Release <strong>request</strong>
</li>
<li>
Release <strong>url</strong>
</li>
</ol>
<p></li>
<li>Add the following method:<br />
<code>-(BOOL)textFieldShouldReturn:(UITextField *)textField {</p>
<p>}</code></p>
<p></li>
<li>Inside the method:
<ol>
<li>Test if the <strong>textField</strong> equals the<strong> urlField</strong> </p>
</li>
<li>Close the keyboard with <strong>resignFirstResponder</strong>
</li>
<li>Call <strong>loadURL</strong> on<strong> self</strong>
</li>
<li>Outside of the conditional, return <strong>YES</strong></li>
</ol>
<p></li>
<li>Implement autoroatation<br />
<code>-(BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {<br />
    return ((interfaceOrientation == UIInterfaceOrientationPortrait) ||<br />
            (interfaceOrientation == UIInterfaceOrientationLandscapeLeft) ||<br />
            (interfaceOrientation == UIInterfaceOrientationLandscapeRight) ||<br />
            (interfaceOrientation == UIInterfaceOrientationPortraitUpsideDown));<br />
}</code></p>
<p></li>
<li>Save, Build and Run
<p></li>
<li>Enter a url to test
<p></li>
<li>The most obvious thing lacking from<br />
the example is the usual forward and back buttons. You can<br />
 implement them with the <strong>UIWebView</strong>&#8216;s <strong>goForward</strong> and <strong>goBack</strong> methods. Provide a delegate that implements the <strong>UIWebViewDelegate</strong>.</p>
<p></li>
</ol>
<h4>Part 2</h4>
<p>All the substantial work in this application is done<br />
by the <strong>UIWebView</strong>. Once you&#8217;ve loaded the page, this view — backed<br />
by the <strong>WebKit engine</strong> for rendering HTML, interpreting JavaScript, and<br />
handling the network communication — does all the work for handling your web interactions, including submitting forms, navigating to new<br />
pages, running client-side browser apps, etc.</p>
<p>Even if you&#8217;re not planning on developing a browser, the <strong>UIWebView</strong><br />
has other compelling uses. While <strong>UIKit </strong>doesn&#8217;t provide a styled text<br />
component for iPhone apps, you can style HTML to your heart&#8217;s content<br />
with CSS, and put that styled HTML into a <strong>UIWebView</strong>. In fact, this is<br />
an excellent way to provide an <strong>about screen</strong> for your application, as<br />
you can provide links to your application&#8217;s home page, e-mails for tech<br />
support, or even dialable phone number links, all by just authoring<br />
HTML.<br />
To do this, instead of loading a page from the web, you can include<br />
your HTML, CSS, and images in the <strong>application bundle</strong>, and then find<br />
them inside the bundle.  Making a URL from a path in the bundle is just<br />
a matter of converting the path string to an <strong>NSURL</strong>:</p>
<ol>
<li>Create a web page named <strong>mywebpage.html</strong> or use index.html</p>
<p></li>
<li>In the <br />
<code>&lt;head&gt;&lt;/head&gt;</code> section add the following:<br />
<code>&lt;meta name="viewport" content="width=device-width; initial-scale=1.0;" /&gt;<br />
&lt;meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/&gt;<br />
&lt;meta name="apple-mobile-web-app-capable" content="yes" /&gt;</code></p>
</li>
<li>Set css body margin to zero
<p></li>
<li>Add the web page to your project. CTRL+click on Resources. Copy the file to your project.
<p></li>
<li>Create an application like you made in part 1, Name it <strong>Browser2</strong>.
<p></li>
<li>
This application is the same as the previous except for the <strong>loadURL</strong>method. Create the IBOutlets and IBAction in the header file</p>
<p></li>
<li>Open <strong>Browser2ViewController.xib</strong>  create a text filed, web view and button. Make connections and CTRL+click on the textField and link it to the FIle Owner&#8217;s delegate.
<p></li>
<li>Open the Inspector and in the  Text Field set the <strong>Text</strong> to <strong>webpage:</strong>
<p></li>
<li>
This application is the same as the previous except for the <strong>loadURL</strong>method. Open <strong>Browser2ViewController.m</strong> file and define the IBAction method and then create the <strong>loadURL</strong>method<br />
<br />
<code>//fill in the blank with a keyword to show your page<br />
//I did webpage:<br />
NSRange range = [urlField.text rangeOfString: @"______:"];<br />
    NSURL *url = NULL;<br />
    if (range.location == 0) {<br />
        // find the about page in bundle</p>
<p>        NSString *myPath =<br />
        //fill in the blank with the name of your page<br />
        [[NSBundle mainBundle] pathForResource:@"______"<br />
                                        ofType:@"html"];<br />
        url = [[NSURL alloc] initFileURLWithPath: myPath];<br />
    } else {<br />
        url = [[NSURL alloc] initWithString: urlField.text];<br />
    }<br />
    if (url != NULL) {<br />
        NSURLRequest *request = [[NSURLRequest alloc] initWithURL: url];<br />
        [webView loadRequest: request];<br />
        [request release];<br />
        [url release];</p>
<p>    }</code></p>
<p></li>
<li>Add the following method:<br />
<code>- (BOOL)textFieldShouldReturn:(UITextField *)textField {</p>
<p>}</code></p>
<p></li>
<li>Inside the method:
<ol>
<li>Test if the <strong>textField</strong> equals the<strong> urlField</strong> </p>
</li>
<li>Close the keyboard with <strong>resignFirstResponder</strong>
</li>
<li>Call <strong>loadURL</strong> on<strong> self</strong>
</li>
<li>Outside of the conditional, return <strong>YES</strong></li>
</ol>
<p></li>
<li>Implement autoroatation<br />
<code>-(BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {<br />
    return ((interfaceOrientation == UIInterfaceOrientationPortrait) ||<br />
            (interfaceOrientation == UIInterfaceOrientationLandscapeLeft) ||<br />
            (interfaceOrientation == UIInterfaceOrientationLandscapeRight) ||<br />
            (interfaceOrientation == UIInterfaceOrientationPortraitUpsideDown));<br />
}</code></p>
<p></li>
<li>Save, Build and Run
<p></li>
<li>Modify the <strong>loadURL</strong> method so that if the urlField is empty or if the urlField contains the text <strong>webpage:</strong>, your page gets loaded.
<p></li>
<li>Add  the ability to go forward and back
<p></li>
</ol>
]]></content:encoded>
			<wfw:commentRss>http://blog.lizarum.com/2009/10/iphone-browser/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

