This is a migrated thread and some comments may be shown as answers.

ChildBrowser plug in, how to use it?

45 Answers 229 Views
General Discussion
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Jan-Dirk
Top achievements
Rank 1
Jan-Dirk asked on 22 Oct 2012, 03:12 PM
I have tried to use the child browser plugin, but it seems not to work.

I found a couple of examples on the internet that I tried, to no avail. One of them was:

function openUrl(url) {
       window.plugins.childBrowser.showWebPage(url);
}

It seem that my app stopped after reaching the 2nd line.

Looking forward to some guidelines.

45 Answers, 1 is accepted

Sort by
0
Martin
Top achievements
Rank 1
answered on 24 Oct 2012, 05:54 AM
Yeah, same issue here.
window.plugins is undefined :(
0
Jan-Dirk
Top achievements
Rank 1
answered on 24 Oct 2012, 08:28 AM
Glad to hear that I am not the only one not getting it to work.

Also not sure how to reference the plug in. I tried like this:
<script type="text/javascript" charset="utf-8" src="Plugins/Child Browser/childBrowser.js"></script>
0
Evgeni "Zammy" Petrov
Telerik team
answered on 24 Oct 2012, 08:55 AM
Hi, JD

 Here is documentation how to add plugins http://docs.icenium.com/icenium-mobile-app-development/working-with-frameworks/apache-cordova/apache-cordova-plugins

Here is documentation for the plugin we have : https://github.com/alunny/ChildBrowser/blob/3.0.4/README.md 


@Martin: Do not forget that iOS paths are case sensitive. The right include is

<script src="Plugins/Child Browser/childbrowser.js"></script>
@JD: I could not see where you include childbrowser.js file. Without it, it will not work.

Shout if you have any other issues.

Regards,
Evgeni "Zammy" Petrov
the Telerik team

Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.
0
Martin
Top achievements
Rank 1
answered on 24 Oct 2012, 09:07 AM
@Evgeni Thanks - the problem is not related to proper paths.

I am including it like this:
<script src="cordova.js"></script>
<script charset="utf-8" src="plugins/Child Browser/childbrowser.js"></script>

function onDeviceReady() { window.plugins.childBrowser.showWebPage("http://www.google.com"); } When run in the simulator (iOS and Android) it gives me this on the console: Uncaught TypeError: Cannot read property 'childBrowser' of undefined
on the above-mentioned call. How to fix that?

0
Evgeni "Zammy" Petrov
Telerik team
answered on 24 Oct 2012, 09:33 AM
Hello,

 As I mentioned iOS is case sensitive. The path that you posted is slightly incorrect - it should be "Plugins/Child Browser/childbrowser.js".

 Unfortunately, plugins are currently not supported in Simulator - you can only work with them on a real device. We'll be working on improving this experience in the future. 

 If you have any other problems or suggestion, don't hesitate to write us back.

Kind regards,
Evgeni "Zammy" Petrov
the Telerik team

Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.
0
Martin
Top achievements
Rank 1
answered on 24 Oct 2012, 09:47 AM
Oh thanks for pointing that out!
I was close to getting mad about this ;-)
0
Jan-Dirk
Top achievements
Rank 1
answered on 24 Oct 2012, 02:58 PM
@Evgeni: I removed the reference to the JS file, that is probably why you didn't find it.

In general it is good to know what the limits of the simulator are. I should have realized to try on a real device. A call to a plug-in function also breaks any code that comes after the call to that plug-in function.
0
BLE
Top achievements
Rank 1
answered on 03 Jan 2013, 03:17 PM
Seriously, a space in the path name?

Here's what you'll see in the simulator console:
Error: Failed to load resource -- http://local/Plugins/Child%20Browser/childbrowser.js

FYI: window.plugins.childBrowser is undefined if you call it before Cordova is initialized.  Also, here's a sample project that might help others out there: https://github.com/Icenium/sample-childbrowser
0
Arowana
Top achievements
Rank 1
answered on 24 Apr 2013, 12:45 PM
This demo is also not working for me .. I am getting issue as "Uncaught TypeError: Cannot read property 'childBrowser' of undefined "

