Skip to main content

Mobile Apps using HTML interface with jQueryMobile

image

This is the main tutorial for developing a mobile web app using the HTML  interface with jQueryMobile. The series contains tutorial on how to use HTML and jQueryMobile to construct the app’s interface, PHP+MySQL to run the back-end, AJAX, using phoneGap/Cordova to generate Android APK, and lastly to upload to Google Play Store.

These are the link of completed tutorials related to Mobile Web Apps Development

  1. Mobile Apps using HTML interface with JQUERYMOBILE (this page)
  2. Complete code sample of Mobile Web Apps with FRONT-END and BACK-END
  3. Using AJAX to populate data from mobile web interface
  4. Generating APK using BUILD.PHONEGAP.com
  5. Generating Android Project using CORDOVA
  6. Publishing to Google Play Store
  7. Mobile Web Apps development TRAINING
  8. The sample app published in Google Play Store

jQueryMobile is a JavaScript + CSS framework born from jQuery. The best place to learn jQueryMobile is by accessing the official website at http://demos.jquerymobile.com/

As the name framework, there suppose to have library of codes ready to use. In the jQueryMobile case, you need to download both the jQuery framework, and the jQueryMobile framework in order for this tutorial to proceed as we intent.

image

 

STEP 1: Preparing the project folder with the jquery & jquerymobile library.

We’d like to recommend the following folder and sub-folders for your HTML app project. Prepare them first.

image

Open the jquerymobile zip files you just downloaded previously. Copy all the Cascading Style Sheet (*.css)files and the images to the css folder you created. You can do this by selecting the images folder and the css, clicking and dragging them to your css folder. *The images folder in the jquerymobile zip file contains the icons for your css interface.

image

imageThe css files copied to your css folder.

Then copy the javascript files (*.js) to your js folder.

image

Now open the jquery file (*.js) your downloaded early in the tutorial.

image

Then you got your js folder ready for jquerymobile implementation.

image

STEP 2: Developing the HTML interface

The mobile interface is mainly in the index.html. Use any of your HTML editor to ammend the index.html content. This is some example of the content. The first part is the jquery and jquerymobile API inclusion in the header. The template below also provide heading, content and footer divisions.

image

The sample code:

<!DOCTYPE html>
<html>
<head><title>Page title is here</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- include the jquerymobile and jquery API files here -->
<link href="css/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.11.2.min.js"></script><script src="js/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>
<!-- main page -->
<div data-role="page" id="home">
<!-- header -->
<div data-role="header" data-position="fixed">
<h1>Header content is here</h1>
</div>

<!-- content -->
<div role="main" class="ui-content">
<p>Main content is here</p>
</div><!-- end content -->

<!-- footer -->
<div data-role="footer" data-position="fixed">
<h2>Footer text is here</h2>
</div><!-- end footer -->
</div><!-- end of home -->
</body>
</html>


Note the viewport in one of the meta. By setting the viewport attributes to content="width=device-width, initial-scale=1", the width will be set to the pixel width of the device screen.


<meta name="viewport" content="width=device-width, initial-scale=1">


Output sample: preview in the browser.


image





STEP 3: Multi-page template structure


A single HTML document can contain multiple "pages" that are loaded together by stacking multiple divs with a data-role of "page". Each "page" block needs a unique id that will be used to link internally between "pages" (href="#foo"). When a link is clicked, the framework will look for an internal "page" with the id and transition it into view.


Here is an example of a three"page" site built with three jQuery Mobile divs navigated by linking to an id placed on each page wrapper. Note that the ids on the page wrappers are only needed to support the internal page linking, and are optional if each page is a separate HTML document.



  • page 1 is the main page with id=”home”
  • page 2 is the about page with id=”about”
  • page 3 is the directory page with id=”directory”

For this exercise to work, there’s an image named logo.jpg need to be prepared in the folder images. Your company logo or any low resolution image will do.


The complete source-code of the index.html file.


<!DOCTYPE html>
<html>
<head><title>Kerul.net Company Directory</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.11.2.min.js"></script><script src="js/jquery.mobile-1.4.5.min.js"></script>

</head>
<body>

<!-- ************************** main page -->
<div data-role="page" id="home">
<!-- header -->
<div data-role="header" data-position="fixed">
<h1>kerul.net</h1>
</div>

<!-- content -->
<div role="main" class="ui-content">
<p>This app provide info about the company.</p>
<!-- provide a logo.jpg image in the folder images -->
<img src="images/logo.jpg" width="200" height="200">
</br>
</div><!-- end content -->

<!-- footer -->
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#home" >Home</a></li>
<li><a href="#directory" >Dir</a></li>
<li><a href="#about" >About</a></li>
</ul>
</div><!-- end navbar -->
</div><!-- end footer -->
</div><!-- end of home>



<!-- ************************** about apps -->
<div data-role="page" id="about">
<!-- header -->
<div data-role="header" data-position="fixed">
<h1>kerul.net</h1>
</div>

<!-- content -->
<div role="main" class="ui-content">
<p>Developer - kerul.net</p>
<p>
This is the a sample app developed using HTML for Kerul.net. The blog has been discussing programming since 2005. The company started publishing Android apps in the year 2010, and its apps among others are Malay Proverb Dictionary (Peribahasa) and m-Mathurat. Currently, it is working on the Windows Phone version of the apps. There are also Hijra of the Prophet Muhammad app in the Windows Phone store.

PHP, C#, and Java are also the programming languages that the blog is familiar with.
</p>
<a href="http://kerul.net" class="ui-btn ui-icon-action ui-btn-icon-right ui-btn-corner-all" target="_blank"> go to kerul.net</a>
</br>
</div><!-- end content -->

