Using another frontend in ROO apps. Expecting reply from some senior member.

[Privin]

Hi,

The GUI that we can create using Spring ROO will NOT be looking nice even if we customize it. And the .jspx files are not compactable with mobile browers also.

Is there any way that we can make HTML 5 with JQUERY (supported by mobile browsers) to interact with a SERVICE LAYER which will interact with spring code.
This will make the GUI completely independent of the code and this allows us to create user friendly and eye catching GUI.

1) Is it possible to achieve? HOW?
2) Can we use JSON to interchange data? Any other suggestions?

Thanks and Regards,
Privin Thomas

[btlife]

I'm currently using ExtJS as the front end, and not using any of the Roo created front end.

I am calling the Roo generated controllers, with JSON.

roo> json all

To have Roo create the Json controller methods.

Then just have your front end call the url for the data you need.

Stefan Schmidt was nice enough to include some sample curl calls that you can modify and use for testing it out.
ROO-1800 json-examples.txt


I have 2 versions, one that gets served by the roo application, it basically loads index.jspx which then starts up the JavaScript ExtJS application which then calls the urls to manipulate the data via Json.

The 2nd is completly independant of the roo application, index.htm which loads the ExtJS and makes cross-domain ajax calls to the roo application for the data manipulation.

The first version didn't require any changes to the roo generated code, I did however create a json wrapper around the Json that was created by roo, to make it interact with ExtJS easier (basically adding total, success, message json fields to the response)

The 2nd version required me to make some new controller methods that would accept the cross-domain request, and then, in my case, send the results back as json wrapped in javascript.


I can probably provide a petclinic example if anyone has interest for both versions.

I'm sure JQuery would operate the same way, just make Ajax calls to the Roo app

[delgad9]

Privin,

I am currently working in a personal RnD project for enabling other fontends options into mainstream Roo.

I created a probe-of-concept for an addon to convert Roo WEB MVC automatically into JQuery based. Kind-of a migration tool.

Please read http://pragmatikroo.blogspot.com/201...ve-jquery.html. I have another article that describes my implementation for having dynamic menus for web mvc too. Here is the linkhttp://pragmatikroo.blogspot.com/201...r-web-mvc.html.


This is what I need from you to guide the RnD. Please provide sketches or design drawing of the ui that you have in mind. I know there are a bunch out there but I need yours.


Thank you in advance and B. Roogards
jD

[delgad9]

@ btlife

Per you offering...
Yes, I am interested in the pet clinic implementation that you are referring.

Thank you in advance & B. Roogrds

jD

[littlealan]

@ btlife

i'm also interested in the pet clinic implementation with spring-roo and extjs.
Thanks in advance.

littlealan

[paulux]

@bitlife

i'm interested too.
Thanks

[drinks.sobe]

@bitlife

also interested, thx

[Privin]

@Btlite, @delgad9

Thank you for answering my query. It was very helpfull.
@Btlite: pl give pet clinic implementation with spring-roo and extjs!

Thanks and regards
Privin Thomas

[delgad9]

@Btlite,

I don't need you stuff anymore...
Please remove me from the members list asking for it.


B. Roogards
jD

[btlife]

Sorry for the delay, work has been hectic and it was hard to find a few hours to build this.

https://github.com/btlife/Spring-Roo-PetClinic-ExtJS


I put it the source code up on github.

This is the attached README in the root of the source code:

Changes to PetClinic Roo Example
Spring ROO 1.1.1.RELEASE

1. clinic.roo
1.1 add json all to end of script
1.2 change employedSince to java.util.Date from java.util.Calendar (was getting an error when deserializing the json into a Calendar type, didn't have time to debug)
2. created new tiles template src/main/webapp/WEB-INF/layouts/extjs.jspx
3. added new template to tiles config src/main/webapp/WEB-INF/layouts/views.xml
4. created new index_extjs.jpx that uses above template : src/main/webapp/WEB-INF/views/index_extjs.jspx
5. added new configuration for index_extjs.jspx to use new template : src/main/webapp/WEB-INF/views/views.xml
6. added static view for index_extjs.jspx : src/main/webapp/WEB-INF/spring/webmvc-config.xml
7. installed ExtJS : src/main/webapp/js/extjs-3.1.1
8. created ExtJS application : src/main/webapp/js/overrides, src/main/webapp/js/PetCompany, src/main/webapp/js/PetClinic
9. Added JsonObjectResponse.java wrapper : src/main/java/com/springsource/petclinic/extjs
10. Modified all Controllers to wrap their responses using JsonObjectResponse

I didn't have time to put any code in the finders, but I am using one of the finders to link the Owners to pets, so there is an example in there.

I barely made any changes to the ROO generated code, basically just what I mentioned in the README.

I also didn't touch any of the ROO generated front end, I made the Banner Link (which by default goes to the root of the application) to switch between the ExtJS front-end and the ROO generated front end.

So if you got to http://localhost:8080/petclinic you see the normal PetClinic frontend. If you click on the ROO banner, or go to http://localhost:8080/petclinic/index_extjs it will switch to the ExtJS front end.

Also note, I threw this together pretty fast, and I didn't worry about formatting.

This should be a good starting point for anyone looking into ExtJS and Spring Roo. I found it rather straight forward, once you get used to ExtJS.

I pulled information from the following sources:

ExtJS In Action by Jesus Garcia http://extjsinaction.com/
Jesus Garcia's Blog http://tdg-i.com/
Saki's Blog : http://blog.extjs.eu/
ExtJS Api Documentation : http://dev.sencha.com/deploy/dev/examples/
ExtJS Samples & Demos : http://dev.sencha.com/deploy/dev/examples/
And of course this forum.



Hope this helps