Please advice me ...
0
Jan-Dirk
Top achievements
Rank 1
answered on 24 Apr 2013, 12:59 PM
Did you see the post where they say that it doens't work in the simulator? Did you try it on device?
0
Steve
Telerik team
answered on 24 Apr 2013, 01:06 PM
Hello Arowana,

The sample childbrowser demo is fully runnable as is and you can compare it with your project for differences. Make sure you have added reference to Cordova js file prior the reference to the childbrowser plug-in i.e.:

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

Nevertheless our recommendation is to use the new InAppBrowser that is available out-of-the-box with latest Icenium release when choosing Cordova 2.4.

Useful Links:
Cordova InAppBrowser Documentation
Icenium sample app for InAppBrowser

Regards,
Steve
the Telerik team

Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Kendo UI Dojo.
0
BLE
Top achievements
Rank 1
answered on 24 Apr 2013, 05:58 PM
Shiny new!  I hadn't seen InAppBrowser before, thanks for the tip.

P.S. My latest Icenium Graphite throws this error when clicking on the "Clone > Sample Projects" menu option: "The sample projects cannot be loaded.  Please make sure that you are connected to the Internet."  This is obviously a false positive since Graphite won't even load without being connected to the Internet and you can manually paste https://github.com/Icenium/sample-in-app-browser.git into the "Repository Uri" and click "Ok" and the project loads fine.

Screenshot: https://www.box.com/s/uvvqy6chuxf0uedgsdjx
0
Steve
Telerik team
answered on 25 Apr 2013, 07:45 AM
Hello BLE,

Thanks for the heads up, we noticed this problem as well and narrow it down to changes in the github API. You can use Mist for the time being where listing the samples still works.

Greetings,
Steve
the Telerik team

Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Kendo UI Dojo.
0
Bil
Top achievements
Rank 1
answered on 03 May 2013, 09:34 PM
In your ChildBrowser plugin is this the correct usage for getting an external link to work;
I see you are calling the functions for each button from main.js but nothing happens when I click each button.
I moved the main.js contents under a <script> tag in the index.html to test it in Xcode...and neither work.
I am attempting to test this using your sample-in-app-browser download from GitHub.

Can you explain what I am doing wrong?
0
Kristian D. Dimitrov
Telerik team
answered on 07 May 2013, 06:43 AM
Hi Bil,

 We tested both samples and when deployed using Icenium everything works as expected. Could you please share more information about the devices you test on and create a jsbin with the code that causes your issue, if its different from the one used in our samples. Do you use Icenium to build and deploy the project or Xcode?

Regards,
Kristian D. Dimitrov
the Telerik team

Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Kendo UI Dojo.
0
FitFan (Legacy Drophit Account)
Top achievements
Rank 1
answered on 13 May 2013, 11:25 PM
<script type="text/javascript" charset="utf-8" src="Plugins/Child Browser/childbrowser.js"></script>

Does not work since 1.5 - check your own samples - not working
0
Steve
Telerik team
answered on 14 May 2013, 09:08 AM
Hello Zachary,

We've tested both in the Icenium simulator and on actual device and the sample-in-app-browser demo is working as expected. You can find a video of our observations here. As explained before, the sample-childbrowser demo would not work in the simulator and you need to run it on actual device. If it fails on real device, please share more information about the devices you test on.

All the best,
Steve
the Telerik team

Don't miss the Icenium May Release Keynote - sign up now!
Share feedback and vote for features on our Feedback Portal.
0
FitFan (Legacy Drophit Account)
Top achievements
Rank 1
answered on 14 May 2013, 03:10 PM
Not failing on real device, the Graphite editor is showing this an error line and on hover replying:

HTML: There is no project item on that location.

This was not the case prior to the upgrade.

Also I thought I read somewhere that the browser now works in simulator? Your inAppBrowser example does not?
0
Steve
Telerik team
answered on 14 May 2013, 03:38 PM
Hi Zachary,

Thanks for the clarification - you can safely ignore that error, we would fix it for the next version of Icenium. Even though it is marked as invalid path, if you build and deploy the childbrowser sample on a real device, it would work as expected.

