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:
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:
Write the AboutPageViewController to objective C files using File->Write Class Files…->Save. Automatically add them to your project by checking the box:
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:
And you’re done!
