Topic
  • 18 replies
  • Latest Post - ‏2013-02-11T17:44:53Z by SystemAdmin
JoseCorreia
JoseCorreia
9 Posts

Pinned topic How to add Kordova ChildBrowser plugin to Worklight 5 iPad

‏2012-06-21T14:40:39Z |
Hi all

Im struggling to do above... I see plugin here https://github.com/purplecabbage/phonegap-plugins/tree/master/iPhone/ChildBrowser/

but not too sure how to integrate it. There is a doc about kordova plugins but it is badly written in parts, seems old as structure on pictures is different from Worklight 5 and it does not tell you where to place files. (http://public.dhe.ibm.com/ibmdl/export/pub/software/mobile-solutions/worklight/docs/Module_08_3_-_iOS_Development_Using_the_Apache_Cordova_Plugin.pdf) ... Im just not too sure where to place files.

So I placed the .h and .m files under ../ipad/native/Classes - is that correct?

I placed the ChildBrowser.bundle that has the pics under ../ipad/native/Resources - is that correct?

I placed the childBrowser.js under ../common/js - is that correct?

I edited ../ipad/native/Cordova.plist and added entry:

<key>Plugins</key>
<dict>
<key>ChildBrowserCommand</key>
<string>ChildBrowserCommand</string>

I then build and run via XCode, when I click on the page, Xcode spits out:

2012-06-21 16:40:29.774 LibertyDemo4349:707 ERROR: Plugin 'ChildBrowser' not found, or is not a CDVPlugin. Check your plugin mapping in Cordova.plist.
2012-06-21 16:40:29.775 LibertyDemo4349:707 FAILED pluginJSON = {"className":"ChildBrowser","methodName":"showWebPage","arguments":}

Any idea?

I call plugin on a script like this:

and I put this line on my default .js file

function wlCommonInit(){
// Common initialization code goes here
document.addEventListener("deviceready", onDeviceReady, false);
}

function onDeviceReady()
{

var cb = ChildBrowser.install();
jq('.brochure').on('tap', function(){
var url = jq(this).attr('href');
var location = document.location.href.split('www');
var nurl = (location[0]+url).split(' ').join('%20');

window.plugins.childBrowser.showWebPage(nurl);
});
}

Thanks
Jose
  • SystemAdmin
    SystemAdmin
    2327 Posts

    Re: How to add Kordova ChildBrowser plugin to Worklight 5 iPad

    ‏2012-06-21T15:16:42Z  
    Hi Jose,

    I'm taking a look at the training module now to see if it might need updating. In the meantime, did you take a look at the sample zip which accompanies the module? It shows the placement of plugin files, etc. so should help you confirm you are putting things in the right place.

    Thanks,
    Nell
  • SystemAdmin
    SystemAdmin
    2327 Posts

    Re: How to add Kordova ChildBrowser plugin to Worklight 5 iPad

    ‏2012-06-21T15:34:49Z  
    Hi Jose,

    I'm taking a look at the training module now to see if it might need updating. In the meantime, did you take a look at the sample zip which accompanies the module? It shows the placement of plugin files, etc. so should help you confirm you are putting things in the right place.

    Thanks,
    Nell
    I also think you want to be using ChildBrowser from here:

    https://github.com/phonegap/phonegap-plugins/tree/master/iOS/ChildBrowser

    Your error seems fairly common (outside of Worklight), and there seem to be a number of different versions of ChildBrowser floating around -- this seems to be the most successful for people.
  • JoseCorreia
    JoseCorreia
    9 Posts

    Re: How to add Kordova ChildBrowser plugin to Worklight 5 iPad

    ‏2012-06-21T15:53:39Z  
    I also think you want to be using ChildBrowser from here:

    https://github.com/phonegap/phonegap-plugins/tree/master/iOS/ChildBrowser

    Your error seems fairly common (outside of Worklight), and there seem to be a number of different versions of ChildBrowser floating around -- this seems to be the most successful for people.
    Hi Neil
    I checked the sample and seems then my placings are correct?

    Yeh I did see that the exception is fairly common and I ensured I replaced the plugin files with the ones from iOS... still nothing...

    Odd thing though, when I right-click on the iPad folder and I go to Run As->X Code Project , after it tells me :
    2012-06-21 17:33:50 Deploying application 'LibertyDemo' with environment 'ipad' to Worklight Server...
    2012-06-21 17:33:51 Application 'LibertyDemo' deployed successfully with environment 'ipad'
    2012-06-21 17:34:09 Success: opened Xcode project 'LibertyDemoLibertyDemoIpad'.

    I go to XCode to run it.. but if I check project contents there, my plugin files are nowhere to be seen?

    Thanks
    Jose
  • SystemAdmin
    SystemAdmin
    2327 Posts

    Re: How to add Kordova ChildBrowser plugin to Worklight 5 iPad

    ‏2012-06-21T16:59:43Z  
    Hi Neil
    I checked the sample and seems then my placings are correct?

    Yeh I did see that the exception is fairly common and I ensured I replaced the plugin files with the ones from iOS... still nothing...

    Odd thing though, when I right-click on the iPad folder and I go to Run As->X Code Project , after it tells me :
    2012-06-21 17:33:50 Deploying application 'LibertyDemo' with environment 'ipad' to Worklight Server...
    2012-06-21 17:33:51 Application 'LibertyDemo' deployed successfully with environment 'ipad'
    2012-06-21 17:34:09 Success: opened Xcode project 'LibertyDemoLibertyDemoIpad'.

    I go to XCode to run it.. but if I check project contents there, my plugin files are nowhere to be seen?

    Thanks
    Jose
    I see what you see. I'm investigating to see if this is a bug or whether something explicitly needs to be done to add additional class files. In the meantime when you are in XCode, you can manually add the files by right-clicking on Classes and choosing "Add files to <yourProject>".
  • SystemAdmin
    SystemAdmin
    2327 Posts

    Re: How to add Kordova ChildBrowser plugin to Worklight 5 iPad

    ‏2012-06-21T17:16:35Z  
    I see what you see. I'm investigating to see if this is a bug or whether something explicitly needs to be done to add additional class files. In the meantime when you are in XCode, you can manually add the files by right-clicking on Classes and choosing "Add files to <yourProject>".
    OK, I confirmed with some other team members -- it is what I thought, files are not going to show up unless you add them to the pbxproj file explicitly. You can do this through my method of right-clicking and adding files, but its far easier to just use XCode to work with your code rather than attempting to add the files through Eclipse. So once you've created the environment, open it in XCode, and work with it there.
  • JoseCorreia
    JoseCorreia
    9 Posts

    Re: How to add Kordova ChildBrowser plugin to Worklight 5 iPad

    ‏2012-06-21T18:52:59Z  
    OK, I confirmed with some other team members -- it is what I thought, files are not going to show up unless you add them to the pbxproj file explicitly. You can do this through my method of right-clicking and adding files, but its far easier to just use XCode to work with your code rather than attempting to add the files through Eclipse. So once you've created the environment, open it in XCode, and work with it there.
    Thanks, I will give it a go with the manual way of doing it... I trust we will see a patch soon :-)

    Regards
    Jose
  • SystemAdmin
    SystemAdmin
    2327 Posts

    Re: How to add Kordova ChildBrowser plugin to Worklight 5 iPad

    ‏2012-06-21T18:55:58Z  
    It's not a bug -- it's by design. You are supposed to use the native tools (i.e. XCode) for iOS development. It's mentioned in the training materials. I agree, it's a bit confusing -- it got me at first too, but just remember to do all native work in the native tools.
  • JoseCorreia
    JoseCorreia
    9 Posts

    Re: How to add Kordova ChildBrowser plugin to Worklight 5 iPad

    ‏2012-06-22T10:41:28Z  
    It's not a bug -- it's by design. You are supposed to use the native tools (i.e. XCode) for iOS development. It's mentioned in the training materials. I agree, it's a bit confusing -- it got me at first too, but just remember to do all native work in the native tools.
    I'm still struggling with this though... I tried placing the files in the correct places (as per your sample i.e. .m .h and .xib in Classes folder, the images bundle file in the Resources folder), I then fixed the one error where I was including the childbrowser.js on my .js file with the wrong case. The error has now shifted to:
    2012-06-22 12:03:24.462 LibertyDemo4820:707 INFO wlclient init started
    2012-06-22 12:03:24.463 LibertyDemo4820:707 INFO Read cookies: null
    2012-06-22 12:03:24.465 LibertyDemo4820:707 INFO CookieMgr read cookies: {}
    2012-06-22 12:03:24.474 LibertyDemo4820:707 INFO before: app init onSuccess
    2012-06-22 12:03:24.475 LibertyDemo4820:707 INFO Error in success callback: WLApp2 = ReferenceError: Can't find variable: ChildBrowser
    2012-06-22 12:03:38.605 LibertyDemo4820:707 Error: executing module function 'setInfo' in module 'cordova/plugin/ios/device'. Have you included the iOS version of the cordova-1.6.1.js file?

    Not sure how to proceed now.

    I then google some more on how to install the childbrowser on Xcode and I found this link:

    http://iphonedevlog.wordpress.com/2011/09/24/installing-childbrowser-into-xcode-4-with-phonegap-1-0-mac-os-x-snow-leopard/

    I then followed the 1.7.0 link from there.

    However here the guy says to install all the plugin files I mentioned above (with exception to childbrowser.js) in the XCode project's Plugins folder.... which in the Worklight 5 Xcode generated project it does not exist.... must I create it?

    I'm using XCode version 4.3.3. I see Worklight uses cordova 1.6.1...

    Any ideas

    Thanks
    Jose
  • JoseCorreia
    JoseCorreia
    9 Posts

    Re: How to add Kordova ChildBrowser plugin to Worklight 5 iPad

    ‏2012-06-22T15:22:26Z  
    you can look at the sample html in the plugin if its unclear though. Also, I probably should have put ChildBrowser.js in the common js folder rather than the ipad one, but I don't have time to retest it today so I'm just letting you know exactly what I did.
    The one difference I see that you don't do as per their example is that you call :

    cb = window.plugins.childBrowser;

    as opposed to cb = ClientBrowser.install();
    which needs to be called to instantiante that variable your are referring to right? And that's where Iam getting moaned at I believe, i.e. it does not know at that stage where ClientBrowser is??

    Thanks
    Jose
  • SystemAdmin
    SystemAdmin
    2327 Posts

    Re: How to add Kordova ChildBrowser plugin to Worklight 5 iPad

    ‏2012-06-22T17:21:43Z  
    The one difference I see that you don't do as per their example is that you call :

    cb = window.plugins.childBrowser;

    as opposed to cb = ClientBrowser.install();
    which needs to be called to instantiante that variable your are referring to right? And that's where Iam getting moaned at I believe, i.e. it does not know at that stage where ClientBrowser is??

    Thanks
    Jose
    That is from their example - everything I used was part of the plugin's sample code -- they don't call install in their sample.
  • JoseCorreia
    JoseCorreia
    9 Posts

    Re: How to add Kordova ChildBrowser plugin to Worklight 5 iPad

    ‏2012-06-24T19:26:14Z  
    That is from their example - everything I used was part of the plugin's sample code -- they don't call install in their sample.
    Well I got it working in the end by calling it almost directly like this:

    function onDeviceReady() {
    jq('.brochure').on('tap', function(){
    var url = jq(this).attr('href');
    var location = document.location.href;
    var index = location.lastIndexOf('/');
    var parent = location.substring(0, index+1);
    var nurl = parent + url;
    cordova.exec("ChildBrowserCommand.showWebPage", nurl );

    return false;
    });
    }

    Thanks for your help!
  • SystemAdmin
    SystemAdmin
    2327 Posts

    Re: How to add Kordova ChildBrowser plugin to Worklight 5 iPad

    ‏2012-06-25T12:13:13Z  
    Well I got it working in the end by calling it almost directly like this:

    function onDeviceReady() {
    jq('.brochure').on('tap', function(){
    var url = jq(this).attr('href');
    var location = document.location.href;
    var index = location.lastIndexOf('/');
    var parent = location.substring(0, index+1);
    var nurl = parent + url;
    cordova.exec("ChildBrowserCommand.showWebPage", nurl );

    return false;
    });
    }

    Thanks for your help!
    Great! In reviewing the training module I didn't come across anything out of date. If there's something you felt was incorrect/old, could you let me know so I can pass along that feedback?

    Thanks,
    Nell
  • SystemAdmin
    SystemAdmin
    2327 Posts

    Re: How to add Kordova ChildBrowser plugin to Worklight 5 iPad

    ‏2013-02-10T18:50:14Z  
    I've tried following numerous examples and guides to get this working but have come up short every time.

    I receive the following error immediately after the cordova.exec("ChildBrowserCommand.showWebPage", loc); line:

    EXC_BAD_ACCESS(code=2, address=0x2)

    I have no idea how to debug this and am really frustrated that it isn't working properly.
  • SystemAdmin
    SystemAdmin
    2327 Posts

    Re: How to add Kordova ChildBrowser plugin to Worklight 5 iPad

    ‏2013-02-10T19:21:55Z  
    I've tried following numerous examples and guides to get this working but have come up short every time.

    I receive the following error immediately after the cordova.exec("ChildBrowserCommand.showWebPage", loc); line:

    EXC_BAD_ACCESS(code=2, address=0x2)

    I have no idea how to debug this and am really frustrated that it isn't working properly.
    Take a look at these:

    Opening external links inside an IBM Worklight Android app
    http://produco.blogspot.com/2013/01/opening-external-links-inside-ibm_7.html

    Opening external links inside an IBM Worklight iOS app
    http://produco.blogspot.com/2013/01/opening-external-links-inside-ibm.html

    I wrote these how to guides to show how I did it. Let me know if you have any questions.

    Ralph Pina
  • SystemAdmin
    SystemAdmin
    2327 Posts

    Re: How to add Kordova ChildBrowser plugin to Worklight 5 iPad

    ‏2013-02-11T05:15:59Z  
    I'm still struggling with this though... I tried placing the files in the correct places (as per your sample i.e. .m .h and .xib in Classes folder, the images bundle file in the Resources folder), I then fixed the one error where I was including the childbrowser.js on my .js file with the wrong case. The error has now shifted to:
    2012-06-22 12:03:24.462 LibertyDemo4820:707 INFO wlclient init started
    2012-06-22 12:03:24.463 LibertyDemo4820:707 INFO Read cookies: null
    2012-06-22 12:03:24.465 LibertyDemo4820:707 INFO CookieMgr read cookies: {}
    2012-06-22 12:03:24.474 LibertyDemo4820:707 INFO before: app init onSuccess
    2012-06-22 12:03:24.475 LibertyDemo4820:707 INFO Error in success callback: WLApp2 = ReferenceError: Can't find variable: ChildBrowser
    2012-06-22 12:03:38.605 LibertyDemo4820:707 Error: executing module function 'setInfo' in module 'cordova/plugin/ios/device'. Have you included the iOS version of the cordova-1.6.1.js file?

    Not sure how to proceed now.

    I then google some more on how to install the childbrowser on Xcode and I found this link:

    http://iphonedevlog.wordpress.com/2011/09/24/installing-childbrowser-into-xcode-4-with-phonegap-1-0-mac-os-x-snow-leopard/

    I then followed the 1.7.0 link from there.

    However here the guy says to install all the plugin files I mentioned above (with exception to childbrowser.js) in the XCode project's Plugins folder.... which in the Worklight 5 Xcode generated project it does not exist.... must I create it?

    I'm using XCode version 4.3.3. I see Worklight uses cordova 1.6.1...

    Any ideas

    Thanks
    Jose
    I got a bit further than you, although I never did manage to get the simulator behaving the way I wanted it to. I put the classes in the classes folder, the bundle file in the resources folder (all through XCode), put the js file in ipad/js. I modified my TestChildBrowser.js file (my app was called TestChildBrowser) in common/js to look like this:

    ===========

    
    
    // Worklight comes with the jQuery framework bundled inside. If you do not want to use it, please comment out the line below. window.$ = WLJQ;   function wlCommonInit()
    { document.addEventListener(
    "deviceready", onDeviceReady, 
    
    false); 
    }   function onDeviceReady() 
    {   var root = 
    
    this;   cb = window.plugins.childBrowser;   
    //  if (cb != null) { 
    //      cb.onLocationChange = function(loc){ root.locChanged(loc); }; 
    //     cb.onClose = function(){root.onCloseBrowser()}; 
    //   cb.onOpenExternal = function(){root.onOpenExternal();}; 
    //  cb.showWebPage("http://google.com");   
    //  } 
    }   function onCloseBrowser() 
    { console.log(
    "onCloseBrowser!"); 
    }   function locChanged(loc) 
    { console.log(
    "locChanged!"); 
    }   function onOpenExternal() 
    { console.log(
    "onOpenExternal!"); 
    }
    


    ==========

    based on the sample in the plugin, and then modified common/TestChildBrowser.html to look like this:

    
    <!DOCTYPE html> <html> <head> <meta charset=
    "utf-8" /> <meta name=
    "viewport" content=
    "width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" /> <title>TestChildBrowser</title> <link rel=
    "shortcut icon" href=
    "images/favicon.png" /> <link rel=
    "apple-touch-icon" href=
    "images/apple-touch-icon.png" /> <link rel=
    "stylesheet" href=
    "css/reset.css" /> <link rel=
    "stylesheet" href=
    "css/TestChildBrowser.css" /> </head> <body onload=
    "WL.Client.init({})" id=
    "content" style=
    "display: none"> TestChildBrowser <!-- application UI goes here --> <h1>Hey, it
    's Cordova!</h1> <p>Don
    't know how to get started? Check out our <em><a target="_blank" href="http://docs.phonegap.com/en/edge/guide_getting-started_ios_index.md.html#Getting%20Started%20with%20iOS">Getting Started Guide</a></em> <br/> <ol> <li>Check your console log 
    
    for any white-list rejection errors.</li> <li>Add your allowed <strong>hosts</strong> in Cordova.plist/ExternalHosts (wildcards OK, don
    't enter the URL scheme)</li> </ol>   <button onclick=
    "cb.showWebPage('http://google.com');">Click to open ChildBrowser!</button> </body>   <script src=
    "js/ChildBrowser.js"></script> <script src=
    "js/TestChildBrowser.js"></script> <script src=
    "js/messages.js"></script> <script src=
    "js/auth.js"></script> </body> </html>
    


    I then built and deployed through Eclipse to get my js/html in the right place, and then ran through XCode. I was able to get things to run through the simulator, and all the log messages indicated things ran correctly, but I only saw a black screen. At this point I'm not sure if its a simulator problem or not, but I'm fairly confident whatever it is is a ChildBrowser issue and not an issue w/Worklight setup. Hope this will help you get at least a little further.
  • SystemAdmin
    SystemAdmin
    2327 Posts

    Re: How to add Kordova ChildBrowser plugin to Worklight 5 iPad

    ‏2013-02-11T05:16:34Z  
    I got a bit further than you, although I never did manage to get the simulator behaving the way I wanted it to. I put the classes in the classes folder, the bundle file in the resources folder (all through XCode), put the js file in ipad/js. I modified my TestChildBrowser.js file (my app was called TestChildBrowser) in common/js to look like this:

    ===========

    <pre class="jive-pre"> // Worklight comes with the jQuery framework bundled inside. If you do not want to use it, please comment out the line below. window.$ = WLJQ; function wlCommonInit() { document.addEventListener( "deviceready", onDeviceReady, false); } function onDeviceReady() { var root = this; cb = window.plugins.childBrowser; // if (cb != null) { // cb.onLocationChange = function(loc){ root.locChanged(loc); }; // cb.onClose = function(){root.onCloseBrowser()}; // cb.onOpenExternal = function(){root.onOpenExternal();}; // cb.showWebPage("http://google.com"); // } } function onCloseBrowser() { console.log( "onCloseBrowser!"); } function locChanged(loc) { console.log( "locChanged!"); } function onOpenExternal() { console.log( "onOpenExternal!"); } </pre>

    ==========

    based on the sample in the plugin, and then modified common/TestChildBrowser.html to look like this:

    <pre class="jive-pre"> <!DOCTYPE html> <html> <head> <meta charset= "utf-8" /> <meta name= "viewport" content= "width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" /> <title>TestChildBrowser</title> <link rel= "shortcut icon" href= "images/favicon.png" /> <link rel= "apple-touch-icon" href= "images/apple-touch-icon.png" /> <link rel= "stylesheet" href= "css/reset.css" /> <link rel= "stylesheet" href= "css/TestChildBrowser.css" /> </head> <body onload= "WL.Client.init({})" id= "content" style= "display: none"> TestChildBrowser <!-- application UI goes here --> <h1>Hey, it 's Cordova!</h1> <p>Don 't know how to get started? Check out our <em><a target="_blank" href="http://docs.phonegap.com/en/edge/guide_getting-started_ios_index.md.html#Getting%20Started%20with%20iOS">Getting Started Guide</a></em> <br/> <ol> <li>Check your console log for any white-list rejection errors.</li> <li>Add your allowed <strong>hosts</strong> in Cordova.plist/ExternalHosts (wildcards OK, don 't enter the URL scheme)</li> </ol> <button onclick= "cb.showWebPage('http://google.com');">Click to open ChildBrowser!</button> </body> <script src= "js/ChildBrowser.js"></script> <script src= "js/TestChildBrowser.js"></script> <script src= "js/messages.js"></script> <script src= "js/auth.js"></script> </body> </html> </pre>

    I then built and deployed through Eclipse to get my js/html in the right place, and then ran through XCode. I was able to get things to run through the simulator, and all the log messages indicated things ran correctly, but I only saw a black screen. At this point I'm not sure if its a simulator problem or not, but I'm fairly confident whatever it is is a ChildBrowser issue and not an issue w/Worklight setup. Hope this will help you get at least a little further.
    you can look at the sample html in the plugin if its unclear though. Also, I probably should have put ChildBrowser.js in the common js folder rather than the ipad one, but I don't have time to retest it today so I'm just letting you know exactly what I did.
  • SystemAdmin
    SystemAdmin
    2327 Posts

    Re: How to add Kordova ChildBrowser plugin to Worklight 5 iPad

    ‏2013-02-11T15:25:10Z  
    Take a look at these:

    Opening external links inside an IBM Worklight Android app
    http://produco.blogspot.com/2013/01/opening-external-links-inside-ibm_7.html

    Opening external links inside an IBM Worklight iOS app
    http://produco.blogspot.com/2013/01/opening-external-links-inside-ibm.html

    I wrote these how to guides to show how I did it. Let me know if you have any questions.

    Ralph Pina
    ChildCrowser full implementation should be cordova 2.3.0 feature. Even today's Worklgiht in Cordova 2.2.0 don't have it...

    Jerry
  • SystemAdmin
    SystemAdmin
    2327 Posts

    Re: How to add Kordova ChildBrowser plugin to Worklight 5 iPad

    ‏2013-02-11T17:44:53Z  
    I've tried following numerous examples and guides to get this working but have come up short every time.

    I receive the following error immediately after the cordova.exec("ChildBrowserCommand.showWebPage", loc); line:

    EXC_BAD_ACCESS(code=2, address=0x2)

    I have no idea how to debug this and am really frustrated that it isn't working properly.
    Shortly after my post I found the issue.

    The following line in the childBrowserCommand.m file was causing an error.

    childBrowser.supportedOrientations = cont.supportedOrientations;

    I tried to edit it to get it working and ended up just commenting it out because of all the errors it was causing.

    If anyone knows what this should be, please let me know.

    Thanks!