Tiles Example in Struts

Here I am explaining how to use Tiles in Struts .

tiles-defs.xml

<?xml version="1.0"?>
<!DOCTYPE struts-config PUBLIC
"-//Apache Software Foundation//DTD Tiles Configuration 1.1//EN"
"http://jakarta.apache.org/struts/dtds/tiles-config_1_1.dtd">

<tiles-definitions>
<!-- Main Layout -->
<definition name=".mainLayout" path="/WEB-INF/layout/layout.jsp">
<put name="header" value="/WEB-INF/layout/header.jsp"/>
<put name="content" value="/WEB-INF/layout/center.jsp"/>
<put name="navigation" value="/WEB-INF/layout/navigation.jsp"/>
</definition>
<definition name=".success" extends=".mainLayout">
<put name="navigation" value="/WEB-INF/layout/tab1.jsp"/>
<put name="content" type="page" value="/WEB-INF/layout/tab1display.jsp"/>
</definition>
<definition name=".tab1" extends=".mainLayout">
<put name="navigation" value="/WEB-INF/layout/tab1.jsp"/>
<put name="content" type="page" value="/WEB-INF/layout/tab1display.jsp"/>
</definition>
<definition name=".tab2" extends=".mainLayout">
<put name="navigation" value="/WEB-INF/layout/tab2.jsp"/>
<put name="content" type="page" value="/WEB-INF/layout/tab2display.jsp"/>
</definition>

</tiles-definitions>

struts-config.xml

<struts-config>

<plug-in className="org.apache.struts.tiles.TilesPlugin">
<set-property property="definitions-config"
value="/WEB-INF/tiles-defs.xml"/>
</plug-in>
</struts-config>

tilessuccess.jsp

<%@ taglib prefix="t" uri="/WEB-INF/struts-tiles.tld" %>
<t:insert definition=".success" />

/WEB-INF/layout/layout.jsp

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ taglib prefix="t" uri="/WEB-INF/struts-tiles.tld" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="./css/main.css">
</head>

<body>

<div id="header">
<t:insert attribute="header" flush="false" ignore="false" />
</div>

<div id="left">
<t:insert attribute="navigation" flush="false" ignore="false" />
</div>

<div id="center">
<t:insert attribute="content" flush="false" ignore="false" />
</div>

</body>
</html>

/WEB-INF/layout/header.jsp

<html>
<body> <br>
<a href="tab1.jsp" ><img src="./images/Tab1.GIF"/></a>
<a href="tab2.jsp"><img src="./images/Tab2.GIF"/></a>

</body>
</html>

/WEB-INF/layout/center.jsp

This is Center

/WEB-INF/layout/navigation.jsp

<div class="jive-sidebar">

</div>
<div class="jive-sidebar">
This is Left Tile
</div>

(outside)
tab1.jsp

<%@ taglib prefix="t" uri="/WEB-INF/struts-tiles.tld" %>
<t:insert definition=".tab1" />

tab2.jsp

<%@ taglib prefix="t" uri="/WEB-INF/struts-tiles.tld" %>
<t:insert definition=".tab2" />

/WEB-INF/layout/tab1.jsp

<h2>Tab1</h2>

/WEB-INF/layout/tab2.jsp

<h2>Tab2</h2>

/WEB-INF/layout/tab1display.jsp

<h2>This is Tab1 Content

/WEB-INF/layout/tab2display.jsp

<h2>This is Tab2 Content

web.xml

<web-app>
<servlet>
<servlet-name>action</servlet-name>
<servlet-class>org.apache.struts.action.ActionServlet</servlet-class>
<init-param>
<param-name>config</param-name>
<param-value>/WEB-INF/struts-config.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>

<!-- Action Servlet Mapping -->
<servlet-mapping>
<servlet-name>action</servlet-name>
<url-pattern>*.do</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>tilessuccess.jsp</welcome-file>
</welcome-file-list>

