employeesMR : een Mobile app voor de REST Serverapps

Deze demo applicatie is een Mobile client webapp die via REST Webservices wordt verbonden met REST Serverapps. Er kan verbinding worden gemaakt met de volgende REST Serverapps:

  • employeesREST: een REST Server applicatie gebruikmakend van een MySQL Database
  • employeesRESTH: een REST Server applicatie gebruikmakend van een HyperSQL Database

De sourcecode is beschikbaar op GitHub:

https://github.com/vanderschoot/employees/tree/master/employeesMR

De applicatie maakt gebruik van PhoneGap en jQuery Mobile. PhoneGap biedt een cross-device ontwikkellaag waardoor de applicatie op verschillende device platforms zoals iOS en Android kan draaien. jQuery Mobile biedt Rich Client Ajax componenten in de gebruikersinterface.

De applicatie kan worden gedraaid op 2 manieren:

  • binnen de Android Virtual Device (AVD) emulator. In het PhoneGap artikel wordt de installatie van de Android SDK’s , de Android AVD emulator en de integratie met Eclipse om de applicatie op de AVD te kunnen deployen beschreven.
  • direct vanaf schijf in een browser. Door het openen van het bestand employeesMR\assets\www\index.html of
    employeesMR\assets\www\indexJQM.html

indexJQM.html is de feitelijke Homepage van de mobiele app (jQuery Mobile basis).
index.html demonstreert het gebruik van native PhoneGap zonder jQuery Mobile.

In het project wordt de server geconfigureerd in het bestand :
employeesMR\assets\www\main.js :

var serverhost = "10.0.2.2"; // Special alias to localhost loopback interface
var serverport = "8082";
var serverproject = "employeesRESTH";
var serverurl = "http://" + serverhost + ":" + serverport + "/" + serverproject;

Afhankelijk van de REST server “employeesREST” (o.b.v. MySQL) of “employeesRESTH” (o.b.v. HSQLDB) moet in main.js het serverproject worden aangepast, en verder het poortnummer van de TomEE+ server waarop de server wordt gedraaid.
Het ip-adres kan naar localhost worden aangepast als de applicatie vanaf schijf in de browser wordt gedraaid. Het getoonde adres “10.0.2.2″ is een specifiek Android alias voor de localhost. De gewone localhost wordt namelijk door de AVD emulator als ip-adres van het Android device beschouwd.

Hieronder is het opstart icoon van de “Employees” applicatie te zien in het startscherm van de Android Emulator.

Als eerste bij opstart wordt een HTML/JavaScript pagina opgestart waarbij het gebruik van native PhoneGap wordt gedemonstreerd. Dat is het index.html bestand.
In dat scherm kunnen een paar eenvoudige basic Ajax calls worden uitgevoerd om de tabel departmente uit te lezen. Eén van de calls is een pure Ajax call voor het aanroepen van een REST webservice. De tweede is een voorbeeld van een Ajax call met jQuery gebruik.

Hieronder een eenvoudige bulletlijst met departments via de basic Ajax call:

Door op het eerdere scherm “Home jQuery Mobile” te kiezen wordt de feitelijke Mobile app gestart :

Via de beide knoppen kan een overzicht van Departments of Employees worden gevraagd. Hieronder het Department scherm:

Met de Add knop wordt een scherm geopend om een nieuwe department toe te voegen. Door op een department te klikken wordt het detail scherm van een department geopend waarop de gegevens bewerkt kunnen worden na op de Edit knop gedrukt te hebben.

Met de Edit knop wordt het scherm gewijzigd naar het onderstaande scherm:

Met de knop “Employees”  op het scherm voor het scherm hierboven wordt genavigeerd naar het Employees scherm waarin de medewerkers van die afdeling worden getoond.

Door op een Employee te klikken wordt het detail scherm van een medewerker geopend waarop de gegevens bewerkt kunnen worden na op de Edit knop gedrukt te hebben.

Hieronder het voorbeeld van de Datum widget:

En hieronder het voorbeeld van de combo box lookup van de (foreign key) departments:

This entry was posted in Mobile, Portfolio and tagged . Bookmark the permalink.

Geef een reactie

Je e-mailadres wordt niet gepubliceerd.

De volgende HTML tags en attributen zijn toegestaan: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>