For my latest project I needed to bind a Knockout.js observableArray to a jQuery Mobile listview with a list divider at the top.

I initially tried adding the data-bind attribute to the ul element as shown in the code below (see jsFiddle for the complete code listing and working demo).

But this meant the list divider was repeated for every list item!

Comment based control flows to the rescue

By using a comment based control flow (introduced in knockout.js 2.0) the foreach binding can be moved below the list divider but still within the ul element.

See jsFiddle for the complete code listing and working demo.

Yesterday I presented about using jQuery Mobile to the Cambridge Mobile App Group in Cambridge.

I’ve uploaded the slides to Slideshare and the code to github.

You can view the jQuery Mobile web app built during talk by clicking here or by scanning the QR code below.

In this post I’ll show you how to create a mobile web app using jQuery Mobile and ASP.NET MVC 4.

I’ve used AppHarbor to host the app so you can see it action by clicking here.

The source code for the demo in this post can be found on github.

The first step in creating a mobile ASP.NET MVC mobile web app is to either choose select the ‘Mobile Application’ project template or an empty project.

As personal preference I prefer the empty solution as it won’t be cluttered by controllers, views and scripts you don’t need.

In the layout file for the app (used as the template for other views) we add the CSS and JavaScript resources required.

Here we’re using the new ASP.NET MVC 4 bundling and minification functionality in combination with content delivery networks (CDN’s) to increase the performance of the application.

You can read more about bundling and minification in the post ‘ASP.NET MVC Mobile Performance Tip – Bundle and Minify‘.

jQuery Mobile data-* attributes

If you’ve not used jQuery Mobile before you may be wondering what the data-* attributes are for.

jQuery Mobile uses the attributes to apply styles and functionality to elements on the page.

As the same header will be used in all of the pages in this mobile web app we can define it in the layout file.

The call to RenderBody() is wrapped in a data-role= “content” attribute which jQuery Mobile uses to define the content of a page.

See the jQuery docs for more information about page structure.

Now we’ve created the layout template the next thing to do is create the ASP.NET MVC controller for the mobile web app.

The Index action for the RecipeController will return a view model containing the top 3 baking recipes.

To keep things simple the recipes are coming back from a static list and not from a database.

In the view for the Index action the user will see text about the app, a link to a page to find recipes and a list of the top three recipes.

The markup for the view is shown below.

Note how the RenderPartial method to output the list items.

Partial views are a great way of separating the responsibly of a view and help keep ASP.NET MVC mobile web apps in a maintainable structure.

Again if you’re new to jQuery Mobile the data-role=”listview” attribute in the ul tag is used to style lists, the data-role=”button” attribute makes a standard hyperlink look like a button for which we add an icon to by using the data-icon attribute.

The recipe detail view uses partial views to display information for the recipe for which CSS is used to add the background images and style the lists.

It also contains a form so users can submit reviews.

I’ve commented out the line in the code that would actually persist the review (because I don’t want to manage spam) so any reviews you add will only be shown locally on the page.

The JavaScript below shows the AJAX call used to submit a new review.

Pay attention to the line which refreshes the list view called in the complete event. Without this the list of reviews would not get updated. See the post ‘Don’t forget to call refresh when adding items to your jQuery Mobile list‘.

As we’ll see in this series about creating mobile web apps there are a number of ways of how we could have structured an application like this.

This example uses multiple pages, so whenever a user clicks on a link to see the detail for a recipe, a request is made to the server which is handled by a controller action with its’ own view.

In later posts in the series we’ll see how this differs to ASP.NET MVC single page applications.

A few months ago I wrote a blog post about how you could improve the performance of your ASP.NET MVC apps using a third party library to compress and combine your CSS and JavaScript resources.

The latest release of ASP.NET (v4.5) comes with its’ own bundling and minification tools.

And the great news is they’re very easy to use.

For example if your layout file contained three CSS and four JavaScript resources

You can bundle and minify CSS and Javascript resources for your ASP.NET mobile apps by using standard HTML like this

or like this using HTML helpers

Note: Scott Gu reckons the helper will probably be called Html.Bundle in the future.

Using HTML helpers gives you the advantage of adding a unqiue hash based upon the contents of the directory structure on the server for the script resource e.g.

ASP.NET will then cache the output for a year which means it will be served from the cache.

Should any files in a resource directory change the generated hash will also change and user will get an updated version of the file.

So how does ASP.NET MVC 4.5 bundling and minification perform?

This is Chrome resource graph for loading the page without any bundling or minification

and here’s the resource graph for a ASP.NET MVC app using the new bundling or minification tools.

The images say it all!

In this post we’ll see how to create a jQuery Mobile plugin.

This plugin will enhance a users’ experience of your jQuery Mobile app by adding a ‘Back to top’ button to a page.

This will save them from having to continuously scroll to get back to the top of a page.

See the post ‘jQuery Mobile UX: Add a back to top button‘ for more details abouts how it works.

The first step in creating a jQuery Mobile plugin… use a boilerplate!

Thanks to Addy Osmani creating a jQuery Mobile plugin is easy becuase he’s put together boilerplates for jQuery plugins.

