Appfuse：新增自定義頁面元件

消失的風發表於2015-07-17
APP元件

我之前是做ASP.NET的，碰到被多個頁面都使用的類似元件後，就想著採用ascx（使用者自定義元件）來解決，那做Java我也想用這種方案。

我要做的效果如下：

實現方案：tag方式（自定義標籤）

1. 首先定義自己的tag

 1 <%@ tag body-content="scriptless" pageEncoding="UTF-8"%>
 2 <%@ attribute name="table" required="true"%>
 3 <%@ attribute name="idfield" required="true"%>
 4 <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
 5 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
 6 <c:set var="base" value="${pageContext.request.contextPath}" />
 7 <c:set var="typeList" />
 8 <script src="<c:url value="/scripts/jquery/jquery.1.10.2.min.js" />"></script>
 9 <form method="post">
10     <div id="divRecomment">
11         <fmt:message key="recomment.title" />
12         &nbsp;&nbsp;
13         <select id="recommendAction" name="recommendAction">
14             <c:forEach items="${recommenttype}" var="t">
15                 <option value="${t.key}">${t.value}</option>
16             </c:forEach>
17         <select>
18         &nbsp;&nbsp; <input type="button" onclick="handleRecomment();"
19             value='<fmt:message key="recomment.submit"/>' class="btn btn-primary" />
20     </div>
21 </form>
recommend.tag

2. 使用自定義的標籤

<%@ taglib prefix="t" tagdir="/WEB-INF/tags" %>

<t:recommend table="" idfield=""></t:recommend>

3. recommenttype 的資料來源：使用頁面對應的Controller中的handleRequest

1 HashMap<String,String> recommentType = new HashMap<String,String>();
2         recommentType.put("1", "首頁");  
3         recommentType.put("2", "其他");   
4         request.setAttribute(Constants.RECOMMENT_TYPE, recommentType);
handleRequest

附用到的樣式

1 #divRecomment{
2     margin-left:12px;
3 }
4 #divRecomment select{
5     width:200px;
6     height:38px;
7     border:1px solid #cccccc;
8 }
main.css

 

相關文章