<!-- Struts Tag Library Descriptors -->
<taglib>
<taglib-uri>/WEB-INF/struts-bean.tld</taglib-uri>
<taglib-location>/WEB-INF/struts-bean.tld</taglib-location>
</taglib>
<taglib>
<taglib-uri>/WEB-INF/struts-html.tld</taglib-uri>
<taglib-location>/WEB-INF/struts-html.tld</taglib-location>
</taglib>
<taglib>
<taglib-uri>/WEB-INF/struts-logic.tld</taglib-uri>
<taglib-location>/WEB-INF/struts-logic.tld</taglib-location>
</taglib>
<taglib>
<taglib-uri>/WEB-INF/struts-tiles.tld</taglib-uri>
<taglib-location>/WEB-INF/struts-tiles.tld</taglib-location>
</taglib>

</web-app>

main.css

body
{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
background-color: #fff;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-image : url("../images/page-background.gif");
background-repeat : repeat-y;
}

/* header */
#header {
width : 100%;
height : 62px;
border : 0px;
background-image : url("../images/header-background.gif");
background-repeat : repeat-x;
background-color : #369;
font-size : 12pt;
color : white;
padding-left : 2em;
text-align : left;
}
#header LI {
display : inline;
padding : 3px;
margin : 0px;
}
#header LI {
font-family : verdana;
font-size : 8pt;
font-weight : bold;
}
#header A {
color : white;
text-decoration : none;
padding : 3px 5px 3px 5px;
}
#header A:hover {
color : #fff;
text-decoration : underline;
}
#header a.active {
color : #fff;
text-decoration : underline;
}

/* left */

#left {
padding : 0px 5px 5px 5px;
}
#left ul {
margin: 0; /*removes indent IE and Opera*/
padding: 0 0 0 0; /*removes indent Mozilla and NN7*/
list-style-type: none; /*turns off display of bullet*/
font-family: verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
}
#left li {
margin: 0 15px 2px 0px;
width : 140px;
}
#left a {
display: block;
padding: 2px 2px 2px 10px;
border: 1px solid #fff;
width: 140px;
-moz-border-radius : 3px;
background-color: #fff;
}

#left a.active {
border: 1px solid #369;
background-color: #CBDDEE;
color: #333;
}
#left a:hover {
/*
border: 1px solid #369;
background-color : #CBDDEE;
color: #333;
*/
border : 1px solid #963;
background-color : #ffc;
}
#left .currentlink a,
#left .currentlink a:link,
#left .currentlink a:visited,
#left .currentlink a:hover
{
border: 1px solid #369;
background-color: #CBDDEE;
color: #333;
}

#left .category {
padding-top : 1.5em;
padding-bottom : 0.5em;
font-weight : bold;
}
#left .subitems LI {
margin-left : 10px;
width : 130px;
}
#left .subitems LI A {
margin-left : 10px;
padding : 2px 2px 2px 5px;
width : 120px;
}

/* general anchor colors */
a:link, a:visited { color:#333333; text-decoration:underline; }
a:hover { color:#6C99FF; text-decoration:underline; }

/* center */

#center {
top: 0;
margin-left: 200px;
margin-right: 230px;
height: 400px;
min-height: 400px;
}

*>#center {
height: auto;
}
#center_more {
top: 0;
margin-left: 200px;
margin-right: 10px;
height: 400px;
min-height: 400px;
text-align: left;
}

*>#center_more {
height: auto;
}
#center ul li {
margin-left: 0;
margin-bottom: 5px;
padding-left: 0;
font-size: .75em;
}

#center h1 {
font-size:0.95em;
font-weight:bold;
}

#center h2 {
font-size:0.85em;
font-weight: bold;
}

#center h3 {
font-size: 0.8em;
}

#center p {
font-size:0.75em;
}

#center table {
font-size: 0.75em;
}

#center table td.course {
background-color: #FFFFCC;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-top-color: #999999;
border-right-color: #999999;
border-bottom-color: #999999;
border-left-color: #999999;
}

#center_more h1 {
font-size:0.95em;
font-weight:bold;
}

#center_more h2 {
font-size:0.85em;
font-weight:bold;
}

#center_more h3 {
font-size: 0.8em;
}

#center_more p {
font-size:0.75em;
}

#center_more table {
font-size: 0.75em;
}

#center_more table td.course {
background-color: #FFFFCC;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-top-color: #999999;
border-right-color: #999999;
border-bottom-color: #999999;
border-left-color: #999999;
}

#center_more table {
font-size: 0.75em;
}

#navTop li:hover ul {
left: 0;
top: 100%;
}

#navTop li:hover ul, #navTop li.over ul {
left: 0;
top: 100%;
}

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)