{"id":73,"date":"2013-06-02T15:43:43","date_gmt":"2013-06-02T15:43:43","guid":{"rendered":"http:\/\/thomasgr.im\/shares\/?p=73"},"modified":"2013-08-29T14:16:00","modified_gmt":"2013-08-29T14:16:00","slug":"making-app-with-phonegap-jqm-part-2-loading-javascript-properly","status":"publish","type":"post","link":"https:\/\/thomasgr.im\/shares\/2013\/making-app-with-phonegap-jqm-part-2-loading-javascript-properly\/","title":{"rendered":"Making An App With PhoneGap & jQm Part II: Loading JavaScript Properly"},"content":{"rendered":"

If you missed Part I: A Simple HTML5 Skeleton<\/a>, you may want to go there and grab the code we wrote so far so that you can follow more easily what we’ll do in this part.<\/p>\n

One of the challenges in developing apps using PhoneGap and jQuery.Mobile is to make sure that the libraries are properly loaded before any critical code is executed. Another challenge is to make the difference between code which is due to execute only once, code which will execute on every activity, etc. In this part we’ll explore those differences and I’ll present to you a way of making sure that your functions execute at the right time.<\/p>\n

Namespacing The Application’s JavaScript<\/h2>\n

Namespacing your functions into an object is a great way of avoiding potential conflicts with existing functions; it also serves as an additional separation of your JS code from your HTML, it can make it easier to debug errors by keeping related entities close to each other. It may also make the use of a test framework like QUnit<\/a> easier to implement.<\/p>\n

Here is the base skeleton we’ll use for our app:<\/p>\n

var App = {\r\n\t"app_loaded": false,\r\n\t"testing_on_desktop": true,\r\n\r\n\t"init": function () {\r\n\t},\r\n\r\n\t"utilities": {\r\n\t},\r\n};<\/pre>\n
A quick note before we go deeper: you can make use of the object notation in JavaScript to nest multiple namespaces, like I did with “utilities”. This is a pretty cool feature to make your code a bit more organized than putting everything at the same level.<\/p>\n
Setting Up jQuery.Mobile In <head><\/h2>\n
As we’ve seen in Part 1<\/a>, jQuery.Mobile is a bit special in the sense that it modifies the DOM<\/abbr> upon loading. For this reason, any configuration code we’d like to see executed must be set before<\/em> the library is loaded, using the “mobileinit<\/em>” event which marks the beginning of jQuery.Mobile’s execution.<\/p>\n
As an example of what you can configure, as my app needs to “phone home” I had to activate the cors option in both jQuery and jQuery.Mobile. The full list of configuration variables is available here<\/a>. Here’s the result in <head>:<\/p>\n
\t<script charset="utf-8" src="js\/app.js"><\/script>\r\n\t<script>\r\n\t\tjQuery(document).bind("mobileinit", function () {\r\n\t\t\tconsole.log("configuring jqm...");\r\n\r\n\t\t\t\/\/ required for "phoning home" (load external assets, etc.)\r\n\t\t\tjQuery.support.cors = true;\r\n\t\t\tjQuery.mobile.allowCrossDomainPages = true;\r\n\t\t\t\r\n\t\t\tjQuery.mobile.phonegapNavigationEnabled = true;\r\n\t\t\tjQuery.mobile.defaultDialogTransition = "pop";\r\n\t\t\tjQuery.mobile.defaultPageTransition = "none";\r\n\t\t\t\r\n\t\t\tjQuery.mobile.loader.prototype.options.text = "loading";\r\n\t\t\tjQuery.mobile.loader.prototype.options.textVisible = true;\r\n\t\t\tjQuery.mobile.loader.prototype.options.theme = "a";\r\n\t\t});\r\n\t\tApp.init();\r\n\t<\/script>\r\n\t<script charset="utf-8" src="js\/jquery.mobile-1.3.1.min.js"><\/script><\/pre>\n
I advise you to systematically<\/strong> add console.log(\"[funcName]\")<\/kbd> at the beginning of every function as it makes debugging much much easier, especially when callbacks are involved because they can be rather messy in the way\/order they fire. Oh, notice the App.init()<\/kbd> call? Let’s see what we can put in there.<\/p>\n
<\/p>\n
Setting Up Our App In App.init<\/h2>\n
Now that we’ve set up jQuery.Mobile, let’s list the different functions\/actions which need to be performed and when they are to be executed:<\/p>\n
\n
When the application launches<\/dt>\n
\n