JMVC + JQM improved dispatch
In my previous example, I used an eval to load a page controller from the jQuery.fn name space. Here is a much better version of that code which has the added benefit of allowing access to the instance of my controller:
1 2 3 4 5 6 7 8 | If ( typeof MyApp.Pages[pageName] === 'function') { // don't really need the element passed here per this example's controller, will check if needed. pageInstance = new MyApp.Pages[pageName]($('body')); pageInstance.view.done( function ( htmlOutput ) { $('body').append(htmlOutput); $('#' + pageName).page(); $.mobile.changePage( $('#' + pageName) ); } |
On the controller side, the init method becomes much simpler than I had originally written:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | /** * @class MyApp.Pages.Frontpage */ $.Controller('MyApp.Pages.Frontpage', /** @Static */ { defaults : { itemsPerPage : 20, currentPage : 1 }, pluginName: 'frontpage' }, /** @Prototype */ { /** * Downloads and renders a full page of blog posts */ init : function() { this.view = $.View("my_app/pages/views/frontpage.ejs", { items: MyApp.Models.BlogPost.findAll({ start : (this.options.currentPage-1) * this.options.itemsPerPage, count : this.options.itemsPerPage }) }); } } ); // End of controller |
Javascript MVC + PhoneGap + jQm Build with Ant
In an effort to streamline the build of mobile applications, I made an ant build file to automate some of the tasks you would normally have to do to package your JMVC webapp and deploy it into an android project.
Here is the interesting parts of my build.xml file:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <target name="build" description="Builds the app for production" depends=""> <exec executable="./js" dir="${src}/.." vmlauncher="no"> <arg line="${src}/scripts/build.js" /> </exec> <copy todir="${build}/steal"> <fileset dir="${src}/../steal"/> </copy> <copy todir="${build}/${appName}/images"> <fileset dir="${src}/images"/> </copy> <copy file="${src}/${appName}.html" tofile="${build}/${appName}/index.html"/> <replace file="${build}/${appName}/index.html" token="steal/steal.js" value="steal/steal.production.js" /> <move file="${src}/production.css" tofile="${build}/${appName}/production.css"/> <move file="${src}/production.js" tofile="${build}/${appName}/production.js"/> </target> |
PhoneGap + JavascriptMVC + jQuery Mobile
I started a new mobile app project and decided to go with HTML5 wrapped with PhoneGap. The reasons are many and this post isn’t about why, but how.
Before you start, here are the libraries/frameworks I am using:
jQuery Mobile – a “Touch-Optimized Web Framework for Smartphones & Tablets”
Javascript MVC – a Javascript MVC Framework (and more)
PhoneGap – “HTML5 app platform”/embedded cross platform browser