Differences

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

--- objective-c:examples:uiwebview_using_local_resources [2014/08/18 23:24]
Mo
+++ 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.
-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. Select it and click next. Now provide a name for your project. I named mine 'UIWebViewSample'.
+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:
@@ Line 86: / Line 88: @@
 }
 </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: ===
@@ Line 98: / Line 101: @@
 }
 </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

User Tools

Site Tools

Differences

on the occasion of the current invasion of Russia in Ukraine

Page Tools