Most Powerful Open Source ERP

Tutorial/Learning Track - jQuery Mobile

This document provides a learning track for experienced developers.
  • Last Update:2017-05-11
  • Version:002
  • Language:en

LEARNING TRACK Mobile Developer

This learning track is designed for programmers who want to develop applications with jQuery Mobile. It usually takes 3 days for fast developers, 10 days in average and up to 3 weeks for the very beginners. The learning track teaches:

  1. How to use JavaScript
  2. How to use jQuery
  3. How to use jQuery Mobile
  4. How to write quality code
  5. How to develop simple application with jQuery Mobile

Learning to use JavaScript

Both jQuery Mobile and jQuery are based on JavaScript, so in order to work with both frameworks you need to know how to use JavaScript. Read the following books: JavaScript - The Good Parts and JavaScript Patterns to make yourself familiar with JavaScript.

A good online source for JavaScript is Mozilla. Their Learning JavaScript section provides a lot of additional knowledge and is a good starting point for questions you might have.

How to use jQuery

jQuery is a library written on top of JavaScript that makes working with JavaScript easier and irons out a lot of cross-browser issues.

Please go to Learning jQuery and read through all of the chapters. After that, have a look at the jQuery API and make yourself familiar with all of the methods jQuery exposes.

When working with jQuery you will often have to integrate 3rd party plugins or libraries. Have a look at jQuery plugins, a public repository of available jQuery plugins. Select a few examples and see how they are written and can be integrated into an existing application.

Learn jQuery Mobile

jQuery Mobile is a library based on top of jQuery which focusses on responsive web design. Please go to the jQuery Mobile API and work through the sections in the left hand menu (Events, Methods, Miscellaneous, Properties, References, Widgets).

Pay special attention to the jQuery Mobile event system as well as the widget section.

All jQuery Mobile widgets are written using the jQueryUI widget factory - an abstraction framework for writing jQuery plugins. Make yourself familiar with the jQueryUI widget factory API, so you are able to write your own widgets or modify existing plugins.

Learn how to write quality code

In order to write reusable code, you should make yourself familiar with the following tools:

  • Nexedi JavaScript Coding Conventions
    The coding conventions being used at Nexedi when writing JavaScript
  • JSLINT
    A code quality tool for writing JavaScript. You should run this in every build process on the code you are writing
  • W3 HTML Code Validator
    You will have to write or generate HTML5 code along with your JavaScript. If you have no experience with HTML or the latest specification (HTML5) go to the HTML5 rocks page and make yourself familiar with all features available.
  • CSS Lint
    The code you are writing will often have to be styled using CSS or it's latest specification (CSS3). Use this tool to ensure good quality code. If you have no prior experience with CSS3, Mozilla provides a good overview with all relevant properties, browser exceptions and vendor prefixes. You should be familiar with all.

Develop a simple task manager application

Now that you are familiar with all of the technologies you should do develop a simple task manager application using jQuery Mobile and JIO. Follow these steps:

  • The application should store (hardcoded) tasks in a jIO localStorage
  • Tasks should include the following fields: id, title, description, status, start date, end date, project
  • The application should store (hardcoded) default status and project names in a jIO localStorage
  • On the initial page, all tasks should be displayed in a jQuery Mobile listview
  • The list items allow to quick-delete a task
  • Clicking a task opens the detail page where all task fields are displayed in a form
  • On the detail page, tasks can be edited, deleted and saved
  • Add a jQuery Mobile header and footer to every page
  • The footer should allow to switch between tasks, projects and settings
  • Projects are groups of tasks
  • Add a project page displaying projects as jQuery Mobile collapsibles inside a jQuery Mobile collapsible set
  • Each project collapsible should display it's tasks in a jQuery Mobile listview
  • The listview should have the same functionalities as on the starting page
  • Add a settings page, which lists the default status and projects.
  • Allow the user to add custom status and projects including editing and deleting
  • Default status and project names loaded on application initialization are read-only
  • In the header add a button to open a jQuery Mobile popup for sorting tasks
  • Provide functionalities to sort tasks according to one or multiple criteria (and ascending/descending) using jQuery Mobile checkboxradios and selectmenus
  • Add a compatible plugin for a datepicker to provide an easy to use entry (and default format) for dates
  • Add a compatible plugin for form field validation and validate all forms before submitting
  • Add a compatible plugin for translations. On the settings page, provide the option to switch between languages (without refreshing the application!)

The walkthrough of how to create the task manager can be found here.