Wednesday, July 3, 2013

Mobile App Journey - Part V

In the prior post we briefly discussed calling the PG API in order to interact with the device's (such as  a cell phone) API.  Just because I glossed over it do not ignore reading the PG docs and exploring what is available.

You will have more flexibility and power if you are building your app with say, PhoneGap + Eclipse + the Android SDK than you will if using PhoneGap Build.  But you can still do a lot with PGB.

One need for me was the ability to browse the web from within my app.  Remember, a PG app is a native app, that is, it is a native "wrapper" around your HTML5/javascript/css.  So when you are running your PG app that started out as HTML5/javascript/css, you are not running a web app -- you are running a native app.  So, navigating to a web page from within your native app is different than simply navigating to a new page from a web app.

I think there are primarily two choices:  the PG API InAppBrowser, and the PGB Plugin ChildBrowser ( you can read more about what a PGB Plugin is here).

I used the ChildBrowser Plugin, so I have no experience with InAppBrowser.

I had previously asked you to ignore the reference to childbrowser.js in my Index.html page.  To get childbrowser to work you will need to first have a childbrowser folder (off of your app's root folder) with the assets, which are some .png files -- see the link above.

[Edit on July 6, 2013 - assets folder for CB no longer needed]

Next, you must reference childbrowser.js in your page even though you do not have/need this file.

So, in my Index.html:

          <script src="phonegap.js"></script>
         <script src="childbrowser.js"></script>
         <script src="js/jquery-1.9.1.min.js"></script>
         <script src="js/bootstrap.min.js"></script>
         <script src="js/main.js"></script>
     </body>

And finally, in your config.xml (more on this later) you need this line (for PGB):

    <gap:plugin name="ChildBrowser"/>

So to browse, I could have something like this:

        <a class="link1" href="#" onclick="Navigate('http://www.oppositecoast.com');">Opposite Coast</a>.

"Navigate" is a user function in my main.js:

function Navigate(thisUrl) {
     var cb = window.plugins.childBrowser;
     if (cb != null) {
         cb.showWebPage(thisUrl);
     }
    else {
         showAlert("Childbrowser does not exist", "Can't Browse");
    }   
}

 
First I try to initialize the cb variable.  If successful I can then call showWebPage, else I let the user know things went wrong.

I think the moral of this story is that when using PGB you will need to see (if the PG API doesn't have what you want) if a PGB Plugin exists that can be used, then learn how to use that plugin.  PG people occasionally add new plugins so the list changes.

to be continued...

No comments: