Using another frontend in ROO apps. Expecting reply from some senior member.
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,
Spring Roo ExtJS PetClinic Example
Sorry for the delay, work has been hectic and it was hard to find a few hours to build this.
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.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