employeesHR : een HTML/jQuery/EsyUI Webclient voor de REST Serverapps

Deze demo applicatie is een HTML/JavaScript/jQuery/EasyUI 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/employeesHR

De applicatie maakt gebruik van jQuery en de jQuery gebaseerde EasyUI JavaScript libraries voor de Rich Client Ajax componenten in de gebruikersinterface.

NB:
De applicatie moet worden gedraaid op dezelfde server als de REST serverapp. Aangezien de REST serverapps employeesREST en employeesRESTH op een JEE server moeten draaien, moet employeesHR daarin dus mee. De reden hiervoor is de security beperking van browsers genaamd “Cross Domain Requests” of “Cross Origin Resource Sharing” (CORS). Deze beperking houdt in dat het browsers niet wordt toegestaan om het Ajax XmlHttpRequest (XHR) object te verzenden naar servers van een ander domain. Een ander domain geldt ook al als er sprake is van een ander poortnummer. Dus 2 verschillende servers , ook al draaien ze beiden op localhost, gaat niet lukken.

Deze app is getest op de TomEE+ server.

Na opstart maakt de applicatie contact met de server via de menu optie “Settings -> Server URL”.

In de Server Dialoog dialoog kan de host, port en projectnaam worden gespecificeerd. Als projectnaam wordt employeesREST of employeesRESTH gekozen, en één van deze serverapps moeten uiteraard operationeel zijn.

Vervolgens is login mogelijk.
Ook kan een “Registreer nieuw account”  of “Wachtwoord vergeten” link worden gekozen om een useraccount of een nieuw wachtwoord aan te vragen.
Na invullen van username, password en email adres wordt een nieuwe user toegevoegd en een email met de gegevens verstuurd naar de aanvrager.

Een login dialog checkt user/password tegen de user database tabel.
Onder menu optie “Organization” zijn via submenu opties de schermen Departments en Employees selecteerbaar.
Onder menu optie “Settings” zijn via submenu opties de schermen Users  en Roles selecteerbaar.
De submenu opties zijn enabled of disabled afhankelijk van de rol of rollen van de ingelogde gebruiker..
De Departments en Employees schermkeuzes zijn enabled voor users met de “User” rol.
De Users en Role schermkeuzes zijn enabled voor users met de “Administrator” rol.

Onderstaand scherm toont de Users, en de mogelijkheid om in de edit dialog nieuwe rollen aan een user te koppelen. Dat is hier opgelost door in de combo box meerdere opties te kunnen selecteren.

Onder menu Tools->SQL is nog een aanvullende feature toegevoegd: een SQL Query tool. Zie voorbeeld hieronder met de query op de departments tabel:

This entry was posted in 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>