Your message has been sent.
This article has been saved to your account.
Go to my account
This article has been emailed to your Kindle.
Send this article
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.)
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:
Open the collection of plugins you downloaded and navigate to iOS/ChildBrowser.
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:
At the prompt, make sure to copy the files (instead of linking to them), as shown in the following screenshot:
Copy the ChildBrowser.js file to your www/plugins/iOS directory. You can do this in XCode or in Finder.
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:
This can be better represented by the following screenshot:
There, that wasn't too bad, right?
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:
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:
Create a new package (File | New | Package) under your project's src folder. Name it as com.phonegap.plugins.childBrowser.
Navigate to Android/ChildBrowser/src/com/phonegap/plugins/ childBrowser and drag the ChildBrowser.java file to the newly created package in Eclipse.
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).
Add the following line at the bottom of the file, just above the </plugins> ending tag:
<plugin name="ChildBrowser" value="com.phonegap.plugins.
Navigate to the Android/ChildBrowser/www folder in the repository.
Copy childbrowser.js to assets/www/plugins/Android.
Copy the childbrowser folder to assets/www. (Copy the folder, not the contents. You should end up with assets/www/childbrowser when done.)
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:
That's it. Our plugin is correctly installed and configured for Android.
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.
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 :
- 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]
eBook Price: $14.99
Book Price: $24.99
About the Author :
Kerri Shotts has been programming since she learned BASIC on her Commodore 64. She earned her degree in Computer Science and has worked as a Test Engineer and Database Administrator. Now a Technology Consultant, she helps her clients with custom websites, apps (desktop and mobile), and more. When not at the computer, she enjoys photography and taking care of her aquariums.