Roo GUI customization. Changing Roo jspx with our own jsp pages!

[Privin]

Hi,

I would like to know how we can customize the GUI generated by spring roo. I want to replace the pages generated by roo with my own jsp pages.

Is this possible ? if so how?

Best Regards
Pivin Thomas

[Stefan Schmidt]

Roo offers a number of points for customization depending on what you want to achieve:

- CSS / images for L&F type adjustments
- Apache Tiles for structural adjustments
- you can customize your jspx files directly by adding new elements such as <div class=...> which allow you to apply styles or js functionality
- you can customize the tagx files to suit your needs to get application global changes

Does that answer your question?

[Privin]

I think I should work more on these files.
Thank you Stefan Schmidt for replying.

[Cedric.Vidrequin]

Hello all,

I'd like to ask for more information about that topic :

I need to replace the auto generated jspx page by my own JSP, which needs to have a header part to handle javascript scripts, and a body part that hosts HTML + javascript.

Here is the more precise context :
- I have a table that manages planning
- the new JSP page has to show a calendar manager, using the ExtJS calendar extention (HTML + javascript)

To do that JSP page (that works in a simple test page), I need to add CSS and JS references in the header ; I also need to build the HTML part that will handle the calendar + the JS part that activate it.

I started to modify the src/main/webapp/WEB-INF/tags/util/load-scripts.tagx file to add the ExtJs needed stuffs like this :

<jsp:root 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" version="2.0">

  <jsp:output omit-xml-declaration="yes" />

  <spring:theme code="styleSheet" var="roo_css" />
  <spring:url value="/${roo_css}" var="roo_css_url" />
  <spring:url value="/resources/dojo/dojo.js" var="dojo_url" />
  <spring:url value="/resources/dijit/themes/tundra/tundra.css" var="tundra_url" />
  <spring:url value="/resources/spring/Spring.js" var="spring_url" />
  <spring:url value="/resources/spring/Spring-Dojo.js" var="spring_dojo_url" />
  <spring:url value="/resources/images/favicon.ico" var="favicon" />
  <link rel="stylesheet" type="text/css" href="${tundra_url}"><!-- required for FF3 and Opera --></link>
  <link rel="stylesheet" type="text/css" media="screen" href="${roo_css_url}"><!-- required for FF3 and Opera --></link>
  <link rel="SHORTCUT ICON" href="${favicon}" />
  <!-- ExtJs PART for planning -->
  <link rel="stylesheet" type="text/css" href="/JS/ExtJs/resources/css/ext-all.css"></link>

  <!-- Get the user local from the page context (it was set by Spring MVC's locale resolver) -->
  <c:set var="userLocale">
    <c:out value="${pageContext.response.locale}" default="en" />
  </c:set>

  <script type="text/javascript">var djConfig = {parseOnLoad: false, isDebug: false, locale: '${fn:toLowerCase(userLocale)}'};</script>

  <script src="${dojo_url}" type="text/javascript"> <!-- required for FF3 and Opera --> </script>
  <script src="${spring_url}" type="text/javascript"> <!-- required for FF3 and Opera --> </script>
  <script src="${spring_dojo_url}" type="text/javascript"> <!-- required for FF3 and Opera --> </script>
  <script language="JavaScript" type="text/javascript">dojo.require("dojo.parser");</script>
  <!-- ExtJs PART for planning -->
  <script src="/JS/ExtJs/adapter/ext/ext-base-debug.js" type="text/javascript"> <!-- required for FF3 and Opera --> </script>
  <script src="/JS/ExtJs/ext-all-debug.js"  type="text/javascript"> <!-- required for FF3 and Opera --> </script>

</jsp:root>

But :
1) I'm not sure if it is the good way because the ExtJs stuffs will be loaded on every pages, where I only need them on a single page
2) it doesn't find the CSS ans JS files, that are stored in src/main/webapp/JS/etc...

Can you please tell me if I am in the right way, and what I should do to solve the path problem, and to continue my work ?

[Stefan Schmidt]

If you need ExtJs only in a single page I would recommend for you to develop it alongside the Roo managed artifacts rather than trying to integrate them. So you start to write your own custom controller method (or push in an existing one), then create a new tiles template which is used to decorate your custom jsp page. That Tiles template could contain all links to your custom CSS, JS libraries, headers, etc.

HTH,
Stefan

[mmartinez]

From gvNIX team, we have a theme addon to change visual aspect for your application.

You can install addon with:

pgp trust --keyId 0xC5FC814B
addon install bundle --bundleSymbolicName org.gvnix.web.theme.roo.addon

Commands example:

theme list
theme install --id cit
theme set --id cit

You can choose between two themes, cit or gvnix