Apple iPhone Web Kit with Activity Indicator


Welcome to the club of searching for an overly simple UIWebView a.k.a. WebKit example! In this example, I’ll show you simply how to hand code a quick UIWebView into your program as well as to add a UIActivityIndicatorView a.k.a. an activity indicator. Without jabbing Apple too hard here, the documentation is pretty bad and that is why it’s nice to have an example just shown to you as-is. I hope this example helps shine a light on the situation for anyone wanting to implement a nice and quick Apple iPhone WebKit solution.

 
#import <UIKit/UIKit.h>
 
@interface FirstViewController : UIViewController <UIWebViewDelegate>
{
	UIWebView *myWebView;
	UIActivityIndicatorView *activityIndicator;	
}
/*
Inside the @implementation FirstViewController ... 
*/
- (void)viewDidLoad { //We have a NIB file in play here, so I dropped the loadView here.  Just make sure that your loadView is not getting called twice!
    [super viewDidLoad];
    [self loadView];
}
 
- (void)loadView {
	UIView *contentView = [[UIView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]];
	self.view = contentView;	
 
	CGRect webFrame = [[UIScreen mainScreen] applicationFrame];
	webFrame.origin.y = 0.0f;
	myWebView = [[UIWebView alloc] initWithFrame:webFrame];
	myWebView.backgroundColor = [UIColor blueColor];
	myWebView.scalesPageToFit = YES;
	myWebView.autoresizingMask = (UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight);
	myWebView.delegate = self;
	[self.view addSubview: myWebView];
	[myWebView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.maxpowersoft.com/"]]];
 
	activityIndicator = [[UIActivityIndicatorView alloc]initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];
	activityIndicator.frame = CGRectMake(0.0, 0.0, 40.0, 40.0);
	activityIndicator.center = self.view.center;
	[self.view addSubview: activityIndicator];
}
 
- (void)dealloc {
	[activityIndicator release];
	[myWebView release];
        [super dealloc];
}
 
#pragma mark WEBVIEW Methods
 
- (void)webViewDidStartLoad:(UIWebView *)webView
{
	// starting the load, show the activity indicator in the status bar
	[UIApplication sharedApplication].networkActivityIndicatorVisible = YES;
	[activityIndicator startAnimating];
}
 
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
	// finished loading, hide the activity indicator in the status bar
	[UIApplication sharedApplication].networkActivityIndicatorVisible = NO;
	[activityIndicator stopAnimating];
}
 
- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error
{
	// load error, hide the activity indicator in the status bar
	[UIApplication sharedApplication].networkActivityIndicatorVisible = NO;
 
	// report the error inside the webview
	NSString* errorString = [NSString stringWithFormat:
							 @"<html><center><br /><br /><font size=+5 color='red'>Error<br /><br />Your request %@</font></center></html>",
							 error.localizedDescription];
	[myWebView loadHTMLString:errorString baseURL:nil];
}

That is all there is to it. It’s really simple as you can see. Feel free to copy and paste accordingly.

, , , , ,

  1. #1 by chris on December 13th, 2009

    Hi Chris,
    sounds cool, also I still have problems to get it run.
    can you post a demo to install. would be great.

    I already have a working webview, but it makes in some cases problems. Does yours easy can autorotate for example? .. a demo to download.. really.. please 🙂

    greets
    Chris

  2. #2 by chris on December 13th, 2009

    Hi Chris,
    would be really a help to come in contact.
    Finaly I got your source work. Its kind similar with what i had already just done with the Interface Builder.. and I am happy now I have it just by Code.

    But also I have the same Problem 🙂
    For example when I activate
    shouldAutorotateToInterfaceOrientation
    return TRUE,

    so it allows just all directions, it works cool.. till i come to a form field where I enter anything… when I am than in landscape Mode and scroll.. the Scrollbar appears in the middle of the screen… just like the view itself is not landscape, instead still portrait.. but the webpage itself is shown correct in landscape…

    I would even provide you with my source.. but anyhelp i appreciate.. i am nearly done with a project for a client.. and now that makes me so much headache. I would for sure sponsor you a beer through paypal 🙂

    Thx
    Chris

    When I activate shou

  3. #3 by forex robot on December 17th, 2009

    Keep posting stuff like this i really like it.

  4. #4 by malaki1974 on May 26th, 2010

    Great work. Activity indicators work like a charm in the status bar. I only see the center activity indicator however when I come back from the webview. I need to see it right after I select the table item in the webview – as it loads. Any pointers?

  5. #5 by Chris Danielson on May 26th, 2010

    Malaki,
    It sounds like you are trying to use an activity indicator inside your webview when a user interacts with the HTML DOM layer elements. If this is the case, then you will probably want to use JavaScript, perhaps even jqTouch or some jQuery in order to add a progress indicator. The more complex solution might be to implement the webview shouldStartLoadWithRequest method. I would recommend the JavaScript technique.
    Regards,
    Chris

  6. #6 by malaki1974 on May 26th, 2010

    I’m sorry. I meant the indicator should show in the webview after I select the table row in the tableview. I am not interacting with the html DOM elements. I just want the user to see the spinner in the blank webview while it loads.

  7. #7 by malaki1974 on May 26th, 2010

    Figured it out. Changed the self.view to the name of the new webView which for me was myWebView.

    Thanks!

  8. #8 by Ali on January 16th, 2011

    I successfuly did the example but the doc file be opened with with lines Overlapping

    do u have any suggestion regarding solving that

    Best regards

  9. #9 by Zeiga on May 22nd, 2011

    This sample code is awesome, thank you very much!

  10. #10 by JJS on May 24th, 2011

    OH, Thank you
    I solved a problem by your example!
    Good luck to you

  11. #11 by BlackBook on August 10th, 2011

    you helped me big time! thank you for sharing your code! 😀

  12. #12 by Jialing on September 7th, 2011

    Thank you! Your example codes are amazing. I’ve used in my new App!!!

  13. #13 by Silvio Caetano on June 21st, 2012

    Your code help me a lot!

    Thanks!

  14. #14 by Diane Ferry on August 10th, 2012

    This is one of the very few things that worked perfectly for me the first time (that is after I tried all the other guys postings)!

(will not be published)


  1. No trackbacks yet.