Solution: Installing the ChildBrowser Plugin with XCode 4.2, PhoneGap 1.1.0, iOS 5

[Felix Montanez]

We came across this problem where the ChildBrowser wasn't closing and
bringing us back to an about:blank page and the ChildBrowser wouldn't
close.

These are the steps we took to get ChildBrowser implemented with a new
XCode Project:

1. Create a new XCode Project using the Phonegap-based Application
template. Type a product name, ensure you have the Company Identifier
filled in (ie. "com.mycompany"). We had the ARC checkbox unchecked.
Click Next to select a location. For this test, we used the Desktop.
Click Create.

2. This should create an XCode Project and show you in the navigator.
In the summary section, Under Targets, choose the appropriate SDK. For
this we used 4.3. I tried for 5.0 but didn't work. Under Project,
select deployment target to 4.3. This project ran fine on an iphone
running iOS 5. Run the project once to have the simulator load. You
should see the error "ERROR: Start Page at "www/index.html" was not
found.
At this point, you have to open the finder window and navigate to the
www folder in your project, OR you could go to your desktop and double-
click the project folder. Drag the WWW folder from the project folder
to the XCode project until you see a white outline of the project in
the project navigator section on the left hand side. If you do this
right, you should see a drop down menu in the project asking you to
choose options for adding these files.

Select "Create folder references for any added folders" and click
finish. The other options should be unchecked. The www folder should
be blue.

3. run the project again and you should see the alert box "PhoneGap is
working"....sweet. Close the alert box and now we're ready to start
putting in the plugin.

4. Go back to the XCode project window and right click "Plugins"...you
want to "add files to (Your project name). Select that and another
window should pop up looking for the files you want to add. Navigate
to the Phonegap plugins folder for the iphone...select the
ChildBrowser Folder and this time you want to "Create Groups for any
added folders"...you should see a yellow folder.

5. On the desktop, Open the PhoneGap plugins folder and navigate to
the childbrowser folder until you see ChildBrowser.js file. Copy that
file and we'll put that in our project file in the www folder, so
navigate to the xcode project folder to the www folder and paste the
js file in there. You should see the js file appear in XCode.

next, reference the js file in your index.html file...
<script type="text/javascript" charset="utf-8" src="ChildBrowser.js"></
script>

6. Next, we're going to add the plugin to our PhoneGap.plist so open
the Supporting Files folder in XCode. You should see PhoneGap.plist.
Click on that file. Under Plugins, click the triangle next to Plugins,
and you should see different plugins like the accelerometer, camera,
connection etc.

click the "plus" sign on the Plugins line. You should see a new row
created...Where it says New item on the left, you put in
ChildBrowserCommand and on the right, put in ChildBrowserCommand.

remember to save your project as you go along here...

7. two files need to be adjusted in order to make this work,
ChildBrowser.js and index.html. Let's start by adding our javascript
code to connect the childbrowser plugin.

a. In the script tag where the onBodyLoad and onDeviceReady functions
are, add var childBrowser; and var root=this;

ex:
<script type="text/javascript">
var childBrowser;
var root = this;
...
</script>

b. in the onDeviceReady function, add this:

childBrowser = ChildBrowser.install();

var cb = ChildBrowser.install();

if(cb != null) {
cb.onLocationChange = function(loc)
{ root.locChanged(loc); };
cb.onClose = function(){root.onCloseBrowser();};
cb.onOpenExternal = function(){root.onOpenExternal();};
}

example:

function onDeviceReady() {
// do your thing!
navigator.notification.alert("PhoneGap is working");

childBrowser = ChildBrowser.install();

var cb = ChildBrowser.install();

if(cb != null) {
cb.onLocationChange = function(loc)
{ root.locChanged(loc); };
cb.onClose = function(){root.onCloseBrowser();};
cb.onOpenExternal = function(){root.onOpenExternal();};
}
}


I also added one more function...openChildBrowser:


function openChildBrowser(url) {
try {
//both of these should work...
window.plugins.childBrowser.showWebPage(url);
//childBrowser.showWebPage(url);
}
catch (err)
{
alert(err);
}
}



you can then add a button to the body...i used:
<button ontouchend="openChildBrowser('http://www.google.com');">Open
Google</button>

we're done on the index.html file...

c. click the ChildBrowser.js file in XCode...

