November 30, 2011

Mobile jQuery Client for Delphi REST Server

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.

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. 





 

9 Comments

Mobile jQuery Client for Delphi REST Server 

Works very well in android 2.3.3 with Opera, the
labels are to close to left but the rest is fine and
works very fast. Great Job
Comment by Orhan Ç [http://www.drorhan.com] on November 30, 09:04

Mobile jQuery Client for Delphi REST Server 

As someone not familiar with Datasnap - what is the big 
advantage of Datasnap compared to a normal REST 
service, where I send/retrieve data via JSON?
 
Comment by zeroc8 on November 30, 09:57

Mobile jQuery Client for Delphi REST Server 

Hi Marco,

I made a jquerymobile app using the webbroker framework 
about 6 months ago. As is usual with webbroker, the 
jquerymobile interface was dynamically generated by 
using the appropriate strings in the response value.  It 
works very well in this scenario too.

By detecting appropriate useragent strings in the 
webbroker app I was able to return either "desktop" HTML 
or jquerymobile html.

Stuart 
Comment by Stuart Clennett on November 30, 10:21

Mobile jQuery Client for Delphi REST Server 

Nice Demo
Bug in http://ajax.marcocantu.com/mobiledsnap/
When you pres Refresh List Button, ListView is changed 
to Text View and I can't return ListView again ;-)
Tested with Windows Chrome Browser.
Comment by Tomislav Avramovic on November 30, 10:22

Mobile jQuery Client for Delphi REST Server 

I've been using jQuery Mobile in an IntraWeb app for 
awhile - it's very cool.  I did a video on it for 
CodeRage 6: http://bit.ly/uu7qeF
Comment by Alister Christie [http://codegearguru.com] on November 30, 20:26

Mobile jQuery Client for Delphi REST Server 

(Tomislav Avramovic): "When you pres Refresh List
Button, ListView is changed to Text View and I can't
return ListView again ;-) Tested with Windows Chrome
Browser."

This problem also exists in Firefox 8

Comment by Michael Justin [http://www.habarisoft.com/] on December 2, 11:54

Mobile jQuery Client for Delphi REST Server 

Thanks I knew about the refresh bug. It is now fixed 
(needed to pass the "refresh" parameter to the 
listview() constructor after refreshing the list 
content, as explained at the very end of page 

http://jquerymobile.com/test/docs/lists/docs-lists.html

I've also added a button to get back from the list page 
to the initial page.   
Comment by Marco Cantu [http://www.marcocantu.com] on December 2, 14:00

Mobile jQuery Client for Delphi REST Server 

I want to use "ReverseString" method from your
datasnap server (from my computer). 
In your example project, when I click on the button,
it sends
http://ajax.marcocantu.com/mobiledsnap/datasnap/rest/TServerMethods1/ReverseString/A%20B%20C/

Here in my computer, when I click on the button, show
the follow message:

"uncaught exception: [Exception... "Component returned
failure code: 0x80004005 (NS_ERROR_FAILURE)
[nsIXMLHttpRequest.send]" nsresult: "0x80004005
(NS_ERROR_FAILURE)" location: "JS frame ::
file:///media/D/ds1/mobiledsnap/js/serverfunctionexecutor.js
:: anonymous :: line 297" data: no]"

What that means?
Thanks.

Comment by warleyalex on August 19, 15:39

Mobile jQuery Client for Delphi REST Server 

Hi Marco,

I've created a simple client in javascript that 
interact and execute code on a Delphi DataSnap server,
directly from a static Javascript application and get
the results back, using pretty basics ReverseString
which is a single HTML file.


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


I would like to know if you example (Delphi REST
Server.exe) is available for download. I want my
client JS interacts with your server.

Thanks,
warleyalex from Brazil
Comment by warleyalex [warleyalex@yahoo.com.br] on August 25, 02:53


Post Your Comment

Click here for posting your feedback to this blog.

There are currently 0 pending (unapproved) messages.