(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:

• Creating Content in Social Networking using Joomla! [Article]
• iPhone: Issues Related to Calls, SMS, and Contacts [Article]
• Adding Geographic Capabilities via the GeoPlaces Theme [Article]