During a session last Friday I built a mobile JavaScript client (based on jQuery Mobile) which runs on both Android and iPhone and connects with a Delphi XE2 DataSnap REST Application.

The REST server just a standard DataSnap REST application exposing a few methods. There is a pretty basics ReverseString (used to test the core behavior), plus a function returning a list of employees (from the classic InterBase/FireBird Employee database), which populates a list arranged by department. Finally, you can ask for details of the given employee.

The server has three methods:

    function ReverseString(Value: string): string;
    function ListEmp: TJSONArray;
    function GetEmpl (empno: Integer): TJSONObject;

While the first and the last are very simple, the second is a bit more complicated as it queries the DB by joining employees and departments and creates a two-levels list with the departments and the employees in each of them. This is the SQL query:

select e.EMP_NO, e.FIRST_NAME, e.LAST_NAME, dept.DEPT_NO, dept.DEPARTMENT from Employee e
inner join DEPARTMENT dept on dept.DEPT_NO = e.DEPT_NO
order by dept.DEPT_NO, e.LAST_NAME

The code scans the resulting dataset and produces a nested JSON array like the following:

[{"dept_no":0,"department":"Corporate Headquarters","employees":
  [{"emp_no":105,"last_name":"Bender","first_name":"Oliver H."},
  {"emp_no":12,"last_name":"Lee","first_name":"Terri"}]},
{"dept_no":100,"department":"Sales and Marketing","employees":
  [{"emp_no":85,"last_name":"MacDonald","first_name":"Mary S."}
  ...

Now the interesting part is in the client application, which is a single HTML file based on jQuery Mobile (http://jquerymobile.com/) and made of three separate pages, alternatively shown. The page links with special CSS styles to create buttons and to turn HTML lists into controls like those on your phone and to make them touch-friendly.

For example the top part of the main page (see first image below) is defined with some rather plain HTML:

<input id="valueField" type="text" value="A B C" />
<a href="#" data-role="button" id="reverse">Reverse</a>

 

Following pages use the same approach for showing the list of employees (which can be filtered on the client) and the individual employee data. Again, the HTML is pretty simple and the JavaScript processing the page is not much different from what you'll use in a standard HTML application. Here are the other pages:

  

Now I decided that the best way to test it was to make it "live", so that you can point your own phone browser to:

http://ajax.marcocantu.com/mobiledsnap/

and see for yourself how it works. (You can also use a standard desktop browser, but the user interface will stretch horizontally and look quite weird). Both Android and iPhone should work fine, which is a big advantage of using an HTML/JavaScript-based solution for building pages for phones. This could be extended into a full phone application on two counts. First, you can host it in an application, so that the browser becomes "invisible" to the end user. Second, you can integrate jQuery mobile with PhoneGap to access the native features of the phone. Might explore these extensions in the future.

By the way, notice you need the trailing / or the page won't work. In fact, the Apache Linux web site hosting ajax.marcocantu.com (which is very out of date) use a proxy configuration to redirect anything in that virtual folder to a Delphi XE2 application running on a Windows virtual machine hosted by the same Linux server. 

PS. I know, I should have blogged about Oxygene for Android, rather than jQuery Mobile, but both solutions have their role, and this is something I worked on over the past weekend.