Phonegap, remote views and view layouts

9 posts, 0 answers
  1. Robin
    Robin avatar
    7 posts
    Member since:
    Aug 2013

    Posted 25 Sep 2013 Link to this post

    Hi,

    I'm writing a phonegap (3.0) app with Kendo UI Mobile.
    I need to load 'remote' views from a web service. I know a remote view under phonegap is just another file on the local filesystem, which is not what I want.

    I'm currently exploring using AJAX to request a view and insert it into the DOM, but when I do this I lose my application layout (header title and tabbar footer).
    Do you have any information on the best practice for this use case?

    I've got loads more information and different techniques I've tried, but will save all that unless it's helpful.

    Thanks,
    Robin
  2. Robin
    Robin avatar
    7 posts
    Member since:
    Aug 2013

    Posted 26 Sep 2013 Link to this post

    Sorry, ignore me. I've worked it out. Can't believe it took me so long to understand how to do this.

    Because my views are dynamic in nature I'm calling 
    application.navigate(generateURL());
     
    function generateURL() {
     return "http://myurl.co.uk/blah/" + someParam1;
    }
  3. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2598 posts

    Posted 26 Sep 2013 Link to this post

    Hi Robin,

    Glad you found the solution, yourself. You can also check this demo showing how to load remote views:

    http://demos.kendoui.com/mobile/view/index.html#/
     
    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  4. Robin
    Robin avatar
    7 posts
    Member since:
    Aug 2013

    Posted 26 Sep 2013 Link to this post

    Thanks,
    I'd done all the reading and seen that, but the thing that really confused me was that all demos and documentation all refer to a relative path, which in phonegap would refer to the local filesystem.
    It took me ages to realise I could just put in an absolute path (http://myurl.co.uk) and KendoUI would still do the right thing with regards to loading a remote view.

    This is not mentioned anywhere in the docs, but I think it would be really handy to note it somewhere for others coming to this for the first time.
    It really threw me for weeks... but maybe I'm a little slow :)

    Robin
  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2598 posts

    Posted 27 Sep 2013 Link to this post

    Hi Robin,

    When loading remote views, what actually happens is that the application executes an Ajax request to get the content of the view. The problems might come if your server is not configured to handle CORS

    In case you have any troubles using Kendo UI, please do not hesitate to contact us.
     
    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Robin
    Robin avatar
    7 posts
    Member since:
    Aug 2013

    Posted 27 Sep 2013 Link to this post

    thanks for the info on remote views. Those are all working now.

    However, I do still have a problem with navigating to another view losing the layout. This was my original issue, but the whole remote view issue sidetracked me.

    I've developed my app using the trial build .716 and everything works well. On upgrading to the .918 build (or the .926 internal build), the application.navigate() function shows a different behaviour.

    I've got a simple code example that shows the issue.
    Note, this only seems to be a problem on the phonegap (3.0) application, running on the phone. Running this in a browser works fine.
    <!DOCTYPE html>
    <head>
        <meta charset="utf-8"/>
        <meta name="format-detection" content="telephone=no"/>
        <meta name="viewport"
              content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, target-densitydpi=medium-dpi"/>
     
    <!--- SWITCH THESE TO SEE THE DIFFERENT BEHAVIOUR -->
        <!--<link rel="stylesheet" href="styles/926/kendo.mobile.all.min.css"/>-->
        <link rel="stylesheet" href="styles/716/kendo.mobile.all.min.css"/>
     
        <script src="phonegap.js"></script>
        <script src="js/jquery.min.js"></script>
         
    <!--- SWITCH THESE TO SEE THE DIFFERENT BEHAVIOUR -->
        <!--<script src="js/kendo/926/kendo.mobile.min.js"></script>-->
        <script src="js/kendo/716/kendo.mobile.min.js"></script>
     
    </head>
     
    <body id="dmbody">
    <script type="text/javascript">
        var application;
        var phonegapApp = {
            // Application Constructor
            initialize: function() {
                this.bindEvents();
            },
     
            // Bind any events that are required on startup. Common events are:
            // 'load', 'deviceready', 'offline', and 'online'.
            bindEvents: function() {
                document.addEventListener('deviceready', this.onDeviceReady, false);
            },
     
            // deviceready Event Handler
            onDeviceReady: function() {
                //Start the Kendo UI Mobile application
                application =
                        new kendo.mobile.Application($(document).body,
                                {
                                    transition: "slide",
                                    skin: "flat"
                                });
                navigator.splashscreen.hide();
            }
        };
     
        phonegapApp.initialize();
     
     
        function complexFunction() {
            //performs all sorts of logic, but boils down to calling application.navigate to some URL
            application.navigate('#view2');
        }
     
     
     
    </script>
     
     
    <!-- initial view -->
    <div data-role="view" data-layout="app" data-title="Welcome" id="home">
        <p>
            <a data-role="button" href="#view2">View 2 with href</a>
            <a data-role="button" data-click="complexFunction">View 2 with data-click</a>
        </p>
    </div>
     
    <div data-role="view" data-layout="app" data-title="view 2" id="view2">
        <p>this is view 2</p>
    </div>
     
    <!-- application layout template -->
    <div data-role="layout" data-id="app">
        <header data-role="header">
            <div data-role="navbar">
                <span data-role="view-title"></span>
            </div>
        </header>
    </div>
     
     
    </body>
    </html>

    With the /926 kendo build
    When you click the 'View 2 with data-click' button, view 2 transitions in but does not have any of the layout. If you had clicked the 'View 2 with href' then the view 2 is rendered correctly and a further application.navigate() call would be fine, as the view is already initialised.

    With the /726 Kendo build
    The application.navigate() call initialises the view on first load and applies the correct layout template.

    Has the behaviour of application.navigate changed since .726?
    How should I make programmatic transitions in this case?

    Thanks in advance,
    Robin
  7. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2598 posts

    Posted 30 Sep 2013 Link to this post

    Hi Robin,

    I have tested your code with different version of Kendo UI Mobile, and deployed with PhoneGap 3.0 (using Icenium), but was not able to reproduce the behaviour that you are describing. I have attached the code that I used for testing, so you can test my code as well (please include the needed js and css references before testing).

    It is a common problem for our users, to reinitialize the Kendo UI Mobile application in their remote view as well, which causes the incorrect behaviour of the layout, is this a possible reason for this behaviour in your case? You do not need to initialize it again, as it actually performs an Ajax call and replaced the data inside the already created application.

    Please test the example that I have sent you and tell me if I am missing something.
     
    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Robin
    Robin avatar
    7 posts
    Member since:
    Aug 2013

    Posted 30 Sep 2013 Link to this post

    Thanks Kiril,

    I'm at a loss to explain why I was seeing the reported behaviour, as your and my examples now work correctly...
    I had been putting another application init call in to get it to work in a browser since I added the phonegap.initialise method.
    Maybe I left that in accidentally ..?

    Thanks for your time, looks like it's user error, but I'll let you know if I see the behaviour again.

  9. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2598 posts

    Posted 30 Sep 2013 Link to this post

    Hello Robin,

    I am really happy to hear that your project is up and running. Maybe it is because of the init call that you have left over, but we will never know.

    If it happens again, extract a sample showing the behaviour and we will be more than happy to investigate.
     
    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top