Add <style> and <script> from body and place it on head

I am using Spring Roo 1.2.4 for this topic. I am aware that to add user-defined default styles and scripts should be added on PROJECT_FOLDER/src/main/webapp/WEB-INF/tags/util/load-scripts.tagx. In my case, I have some .jspx that need(s) additional style and scripts on a particular view only.

When I view the page with the <style> and <script> tags on the .jspx file, the <style> gets rendered and work accordingly. But the <script> tag doesn't work especially when using the JQuery library for dialog. I have added the jquery libraries on the scripts folder under webapp.

Already fixed because jquery.js was rendered below jquery-ui.js in which jquery.js should be rendered first.

Having a <style> and <script> tag in the body section might not be advisable due to HTML standards. Is there a way to have the <style> and <script> tags on a particular .jspx be render on the <head> section instead of having them rendered on the <body> section?

Solution

Java,

I think what i would do is the following 3 steps. I based my solution on how some pages can have the menu defined and some dont'. Same basic principle.

Add a template placholder into the default layout

That is, inside of /src/main/webapp/WEB-INF/layouts/default.jspx, add the a tiles:insertAttribute tag with ignore=true, such as following to the head:

    <!-- FIXME Can't move scripts to the bottom of 
      page because of how spring tags do the fields-->
    <util:load-scripts />
    <tiles:insertAttribute name="pagespecificscripts" ignore="true" />

    <spring:message code="application_name" var="app_name" htmlEscape="false"/>
    <title><spring:message code="welcome_h3" arguments="${app_name}" /></title>
</head>

Add the page specific scripts to the same folder as the view

That is, if your entity is named "pizza", add the following to /src/main/webapp/WEB-INF/views/people :

<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">
    <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"><!-- required for FF3 and Opera --></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js" type="text/javascript"><!-- required for FF3 and Opera --></script>
    <script type="text/javascript" src="http://www.alpacajs.org/js/alpaca.min.js"><!-- required for FF3 and Opera --></script>
    <script src="${areYouSure_js}" type="text/javascript"><!-- required for FF3 and Opera --></script>
    <link type="text/css" href="http://www.alpacajs.org/css/alpaca.min.css" rel="stylesheet"/>
</jsp:root>

Define the tile definition attribute in the views.xml

Update the entity specific tiles views.xml to set the optional attribute we defined in step 1. That is, add the following to /src/main/webapp/WEB-INF/views/people/views.xml:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE tiles-definitions PUBLIC "-//Apache Software Foundation//DTD Tiles Configuration 2.1//EN" "http://tiles.apache.org/dtds/tiles-config_2_1.dtd">
<tiles-definitions>
    <definition extends="default" name="people/list">
        <put-attribute name="body" value="/WEB-INF/views/pizza/list.jspx"/>
        <put-attribute name="pagespecificscripts" value="/WEB-INF/views/pizza/pagespecificscripts.jspx"/>
    </definition>

Those steps should get you on your way.

Hope that helps...