The last part that we need to check in Mega App is index.html; the following code snippet shows the most important part of the index.html page:
<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, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/app.css" />
<link rel="stylesheet" href="jqueryMobile/jquery.mobile-1.4.0.min.css">
<script src="jqueryMobile/jquery-1.10.2.min.js"></script>
<script>
var deviceReadyDeferred = $.Deferred();
var jqmReadyDeferred = $.Deferred();
$(document).ready(function() {
document.addEventListener("deviceready", function() {
deviceReadyDeferred.resolve();
}, false);
});
$(document).on("mobileinit", function () {
jqmReadyDeferred.resolve();
});
$.when(deviceReadyDeferred, jqmReadyDeferred).then(function () {
//Now everything loads fine, you can safely go to the app home ...
$.mobile.changePage("#memoList");
});
</script>
<script src="jqueryMobile/jquery.mobile-1.4.0.min.js"></script>
<script src="jqueryMobile/jqm.page.params.js"></script>
<title>Mega</title>
</head>
<body>
<div id="loading" data-role="page">
<div class="center-screen">Please wait ...</div>
</div>
<!-- App pages omitted here for simplicity ... --->
<script type="text/javascript" src="cordova.js"></script>
<!-- Application JS files -->
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/api/FileManager.js"></script>
<script type="text/javascript" src="js/api/MemoManager.js"></script>
<script type="text/javascript" src="js/model/MemoItem.js"></script>
<script type="text/javascript" src="js/vc/memoList.js"></script>
<script type="text/javascript" src="js/vc/memoCapture.js"></script>
</body>
</html>As shown in the preceding code, index.html includes the following:
- App custom CSS file (
app.css) - jQuery Mobile library files
- A jQuery Mobile page params plugin file (
jqm.page.params.js) - A CommonJS (
common.js) file, app managers, and app view controllers' JS files
The preceding highlighted code makes sure that Apache Cordova and jQuery Mobile are loaded correctly (using the jQuery Deferred object) before proceeding to the app pages. If Apache Cordova and jQuery Mobile are loaded correctly, then the user will leave the "loading" page and be forwarded to the app's home page (the "memoList" page) to start using the app.
As you know from Chapter 5, Diving Deeper into the Cordova API, in order to boost the performance of jQuery Mobile 1.4 with Cordova, it is recommended that you disable the transition effects. The common.js file applies this tip in Mega App, as shown in the following code snippet:
$.mobile.defaultPageTransition = 'none'; $.mobile.defaultDialogTransition = 'none'; $.mobile.buttonMarkup.hoverDelay = 0;
Tip
In order to exit the application when the user presses the back button (which exists on Android and Windows Phone 8 devices) on the app's home page, common.js also implements this behavior. It uses the same technique used in the Finalizing the Cordova Exhibition app section in Chapter 5, Diving Deeper into the Cordova API.