Tabs layout开发应用
1.首页(portal)tabs.jsp代码:
<%@ page language="java" %>
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<tiles:insert definition="examples.tabs.page" flush="true" />
2.组建配置文件:tiles-examples-defs.xml
<!-- ======================================================= -->
<!-- Tabs test page and definitions -->
<!-- ======================================================= -->
<!-- tabs page -->
<definition name="examples.tabs.page" extends="examples.masterPage">
<put name="title" value="Tiles 1.1 Tabs layout example" />
<put name="body" value="examples.tabs.body" />
</definition>
<!-- body using tabs 下面是我们这个例子的主要代码-->
<definition name="examples.tabs.body" path="/layouts/tabsLayout.jsp" >
<put name="selectedIndex" value="0" />
<put name="parameterName" value="selected" />
<putList name="tabList" >
<item value="Doc Home" link="/index.jsp" />
<item value="Quick overview" link="/test/quickOverview.do" />
<!-- <item value="Tutorial" link="/doc/tutorial.jsp" /> -->
<item value="Examples Home" link="/examples/index.jsp" />
<item value="Tutorial Home" link="/tutorial/index.do" />
<item value="Login" link="/examples/tiles/portal/login.jsp" />
<item value="Messages" link="/examples/tiles/portal/messages.jsp" />
<item value="NewsFeed" link="/examples/tiles/portal/newsFeed.jsp" />
<item value="Stocks" link="/examples/tiles/portal/stocks.jsp" />
<item value="WhatsNew" link="/examples/tiles/portal/whatsNew.jsp" />
</putList>
</definition>
<!-- ======================================================= -->
<!-- Master layout -->
<!-- ======================================================= -->
<!-- Master layout and default tiles used by all pages -->
<definition name="examples.masterPage" path="/layouts/classicLayout.jsp">
<put name="title" value="Tiles 1.1 Examples" />
<put name="header" value="/examples/tiles/header.jsp" />
<put name="menu" value="examples.menu.bar" />
<put name="footer" value="/examples/tiles/footer.jsp" />
<put name="body" value="/examples/tiles/body.jsp" />
</definition>
<put name="menu" value="examples.menu.bar" />插入了examples.menu.bar 菜单组建,详细请参考我的构建菜单的文章。
3.首页全局布局代码:classicLayout.jsp
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<%-- Layout Tiles This layout create a html page with <header> and <body> tags. It rendera header, left menu, body and footer tile.
@param title String use in page title
@param header Header tile (jsp url or definition name)
@param menu Menu
@param body Body
@param footer Footer
--%>
<HTML>
<HEAD>
<link rel=stylesheet href="<%=request.getContextPath()%>/layouts/stylesheet.css" type="text/css">
<title><tiles:getAsString name="title"/></title>
</HEAD>
<body bgcolor="#ffffff" text="#000000" link="#023264" alink="#023264" vlink="#023264">
<table border="0" width="100%" cellspacing="5">
<tr><td colspan="2"><tiles:insert attribute="header" /></td></tr>
<tr>
<td width="140" valign="top"><tiles:insert attribute='menu'/></td>
<td valign="top" align="left"><tiles:insert attribute='body' /></td>
</tr>
<tr><td colspan="2"><tiles:insert attribute="footer" /></td></tr>
</table>
</body>
</html>
4. Tabs layout布局代码:/layouts/tabsLayout.jsp
该布局需要一下参数:
l tabList:
l selectedIndex:我们选择的tab参数
l parameterName:实现此功能全在此参数
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<%-- Tabs Layout .This layout allows to render several tiles in a tabs fashion.
@param tabList A list of available tabs. We use MenuItem to carry data (name, body, icon, ...)
@param selectedIndex Index of default selected tab
@param parameterName Name of parameter carrying selected info in http request.
--%>
<%-- 引入组件中的参数--%>
<tiles:useAttribute name="parameterName" classname="java.lang.String" />
<tiles:useAttribute id="selectedIndexStr" name="selectedIndex" ignore="true"
classname="java.lang.String" />
<tiles:useAttribute name="tabList" classname="java.util.List" />
<%
String selectedColor="#98ABC7";
String notSelectedColor="#C0C0C0";
int index = 0; // Loop index
int selectedIndex = 0; //选择的tab参数,默认为第一个
// 获得用户点击的tab参数,若是第一次打开该页,因parameterName=” selected”,所以忽略该段代码。
try {
selectedIndex = Integer.parseInt(selectedIndexStr);
selectedIndex = Integer.parseInt(request.getParameter( parameterName ));
}
catch( java.lang.NumberFormatException ex )
{ // do nothing}
// Check selectedIndex bounds
if( selectedIndex < 0 || selectedIndex >= tabList.size() ) selectedIndex = 0;
String selectedBody
= ((org.apache.struts.tiles.beans.MenuItem)tabList.get(selectedIndex)).getLink(); // Selected body
%>
<table border="0" cellspacing="0" cellpadding="0">
<%-- Draw tabs ,也就是菜单,使动态形成的--%>
<tr><td width="10"> </td>
<td><table border="0" cellspacing="0" cellpadding="5">
<tr>
<logic:iterate id="tab" name="tabList" type="org.apache.struts.tiles.beans.MenuItem" >
<% // compute href
String href = request.getRequestURI() + "?"+parameterName + "=" + index;
// Don't add request URI prefix , but let the client compute the original URL, This allows to use a Struts action as page URL, and perform a forward.Bug reported by Don Peterkofsky
//String href = "" + "?"+parameterName + "=" + index;
String color = notSelectedColor;
if( index == selectedIndex )
{
selectedBody = tab.getLink();
color = selectedColor;
} // enf if
index++;
%>
<td bgcolor="<%=color%>"><a href="<%=href%>" ><%=tab.getValue()%></a></td>
<td width="1" ></td>
</logic:iterate>
</tr>
</table>
</td>
<td width="10" > </td>
</tr>
<tr><td height="5" bgcolor="<%=selectedColor%>" colspan="3" > </td></tr>
<%-- Draw body --%>
<tr>
<td width="10" bgcolor="<%=selectedColor%>"> </td>
<td><tiles:insert name="<%=selectedBody%>" flush="true" /></td>
<td width="10" bgcolor="<%=selectedColor%>"> </td>
</tr>
<tr><td height="5" bgcolor="<%=selectedColor%>" colspan="3" > </td></tr>
</table>
问题1: <a href="<%=href%>" ><%=tab.getValue()%></a>为什么用tab.Value不行。
5.效果图: