Announcement Announcement Module
No announcement yet.
Using another frontend in ROO apps. Expecting reply from some senior member. Page Title Module
Move Remove Collapse
Conversation Detail Module
  • Filter
  • Time
  • Show
Clear All
new posts

  • 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,
    Privin Thomas

  • #2
    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
    Last edited by btlife; Feb 25th, 2011, 10:30 AM.


    • #3

      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 I have another article that describes my implementation for having dynamic menus for web mvc too. Here is the link

      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


      • #4
        @ btlife

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

        Thank you in advance & B. Roogrds



        • #5
          @ btlife

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



          • #6

            i'm interested too.


            • #7

              also interested, thx


              • #8
                @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


                • #9

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

                  B. Roogards


                  • #10
                    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. 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 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
                    Jesus Garcia's Blog
                    Saki's Blog :
                    ExtJS Api Documentation :
                    ExtJS Samples & Demos :
                    And of course this forum.

                    Hope this helps
                    Last edited by btlife; Mar 8th, 2011, 12:57 PM.


                    • #11
                      Few more notes

                      Just a little explanation on why I choose to change the Controllers Json Responses.

                      ExtJS is easier to work with if the JSON structure being returned is returned like:

                         data: {....},
                         total: 1,
                         success: true,
                         message: 'Success or Error Message'
                      With the normal Roo JSON response in the data element, and the total holding the number of records returned, and success status, and a message if you want.

                      That's all the JsonObjectResponse wrapper is doing.

                      I could have just added the FlexJson .rootName("data"), but some of the ExtJS objects want the total records retrieved and the success status. I could have overridden the ExtJS function to handle the default Spring Roo Json response, but it seemed to me to be easier to maintain to just add the wrapper in the controller.

                      Also, the json all, isn't quite necessary for the clinic.roo script, since I am pushing in most of the json functions anyway, but it gave me the starting template so I kept it in there.

                      The ExtJS components I am using are calling the services once per item, so I didn't need to convert the jsonArray functions. You can change the ExtJS to work in batch mode, and then you would have to convert the jsonArray functionality in the controllers.

                      I also tried to use a couple different components, so I added a TreePanel for the menu, and an EditorGridPanel for the Create functionality (it Creates/Updates and Deletes), and then add a basic ListPanel for the List All menu options.

                      By default, column sorting is built in. Adding Paging functionality is pretty straight forward, besides the Json wrapper, the start/page size functionality of the existing controller methods works the same. ExtJS will send in the start and page size, and the controller will send back the correct subset.



                      • #12
                        Thanks for sharing out the source.

                        I was able to ...
                        # git clone
                        # mvn clean install
                        # mvn tomcat:run
                        # browse to http://localhost:8080/petclinic/
                        # browse to http://localhost:8080/petclinic/index_extjs

                        but noticed that ExtJS was not packaged in the WAR

                        I see the README.txt you put in the webapp\js\ext-3.3.1 directory.
                        Can you share what files or folders are needed from the ext-3.3.1 install?

                        Good work!


                        • #13
                          The easiest way is download extjs and extract it into that folder.

                          I have the entire thing in there while developing (since I don't know which one's I'll need, if you take a look at extjs.jspx it lists all the files that are actually used.:

                                  <link rel="stylesheet" type="text/css" href="resources/js/ext-3.3.1/resources/css/ext-all.css" />
                          		<link rel="stylesheet" type="text/css" href="resources/js/ext-3.3.1/examples/shared/examples.css" /> 
                                  <!-- overrides to base library -->
                                  <!-- ** Javascript ** -->
                                  <!-- ExtJS library: base/adapter -->
                                  <script type="text/javascript" src="resources/js/ext-3.3.1/adapter/ext/ext-base-debug.js"><!-- required for FF3 and Opera --></script>
                                  <!-- ExtJS library: all widgets -->
                                  <script type="text/javascript" src="resources/js/ext-3.3.1/ext-all-debug.js"><!-- required for FF3 and Opera --></script>

                          Good work!


                          • #14

                            For my part, I am using Vaadin Roo plug-in ( You can generate the backend classes and use the Vaadin plugin to generate the interface layer. You can use the widgets that they provide. It not working with the latest Roo version but a fix is due next week.

                            The plugin usage is explains at
                            Last edited by directvox; Mar 8th, 2011, 09:07 PM.


                            • #15
                              Spring Roo ExtJS PetClinic Example

                              i have tried out the example.while the create owner functionality is working,i couldn't get any other parts of the sample application to work and also list of owners is not been displayed.

                              please help me out to understand exact how extjs is implemented on spring roo.


                              thanks in advance.