Monday, 29 April 2013

Adding functionality of ChildBrowser Plugin in IBM Worklight Project




I was working on ChildBrowser functionality in IBM Worklight during this faced a lot of issues at last done.

Steps to be followed

1. Make sure downloading iOS/ChildBrowser
download the ChildBrowser Plugins from https://github.com/phonegap/phonegap-plugins/tree/master/iOS/ChildBrowser
or
download folder phonegap-plugins-master and locate
phonegap-plugins-master\phonegap-plugins-master\iOS\ChildBrowser(recommended).

2. After downloading files Create folder named Plugins and add below files
  • ChildBrowserCommand.h
  • ChildBrowserCommand.m
  • ChildBrowserViewController.h
  • ChildBrowserViewController.m
3. Create Worklight Project


4.Add ChildBrowser.js from downloaded file in to worklight  js folder of the project and add coding to html file that load the google page in.

<body id="content" style="display: none">
        WLChildBrowserApp      
        <button id="cb">Show Google url webPage</button>                                                                         
        <script>                                                                                                                         
        document.getElementById("cb").addEventListener("click", function() {                                             
            ChildBrowser.install();             window.plugins.childBrowser.showWebPage('http://www.google.com');                                                            
        });                                                                                                                              
        </script>
        <script src="js/initOptions.js"></script>
        <script src="js/WLChildBrowserApp.js"></script>
        <script src="js/messages.js"></script>
    </body>

 After changes the files will be looks like that



5. Deployee app and generate new Environment for iPhone then Run As Xcode by right clicking iPhone icon

6. Drag the Plugins folder that created in step-2 in to Xcode project and also drag  remaining files like ChildBrowserViewController.xib and ChildBrowser.bundle  into Resource folder of the Xcode Project, its looks like below




7. Add Following entries in cordova.plist file under (in version 5.0.5)
  •  ExternalHost add value *
  •  add Key ChildBrowserCommand and Value ChildBrowserCommand
  •  add key ChildBrowser and value ChildBrowser.js
In IBM Worklight 5.0.6 we will have iPhone/native/config.xml files and add following plugins.

<plugins>
        <!--  Cordova -->
        <plugin name="ChildBrowser" value="ChildBrowser.js" />
        <plugin name="ChildBrowserCommand" value="ChildBrowserCommand" />       
        <plugin name="Device" value="CDVDevice" />



8. Try to test app  on simulator u will see the below error.


9. Locate Targets Build Phases compile sources and now press (+) sign add and locate Add Other now a window will appear and again select all  
  • ChildBrowserCommand.h
  • ChildBrowserCommand.m
  • ChildBrowserViewController.h
  • ChildBrowserViewController.m
       from downloaded location earlier and looks like below



10. finally run the app in simulator

11. Thank you.