Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add the css files in a separate html file in spring using tiles

I wanted to create the seperate css files and wanted to use it, Instead of duplicating the css file again.

Using this method i can reuse the cssfilecommon.html by calling it and also if i want some other css required i can add it in the seperate page and call only for that page

<tiles:insertAttribute name="cssfilecommon" /> - common css file

<tiles:insertAttribute name="pagespecific" /> - some other css file

--

can we do this, please let me know if any one tried..

layout file

<!DOCTYPE html>
<html xmlns:tiles="http://www.thymeleaf.org">
<head>
         **<tiles:insertAttribute name="cssfile" />**
</head> 
<body>  
        <div tiles:include="header">Header Block</div>      
        <div tiles:substituteby="body">Body Block</div>
        <div tiles:substituteby="footer">Footer Block</div> 
</body>
</html>

titles-def.xml file

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE tiles-definitions PUBLIC
       "-//Apache Software Foundation//DTD Tiles Configuration 2.0//EN"
       "http://struts.apache.org/dtds/tiles-config_2_0.dtd">

<tiles-definitions>
 <definition name="home" template="basiclayout/layout" >
          <put-attribute name="cssfilecommon" value="bout/cssfilecommon"/>
          <put-attribute name="header" value="bout/header"/>
          <put-attribute name="menu" value="bout/Menu"/>
          <put-attribute name="footer" value="bout/footer"/>

</definition>

-- cssfilecommon.html

<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link href="css/jquery-ui-1.10.3.custom.css" th:href="@{css/jquery-ui-1.10.3.custom.css}" rel="stylesheet" type="text/css" />
<link href="css/ui.jqgrid.css" th:href="@{css/ui.jsd.css}" rel="stylesheet" type="text/css"/>
like image 863
PCA Avatar asked Oct 01 '22 12:10

PCA


2 Answers

Yes, with plain tiles you could do this:

Layout file:

<head>
         <tiles:insertAttribute name="cssfilecommon" />
         <tiles:insertAttribute name="pagespecific" ignore="true" />
</head>

titles-def.xml file:

<definition name="home" template="basiclayout/layout" >
    <put-attribute name="cssfilecommon" value="bout/cssfilecommon"/>
    <put-attribute name="pagespecific" value="bout/pagespecific"/>
    ...
</definition>

Note the usage of ignore attribute:

If this attribute is set to true, and the attribute specified by the name does not exist, simply return without writing anything. The default value is false, which will cause a runtime exception to be thrown.

But, as I see you are using Thymeleaf, which probably doesn't support it yet: #17

like image 82
Slava Semushin Avatar answered Oct 05 '22 12:10

Slava Semushin


A other smart suggestion, you can declare in your tiles-def.xml an list and in this list you can simple push all your css files you need in your site, just like this:

<put-list-attribute name="jsList" cascade="true">
    <add-attribute value="/Project/basic/css/basic.css" />
    <add-attribute value="/Project/case2/css/example2.js" />
    <add-attribute value="/Project/special/css/example3.css" />
</put-list-attribute>

after this in your jsp file you can easily iterate over your list with the following (You need the jstl taglib):

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
...
<tiles:importAttribute name="cssList"/>
...
<c:forEach items="${cssList}" var="cs"> 
    <link href="${cs}" rel="stylesheet" type="text/css" media="screen">
</c:forEach>

i know it's like the same what @Slava Semushin say but i would that you know you can work with lists.

For example if you work with jqxwidgets you need to bind special javascripts for the elements and if you don't need all the javascript for each site, you can handle this case, with this suggestion.

like image 37
Manu Zi Avatar answered Oct 05 '22 11:10

Manu Zi