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

How to display a "loading" message on kendo ui mobile page until all resources will be loaded and DeviceReady is fired on PhoneGap

3 Answers 246 Views

General Discussions

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

mo2011ti asked on 10 Mar 2013, 06:04 PM

page-loading.jpg

page-completed.jpg

Hello,

I'm Developing PhoneGap app using Kendo mobile, the first page is static,
on that first page there is button "Enter" and the user is redirected to the main page - in this page i'm using kendo mobile ui with one layout and 4 "views" with tabstrip to swap between the views.

The problem is that the page layout shown as html without the kendo style until the full page is loaded.
since this is PhoneGap App I put

window.kendoMobileApplication = new kendo.mobile.Application(document.body);

in the onDeviceReady{ ... } so the user now see the html rendering without the kendo mobile style , please see the image attached page_loading.jpg

when page is loaded then it displayed correctly -attached image page_completed.jpg

What is the best way to solve this?
do I need to add div to my page with "loading message..." and to use css style to hide (display:none) the layout and the views
and when the onDeviceReady event is fired I hide the "loading div" and show the kendo ui layout, like this:

window.kendoMobileApplication = new kendo.mobile.Application(document.body);

divLoading.hide();

displayKendoUiLayout();

here is the full source code on this page:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; 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, height=device-height, target-densitydpi=device-dpi"

/>

<link rel="stylesheet" type="text/css" href="styles/kendo.mobile.all.min.css" />

<title>Kendo Main Page</title>

</head>

<body>

<div data-role="view" id="tabstrip-profile" data-title="Profile" data-layout="mobile-tabstrip">

<ul data-role="listview" data-style="inset" data-type="group">

<li>Profile

<ul>

<li>

<h2>Carine <span>Callahan</span></h2>

<img src="img/ottawa.jpg" /></li>

<li>Weekly average sales <span class="sales-up">$ 8,250</span></li>

<li>Monthly average sales <span class="sales-up">$ 32,000</span></li>

<li>

<a href="#" onclick="redirectTOLocalPage('spec.html');">

Show Spec!

</a>

<br />

<a href="#" data-role="button" onclick="redirectTOLocalPage('index.html');">

Go To Home !!!

</a>

</li>

</ul>

</li>

<li>Languages

<ul>

<li>English <span class="value">Native</span></li>

<li>Hungarian <span class="value">Advanced</span></li>

<li>French <span class="value">Advanced</span></li>

<li>Chinese <span class="value">Beginner</span></li>

</ul>

</li>

<li>Sales commodity

<ul>

<li>Beverages</li>

<li>Condiments</li>

<li>Confections</li>

<li>Diary Products</li>

<li>Grains/Cereals</li>

<li>Meat/Poultry</li>

<li>Produce</li>

<li>Seafood</li>

</ul>

</li>

<li>PC Skills

<ul>

<li>MS Word</li>

<li>MS Excel</li>

<li>MS Outlook</li>

<li>MS PowerPoint</li>

<li>MS Project</li>

<li>Windows (XP, Vista)</li>

<li>Internet</li>

<li>SAP - Sales and Marketing Module</li>

<li>MS Visual Studio</li>

<li>Adobe Acrobat</li>

<li>CorelDraw</li>

</ul>

</li>

</ul>

</div>

<div data-role="view" id="tabstrip-sales" data-title="Sales History" data-layout="mobile-tabstrip">

<ul data-role="listview" data-style="inset" data-type="group">

<li>Sales 2011

<ul>

<li>January <span class="sales-up">↑ $ 35,000</span></li>

<li>February <span class="sales-down">↓ $ 25,000</span></li>

<li>March <span class="sales-down">↓ $ 23,000</span></li>

<li>April <span class="sales-up">↑ $ 30,000</span></li>

<li>May <span class="sales-up">↑ $ 31,000</span></li>

<li>June <span class="sales-down">↓ $ 29,000</span></li>

<li>July <span class="sales-up">↑ $ 35,000</span></li>

<li>August <span class="sales-up">↑ $ 37,000</span></li>

<li>September <span class="sales-hold">→ $ 37,000</span></li>

<li>October <span class="sales-hold">→ $ 37,000</span></li>

<li>November <span class="sales-up">↑ $ 38,000</span></li>

<li>December <span class="sales-up">↑ $ 40,000</span></li>

</ul>

</li>

</ul>

</div>

