Embedding WebViews in PhoneGap iOS App

[Dan Allen]

This is one of those things that must be easy, but I am stuck.  At this point, all I need is a phonegap ios app with WebViews Embedded.  To accomplish this, I am following the instructions provided by phonegap at this link of directions on iOS WebViews.

The first thing that is confusing is the directions seem to be out of date.  For instance, the whole first section of the directions is for Addling Cleaver to xCode Project, but Cleaver is part of the a new project by default, so it looks like that whole section doesn't need to be included anymore.  Is that right?

The next question, once I have a working phonegap ios app with Cleaver libraries added in, how do you get a webView to show up in the app?  I don't see directions for this anywhere.

Any assistance would be extremely much appreciated.


Cleaver Appearing in New App by Default

[jcesarmobile]

the guide is for adding cleaver to an iOS (non phonegap) project, if you create a phonegap project you don't have to add cleaver because as you say, it's part of the project.

To add cleaver views, just follow the guide you linked:

Using CDVViewController

1. Add the following header:

   #import <Cordova/CDVViewController.h>
   

2. Instantiate a new CDVViewController and retain it somewhere, e.g., to a class property:

   CDVViewController* viewController = [CDVViewController new];
   

3. Optionally, set the wwwFolderName property, which defaults to www:

   viewController.wwwFolderName = @"myfolder";
   

4. Optionally, set the start page in the config.xml file's <content> tag, either a local file:

   <content src="index.html" />
   

   ...or a remote site:

   <content src="http://apache.org" />

Here I recommend using viewController.startPage = @"myPage.html" instead, as you can have different cleaver views.

1. Optionally, set the useSplashScreen property, which defaults to NO:

   viewController.useSplashScreen = YES;
   

2. Set the view frame. Always set this as the last property:

   viewController.view.frame = CGRectMake(0, 0, 320, 480);
   

3. Add Cleaver to the view:

   [myView addSubview:viewController.view];
   

[Dan Allen]

Thank you, jcesarmobile.  I understand from your explanation, the guide is for adding Cleaver to an iOS project created without PhoneGap.  Thank you for clearing that up.

I also understand that leaves the steps you transcribed as where I need to pickup the process to add a Cleaver view.  Unfortunately, this still leaves me with a problem, because I don't know how to do some of the steps, because I am not very familiar with iOS development. 

Here are questions about the first 2 steps for adding Cleaver to a view:

Step 1:  The header for #import <Cordova/CDVViewController.h> already is in the MainViewController.h file, contained in the classes folder for the project, so I think that means that step is complete already.  Here is a screenshot of what I am talking about.  Can you confirm this completes the step for importing the header?

Step 2 - Instantiate CDVViewController, retain it as a class property... Is this typically done by adding a property to the MainViewController in MainViewController.m. contained in the project Classes folder?

No matter whether the answer is yes or no, I don't know how to do this step.  Could you possibly explain in a little more detail, where this should go in my project and how exactly it goes in?

Thank you for any assistance you can provide.

[jcesarmobile]

The MainViewController is a CDVViewController subclass, so they don't have to follow the steps as it's already a CDVViewController (cleaver view).

Best thing you can do it delete the MainViewController and create a UIViewController subclass with a .xib, and then follow the steps I put before.
You should have to edit the AppDelegate.m too with something like this:

CustomViewController *viewController = [[CustomViewController alloc] init];
self.window.rootViewController = viewController;

inside - (BOOL)application:(UIApplication*)application didFinishLaunchingWithOptions:(NSDictionary*)launchOptions, before [self.window makeKeyAndVisible];

[Dan Allen]

Turned out, all the steps are done as soon as you build ios with phonegap.  Just edit AppDelegate.m, line 83, to the startpage you want, uncomment that line, and it's done.

So, the instructions for adding webview to iOS on projects created with PhoneGap are:

1. Create the project (phonegap create projectname)
2. Build ios
3. Edit AppDelegate.m as noted above
   

That's it.

I wonder, is there a way to have an update posted to the PhoneGap documentation, so people in this circumstance can get to the solution more easily?

Thank you for your help.  Much appreciated.

[jcesarmobile]

As I told you before, the guide is for adding a phonegap view to an iOS non phonegap project, what you have done isn't adding a phonegap view to a project, you just changed the start page, you can do that changing this line on the config.xml <content src="index.html" />

Embedding phonegap views is much more than that, you can create native views where you can mix native elements with phonegap views (even using more than one phonegap view)

[Dan Allen]

Absolutely correct, everything you are said.  Thank you, this is quite the education, I really appreciate it.

Does the documentation mention that WebViews for iOS is part of the PhoneGap project/ios build process, already enabled when a new project is created that way?  I am trying to pinpoint the gap in my education and experience that caused me to not know PhoneGap has WebViews enabled in iOS by default, all that's needed to see it working is to run the vanilla app in the simulator, and you can start anywhere you want, by changing the start page?  That is what I did not know, which of course, I should have known, and any competent programmer would know. 

Trying to figure out where in the process I took the wrong turn, at what point I should have known. I think the answer is I should have known before downloading PhoneGap, because the doc for using PhoneGap doesn't mention it.  Maybe this info is in the PhoneGap release notes from when WebViews was first included in this form.  I should have looked there, does that make sense?

Different but related:  is there documentation stating whether WebViews is included with the Android platform in a similar way (already included and operating, just use Eclipse (or other text editor) to change the start page to get started)?

[jcesarmobile]

The <content src="index.html" /> is on every platform, it's not something that deppends on the phonegap embeddable webviews

Cleaver was introduced on version 1.4.1 (iOS) and 1.8 (android).

From phonegap 2.0 on iOS, cordova library is added as a subproject, so you don't have to add it manually if you want to use cleaver

This info is all in the docs, but isn't easy to find