Home » Blog » 모바일공부

모바일공부

jQuery Mobile “Getting Started” Application

November 2, 2011 in Android, iOS, iPhone, JQuery Mobile, PhoneGap
원문
A couple of weeks ago, I shared an Employee Directory sample application built with jQuery Mobile and PhoneGap. That application was implemented “Ajax-style”, keeping the UI and the data access code cleanly separated. In other words: no server code intermingled in the HTML markup.

A number of people have asked for a similar example using a “classic” (non-Ajax) implementation where pages (markup + data) are entirely built at the server-side before being delivered to the client.

So, here is simpler version of the same application built “sans Ajax”. I used PHP in this version, but you can of course use your favorite server-side technology (Java, .NET, CF, RoR, etc).

Run the application

Click here to run the application.

Download the source code

Click here to download the source code. Edit config.php to make sure it matches your database configuration.

Running the Application with PhoneGap

With this implementation, the application files can’t be installed locally on the device since pages are created dynamically on the server side. So, in the PhoneGap application, instead of loading a local HTML file, you point to a file hosted on your web server. Here is the code for my main Android activity. Greg has a great post on this topic (I haven’t tried it on iOS myself yet).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
package org.coenraets.directory;
import com.phonegap.DroidGap;
import android.os.Bundle;
public class EmployeeDirectoryJQMPHPActivity extends DroidGap {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.setBooleanProperty("loadInWebView", true);
        super.loadUrl(
            "http://coenraets.org/apps/directory/jqmphp/index.php");
    }
}

 

Summary

To recap the difference between the two versions: In the original (Ajax) version, the server side code exposes a set of services consumed by an HTML/JS client. In this new (non-Ajax) version, the server-side code returns fully assembled HTML pages (markup + data).

The original (Ajax) version has many benefits:

  1. Your UI code doesn’t have a dependency on a specific server-side technology.
  2. Your data access logic doesn’t have a dependency on a specific UI technology.
  3. You can manipulate the data on the client side (i.e. sort using different criteria) without requiring a server roundtrip.
  4. That decoupled architecture also works offline when working with a local database.

When none of the items above is a requirement of your application, the “non-Ajax” approach may work too and may even have some benefits. In particular, it makes the jQuery Mobile page navigation model easier to handle.

Blog, Tech