Small Town Coder

sharing code samples for desktop, web, and mobile

BBUI ActionBar using Backbone and jQuery

Sample code demonstrating BBUI ActionBar using Backbone.js and jQuery. [More]

Choosing a Mobile App Development Strategy

Choosing a mobile application development strategy may not be an easy task. The strategy will depend on different factors including leveraging existing knowledge, strengths, tools, and what is the desired target platform. To add to the mix, there continues to be an ongoing debate as to whether or not to go native or build for the web. What is a native device application? A native device application is one that is built using development tools and programming languages that are specific to the target platform. Native applications developed for Apple iOS will use different tools and programming language than one developed for Android, BlackBerry, or Windows Phone. What this means is that a native application developed for iOS, for example, cannot be installed on any other platform. The application will need to be developed from scratch for each target platform using the development tools and programming language for that platform. This forces developers to maintain a separate code base for each target platform. Native applications are also packaged and typically deployed via a third party distribution service such as the Apple App Store, Google Play, BlackBerry App World, and Windows Phone Marketplace. What is a mobile web application? A mobile web application runs within a web browser and accessed via a URL. They are typically developed using HTML5, JavaScript, and CSS. Since the target platform is a web browser, the web application need only be developed once and can be accessed by any browser (mobile or desktop) that supports the latest web technologies. This flexibility and the ability to write once, run anywhere, comes at a price. Mobile web applications do not typically have access to any of the native device capabilities that native applications enjoy including hardware graphics, accelerometers, file system, camera, phone and messaging. Mobile web applications also require a persistent connection to the internet in order from them to be accessed. What is a native mobile web application? A native mobile web application is built using mobile web application technologies mentioned above but are packaged and deployed as native applications. These applications still run within a browser natively on the device but also have access to native device capabilities provided through a platform specific JavaScript API. This choice offers developers the opportunity to craft applications using advanced web technologies that can be deployed to many different platforms. Developers building native mobile web applications can share the user interface portion of their app with each target platform and need only maintain the portions of the app that are device specific. I am a strong proponent of native mobile web applications. There are some excellent mobile web application projects currently in active development that are obscuring the difference between native applications and web applications. By using pure HTML5, CSS and Javascript, these projects support touch friendly user interfaces and familiar native gestures including tap and swipe. The jQuery Mobile Project, spawned from the desire and need to develop a consistent user interface for the mobile web, continue to evolve their framework to work seamlessly across all browsers on several devices with custom theme support and several UI controls. Sencha Touch is another popular framework with a powerful JavaScript API, a vast UI control library, custom theme support, and a native packager for iOS and Android.

jQuery Mobile Site Navigation Page

The JQuery Mobile framework is great for creating native looking mobile sites using HTML5 and javascript. In this example, I will demonstrate how to create a site navigation page triggered by a navigation button in the main page footer. If you are not familiar with jQuery Mobile, I suggest you read up on the jQuery Mobile Documentation. The example uses two seperate html files each marked up as JQuery Mobile pages. In the main page, we add a navigation bar with one button in the footer section. When the button is clicked (tapped), the menu page will load and slide up from the bottom. Here is the contents of index.htm <!DOCTYPE html> <html> <head> <title>jQuery Mobile Slide Up Menu Example</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script> <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js" type="text/javascript"></script> </head> <body> <!-- This is our main page --> <div id="page1" data-role="page"> <div data-role="header" data-position="fixed"> <h1>Site Navigation</h1> </div> <div data-role="content"> <h1>Site Navigation Example</h1> <p>Click on the link button in the footer to display the site navigation menu.</p> </div> <div data-role="footer" data-position="fixed"> <div data-role="navbar" data-iconpos="top"> <ul> <li><a href="menu.htm" data-icon="arrow-u" data-transition="slideup" data-mini="true"></a></li> </ul> </div> </div> </div> <div id="page2" data-role="page"> <div data-role="header" data-position="fixed"> <h1>Site Navigation - Page 2</h1> </div> <div data-role="content"> <h1>Site Navigation Example - Page 2</h1> <p>Click on the link button in the footer to display the site navigation menu.</p> </div> <div data-role="footer" data-position="fixed"> <div data-role="navbar" data-iconpos="top"> <ul> <li><a href="menu.htm" data-icon="arrow-u" data-transition="slideup" data-mini="true"></a></li> </ul> </div> </div> </div> <div id="page3" data-role="page"> <div data-role="header" data-position="fixed"> <h1>Site Navigation - Page 3</h1> </div> <div data-role="content"> <h1>Site Navigation Example - Page 3</h1> <p>Click on the link button in the footer to display the site navigation menu.</p> </div> <div data-role="footer" data-position="fixed"> <div data-role="navbar" data-iconpos="top"> <ul> <li><a href="menu.htm" data-icon="arrow-u" data-transition="slideup" data-mini="true"></a></li> </ul> </div> </div> </div> <div id="page4" data-role="page"> <div data-role="header" data-position="fixed"> <h1>Site Navigation - Page 4</h1> </div> <div data-role="content"> <h1>Site Navigation Example - Page 4</h1> <p>Click on the link button in the footer to display the site navigation menu.</p> </div> <div data-role="footer" data-position="fixed"> <div data-role="navbar" data-iconpos="top"> <ul> <li><a href="menu.htm" data-icon="arrow-u" data-transition="slideup" data-mini="true"></a></li> </ul> </div> </div> </div> </body> </html> Our menu page contains a header section and a content section. The footer section has been removed. In the header section, we include a navigation bar similar to the navigation bar in the footer of index.htm. The big difference here is that we are reversing the attributes.  The icon position is now on the bottom of the button, the icon is now a down arrow, and when clicked (tapped), we will navigate back to the previous page using a slide down transition. Here is the contents of menu.htm <!DOCTYPE html> <html> <head> <title>jQuery Mobile Slide Up Menu Example</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script> <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js" type="text/javascript"></script> </head> <body> <!-- This is our menu page that will slide up from the bottom --> <div id="menu" data-role="page" > <div data-role="header" data-position="fixed"> <h1>Site Menu</h1> <div data-role="navbar" data-iconpos="bottom"> <ul> <li><a href="#" data-icon="arrow-d" data-rel="back" data-transition="slidedown" data-mini="true"></a></li> </ul> </div> </div> <div data-role="content"> <ul data-role="listview"> <li><a href="index.htm#page1" data-transition="slidedown">Page 1</a></li> <li><a href="index.htm#page2" data-transition="slidedown">Page 2</a></li> <li><a href="index.htm#page3" data-transition="slidedown">Page 3</a></li> <li><a href="index.htm#page4" data-transition="slidedown">Page 4</a></li> </ul> </div> </div> </body> </html> In the menu page, I have included a list view to display the menu items. The first item is a link back to index.htm. Notice how I've added the data-transition="slidedown" attribute. When this item is clicked (tapped), the index.htm will load and slide down from the top giving the appearance that our menu page is collapsing down to the bottom. Live Example I'm not sure why, but the example doesn't seem to work with the Android stock browser.