Designing an iPhone App's "About" Page Using HTML

During design of our Date Wheel and Serving Sizer iPhone apps, we wanted to include an "about" page with information and links for contacting us, sharing our apps, and upselling. We considered several options, but found using html to this end was the best solution for us. Since it worked well, we thought we'd share the method. This post will describe the steps necessary to create an html "about" page.

To make an html "about" page with Interface Builder, you need to:

Add a View Controller for the "about" page to your project. Then, change the class name from UIViewController to something like AboutPageViewController. Next, add a Web View to the View Controller:

web view screenshot

Write the AboutPageViewController to objective C files using File->Write Class Files...->Save. Automatically add them to your project by checking the box:

add view screenshot

Edit AboutPageViewController.h and make AboutPageViewController inherit from UIViewController and make it implement the UIWebViewDelegate protocol (more about that later). While we're here, add an IBOutlet for the Web View:

@interface AboutPageViewController : UIViewController 
{
	IBOutlet UIWebView* web;
}
@property (nonatomic, retain) UIWebView* web;

Now edit AboutPageViewController.m and synthesize the outlet:

@synthesize web;

The default behavior of the web view is to open web pages in the external Safari browser. Since we want to show the content locally, we need to implement the web view's delegate protocol and override this behavior. The following code will open the "about:blank" and any URL that begins with the "file://" protocol in the existing web view. All other URLs will invoke the external Safari browser. Add this code to AboutPageViewController.m:

-(BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest*)request 
  navigationType:(UIWebViewNavigationType)navigationType
{
	NSURL* url = request.URL;
	if ((![[url absoluteString] isEqualToString:@"about:blank"]) &&
	    (![[url scheme        ] isEqualToString:@"file"       ]) )
	{
		[[UIApplication sharedApplication] openURL:url];
		return false;
	}
	return true;
}

There are several ways of loading the web view with data. You can pass it a string that contains html code, you can direct it to an external web site, or you can pass a URL to a local html file. This guide covers the last option since it will be the more responsive than an external URL and can easily reference graphics images unlike the first option.

In AboutPageViewController.m, add these lines:

- (void) viewWillAppear:(BOOL)animated
{
	//Load the index.html file.
	NSBundle* bundle     = [NSBundle mainBundle];
	NSString* filePath   = [bundle pathForResource:@"index" ofType:@"html"];
	[web loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath:filePath]]];
}

Create your index.html file and add it along with any web image graphics to your project. These files will be accessible in the application's bundle. When adding the files, make sure the target checkboxes are checked so they are included in the application bundle:

Now connect the outlet to the Web View in Interface Builder:

connecting outlet screenshot

And you're done!

Comments

Great Idea

Hello --

Thanks so much for posting that! I'm not a technical person, but from what you've described it sounds like a good solution to a real problem. I plan on forwarding the link to my developers to see if it will work for us.

Regards, David

Looking for dumbed down tutorial

Hey guys and gals,

I am trying to apply your theory of approach to the about page to another method, which will bring up a .m4v on touching a cell in UITableViewCell. I have 5 different cells. Now, I know this is a different project entirely, but I am just doing research and this article is in my top 5 because of its relation to html. I want to use WebView to bring up the .m4v's, which there will be 5 of, seeing as how I have 5 different cells. The problem is that every tutorial I have poured through assumes that I should know more than I do, like it will say create a new view which I have no idea how to do. I have created a single view, so I am not a total moron, it's just that I no source to brainstorm with. Now, what I think I need to do, is create a new objective c file, there are 3 different choices of files to select in xcode when I highlight classes, right click, and choose add file. I will make sure and check the box that will give me files labeled .h and .m. I am sorry that I do not even know the basics of how else to describe these files, but I know that one of them is the header and one is more method oriented. Then I will be altering the code of these files to retrieve the m4v from a server. I thank anyone who attempts to undertake this question because it is so basic, and, like i mentioned before I apologize for this but the tutorials I have run across are all quite advanced. THanks again

gII

I think in that case, you

I think in that case, you probably want to just launch the URL directly from the table's "didSelectRowAtIndexPath" method. You might not even need to create a view for it (see the second reply here):
http://stackoverflow.com/questions/976652/pros-and-cons-of-mpmovieplayer...
-Cory

Very useful piece of code

Very useful piece of code Cory.I'll definitely try this out.Thanks for sharing.

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
11 + 1 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.