jQuery Mobile “Getting Started” Application
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( }} |
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:
- Your UI code doesn’t have a dependency on a specific server-side technology.
- Your data access logic doesn’t have a dependency on a specific UI technology.
- You can manipulate the data on the client side (i.e. sort using different criteria) without requiring a server roundtrip.
- 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.
