Logo

User Tools

Site Tools

You are here: start » objective-c » examples » uiwebview_using_local_resources
objective-c:examples:uiwebview_using_local_resources

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

objective-c:examples:uiwebview_using_local_resources [2014/08/18 22:33]
Mo created 		objective-c:examples:uiwebview_using_local_resources [2024/02/16 01:06] (current)
Line 5: Line 5:
 If you're following this example it is necessary that you are familiar with XCode and UIWebView-Basics.  If you're following this example it is necessary that you are familiar with XCode and UIWebView-Basics. 
  
-First we will create the project. Open up XCode and click File->New->Project. Single View Application is the template we want for this purpose. +First we will create the project. Open up XCode and click File->New->Project.\\ 
 +{{:objective-c:examples:bildschirmfoto_2014-08-18_um_22.30.57.png}}\\ 
 +Single View Application is the template we want for this purpose. Select it and click next. Now provide a name for your project. I named mine 'UIWebViewSample'.
  
 +In the ViewController.m and make your interface declaration at the top look like this:
  
 +<code objc>
  
-Select it and click next. Now provide a name for your project. I named mine 'UIWebViewSample'.+@interface ViewController () <UIWebViewDelegate> 
 + 
 +@property(nonatomic, strong) IBOutlet UIWebView *webView; 
 +@property(nonatomic, assign) IBOutlet UIBarButtonItem *backBarButton; 
 + 
 +@end 
 +</code> 
 + 
 +Next we will add some code to load the webView and make the backBarButton usable. 
 + 
 +=== Make your 'viewDidLoad' method look like this: === 
 +<code objc> 
 + 
 +- (void)viewDidLoad 
 +{ 
 +    [super viewDidLoad]; 
 + // Do any additional setup after loading the view, typically from a nib. 
 +     
 +    // ** FIX FOR iOS 7 ** 
 +    if ([[[UIDevice currentDevice]systemVersion]floatValue] >= 7.0) { 
 +        self.automaticallyAdjustsScrollViewInsets = NO; 
 +    } 
 +     
 +    // ** SET NAVIGATION ITEM DISABLED ** 
 +    _backBarButton.enabled = NO; 
 +     
 +    // ** DECORATE WEB-VIEW A BIT ** 
 +    _webView.layer.borderWidth = 3.0f; 
 +    _webView.layer.borderColor = [[UIColor grayColor]CGColor]; 
 +     
 +    // ** LOAD WEB-VIEW ** 
 +    [self loadWebView]; 
 +} 
 + 
 +</code> 
 + 
 +=== Add a new IBAction-Method for the 'backBarButton': === 
 +<code objc> 
 +- (IBAction)navigationButtonAction:(id)sender { 
 +     
 +    if ([sender isKindOfClass:[UIBarButtonItem class]]) { 
 +        UIBarButtonItem *buttonItem = (UIBarButtonItem *)sender; 
 +         
 +        switch (buttonItem.tag) { 
 +            case 0: 
 +             
 +            [self loadWebView]; 
 +            _backBarButton.enabled = NO; 
 +            break; 
 +             
 +            default: 
 +            break; 
 +        } 
 +    } 
 +} 
 +</code> 
 + 
 +=== Add one more method called 'loadWebView': === 
 +<code objc> 
 +- (void)loadWebView { 
 +     
 +    // ** GET BUNDLE-PATH TO BUILD THE 'baseURL' ** 
 +    NSString *bundlePath = [[NSBundle mainBundle] bundlePath]; 
 +    NSURL *baseURL = [NSURL fileURLWithPath:bundlePath]; 
 +     
 +    // ** GET PATH-STRING OF 'index.html' FILE ** 
 +    NSString *filePath = [NSBundle pathForResource:@"index" ofType:@"html" inDirectory:bundlePath]; 
 +     
 +    // ** GET HTML-STRING OF FILE ** 
 +    NSString* htmlString = [NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil]; 
 +     
 +    // ** START LOADING WEBVIEW WITH 'htmlString' AND 'baseURL' ** 
 +    [_webView loadHTMLString:htmlString baseURL:baseURL]; 
 +} 
 +</code> 
 +Here is already the first thing to make refer to local files work. Instead loading the webView with a request, we're loading the webView with the UIWebView-Method 'loadHTMLString:(NSString*)htmlString baseURL:(NSURL*)baseURL'. The htmlString is a string we are getting out of a html-file. The baseURL is the bundlePath. A NSBundle object represents a location in the file system that groups code and resources that can be used in a program. Resources (images, css- and javaScript-files) inside your application bundle are at the root of the bundle, even if you place them in an separate group (folder) in your project. 
 + 
 +=== Finally we add the following UIWebView-Delegate method and make it look like this: === 
 +<code objc> 
 +- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType { 
 +     
 +    if (navigationType == UIWebViewNavigationTypeLinkClicked) { 
 +        _backBarButton.enabled = YES; 
 +    } 
 +     
 +    return YES; 
 +} 
 +</code> 
 +If a link in the webView is clicked, this method enables the barButtonItem to make it work and possible to go back to the index.html, the first site we will load. 
 + 
 +So now we need to go to the Interface-Builder or Storyboard and add a UIWebView and UIBarButtonItem. If you are not using Storyboard it is enough to add a UINavigationBar and on it place the UIBarButtonItem. If you are working with Storyboard add a UINavigationController and make the ViewController the initial(RootViewController) ViewController of the UINavigationController. This will cause that a UINavigationBar gets added to the ViewController. Add the UIBarButtonItem on it. 
 +We created two IBOutlets(webView and backBarButton), connect them with the objects we just added to the view. Do not forget to connect the delegate of the UIWebView to the ViewController.\\ 
 +{{:objective-c:examples:bildschirmfoto_2014-08-19_um_01.34.49.png}}\\ 
 + 
 +The last thing to do is add some resources.\\ 
 +Add an image. Mine is vmax.jpg.\\ 
 +{{:objective-c:examples:vmax.jpg}}\\ 
 +Right-click or ctrl-click on a group or folder. In the pop-up click new file. Select iOS:Other->Empty and create and name like the following. Repeat and copy-paste below code to each file.  
 + 
 +=== index.html === 
 +<code html> 
 +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
 + 
 +<html> 
 + 
 +<head> 
 +     
 +    <title>UIWebView Sample</title> 
 +     
 +    <meta name="author" content="Jens Amir Gheraoui"> 
 +    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> 
 +    <meta http-equiv="content-language" content="de"> 
 +    <meta http-equiv="Content-Style-Type" content="text/css"> 
 +         
 +    <link rel="stylesheet" type="text/css" href="styles.css"> 
 +    <script type="text/javascript" src="main.js"></script> 
 +     
 +</head> 
 + 
 + 
 +<body onload="showAlert('Onload js-call from index.html')"> 
 +     
 +    <div id="mainDiv"> 
 +        <div id="elementsDiv"> 
 +            <div id="internalLinkDiv"> 
 +                <a href="secondSite.html">Internal Site Link</a> 
 +            </div> 
 +             
 +            <div id="externalLinkDiv"> 
 +                <a href="http://www.yamaha-motor.eu/de/products/motorcycles/index.aspx">External Site Link</a> 
 +            </div> 
 +             
 +            <div id="internalImageDiv"> 
 +                Image from bundle: 
 +                <img src="vmax.jpg" width="150" height="100"></img> 
 +            </div> 
 +             
 +            <div id="externalImageDiv"> 
 +                Image from website with link: 
 +                <a href="http://www.yamaha-motor.eu/de/products/motorcycles/sport-heritage/vmax.aspx"> 
 +                    <img src="http://www.cpuhunter.com/wp-content/uploads/2012/10/2013-Yamaha-VMAX-600x398.jpg" width="150" height="100"></img> 
 +                </a> 
 +            </div> 
 +        </div> 
 +    </div> 
 + 
 +</body> 
 + 
 +</html> 
 +</code> 
 + 
 +=== secondSite.html === 
 +<code html> 
 +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
 + 
 +<html> 
 + 
 +<head> 
 +     
 +    <title>UIWebView Sample Site 2</title> 
 +     
 +    <meta name="author" content="Jens Amir Gheraoui"> 
 +    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> 
 +    <meta http-equiv="content-language" content="de"> 
 +    <meta http-equiv="Content-Style-Type" content="text/css"> 
 +         
 +    <link rel="stylesheet" type="text/css" href="styles.css"> 
 +    <script type="text/javascript" src="main.js"></script> 
 +                     
 +</head> 
 + 
 + 
 +<body onload="showAlert('Onload js-call from secondSite.html')"> 
 +    <div id="secMainDiv"> 
 +        Second Website from bundle 
 +    </div> 
 +</body> 
 + 
 +</html> 
 +</code> 
 + 
 +=== main.js === 
 +<code javascript> 
 +function showAlert (msg) { 
 +    alert(msg); 
 +} 
 +</code> 
 + 
 +=== styles.css === 
 +<code css> 
 +@charset "utf-8"; 
 +             
 +body { 
 +    background-color:#000000; 
 +} 
 +         
 +#mainDiv { 
 +    position:absolute; 
 +    width: 240px; 
 +    height: 320px; 
 +             
 +    top: 50%; 
 +    left: 50%; 
 +    margin-top: -160px; 
 +    margin-left: -120px; 
 +             
 +    background-color:#FFFFFF; 
 +} 
 + 
 +#secMainDiv { 
 +    width: 100%; 
 +    height: 100%; 
 +    background-color:#FFFFFF; 
 +    text-align: center; 
 +} 
 + 
 +#elementsDiv { 
 +    position:absolute; 
 +    width: 220px; 
 +    height: 300px; 
 +             
 +    top: 50%; 
 +    left: 50%; 
 +    margin-top: -150px; 
 +    margin-left: -110px; 
 +             
 +    background-color:#CCCCCC; 
 +} 
 + 
 +#internalLinkDiv { 
 +    margin-left: 10px; 
 +} 
 + 
 +#externalLinkDiv { 
 +    margin-left: 10px; 
 +} 
 + 
 +#internalImageDiv { 
 +    margin-left: 10px; 
 +} 
 + 
 +#externalImageDiv { 
 +    margin-left: 10px; 
 +} 
 +</code> 
 + 
 +To make the Javascript part work one more thing is necessary:\\ 
 +{{:objective-c:examples:buildphases.png}}\\ 
 +Click on the blue project icon at the top of the project-navigator on the left and then under targets select the target with name of your project. Find 'Build Phases' and add the main.js to 'Copy Bundle Resources' while clicking add(+) and select your .js file. And that's it!\\ 
 + 
 +Run the project and you should see somethings like this. A Javascript call and the index.html after closing the alert:\\ 
 +{{:objective-c:examples:jscall.png}}{{:objective-c:examples:indexcontent.png}}\\ 
 +I hope this will help somebody somehow. Took me a while to figure this small amount of how-to out. Happy coding :)

on the occasion of the current invasion of Russia in Ukraine

Russian Stop this War
objective-c/examples/uiwebview_using_local_resources.1408394003.txt · Last modified: 2024/02/16 01:03 (external edit)

Page Tools

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 3.0 Unported
CC Attribution-Share Alike 3.0 Unported Driven by DokuWiki
Impressum Datenschutz