<div data-role="view" id="tabstrip-rating" data-title="Rating" data-layout="mobile-tabstrip">

<ul data-role="listview" data-style="inset" data-type="group">

<li>Sales Representatives

<ul>

<li data-icon="toprated">1. Andrew Fuller</li>

<li data-icon="toprated">2. Janet Leverling</li>

<li data-icon="toprated" style="background-color: #3589e7; color: #fff;">3. Carine Callahan</li>

<li data-icon="toprated">4. Margaret Johnson</li>

<li data-icon="toprated">5. Steve Collins</li>

<li data-icon="toprated">6. Maria Steward</li>

</ul>

</li>

</ul>

</div>

<div data-role="view" id="tabstrip-settings" data-title="Settings" data-layout="mobile-tabstrip">

<ul data-role="listview" data-style="inset" data-type="group">

<li>Carine Callahan

<ul>

<li>Notify when online

<input type="checkbox" data-role="switch" checked></li>

<li>Administrator

<input type="checkbox" data-role="switch"></li>

<li>Access to stats

<input type="checkbox" data-role="switch" checked></li>

</ul>

</li>

</ul>

</div>

<div data-role="layout" data-id="mobile-tabstrip">

<header data-role="header">

<div data-role="navbar">

<a class="nav-button" data-align="left" data-role="backbutton">Back</a>

<span data-role="view-title" >Main Menu</span>

<a data-align="right" data-role="button" class="nav-button" href="index.html">Index</a>

</div>

</header>

<p>TabStrip</p>

<div data-role="footer">

<div data-role="tabstrip">

<a href="#tabstrip-profile" data-icon="contacts">Profile

</a><a href="#tabstrip-sales" data-icon="history">Sales

</a><a href="#tabstrip-rating" data-icon="favorites">Rating

</a><a href="#tabstrip-settings" data-icon="settings">Settings</a>

</div>

<style scoped>

#tabstrip-profile h2 {

display: inline-block;

font-size: 1.1em;

margin: 1.5em 0 0 1em;

}

#tabstrip-profile h2 span {

display: block;

clear: both;

font-size: 2em;

margin: .2em 0 0 0;

}

#tabstrip-profile img {

width: 5em;

height: 5em;

float: left;

margin: 1em;

-webkit-box-shadow: 0 1px 3px #333;

box-shadow: 0 1px 3px #333;

-webkit-border-radius: 8px;

border-radius: 8px;

}

.sales-down,

.sales-hold,

.sales-up,

.value {

float: right;

}

.sales-up {

color: green;

}

.sales-down {

color: red;

}

.sales-hold {

color: blue;

}

.value {

color: #bbb;

}

</style>

<script type="text/javascript" src="cordova-2.5.0.js"></script>

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="js/kendo.mobile.min.js"></script>

<script type="text/javascript" src="js/kendoindex.js"></script>

<script>

app.initialize();

</script>

</body>

</html>

kendoindex.js file:

var app = {

// Application Constructor

initialize: function() {

this.bindEvents();

},

// Bind Event Listeners

//

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

//

// The scope of 'this' is the event. In order to call the 'receivedEvent'

// function, we must explicity call 'app.receivedEvent(...);'

onDeviceReady: function() {

app.receivedEvent('deviceready');

},

// Update DOM on a Received Event

receivedEvent: function(id) {

window.kendoMobileApplication = new kendo.mobile.Application(document.body);

}

};

function redirectTOLocalPage(p){

window.location.href = p;

}

Any "best practice" in this issue will be much appreciated
Thanks !

Moti

3 Answers, 1 is accepted

Accepted

answered on 12 Mar 2013, 03:23 PM

Hello Moti,

Thank you for getting in touch with us.

Behaviour which you described is known as flash of unstyled content (FOUC). Since you are using PhoneGap, the best way to prevent it is to use a splash screen. If you have troubles with the implementation of splash screens I suggest you to check Icenium which provides this feature out of the box.

Alternatively you can hide the content initially (with visibility: hidden, but not with display: none) and then show it when everything loads/inits (like in a data-init event). In this forum post you will find more information on the subject as well as a code snippet demonstrating how this could be done.

In addition there is no need to initialize the mobile application on device ready event. KendoUI Mobile itself does not depend on device features such as camera or accelerometer so it is safe to initialize the application directly in the index file.

I hope this information will help.

Regards,
Alexander Valchev
the Telerik team

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!