With the update to Cordova 2.4, you are now able to use the InAppBrowser. I've posted this info in previous post in this thread.

Kind regards,
Steve
the Telerik team

Don't miss the Icenium May Release Keynote - sign up now!
Share feedback and vote for features on our Feedback Portal.
0
FitFan (Legacy Drophit Account)
Top achievements
Rank 1
answered on 14 May 2013, 06:43 PM
Gotcha thanks for the help, does the new InAppBrowser work in the simulator? Also, is there anything for facebook login yet using the new InAppBrowser?
0
Steve
Telerik team
answered on 15 May 2013, 07:02 AM
Hi Zachary,

Yes, the observations posted before are recorded while using the sample-in-app-browser demo in the Graphite simulator.

Kind regards,
Steve
the Telerik team

Don't miss the Icenium May Release Keynote - sign up now!
Share feedback and vote for features on our Feedback Portal.
0
Tom
Top achievements
Rank 1
answered on 27 May 2013, 01:46 PM
Love Icenium.  ChildBrowser examples really annoying.  If they only work on the device, would you please add a comment in Red on all of the Samples saying so.  We should not have to think about what is going wrong in the simulator.  One would expect that they would work in the simulator.

The two that I tried are:
https://github.com/Icenium/sample-childbrowser.git
https://github.com/Icenium/sample-facebook-api.git
0
Steve
Telerik team
answered on 27 May 2013, 01:52 PM
Hello Tom,

Thank you for the feedback, we would consider applying some kind of warning/awareness as you suggest.

Regards,
Steve
Telerik

Don't miss the Icenium May Release Keynote - sign up now!
Share feedback and vote for features on our Feedback Portal.
0
Relez
Top achievements
Rank 1
answered on 06 Jun 2013, 01:17 PM
Hello, I would like to know if there any way I can customize the LocationBar of the ChildBrowserPlugin, for example, hide the URL and add a button with a functionality: "close the childbrowser", for example.

Thanks!
0
Steve
Telerik team
answered on 06 Jun 2013, 01:50 PM
Hello Relvis,

Currently there isn't a way as the built-in Icenium Cordova plug-ins are native (i.e. Objective C or Java code) and are compiled on our cloud service that you don't have access to. We're however working on support for custom pluginstall-compatible Cordova plug-ins for the next update of Icenium at the end of June. Then you would be able to add the ChildBrowser plug-in as custom plug-in and customize it as you find fit.

On a side note, you might take a look at the built-in Cordova InAppBrowser, which might be a better fit for your application.

Regards,
Steve
Telerik

Looking for tips & tricks directly from the Icenium team? Check out our blog!
Share feedback and vote for features on our Feedback Portal.
0
Relez
Top achievements
Rank 1
answered on 07 Jun 2013, 03:45 PM
I tested the InAppBrowser feature and it looks great, but, may I hide the URL? Keep the DONE button, but hide just the URL?

Thanks!
0
Steve
Telerik team
answered on 11 Jun 2013, 11:04 AM
Hello Relez,

Yes you can hide the URL by specifying the location option as third argument of the open method e.g.:

window.open("http://icenium.com", "_blank",'location=no');

Regards,
Steve
Telerik

Looking for tips & tricks directly from the Icenium team? Check out our blog!
Missed our first webinar, watch it here.
Share feedback and vote for features on our Feedback Portal.
0
Relez
Top achievements
Rank 1
answered on 12 Jun 2013, 01:09 PM
Hello there, thanks for the reply, in your case I hide the bar, but I would like to show the LocationBar with the Done button, for close the window and return to the application. I just want to hide the URL, not the bar.

Thanks!
0
Steve
Telerik team
answered on 12 Jun 2013, 02:10 PM
Hello Relez,

That is exactly what is happening when you use that code, only the url bar is removed, the bar with the Done button is still present and allows you to return.

Regards,
Steve
Telerik

Looking for tips & tricks directly from the Icenium team? Check out our blog!
Missed our first webinar, watch it here.
Share feedback and vote for features on our Feedback Portal.
0
Relez
Top achievements
Rank 1
answered on 12 Jun 2013, 03:58 PM
Hello Steve, thanks for your reply, in my code:

