title: phonegap + jquery mobile, good practices
body: <p>until now I was not using this index.js that Phonegap recommends :</p>
  
  <pre><code>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);
  }
  };
  </code></pre>
  
  <p>Where should I put my own js functions and events (all my js file), into this, out of this, in another file ?</p>
  
  <p>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 ?</p>
  
  <p>Here's my html :</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8" /&gt;
      &lt;meta name="viewport" content="height=device-height,width=device-width,initial-scale=1.0,maximum-scale=1.0"&gt;
      &lt;link rel="stylesheet" href="css/jquery.mobile-1.3.2.css" type="text/css" media="all" /&gt;
      &lt;link rel="stylesheet" href="css/style.css" type="text/css" media="all" /&gt;
      &lt;script src="js/jquery-1.9.1.js"&gt;&lt;/script&gt;
      &lt;script src="js/index.js"&gt;&lt;/script&gt;
       &lt;script type="text/javascript" src="js/index.js"&gt;&lt;/script&gt;
       &lt;script type="text/javascript"&gt;
              app.initialize();
        &lt;/script&gt;
  
      &lt;script src="js/jquery.mobile.config.js"&gt;&lt;/script&gt;
      &lt;script src="js/jquery.mobile-1.3.2.js"&gt;&lt;/script&gt;
      &lt;script src="js/jquery-geturlvar.js"&gt;&lt;/script&gt;
      &lt;script src="js/boardDims.js"&gt;&lt;/script&gt;
      &lt;script src="js/functions.js"&gt;&lt;/script&gt;
  &lt;!--        &lt;script src="cordova.js"&gt;&lt;/script&gt;--&gt;
  &lt;/head&gt;
  &lt;body&gt;
  </code></pre>
  
  <p>For now I am compiling using the remote service : $ phonegap remote run android</p>
  
  <p>It would be really useful to have a default template of an app using Phonegap + JQM, for beginners like me ;-)</p>