You can find out more by reading his Smashing Magazine article ‘Essential jQuery Plugin Patterns‘.

The boilerplate code for the plugin can be found on github.

Getting started with the jQuery Mobile Plugin Boilerplate

For a jQuery Mobile plugin we will use the ‘jquery.widget-factory.mobile-plugin.boilerplate.js’ boilerplate.

All that’s left is to define the namespace, add the options and write the functions for the plug in.

jQuery Mobile plugin namespaces

As this is a mobile plugin we’ll use mobile as the first parameter and the name of the plug in as the second parameter.

jQuery Mobile plugin options

Options allow users to configure the plugin.

For this plugin the user is able to specify:

The id. The default is ‘backToTop’.

The text. The default is ‘Back to top’.

The theme. The default is ‘a’. However the user can provide the letter if they want to use a particular theme.

The position. The default is the top left corner. The user can specify another location using the values ‘topright’,'bottomleft’ and ‘bottomright.

The _create function

This function will run the first time the widget is called.

For the back to top plugin the _create function is used to add the button to the page, position it and bind events.

Deciding if a plugin functions should be private or public?

Any functions you want to be able to be called externally should be public and called like this

or like this passing an argument

Private functions start with _underscores.

Using the plugin

This plugin adds a button to the document body so it doesn’t need to listen to the create event for an indivual page.

This means it doesn’t matter if there are multiple jQuery Mobile pages within the same document the _create function will only be called once, and work on all of the pages.

The code for the jQuery Mobile plugin

Rather than having to keep updating this post with the latest version of the plugin, the code is stored on github.

Mel Findlater gave an excellent talk today for the Cambridge Usability Group about how tablets in particular can change lives.

She started by giving an insight into how tablets have transformed the lives of people with disabilities by helping them communicate, interact and learn.

By using a mainstream rather than a specialist device they felt more confident allowing them to break down barriers and build relationships which otherwise would have been difficult to do.

Mel also talked about the role tablets played in ‘keeping dementia at bay’ and played a video of an elderly gentleman talking about how an iPad gave him opportunities to do challenging tasks and activities.

It’s very rare to attend a presentation were so many of the audience wanted to share their experiences and ideas, which goes some way to tell you how good a job Mel did.

Mel mentioned she’s trying to put together an event for developing apps for older and disabled users so if you’re interested let her know.

There’s also a Official RNIB Accessibility Hackathon taking place on Saturday 11th Febuary 2012 in London, so if you’re interested developing apps with accessibility in mind make sure you sign up!

In this post we’ll see how you can improve the user experience (UX) of your jQuery Mobile apps by adding a back to top button.

You can check out a demo of the back to top button here.

Just remember to resize your browser window so you have to scroll!

How does it improve the UX of your jQuery Mobile app?

No doubt you’ve been to a page on your mobile device where the only way to get back to the top of the page is to continuously keep swiping?

Using the jQuery Mobile scrollstart and scrollstop events we can show a back to top button whenever the user has scrolled to a position which is greater of their browsers viewport as shown in the mock up below.

How to create the back to top button

The first step is to add a button element to the body and bind a click event to it.

The click event is handled by a function which scrolls to the top of the document body element.

While we could use the jQuery Mobile silentScroll function to scroll to the top of the page, the animate function gives a nice smooth scroll.

As we are dynamically adding an element to a jQuery Mobile page we need to call the trigger function.

Next we bind the scrollstart event to a function to hide the button.

The scrollstop event is bound to a function that checks if the Y offset is greater than the height of browsers’ viewport.

Fading the button is much smoother than just showing it.

The final step is to hook up the code for the back to top button to the page.

For more about jQuery Mobile events check out the docs.

Styling the jQuery Mobile button

As jQuery Mobile has excellent theming support you can use a data theme HTML5 attribute to style the button.

The location of the button can be changed using CSS styles.

For example to show the button in the top left corner use the CSS

to show the button in the botton right corner set the CSS as below:

or a combination of both.

The complete code listing is shown below.

In the next post we’ll be looking at how to creating a back to top jQuery Mobile plugin.

A quick reminder when developing with jQuery Mobile 1.0 you should use pageinit() and not $(document).ready() to execute events when the DOM is loaded.

This is specified in the jQuery Mobile docs.

So instead of

you should use something like this

In this post we’ll see how easy it is to bind to the jQuery Mobile scrollstart and scrollstop events.

The JavsScript below shows how to bind to the scrollstart and scrollstop events.

When the user starts scrolling the background turns green and when the user stops scrolling the background turns red.

Whenever a scroll event is triggered an item is added to the list.

You see can see a demo of the scrollstart and scrollstop events in action here.

Whenever you use the parseInt function make sure you always specify the radial, even though it’s optional… otherwise you could end up with some unexpected results.

For example the JavaScript code below parses two numbers without specifying a radial and adds them together

When the user enters ’043′ as the first number and ’1′ and the second number

the calculated result is 36 and NOT 44. You can test this yourself using this jsFiddle.

This happens because the input began with “0” and so the radix of eight (octal) was used.

The solution is to specify a radix, which in our case is ten (decimal).

For this reason the best practice is to always specify a radix when using parseInt.