Integrate ChildBrowser into Worklight App (IOS Version)

Our team recently trying to get Worklight to open an external URL within a hybrid mobile app. Worklight has an OpenURL function that we first implemented, but the problem with this opens an external URL in the same window as the app,and this isn’t what we are looking for because when URL opens in the same window as the app, it’s difficult to exit the external website, and return to the app flow. So we went with the ChildBrowser plugin to implement child browser functionality within our current running Worklight app. 

During googling I found many people struggling with PhoneGap/Cordova to implement ChildBrowser up.So I come with the solution with easy step and I decided to write a post that hopefully shows up in google for people running and looking for solution.

The ChildBrowser plugin I’m using can downloaded from here.

Create a simple Worklight App name it ChildBrowserDemo. please follow the Figure 1.1

Figure 1.1

Define you app name in second screen or same ChildBrowserDemoApp see Figure 1.2

Figure 1.2

Copy the ChildBrowser.js from ChilBrowserPlugin folder and paste it under common/js folder in your project.

now add this code snipped under the project main html file.

a JavaScript code snippet I used to get it to work. I added a listener on button and call to the install method of the ChildBrowser object. Finally I calling a showWebPage function of childbrowser object that handles the URL opening.

 <h1> Child Browser Demo </h1>        
 <button id="open-child-browser">Open google.com</button>  
 <script>  
 document.getElementById("open-child-browser")  
 .addEventListener("click", function() {   
 try{  
  ChildBrowser.install();  
 }catch(e){  
  alert ("CB Error :"+e);  
 }  
 window.plugins.childBrowser.showWebPage('http://www.google.com');
});  
 </script>  
 <!-- application UI goes here -->  
 <script src="js/initOptions.js"></script>  
 <script src="js/ChildBrowser.js"></script>  
 <script src="js/ChildBrowserDemoApp.js"></script>  
 <script src="js/messages.js"></script>  

Figure 1.3

Now add iphone Worklight environment now build & deploy application this is done for studio side.

After Build & Deploy project from studio right-click on iphone icon and run as xcode project. please follow the below Figure 1.4 for the reference.

Figure 1.4

after opening the project in Xcode drag all of the .m, .h, and .bundle file(s) from the ChilBrowserPlugin folder to the Plugins folder of your project. Make sure the copy option is selected. check Figure. 1.5 below.

Figure 1.5

and then drag the following files into Resources folder into your project.

1. ChildBrowser.bundle
2. ChildBrowserViewController.xib

In your project, under the Supporting Files folder, open the Cordova.plist file. You’ll see a bunch of key/value pairs and the one you want is under Plugins. You’ll need to add 2 by clicking the add button that shows when you highlight the Plugins section.

Key: ChildBrowser,        Type:String, Value: ChildBrowser.js

Key: ChildBrowserCommand, Type:String, Value:ChildBrowserCommand

Figure 1.6

Now final step to add these .h and .m files again into Compile Sources to make this plugin available for app in xcode. (otherwise it will prompt ChildBrowserCommand plugin not found error. ) Please follow Figure 1.7.

Figure 1.7

Its time for Testing on Emulator.