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

Phonegap, remote views and view layouts

8 Answers 103 Views

General Discussions

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

8 Answers, 1 is accepted

answered on 27 Sep 2013, 04:31 PM

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"/>

<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/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>

<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>

<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

answered on 30 Sep 2013, 10:51 AM

KendoMobileApp.rar

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!

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Phonegap, remote views and view layouts

8 Answers, 1 is accepted