CODEWITHSUNDEEP
javaspringjspspring-mvc
Son Le
Son Le

Reputation: 314

How to create multi layout in Spring MVC

I know about Apache Tiles in Spring, it seem working same jsp:include, but it doesn't solve my problem: I want a file with name is layout1.jsp, in this file, I will define a layout like:

<html>
<head>
<style href="style1.css" />
</head>
<body>
    <div class="main">
        <div class="left">
            <ul>
                <li>
                <li>
                <li>
            </ul>
        </div>
        <div class="content">
            <h1>${message }</h1>
        </div>
        <div class="footer">
            <span>This is footer</span>
        </div>
    </div>
</body>
</html>

And a file is layout2.jsp:

<html>
<head>
<style href="style2.css" />
</head>
<body>
    <div class="main">
        <div class="left2">
            <ul>
                <li>
                <li>
                <li>
            </ul>
        </div>
        <div class="content2">
            <h1>${message }</h1>
        </div>
        <div class="footer2">
            <span>This is footer</span>
        </div>
    </div>
</body>
</html>

When user chose layout name on combobox, controller will set layout dynamic before render layout.

How should I do?

Upvotes: 4

Views: 4005

Answers (3)

Lalit Mehra
Lalit Mehra

Reputation: 1273

You could do this using Tiles too ...

use apache-tiles 2.2.1 or above

In application's tiles.xml where you put layout models do this

<definition name="masterTile" templateExpression="${requestScope.layout} >
    <put-attribute name="title" value="" />
    <put-attribute name="header" value="/view/header.jsp" />
    <put-attribute name="menu" value="/view/menu"/>
    <put-attribute name="body" value="" />
    <put-attribute name="footer" value="/view/footer.jsp"/>
</definition>

For more on this refer here Tiles Expression Language Support

Upvotes: 0

Son Le
Son Le

Reputation: 314

I found a method to solve this problem:

My application separator to multi module, example "Admin", "Default", each module have a interceptor, example a module interceptor:

public boolean preHandle(HttpServletRequest request,
            HttpServletResponse response, Object handler) throws Exception {
        String servletPath = request.getServletPath();
        if (!servletPath.equals("/") && servletPath.substring(servletPath.length() - 1).equals("/")) {
            response.sendRedirect(request.getContextPath() + servletPath.replaceAll("\\/+$", ""));
            return false;
        }
        return true;
    }

In view I have a class InternalResourceViewResolver.java:

package view;

import helper.AppHelper;

import java.util.Locale;

import org.springframework.web.servlet.View;

public class InternalResourceViewResolver extends
        org.springframework.web.servlet.view.InternalResourceViewResolver {

    public View resolveViewName(String viewName, Locale locale)
            throws Exception {
        AppHelper.setPage("../" + AppHelper.getModule() + "/" + viewName + ".jsp");
        return super.resolveViewName("layout/" + AppHelper.getLayout(), locale);
    }

}

AppHelper class:

package helper;

public class AppHelper {
    private static String module = "default";
    private static String layout = "main";
    private static String page = "index";

    public static String getModule() {
        return module;
    }
    public static void setModule(String module) {
        AppHelper.module = module;
    }
    public static String getLayout() {
        return layout;
    }
    public static void setLayout(String layout) {
        AppHelper.layout = layout;
    }
    public static String getPage() {
        return page;
    }
    public static void setPage(String page) {
        AppHelper.page = page;
    }
}

In other module, example for Admin:

public boolean preHandle(HttpServletRequest request,
            HttpServletResponse response, Object handler) throws Exception {
        System.out.println("ServletPath" + request.getServletPath());
        AppHelper.setModule("admin");
        AppHelper.setLayout("admin");
        return true;
    }

And my view page:

In layout:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="<c:url value="/resources/css/main.css" />" rel="stylesheet">
<title>Welcome to web</title>
</head>
<body>
    <div class="wrapper">
        <div class="main">
            <div class="header"></div>
            <div class="content">
                <div class="content-left">
                    <jsp:include page="<%=helper.AppHelper.getPage() %>"></jsp:include>
                </div>
                <div class="content-right"></div>
            </div>
            <div class="footer"></div>
        </div>
    </div>
</body>
</html>

Placeholder page:

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<h1>${message }</h1>
<h2>${welcome }</h2>
<c:forEach items="${batches }" var="batch">  
    ${batch.id } - ${batch.name }
</c:forEach>

Here directory struct:

- src\main\webapp\WEB-INF\pages
    - admin
        - index
            - index.jsp
            - setting.jsp
        - product
            - index.jsp
            - detail.jsp
        - other
            ...
    - default
        - index
            - index.jsp
            - contact.jsp
        - product
            ...
    - layout
        admin.jsp
        main.jsp

Upvotes: 1

Ralph
Ralph

Reputation: 120831

For switching the css file an you could use the Spring Theme Resolver. And you can use the same mechanism to change some small parts of your html (like the div classes) 

<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<html>
   <head>
       <style href="<spring:theme code='styleSheet'/>" />          
   </head>
   <body>
       ...
       <div class="<spring:theme code='contentClass'/>">
           <h1>${message }</h1>
       </div>
       ...
   </body>
</html>

(But I would recommend to use the same html with same classes and just switch the css).

Do not forget to setup the theme resolver!

@See Spring Reference: Chapter Using themes

Upvotes: 1

Related Questions