jQuery Mobile: Mobile App Development

This entry is part 1 of 73 in the series jQuery Mobile

If you are new to app development, you might be surprised to learn that it is possible to develop touch based app using HTML5.

Apps developed using HTML5 are the so called non-native app as it actually depends on webview to display the web pages.

Webview is part of the Android or iOS class activity. All that webview does is actually to display a web page.

For an app to access the native tools such as camera or GPS built inside a phone or tablet, most people would rely on phonegap, a framework that allow developers to wrap the app for running in Android or iPhone.

So in a way, you could say Javascript + HTML5 + phonegap = Mobile Apps.

jQuery Mobile: Introduction

This entry is part 2 of 73 in the series jQuery Mobile

jQuery Mobile is a touch-optimized Web Framework.

It is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices.

If you have an Android phone or tablet and have like to play around with a jQuery Mobile App, you could download a Chinese Language learning app and play around with it to get a feel of what jQuery Mobile could do.

With jQuery mobile, designing the user interface becomes really easy.

jQuery Mobile: An Example UI

This entry is part 3 of 73 in the series jQuery Mobile

With jQuery Mobile, you can quickly build the user interface of an App.

We look at this simple UI built using jQuery Mobile.

Sample UI
<!DOCTYPE html>
<html>
<head>
<link href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
  <title>Upwhere</title>
</head>
<body>
  <div data-role="page">
  <div data-role="header">
    <h1>Welcome To My Mobile App</h1>
    <div data-role="navbar">
      <ul>
        <li><a href="#" data-icon="home">Home</a></li>
        <li><a href="#" data-icon="arrow-r">Latest Posts</a></li>
        <li><a href="#" data-icon="search">Search</a></li>
      </ul>
    </div>
  </div>

  <div data-role="content">
    <p>You can put your content here...</p>
  </div>

  <div data-role="footer">
    <h1>My Footer</h1>
  </div>
</div> 

</body>
</html>
Try The Code

For this series of tutorials, we will put our code into jsbin instead of jsfiddle.

The output, as shown in the jsbin is:

jq1

Page Sections

There are 4 sections in the page:

  1. The header,
  2. the navigation bar,
  3. the content and
  4. the footer.

The main code of the 4 sections is wrapped inside the body tag as shown below.

jQM Body
<body>
<div data-role="page">
  <div data-role="header">
    <h1>Welcome To My Mobile App</h1>
    <div data-role="navbar">
      <ul>
        <li><a href="#" data-icon="home">Home</a></li>
        <li><a href="#" data-icon="arrow-r">Latest Posts</a></li>
        <li><a href="#" data-icon="search">Search</a></li>
      </ul>
    </div>
  </div>
 
  <div data-role="content">
    <p>You can put your content here...</p>
  </div>
 
  <div data-role="footer">
    <h1>My Footer</h1>
  </div>
</div> 
</body>

Each section of the page is defined by a data-role attribute.

Looking at the code above, you could see that it is relatively easy to design the UI using jQM.

jQuery Mobile: Adding jQuery Mobile to the App

This entry is part 4 of 73 in the series jQuery Mobile

In the previous example, we have the 3 lines below:

<link href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>

jQuery Mobile is a framework based on jQuery and so we need to add jquery script in the page.

I am using jsbin.com to create the template page and jsbin is currently using version 1.4.0.

To use jQuery mobile, we need both the jquery.mobile-1.4.0.min.js and jquery.mobile-1.4.0.min.css files.

You can also save the 3 files into your local drive to run the App.  Put them into the same directory as the main HTML file.

<link href="jquery.mobile-1.4.0.min.css" rel="stylesheet"/>
<script src="jquery-1.10.2.min.js"></script>
<script src="jquery.mobile-1.4.0.min.js"></script>

jQuery Mobile: First simple button example

This entry is part 5 of 73 in the series jQuery Mobile

We will start off with the first example by creating a button using jQuery Mobile.

<div data-role='page'>
    <div data-role='header'><h1>My Mobile App</h1></div>
    <div data-role='content'>
        <p>Look at the button!</p>
        <a href='#' data-role='button'>I am a button</a>
    </div>
</div>
Try The Code

To create a button, we use the attribute data-role=”button” as in the following line:

<a href='#' data-role='button'>I am a button</a>

The href link will tell the app where to go when the button is clicked.

Since we have href=’#’, which is itself, the page will not go anywhere when it is clicked.

jqm2

Code Block
<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css' rel='stylesheet' type='text/css'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js'></script>
    <meta charset='utf-8'>
    <title>JS Bin</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header'><h1>My Mobile App</h1></div>
    <div data-role='content'>
        <p>Look at the button!</p>
        <a href='#' data-role='button'>I am a button</a>
    </div>
</div>
</body>
</html>