window.open(url, '_blank', 'location=no');

It hides all the location bar, it just shows the content of the url. I am using cordova 2.4.0 and testing on a Samsung Galaxy S3 with Android 4.1.2.

Thanks!
0
Steve
Telerik team
answered on 12 Jun 2013, 04:13 PM
Hi Relez,

I've somehow assumed (thought you've specified) you're using iOS device, where this code behaves exactly as I described earlier. Just tested on Android and indeed the whole address bar disappears along with the Done button. This difference in behavior is inherent to Android and Cordova and there is nothing that can be done to avoid it at this point. Hitting the Android back button (be it software or hardware) returns to your app.

Regards,
Steve
Telerik

Looking for tips & tricks directly from the Icenium team? Check out our blog!
Missed our first webinar, watch it here.
Share feedback and vote for features on our Feedback Portal.
0
Relez
Top achievements
Rank 1
answered on 12 Jun 2013, 07:39 PM
Hello Steve, I will use it for now, it fixes my needs for now.

Thanks Steve for your help!
0
Dave
Top achievements
Rank 1
answered on 06 Jan 2014, 08:58 PM
" Love Icenium.  ChildBrowser examples really annoying.  If they only work on the device, would you please add a comment in Red on all of the Samples saying so.  We should not have to think about what is going wrong in the simulator.  One would expect that they would work in the simulator."   
                    - Tom

Yes,  please. Be very clear about this. I've wasted 2 days searching around Stack Overflow, here, PhoneGap docs, and Cordova Docs, just to discover that in app browser does not work in the simulator. 
0
Steve
Telerik team
answered on 07 Jan 2014, 11:46 AM
Hello Dave,

Childbrowser is deprecated since Cordova 2.9 and one should use InAppBrowser instead. InAppBrowser is supported in the Icenium simulator, with the only "difference" it opens windows outside of the simulator, instead of "browser" inside the app, which is much more trickier to implement.

Regards,
Steve
Telerik
You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
Looking for tips & tricks directly from the Icenium team? Check out our blog!
Share feedback and vote for features on our Feedback Portal.
0
Dave
Top achievements
Rank 1
answered on 07 Jan 2014, 02:34 PM
Thank you for the prompt response, Steve.

Just so that I'm understanding this correctly:

I can use InAppBrowser in the simulator, but it will display a new window as a pop-up page. If I test on my physical device (iOS or Android) then the page will appear within application, correct?

I suppose the only issue I have at this point would be appending my header and footer to that external page.
0
Steve
Telerik team
answered on 07 Jan 2014, 02:48 PM
Hi Dave,

Yes, your understanding is correct. In general InAppBrowser does not have any context to the main app, so applying your app's header/footer is not possible, and quite frankly that is outside of the goals that InAppBrowser is created for.

Regards,
Steve
Telerik
You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
Looking for tips & tricks directly from the Icenium team? Check out our blog!
Share feedback and vote for features on our Feedback Portal.
0
Dave
Top achievements
Rank 1
answered on 07 Jan 2014, 03:00 PM
Thank you for clarifying -- that helps me to understand why I've had such an issue then :).

What do you think would be my best approach in that case? I'm trying to navigate to an external URL within my app, while maintaining my header and footer on the page, so that I can navigate back within my application.

ie - no sense in rewriting a merchandise page if we already have it done on the desktop version of the site. 

0
Jan-Dirk
Top achievements
Rank 1
answered on 07 Jan 2014, 03:26 PM
I am still hoping that someone (Cordova developer, not someone from Icenium) picks up this feature request I made for the inAppBrowser: https://issues.apache.org/jira/browse/CB-3397

"Ability to set position and heigth/width for the InAppBrowser UIWebView so that you could make it look as if you are still in the app "
0
Dave
Top achievements
Rank 1
answered on 07 Jan 2014, 03:29 PM
Wow, that's actually exactly what I'm looking for.

What is the alternative? If you navigate to an external URL, are you forced to use the device's default browser, and navigate outside of the app?
0
Steve
Telerik team
answered on 08 Jan 2014, 04:15 PM
Hi guys,

