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

Webcast
More Resources
How to Build an Optimal Hadoop Cluster to Store and Maintain Unlimited Amounts of Data Using Microservers

Realizing the promise of Apache® Hadoop® requires the effective deployment of compute, memory, storage and networking to achieve optimal results. With its flexibility and multitude of options, it is easy to over or under provision the server infrastructure, resulting in poor performance and high TCO. Join us for an in depth, technical discussion with industry experts from leading Hadoop and server companies who will provide insights into the key considerations for designing and deploying an optimal Hadoop cluster.

Learn More

Sponsored by AMD

White Paper
More Resources
Private PaaS for the Agile Enterprise

If you already use virtualized infrastructure, you are well on your way to leveraging the power of the cloud. Virtualization offers the promise of limitless resources, but how do you manage that scalability when your DevOps team doesn’t scale? In today’s hypercompetitive markets, fast results can make a difference between leading the pack vs. obsolescence. Organizations need more benefits from cloud computing than just raw resources. They need agility, flexibility, convenience, ROI, and control.

Stackato private Platform-as-a-Service technology from ActiveState extends your private cloud infrastructure by creating a private PaaS to provide on-demand availability, flexibility, control, and ultimately, faster time-to-market for your enterprise.

Learn More

Sponsored by ActiveState