ChildBrowser plug in, how to use it?

46 posts, 0 answers
  1. Relez
    Relez avatar
    45 posts
    Member since:
    Jan 2013

    Posted 12 Jun 2013 Link to this post

    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!
  2. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 12 Jun 2013 Link to this post

    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.
  3. Relez
    Relez avatar
    45 posts
    Member since:
    Jan 2013

    Posted 12 Jun 2013 Link to this post

    Hello Steve, I will use it for now, it fixes my needs for now.

    Thanks Steve for your help!
  4. Dave
    Dave avatar
    7 posts
    Member since:
    Jan 2014

    Posted 06 Jan 2014 Link to this post

    " 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. 
  5. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 07 Jan 2014 Link to this post

    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.
  6. Dave
    Dave avatar
    7 posts
    Member since:
    Jan 2014

    Posted 07 Jan 2014 Link to this post

    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.
  7. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 07 Jan 2014 Link to this post

    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.
  8. Dave
    Dave avatar
    7 posts
    Member since:
    Jan 2014

    Posted 07 Jan 2014 Link to this post

    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. 

  9. Jan-Dirk
    Jan-Dirk avatar
    327 posts
    Member since:
    Jun 2012

    Posted 07 Jan 2014 Link to this post

    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 "
  10. Dave
    Dave avatar
    7 posts
    Member since:
    Jan 2014

    Posted 07 Jan 2014 Link to this post

    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?
  11. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 08 Jan 2014 Link to this post

    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.
  12. Dave
    Dave avatar
    7 posts
    Member since:
    Jan 2014

    Posted 08 Jan 2014 Link to this post

    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.
  13. Jan-Dirk
    Jan-Dirk avatar
    327 posts
    Member since:
    Jun 2012

    Posted 08 Jan 2014 Link to this post

    PresentationStyle seems to be for iOS only?
  14. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 09 Jan 2014 Link to this post

    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.
  15. Dave
    Dave avatar
    7 posts
    Member since:
    Jan 2014

    Posted 09 Jan 2014 Link to this post

    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.
  16. Jan-Dirk
    Jan-Dirk avatar
    327 posts
    Member since:
    Jun 2012

    Posted 10 Jan 2014 Link to this post

    Wow, that is a nice find! Thank you for sharing!
Back to Top