Phonegap ChildBroswer
We love mobile projects here. They are what we live and breathe here almost everyday. When you are trying to create something that has never been done before you are bound to run into some technical hurdles along the way.
We are in the process of creating an application for a customer that utlizes the wicked cool Phonegap toolset. While we have used this tool on many projects in the past we have never had the oppertuinity to integrate that with the Google Apps suite (another amazing set of tools). We need to authenticate the application using the provided Google OAuth protocol. Should be easy enough we thought. We added the ChildBrowser plugin to open the needed windows, added a little javascript, and there was the authentication code we needed. Nice and easy everyone take the rest of the day off with pay…..
That is what we thought. We then realized that even though we had the code on the screen how do we grab the authentication code that is being displayed? In reading through the Google OAuth docs we found that the success code is being returned in the title of the window as well. Much to our suprise we had no way to access the title of the page that was being opened in the ChildBrowser plugin. After a few hours of Google searches we found that many other people have had the same problem.
After some investigation into the code we found that the ChildBrowser plugin is using the onPageStarted event to pass the location url back to calling function. The problem is that the webview title is not set until the page is finished loading. So here is what we did.
We added a onPageFinished event to the ChildBrowser.java code and added a new event type:
private static int LOCATION_FINISHEDLOAD_EVENT = 2;
....
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view,url);
try
{
JSONObject obj = new JSONOject();
obj.put("type",LOCATION_FINISHEDLOAD_EVENT);
obj.put("title",view.getTitle());
obj.put("location",url);
sendUpdate(obj,true);
}catch (JSONException e) {
Log.d("ChildBrowser", "This should never happen");
}
}
Once we added this to the ChildBroswer.java we had to tweak the childBrowser.js to use the new event that we are passing in and what to do with the event when we call it. We added the event decleration and edited the _onEvent method of childBrowser.js:
ChildBrowser.LOCATION_FINISHEDLOAD_EVENT = 1;
....
if (data.type == ChildBrowser.LOCATION_FINISHEDLOAD_EVENT && typeof window.plugins.childBrowser.onLocationFinished === "function") {
window.plugins.childBrowser.onLocationFinished(data.title,data.location);
}
Just like that we had access to the page title once the page was finished loading!
We posted the entire thing on Github so you can use it also. Get the code here: https://github.com/rdminfinity/phonegap-plugins
I hope this helps someone else out in the future.
Happy coding!
