Configuring the ChildBrowser plugin

Exclusive offer: get 50% off this eBook here
Instant PhoneGap Social App Development [Instant]

Instant PhoneGap Social App Development [Instant] — Save 50%

Consume social network feeds and share social network content using native plugins and PhoneGap with this book and ebook.

$14.99    $7.50
by Kerri Shotts | February 2013 | Open Source

In this article by Kerri Shotts, the author of Instant PhoneGap Social App Development, we will look into the installation and configuration of the ChildBrowser plugin.

Most PhoneGap plugins aren't terribly hard to install or configure, but they will undoubtedly play a vital role in your app, especially if you need to use a feature that PhoneGap doesn't provide on its own.

In our case, we will look at a plugin called ChildBrowser.

(For more resources related to this topic, see here.)

 

Getting ready

You should download the entire community PhoneGap plugin repository located at https://github.com/phonegap/phonegap-plugins. This will provide you nearly all the content necessary to use the plugins.

How to do it…

We're going to split this one up into what we have to do for each platform as the steps and environments are all quite different.

Plugin configuration for iOS

Let's look first at the steps necessary for installing the ChildBrowser plugin:

  1. Open the collection of plugins you downloaded and navigate to iOS/ChildBrowser.

  2. Drag ChildBrowser.bundle, ChildBrowserCommand.h, ChildBrowserCommand.m, ChildBrowserViewController.h, ChildBrowserViewController.m, and ChildBrowserViewController.xib into XCode to the Socializer/Plugins folder as shown in the following screenshot:

  3. At the prompt, make sure to copy the files (instead of linking to them), as shown in the following screenshot:

  4. Copy the ChildBrowser.js file to your www/plugins/iOS directory. You can do this in XCode or in Finder.

  5. Add the plugin to Cordova.plist in Socializer/Supporting Files in XCode:

    • Find the Plugins row, and add a new entry as shown in the following table:

      ChildBrowserCommand

      String

      ChildBrowserCommand

       

    This can be better represented by the following screenshot:

    There, that wasn't too bad, right?

  6. The final step is to update our www/index.html file to include this plugin for our app. Add the following lines after the line that is loading the "cordova-2.2.0-ios.js" script:

    <script type="application/javascript" charset="utf-8" src = "./plugins/iOS/ChildBrowser.js"></script>

Plugin configuration for Android

For Android, we'll be using the same plugin, located in the repository you should have already downloaded from GitHub (although it will be under another directory). Let's start by installing and configuring ChildBrowser using the following steps:

  1. Create a new package (File | New | Package) under your project's src folder. Name it as com.phonegap.plugins.childBrowser.

  2. Navigate to Android/ChildBrowser/src/com/phonegap/plugins/ childBrowser and drag the ChildBrowser.java file to the newly created package in Eclipse.

  3. Go to the res/xml folder in your project and open the config.xml file with the text editor (usually this is done by a right-click on the file, Open With | Text Editor).

  4. Add the following line at the bottom of the file, just above the </plugins> ending tag:

    <plugin name="ChildBrowser" value="com.phonegap.plugins.
    childBrowser.ChildBrowser"/>

  5. Navigate to the Android/ChildBrowser/www folder in the repository.

  6. Copy childbrowser.js to assets/www/plugins/Android.

  7. Copy the childbrowser folder to assets/www. (Copy the folder, not the contents. You should end up with assets/www/childbrowser when done.)

  8. The last step is to update our www/index_Android.html file by adding the following lines just below the portion that is loading the cordova-2.0.0-android.js file:

    <script type="application/javascript" charset="utf-8" src =
    "./plugins/Android/childbrowser.js"></script>

That's it. Our plugin is correctly installed and configured for Android.

There's more…

There is one important detail to pay attention to—the plugin's readme file, if available.

This file will often indicate the installation steps necessary, or any quirks that you might need to watch out for. The proper use of the plugin is also usually detailed. Unfortunately, some plugins don't come with instructions; at that point, the best thing to do is to try installing it in the normal fashion (as we've done earlier for the ChildBrowser plugin) and see if it works.

The other thing to remember is that PhoneGap is an ongoing project. This means that there are plugins that are out-of-date (and indeed, some have had to be updated by the author for this book) and won't work correctly with the most recent versions of PhoneGap. You'll need to pay attention to the plugins so that you know which version it supports, and if it needs to be modified to work with a newer version of PhoneGap. Modifications usually aren't terribly difficult, but it does involve getting into the native code, so you may wish to ask the community (located at http://groups.google.com/group/phonegap) for any help in the modification.

Summary

In this article we saw the detailed installation and configuration of the ChildBrowser plugin. Moreover, we separately got acquainted with the process for both iOS and Android platforms. Finally, we saw how we can apply this knowledge to install other PhoneGap plugins and where we need to go in case we need any help.

Resources for Article :


Further resources on this subject:


Instant PhoneGap Social App Development [Instant] Consume social network feeds and share social network content using native plugins and PhoneGap with this book and ebook.
Published: January 2013
eBook Price: $14.99
See more
Select your format and quantity:

About the Author :


Kerri Shotts

Kerri Shotts has worked with computers for nearly twenty-four years. Her love for technology and programming started when she was introduced to her first computer: a Commodore 64. She obtained a degree in Computer Science while at college, and moved on to become Software Test Engineer. Afterwards, she became an Oracle Database Administrator for several years. Now she works as a Technology Consultant creating, designing, and maintaining custom applications (both desktop and mobile), websites, graphics and logos, and more for her clients. You can find her blog posts at her website (http://www.photokandy.com) and she is active on the Google Group for PhoneGap. When she isn't working, she enjoys photography, music, and fish-keeping. She is the author of two prior books published by Packt : PhoneGap 2.x Mobile Application Development Hotshot and Instant PhoneGap Social App Development.

Books From Packt


WordPress Mobile Applications with PhoneGap
WordPress Mobile Applications with PhoneGap

PhoneGap 2.x Mobile Application Development Hotshot
PhoneGap 2.x Mobile Application Development Hotshot

PhoneGap Beginner's Guide
PhoneGap Beginner's Guide

 PhoneGap Mobile Application Development Cookbook
PhoneGap Mobile Application Development Cookbook/a>

PHP Web 2.0 Mashup Projects: Practical PHP Mashups with Google Maps, Flickr, Amazon, YouTube, MSN Search, Yahoo!
PHP Web 2.0 Mashup Projects: Practical PHP Mashups with Google Maps, Flickr, Amazon, YouTube, MSN Search, Yahoo!

 Social Media for Wordpress: Build Communities, Engage Members and Promote Your Site
Social Media for Wordpress: Build Communities, Engage Members and Promote Your Site

Firebug 1.5: Editing, Debugging, and Monitoring Web Pages
Firebug 1.5: Editing, Debugging, and Monitoring Web Pages

Yahoo! User Interface Library 2.x Cookbook
Yahoo! User Interface Library 2.x Cookbook


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
g
v
4
2
S
R
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software