CODEWITHSUNDEEP
jquery-mobilecordova
Louis
Louis

Reputation: 2608

phonegap + jquery mobile, good practices

until now I was not using this index.js that Phonegap recommends :

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) {
    var parentElement = document.getElementById(id);
    var listeningElement = parentElement.querySelector('.listening');
    var receivedElement = parentElement.querySelector('.received');

    listeningElement.setAttribute('style', 'display:none;');
    receivedElement.setAttribute('style', 'display:block;');

    console.log('Received Event: ' + id);
}
};

Where should I put my own js functions and events (all my js file), into this, out of this, in another file ?

Where should I call those js files and where should I call the app.initialize, in relation to the position of the calls to the js files ?

Here's my html :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="height=device-height,width=device-width,initial-scale=1.0,maximum-scale=1.0">
    <link rel="stylesheet" href="css/jquery.mobile-1.3.2.css" type="text/css" media="all" />
    <link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
    <script src="js/jquery-1.9.1.js"></script>
    <script src="js/index.js"></script>
     <script type="text/javascript" src="js/index.js"></script>
     <script type="text/javascript">
            app.initialize();
      </script>

    <script src="js/jquery.mobile.config.js"></script>
    <script src="js/jquery.mobile-1.3.2.js"></script>
    <script src="js/jquery-geturlvar.js"></script>
    <script src="js/boardDims.js"></script>
    <script src="js/functions.js"></script>
<!--        <script src="cordova.js"></script>-->
</head>
<body>

For now I am compiling using the remote service : $ phonegap remote run android

It would be really useful to have a default template of an app using Phonegap + JQM, for beginners like me ;-)

Upvotes: 3

Views: 3089

Answers (1)

AJJ
AJJ

Reputation: 7703

That index.js is included as an example, you don't really need to use it. It is basically showing you how to work with ondeviceready. You need to use ondeviceready when you work with plugins, since most of their calls will only be available after ondeviceready has been fired. So you hook up your calls to plugins on a listener to ondeviceready. I am doing it like this for instance:

        <script type="text/javascript">
            function onLoad() {
                document.addEventListener("deviceready", MYAPP.events.onDeviceReady, false);
           }
        </script>
    </head>
    <body onload="onLoad();">

And inside MYAPP.events.onDeviceReady I do the calls to geolocation, camera, or whatever plugin I'm working with.

BTW, two important things to notice in you example: You need to include cordova.js before you can access ondeviceready or work with any plugin, plus you are including index.js twice. Perhaps you duplicated the <script src="js/index.js"></script> to edit it and include js/cordova.js and forgot to change the name/path?

Apart from that, what I do is separating the app's JS and the external libs in two separate directories for better organisation, like "lib" and "js", so you would include "js/functions.js" and "lib/jquery.js".

I include both the libs and custom JS files at the bottom of the body tag for a slight better performance: Where should I put <script> tags in HTML markup?

And I name the files under "js" (custom JS files for the app) according to their purpose/content, like: events.js, models.js, settings.js, util.js, ... You can see in the snippet above that I have "namespaced" my custom JS objects under the capitalised name of the app, so everything in util.js will be called like: MYAPP.util.formatDate().

Upvotes: 2

Related Questions