<!-- footer -->
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#home" >Home</a></li>
<li><a href="#directory" >Dir</a></li>
<li><a href="#about" >About</a></li>
</ul>
</div><!-- end navbar -->
</div><!-- end footer -->
</div><!-- end of home>



<!-- ************************** direktori page -->
<div data-role="page" id="directory">
<!-- header -->
<div data-role="header" data-position="fixed">
<h1>kerul.net</h1>
</div>

<!-- content -->
<div role="main" class="ui-content">
<p>Company staff directory</p>
<ul data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search staffs..." data-inset="true">
<li><a href="#s1" data-rel="popup">Khirulnizam</a></li>
<li><a href="#s2" data-rel="popup">Ashraf Chunawi</a></li>
<li><a href="#s3" data-rel="popup">Faiz Othman</a></li>
<li><a href="#s4" data-rel="popup">Athirah Ghani</a></li>
<li><a href="#s5" data-rel="popup">Najwa Humaira</a></li>
<li><a href="#s6" data-rel="popup">Osman Ahmad</a></li>
</ul>
</div><!-- end content -->

<!-- popup staff1 -->
<div id="s1" data-role="popup">
<ul data-role="listview" data-inset="true">
<li><a href="tel:+6012-9034614"
class="ui-icon-phone ui-btn
ui-btn-icon-left ui-btn-corner-all ui-btn-inline"
>
Call</a></li>
<li><a href="mailto:khirulnizam@gmail.com"
class="ui-icon-mail
ui-btn ui-btn-icon-left ui-btn-corner-all
ui-btn-inline"
>
Email</a></li>
</ul>
</div>
<!-- popup staff2 -->
<div id="s2" data-role="popup">
<ul data-role="listview" data-inset="true">
<li><a href="tel:+6012-0122655055"
class="ui-icon-phone ui-btn
ui-btn-icon-left ui-btn-corner-all ui-btn-inline"
>
Call</a></li>
<li><a href="mailto:mf4iz@gmail.com"
class="ui-icon-mail
ui-btn ui-btn-icon-left ui-btn-corner-all
ui-btn-inline"
>
Email</a></li>
</ul>
</div>

<!-- footer -->
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#home" >Home</a></li>
<li><a href="#directory" >Dir</a></li>
<li><a href="#about" >About</a></li>
</ul>
</div><!-- end navbar -->
</div><!-- end footer -->
</div><!-- end of directory -->
</body>
</html>



The output sample:

imageimageimage

***We have made the tutorial on how to use build.phonegap.com to generate signed Android APK, proceed here for the compete step-by-step lesson.

Comments

Popular posts from this blog

Several English proverbs and the Malay pair

Or you could download here for the Malay proverbs app – https://play.google.com/store/apps/details?id=net.kerul.peribahasa English proverbs and the Malay pair Corpus Reference: Amir Muslim, 2009. Peribahasa dan ungkapan Inggeris-Melayu. DBP, Kuala Lumpur http://books.google.com.my/books/about/Peribahasa_dan_ungkapan_Inggeris_Melayu.html?id=bgwwQwAACAAJ CTRL+F to search Proverbs in English Definition in English Similar Malay Proverbs Definition in Malay 1 Where there is a country, there are people. A country must have people. Ada air adalah ikan. Ada negeri adalah rakyatnya. 2 Dry bread at home is better than roast meat home's the best hujan emas di negeri orang,hujan batu di negeri sendiri Betapa baik pun tempat orang, baik lagi tempat sendiri. 3 There's no accounting for tastes We can't assume that every people have a same feel Kepala sama hitam hati lain-lain. Dalam kehidupan ini, setiap insan berbeza cara, kesukaan, perangai, tabia

Submit your blog address here

Create your own blog and send the address by submitting the comment of this article. Make sure to provide your full name, matrix and URL address of your blog. Refer to the picture below. Manual on developing a blog using blogger.com and AdSense, download here … Download Windows Live Writer (a superb offline blog post editor)

Applications of Web 2.0

Web 2.0 describes the changing trends in the use of World Wide Web technology and web design that aim to enhance creativity , secure information sharing, collaboration and functionality of the web. Web 2.0 concepts have led to the development and evolution of web-based communities and hosted services , such as social-networking sites , video sharing sites , wikis , blogs . Find a website or web application that conform to the criteria of Web 2.0. Put the name of the application and the URL in the comment below. Please provide your full name and matrix number. Make sure the application you choose is not already chosen by your friend in the previous comment.

ViewFlipper Example–a simple FlashCard

UPDATE: Improved with Fling gesture (Sept 2012) UPDATE: ViewFlipper with Flip-In and Flip-Out Animation (August 2012) This tutorial is to demonstrate the ViewFlipper layout that is almost similar to CardLayout (in Java). The app will produce a simple Flash card that provide several screens with different picture for each card. Flip-in and Flip-out animation provided. Added in Sept 2012 – an improvement to support Fling gesture – enjoy… The amendment is only on the coding part. Some how the layout design (main.xml) is quite long. Later I’ll produce separated screen by including several XML layout from outside files. Screenshots;

ASK kerul pls...

Ask me please, just click the button... Any question related to the web, PHP, database, internet, this blog, my papers, or anything. I'll answer to you as soon as I can, if related to my domain. If not I'll try to find out from Google and provide you a link that can help you solve a problem. Sincerely, kerul. ASK kerul pls... http://kerul.blogspot.com