Sunday, March 4, 2012

ChildBrowser Android

First you need to get ready with the phonegap running properly.It's here. First download the source from here

Now follow these procedure:
 1. To install the plugin, move www/childbrowser.js to your project's www folder and include a reference to it in your html file after phonegap<version>.js.

<script type="text/javascript" charset="utf-8" src="phonegap<version>.js"></script>
<script type="text/javascript" charset="utf-8" src="childbrowser.js"></script>
2. Copy the image files folder www/childbrowser to your project's www folder.Here you can edit the code or add any other files, but keep the folder named "ChildBrowser" as it is. Because, it is being referenced from others locations.
3. Create a directory within your project called "src/com/phonegap/plugins/childBrowser" and copy "src/com/phonegap/plugins/childBrowser/ChildBrowser.java" into it.

3.1. If you would like to add these folder(childBrowser folder with file ChildBrowser.java) into your existing 'src' folder, then there are some minor changes. Open ChildBrowser.java and change the package name to the relevant one.
4. In your res/xml/plugins.xml file add the following line:

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

4.1. If you followed the step-3.1, ie., if you added the folder elsewhere, change the "value" tag.

5. Customize the links as per your need and build the project.


-------------------------------------------------------------------------------------------------------------------------------------------------

index.html
<html>

  <head>

    <meta name="viewport" content="width=320; user-scalable=no" />

    <meta http-equiv="Content-type" content="text/html; charset=utf-8">

    <title>Child Browser Example</title>

    <link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title" charset="utf-8">

    <script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>

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

    <script type="text/javascript" charset="utf-8">

    function init(){

        document.addEventListener("deviceready", onDeviceReady, false);

    }


     function onDeviceReady() {

        console.log("PhoneGap is ready");

    }


    function locationChanged(newurl) {

        console.log("The JS got this url = " + newurl);

    }

    function closed() {

        console.log("The JS got a close event");

    }

    function showToolbar(locbar) {

        window.plugins.childBrowser.onLocationChange = locationChanged;

        window.plugins.childBrowser.onClose = closed;
         window.plugins.childBrowser.showWebPage("http://thechaithanya.wordpress.com",{

            showLocationBar: locbar

        });

    }

    </script>

  </head>

  <body onload="init()">

    <a href="#" onclick="showToolbar(true);">Page with Toolbar</a>

    <a href="#" onclick="showToolbar(false);">Page without Toolbar</a>

  </body>

</html>

-------------------------------------------------------------------------------------------------------------------------------------------------

Example: If your source file is at src/com/chaithanya/sample,then

if "ChildBrowser.java" is at "src/com/chaithanya/sample/childBrowser", then in res/xml/plugins.xml add
<plugin name="ChildBrowser" value="com.chaithanya.sample.childBrowser.ChildBrowser"/>
else if "ChildBrowser.java" is at "src/com/phonegap/plugins/childBrowser", then in res/xml/plugins.xml add
<plugin name="ChildBrowser" value="com.phonegap.plugins.childBrowser.ChildBrowser"/>