How to get Twitter Bootstrap with Spring Roo?

Question

I am developing a web application using Spring Roo as a project for my uni subject. I have created all the entities, controllers, views and everything else. But now I would like to basically ignore all the tagx, jspx files created by Roo and create my own views using Twitter Bootstrap. I am new to web development and basically I don't know even where to start. What do I have to do to start using the twitter bootstrap css files, where do I put the downloaded files, how do I include them?? I am so confused, help would be much appreciated!!

Answer 1

You can start with RooStrap by Bhagya Silva as your template.1 I created it as a Spring Roo project with enough customizations done so you can simply start with Twitter Bootstrap and Spring Roo. =) If you do any further enhancements to the base templates, feel free to fork the project, do the changes and send up a pull request on GitHub and I'll be more than happy to incorporate them in the next revisions of RooStrap.

You can find RooStrap from the following location on GitHub.

http://bhagyas.github.com/roostrap/

Cheers and all the best with RooStrap, Spring Roo and Twitter Bootstrap.

Answer 2

Note by using gvNIX 1.3.1 your project will be improved with both Bootstrap and Dandelion Datatables.

Take a look at https://github.com/DISID/gvnix-samples/tree/master/quickstart-app

Answer 3

There's also a proper plugin at http://github.com/killersite/roo-twitter-bootstrap. Yuo ca use it this way:

project --topLevelPackage com.lrkwz.roostrap --projectName roostrap --java 6 --packaging JAR
persistence setup --database HYPERSONIC_PERSISTENT --provider HIBERNATE 
entity jpa --class com.lrkwz.roostrap.domain.Person 
field string --fieldName personName --sizeMin 2
entity jpa --class ~.domain.Country
field string --fieldName countryName --notNull
osgi start --url file:///home/lrkwz/roo-twitter-bootstrap/target/com.ct.roo.addon.tbootstrap-0.1.0.BUILD-SNAPSHOT.jar
web mvc setup
web mvc install bootstrap
web mvc all --package com.lrkwz.roostrap.web

Answer 4

Since I have my SpringRoo projects already created I cannot use roostrap as my template. That is what I did for integrate this awesome theme in my projects:

1. Copy directory bhagyas-roostrap-2f4ac0d/src/main/resources/META-INF/web-resources to YOUR_PROJECT/src/main/resources/META-INF/

2. Copy file bhagyas-roostrap-2f4ac0d/src/main/webapp/styles/roostrap.css to YOUR_PROJECT/src/main/webapp/styles

3. Copy file bhagyas-roostrap-2f4ac0d/src/main/webapp/WEB-INF/classes/roostrap.properties to YOUR_PROJECT/src/main/webapp/WEB-INF/classes

4. Delete directory YOUR_PROJECT/src/main/webapp/WEB-INF/tags and copy directory bhagyas-roostrap-2f4ac0d/src/main/webapp/WEB-INF/tags to YOUR_PROJECT/src/main/webapp/WEB-INF

5. Overwrite file YOUR_PROJECT/src/main/webapp/WEB-INF/views/header.jspx with bhagyas-roostrap-2f4ac0d/src/main/webapp/WEB-INF/views/header.jspx

6. Overwrite file YOUR_PROJECT/src/main/webapp/WEB-INF/views/index.jspx with bhagyas-roostrap-2f4ac0d/src/main/webapp/WEB-INF/views/index.jspx

7. I dont like generate's SpringRoo menu in my projects, so my YOUR_PROJECT/src/main/webapp/WEB-INF/layouts/layouts.xml looks like:

   <definition name="default" template="/WEB-INF/layouts/default.jspx">
       <put-attribute name="header" value="/WEB-INF/views/header.jspx" />
       <!-- 
       <put-attribute name="menu" value="/WEB-INF/views/menu.jspx" />
       -->
       <put-attribute name="footer" value="/WEB-INF/views/footer.jspx" />
   </definition>
   

8. Overwrite file YOUR_PROJECT/src/main/webapp/WEB-INF/layouts/default.jspx with bhagyas-roostrap-2f4ac0d/src/main/webapp/WEB-INF/layouts/default.jspx. If you did the step 7 go to default.jspx and look for <div class="container">, it has to looks like this:

       <div class="container">
   
           <div class="row">
               <!--  
               <div class="col-md-3">
                   <div class="sidebar-nav">
                       <tiles:insertAttribute name="menu" ignore="true" />
                   </div>
   
               </div>
                -->
   
   
               <div class="col-md-12 panel panel-default">
                   <div id="main" class="panel-body">
                       <tiles:insertAttribute name="body"/> 
                   </div>
               </div>
   
           </div>
   
       </div>
   

9. Modify file YOUR_PROJECT/src/main/webapp/WEB-INF/spring/webmvc-config.xml and look for:

   <bean class="org.springframework.web.servlet.theme.CookieThemeResolver" id="themeResolver" p:cookieName="theme" p:defaultThemeName="standard"/>
   

   and change default theme from standard to roostrap:

   <bean class="org.springframework.web.servlet.theme.CookieThemeResolver" id="themeResolver" p:cookieName="theme" p:defaultThemeName="roostrap"/>
   

10. Modify file YOUR_PROJECT/src/main/webapp/WEB-INF/views/footer.jspx and add class="container" to the main div. Like this:

    <div class="container" xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:fn="http://java.sun.com/jsp/jstl/functions" xmlns:jsp="http://java.sun.com/JSP/Page" xmlns:spring="http://www.springframework.org/tags" xmlns:util="urn:jsptagdir:/WEB-INF/tags/util" id="footer" version="2.0">
    

11. Add to the file YOUR_PROJECT/src/main/webapp/WEB-INF/i18n/messages.properties

    global_theme_roostrap=roostrap 
    welcome_text_roostrap=bla bla bla
    welcome_quote=bla bla bla
    welcome_quote_author=bla bla bla
    

Answer 5

If you are interested in use Bootstrap on your ROO projects, you can try using the new gvNIX-1.3.1-RELEASE version and using this simple command:

web mvc bootstrap setup

Here you can found some examples about an Spring Roo application using Bootstrap appearance:

https://github.com/DISID/gvnix-samples/tree/master/quickstart-app#result

If you are intereseted on gvNIX project, you can find more info at:

https://code.google.com/p/gvnix/

https://github.com/DISID/gvnix