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
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:
here is the full source code on this page:
Any "best practice" in this issue will be much appreciated
Thanks !
Moti
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);
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
>
</
div
>
</
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