Blog

  • Chilbrowser android ios phonegap

    In one of my recent PhoneGap mobile project I needed to open an external link in my app for this I used the child browser plugin. It allows app to display external web pages within the PhoneGap without exiting your app to view the link.It creates a popup browser that is shown in front of the app ,when the user presses the back button they are simply returned to the app.I am going to share the integration process of the ChildBrowser plugin in the PhoneGap app in Android and iOS platforms.

    Getting Started:

    Following steps are for Phonegap 2.1

    Android

    Step 1. Download the plugin from GIT.(You need GIT client to follow the further steps you can download the GIT client from their site http://www.github.com and while installing select the checkbox of commandline) after installation follow the below described steps.

    • Goto command prompt or terminal select the directory where you want the content of the repo using cd command.
    • Type following command:
    		git clone https://github.com/phonegap/phonegap-plugins
    

    it will download all the set of plugins supported by PhoneGap

    Step 2. Create a Basic PhoneGap app(You can view my other blog for further assistance).

    Step 3. From the Downloaded set of plugin move to Android directory then select ChildBrowser and move in it then to the directory named 2.0.0 there will be two directories named src and www.

    Step 4. Copy the content of the src folder from downloaded plugins to your projects src folder.

    Step 5. Copy the content of the www folder from the downloaded plugins to you projects assets/www folder.

    Step 6. In your project res/xml/config.xml file add the following line as a child to the plugin tag:

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

    Step 7. In the file index.html in the assets/www directory Replace the content with the described below.

    
    <!DOCTYPE HTML>
    <html>
    	<head>
    		<title>ChildBrowser</title>
    		<script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>
    		<script type="text/javascript" charset="utf-8" src="childbrowser.js"></script>
    		<script>
    			function onBodyLoad()
    			{		
    				document.addEventListener("deviceready", onDeviceReady, false);
    			}
    			function onDeviceReady()
    			{
            			cb = window.plugins.childBrowser;
    			}
    		</script>
    	</head>
    	<body onload="onBodyLoad();">
    		<p>click the button to open Oodles Technologies WebSite in ChildBrowser</p>
    		<button onclick="cb.showWebPage('http://www.oodlestechnologies.com')">click</button>
    	</body>
    </html>
    
    

    Step 8. Run the app.

     

    iOS

     

    Step 1. Download the plugin from GIT.(You need GIT client to follow the further steps you can download the GIT client from their site http://www.github.com and while installing select the checkbox of commandline) after installation follow the below described steps.

    • Goto command prompt or terminal select the directory where you want the content of the repo using cd command.
    • Type following command:
    		git clone https://github.com/phonegap/phonegap-plugins
    

    it will download all the set of plugins supported by PhoneGap

    Step 2. Create a Basic PhoneGap app(You can view my other blog for further assistance).

    Step 3. From the Downloaded set of plugin move to iOS directory then select ChildBrowser and move in it there you will find various files related to the plugin.

    Step 4. Drag all of the .m and .h files from the ChildBrowser folder to the Plugins folder of your project when prompted select "Create folder references for added folders" and "copy item into destination group's folder(if needed)" options.

    Step 5. Drag the .bundle and .xib files from the ChildBrowser folder to the Resources folder of your project.

    Step 6. In the Resources folder of your Project you will find a file named Cordova.plist in it you will find a bunch of key/value pairs,In the Plugins category add a key ChildBrowserCommand and Value ChildBrowserCommand (as shown below).

    View of plugin and externalhosts in cordova.plist

     

    Step 7. In the same file stated above you will find a category named ExternalHosts add the name of website you want to open using ChildBrowser or you can simply add * so that it can access all sites (as shown above).

     

    Step 8. Copy ChildBrowser.js from the ChildBrowser folder to the www folder of your project.

    Step 9. In the file index.html in the www directory Replace the content with the described below.

    
    <!DOCTYPE HTML>
    <html>
    	<head>
    		<title>ChildBrowser</title>
    		<script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>
    		<script type="text/javascript" charset="utf-8" src="ChildBrowser.js"></script>
    		<script>
    			function onBodyLoad()
    			{		
    				document.addEventListener("deviceready", onDeviceReady, false);
    			}
    			function onDeviceReady()
    			{
            			cb = window.plugins.childBrowser;
    			}
    		</script>
    	</head>
    	<body onload="onBodyLoad();">
    		<p>click the button to open Oodles Technologies WebSite in ChildBrowser</p>
    		<button onclick="cb.showWebPage('http://www.oodlestechnologies.com')">click</button>
    	</body>
    </html>

    Step 10. Run the App.

Tags: phonegap

Mobile Applications

Video Content

Bigdata & NoSQL

SaaS Applications

Miscellaneous

Archives


Alexa Certified Site Stats for www.oodlestechnologies.com