Quite frankly I am not sure how being able to specify location of the InAppBrowser would make it more "look as if you are still in the app", but I am all in for extending the scarce functionality of InAppBrowser. Currently (only for iOS) you can specify presentationstyle option that when set to pagesheet or formsheet would not occupy the full screen and would probably come close to your desired look.

Regards,
Steve
Telerik
You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
Looking for tips & tricks directly from the Icenium team? Check out our blog!
Share feedback and vote for features on our Feedback Portal.
0
Dave
Top achievements
Rank 1
answered on 08 Jan 2014, 06:44 PM
Thank you Steve.

I'll look into presentation style.

What do developers generally do, in terms of navigating to external pages? Is the common scenario to launch an external browser, then when the browser is closed, automatically resume the app?

Thanks.
0
Jan-Dirk
Top achievements
Rank 1
answered on 08 Jan 2014, 08:36 PM
PresentationStyle seems to be for iOS only?
0
Steve
Telerik team
answered on 09 Jan 2014, 08:12 AM
Hi guys,

@Dave: what do you do when you navigate to external page from a web app? It is pretty much the same user case.

@JD: Yes, I've mentioned that it is iOS only unfortunately in my reply.

Regards,
Steve
Telerik
You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
Looking for tips & tricks directly from the Icenium team? Check out our blog!
Share feedback and vote for features on our Feedback Portal.
0
Dave
Top achievements
Rank 1
answered on 09 Jan 2014, 02:28 PM
2nd Update: Aha, I've found something that works and does exactly what I was looking for.

I've connected my links via event handlers:

HTML page:

      <!-- NAV BAR
        ================================================== -->
        <div data-role="footer" data-id="footer" data-position="fixed">
            <div data-role="navbar">
                <ul>
                    <li><a id="blog">Blog</a></li>
                    <li><a href="#games-page" data-transition="slide">Games</a></li>
                    <li><a id="music">Music</a></li>
                    <li><a href="#about-page" data-transition="slide">About Us</a></li>
                    <li><a id="art">Art</a></li>
                </ul>
            </div><!-- /navbar -->
        </div><!-- /footer -->

Code Behind:

        var self       = this      
        var doc       = document;
        var blog     = doc.getElementById('blog');
        var music  = doc.getElementById('music');
        var art         = doc.getElementById('art');
        
        blog.addEventListener( 'click', self._openBlogPage,  false);
        music.addEventListener('click', self._openMusicPage, false);
        art.addEventListener(  'click', self._openArtPage,   false);  

    _openBlogPage: function() {
        window.open("http://icenium.com", "_blank");    
    },


This loads a new external page within my app, along with a footer with a back button so that I can navigate back to my app.

Update: So I was able to deploy to my iOS device today, I hadn't realized how easy it was before. Excellent work on the part of the Icenium team.

I'm able to open an external page within my app by using:

                    <li><a href="http://google.com" rel="external">Google</a></li>

and it displays fine. Just working on finding a means to navigate back from that page now. 
---------------------------------------

@Steve,

I look at apps like Feedly, Facebook, or Twitter on iOS, and when you click on a link to an external URL, they use the browser within the app, and still have the app's chrome (header / footer) surrounding the page.

Is something like that possible with Cordova? I assumed it would be a pretty common/useful feature, but I've only recently started doing mobile development where I have the need to navigate to external URLs.
0
Jan-Dirk
Top achievements
Rank 1
answered on 10 Jan 2014, 11:44 AM
Wow, that is a nice find! Thank you for sharing!
Tags
General Discussion
Asked by
Jan-Dirk
Top achievements
Rank 1
Answers by
Martin
Top achievements
Rank 1
Jan-Dirk
Top achievements
Rank 1
Evgeni "Zammy" Petrov
Telerik team
BLE
Top achievements
Rank 1
Arowana
Top achievements
Rank 1
Steve
Telerik team
Bil
Top achievements
Rank 1
Kristian D. Dimitrov
Telerik team
FitFan (Legacy Drophit Account)
Top achievements
Rank 1
Tom
Top achievements
Rank 1
Relez
Top achievements
Rank 1
Dave
Top achievements
Rank 1
Share this question
or