Home ›

Developing Portable Mobile Web Applications

Issue 197

From Issue #197
September 2010

Nov 01, 2010  By Rick Rogers
 in
What if you could write iPhone and iPad applications on Linux? And, what if those applications also ran on Android phones? Well, you can, by writing your application as a portable mobile Web application. Take advantage of HTML5 and JavaScript libraries to write rich Web applications that users can't tell from native applications. You even can have them install from iTunes and Android Market. Plus,
Development Tools and Libraries

All you need to develop Web applications is a text editor to write JavaScript, CSS and HTML, and a browser to test the results. The job is a bit easier using a Web-oriented IDE, a JavaScript debugger and the Safari browser, along with an assortment of mobile devices for testing. Safari has a number of features that simplify development. You can select which User Agent the browser emulates (from the Developer menu), and the Web Inspector allows you to inspect and debug Web elements, including client-side databases. Safari isn't supported on Linux, but it runs just fine under VirtualBox. The code for this article was developed using the following:

  • Ubuntu 9.10 and the gedit editor.

  • Safari browser on Windows XP on VirtualBox.

  • Apache httpd Web server.

  • GIMP for icon graphics.

  • jQTouch and jQuery libraries.

  • iPhone, iTouch, iPad and Android devices.

Installation of the tools is well documented elsewhere. The Resources section for this article gives pointers to the download URLs. To install jQTouch, just put the JavaScript and CSS files in the directory tree of your Web application, and point to them from your HTML <head> element. jQTouch comes with minimized versions of the files and a minimized jQuery library.

Example Application

As an example, let's look at a simple notes application that I'll call Webnotes. With it, a user could write notes, and view, edit or delete notes later. A note will consist of a title and an arbitrary-length string. The notes will be stored locally on the smartphone, using HTML5 client-side database APIs, and we'll test it running on a variety of Apple and Android devices. When we're done, we'll compare this to a similar Android sample application that ships with the Android SDK. Because we're using client-side database features that are part of HTML5, we'd expect it to work fine on the iPhone, the Droid and the iPad, and not to work on the HTC G1 (it does not support local storage).

Our app has three screens:

  • The opening screen will display a list of existing notes, listed by title, in order by the date they were last edited. Touching a title will select that note for edit. Touching a + button will add a new note (Figure 1).

  • An edit screen will allow viewing, editing or deletion of a note. (Figure 2).

  • An add screen will create a new note and store it in the database (Figure 3).

Figure 1. Home Screen

Figure 2. Edit Screen

Figure 3. Add Screen

Listing 1 is the HTML file, index.html, primarily concerned with layout. Listing 2 is a JavaScript file, webnotes.js, that has the logic we need. Let's go through the HTML first.

Listing 1. index.html


<!DOCTYPE HTML PUBLIC>
 <head>
  <title>WebNotes</title>
  <link type="text/css" rel="stylesheet"
        media="screen" href="jqtouch/jqtouch.min.css">
  <link type="text/css" rel="stylesheet"
        media="screen" href="themes/jqt/theme.min.css">
  <script type="text/javascript"
          src="jqtouch/jquery.1.3.2.min.js"></script>
  <script type="text/javascript"
          src="jqtouch/jqtouch.min.js"></script>
  <script type="text/javascript"
           src="javascript/webnotes.js"></script>
 </head>
 <body>
  <div id="home">
   <div class="toolbar">
    <h1>Web Notes</h1>
    <a class="button add slideup"
       href="#addNote">+</a>
   </div>
   <ul class="metal">
    <li id="noteTemplate" class="arrow"
        style="display:none">
     <span class="title">Title</span>
    </li>
   </ul>
  </div>

  <div id="addNote">
   <div class="toolbar">
    <h1>Add Note</h1>
    <a class="button cancel" href="#">Cancel</a>
   </div>
   <form method="post">
    <ul>
     <li><input type="text" class="title" /></li>
     <li><textarea class="note" ></textarea></li>
     <li>
      <input type="submit" class="submit"
             name="action" value="Save Note" /></li>
    </ul>
   </form>
  </div>

  <div id="editNote">
   <div class="toolbar">
    <h1>Edit Note</h1>
    <a class="button cancel" href="#">Cancel</a>
    <a class="button"
       onclick="deleteNoteById()">Delete</a>
   </div>
   <form method="post">
    <ul>
     <li><input type="text" class="title" /></li>
     <li><textarea class="note" ></textarea></li>
     <li>
      <input type="submit" class="submit"
             name="action" value="Save Note" /></li>
    </ul>
   </form>
  </div>
 </body>
</html>
______________________

Rick Rogers has been a professional embedded developer for more than 30 years. Now specializing in mobile application software, when Rick isn't writing software for a living, he's writing books and magazine articles like this one.

Comments

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

Android compatibility.

tuna's picture
Submitted by tuna on Wed, 11/24/2010 - 20:39.

I'm getting my feet wet with mobile development and am trying to get this working. I'm developing on an HTC Droid Eris with Android 2.1. All I'm getting is a black screen. Any one have any ideas if it should work? Or where I should be looking?

"well documented elsewhere"

Anonymous's picture
Submitted by Anonymous (not verified) on Fri, 11/05/2010 - 03:59.

"Installation of the tools is well documented elsewhere. The Resources section for this article gives pointers to the download URLs."

The resources indeed gives the pointers to the download URLs.
Is there also a link available for "well documented elsewhere"?
Is there also a pointer to the installation of the tools?

Regards,
M. Moon

White Paper
More Resources
Fabric-Based Computing Enables Optimized Hyperscale Data Centers

Today’s modular x86 servers are compute-centric, designed as a least common denominator to support a wide range of IT workloads. Those generic, virtualized IT workloads have much different resource optimization requirements than hyperscale and cloud applications. They have resulted in a “one size fits all” enterprise IT architecture that is not optimized for a specific set of IT workloads, and especially not emerging hyperscale workloads, such as web applications, big data, and object storage. In this report, you will learn how shifting the focus from traditional compute-centric IT architectures to an innovative disaggregated fabric-based architecture can optimize and scale your data center.

Learn More

Sponsored by AMD

White Paper
More Resources
Red Hat White Paper: Using an Open Source Framework to Catch the Bad Guy

Built-in forensics, incident response, and security with Red Hat Enterprise Linux 6

Every security policy provides guidance and requirements for ensuring adequate protection of information and data, as well as high-level technical and administrative security requirements for a system in a given environment. Traditionally, providing security for a system focuses on the confidentiality of the information on it. However, protecting the data integrity and system and data availability is just as important. For example, when processing United States intelligence information, there are three attributes that require protection: confidentiality, integrity, and availability.

Learn more about catching the bad guy in this free white paper.

Learn More

Sponsored by DLT Solutions