look for this bit of code:
// Callback when the user chooses the 'Done' button
// called from native
ChildBrowser._onClose = function()
{
window.plugins.childBrowser.onClose();
};


i changed:
window.plugins.childBrowser.onClose();

to

window.plugins.childBrowser.onClose = close;


8. Last but not least, we need to make sure we set the whitelist
exception for the websites we open up through the child browser. Go
back to PhoneGap.plist and you should see "ExternalHosts"...click the
twirldown icon and click the "plus" sign to add a new website
exception...you should see "Item 0" on the left side and the right
side black. I put a wildcard in to allow access to any site. i put *
on the right side.


9. Finally run the project again. You should see the alert box, and
the index page with the button you created earlier. If you click the
button, you should see the childbrowser open google and when you click
done, you should see it close.

10. now for the potential memory leak, if you analyze the project, you
will see a blue route sign basically saying that there's a potential
memory leak. You can fix this by going to line 132 in the
ChildBrowserViewController.m file.

here's the line:
NSURL* pURL = [ [NSURL alloc] initWithString:imageURL ];

you want to add Autorelease like this...

NSURL* pURL = [[ [NSURL alloc] initWithString:imageURL ]
autorelease];

11. This should fix the potential memory leak warning...

save save save and rerun the project. All should be working.

hopefully this is helpful to others..

[Felix Montanez]

One more thing...if you run this project on iOS5...the done button
won't work...
this is a known bug: https://github.com/phonegap/phonegap-plugins/issues/74

in the ChildBrowserViewController.m file, you need to change:

-(void)closeBrowser
{

if(delegate != NULL)
{
[delegate onClose];
}

[ [super parentViewController]
dismissModalViewControllerAnimated:YES];
}






to this:



-(void)closeBrowser
{
if(delegate != NULL)
{
[self.delegate onClose];

}
if ([[super parentViewController]
respondsToSelector:@selector(dismissModalViewControllerAnimated:)]) {
[[super parentViewController]
dismissModalViewControllerAnimated:YES];
} else {
[[super presentingViewController]
dismissViewControllerAnimated:YES completion:nil];
}

}

[Luke Ollett]

In iOS5 I get the following error after open and closing the child
browser on the first link click. There after, I cannot open the child
browser.

*** WebKit discarded an uncaught exception in the
webView:decidePolicyForNavigationAction:request:frame:decisionListener:
delegate: <NSInvalidArgumentException> Application tried to present
modally an active controller <PhoneGapViewController: 0x7e4ebf0>.
2011-12-23 10:28:10.038 Luke13[23503:207] New Address is : (null)
2011-12-23 10:28:13.809 Luke13[23503:207] The view controller
<ChildBrowserViewController: 0x7b7cca0> returned NO from -
shouldAutorotateToInterfaceOrientation: for all interface
orientations. It should support at least one orientation.
2011-12-23 10:28:13.817 Luke13[23503:207] New Address is : about:blank

[sromalewski]

I'm getting a similar "WebKit discarded an uncaught exception" message
too. I'm running PG 1.1.0 on Xcode 4.2 using iOS5 on my iPhone. I
have the Childbrowser plugin from PG 1.1.0 but I've added the fix
suggested at https://github.com/phonegap/phonegap-plugins/issues/74.
That fixes the problem with the "Done" button, but now I get the
"WebKit..." message. My specific message in the device console is:

*** WebKit discarded an uncaught exception in the
webView:decidePolicyForNavigationAction:request:frame:decisionListener:
delegate: <NSInvalidArgumentException> Application tried to present

modally an active controller <PhoneGapViewController: 0x16e8e0>.

It renders any further taps to access Childbrowser unusable (nothing
happens afterward when I tap on elements that access Childbrowser.
The app freezes up.

[sromalewski]

Anyone have any ideas about how to deal with the "WebKit discarded..."
error? It freezes my app and I can't seem to find any fixes, either
for Objective-C or specifically for the Childbrowser plugin. Thanks!

On Jan 6, 10:57 am, sromalewski <spatialitya...@gmail.com> wrote:
> I'm getting a similar "WebKit discarded an uncaught exception" message
> too.  I'm running PG 1.1.0 on Xcode 4.2 using iOS5 on my iPhone.  I
> have the Childbrowser plugin from PG 1.1.0 but I've added the fix

> suggested athttps://github.com/phonegap/phonegap-plugins/issues/74.