Monday, November 28, 2011

自訂標籤

可以把JSP會共用到的邏輯判斷、特殊畫面呈現,拉出來做一個 tag
比方說,在資料新、刪、修,成功後,要加一個顯示訊息
<!-- 畫面新增成功的訊息 -->
<c:if test="${not empty createMessage }">
    <div id="createFoo" class="highlight-css" style="padding:0 0.7em;">
         <p>
           <span class="icon-css"
                 style="float:left; margin-right:5px;"></span>
                <fmt:message key="${ createMessage }"/>
        </p>
    </div>
</c:if>
<script type="text/javascript">
    //畫面延遲2秒後,fadeOut
    $(function() {
    $("#${createFoo}").delay(2000).fadeOut(2000);
    });
</script> 

<!-- 畫面修改成功的訊息 -->
<c:if test="${not empty modifyMessage }">
    <div id="modifyFoo" class="highlight-css" style="padding:0 0.7em;">
         <p>
           <span class="icon-css"
                 style="float:left; margin-right:5px;"></span>
           <fmt:message key="${ modifyMessage }"/>
        </p>
    </div>
</c:if>
<script type="text/javascript">
  $(function() {
    $("#${modifyFoo}").delay(2000).fadeOut(2000);
    });
</script>

<!-- 畫面刪除成功的訊息 -->
<c:if test="${not empty modifyMessage }">
    <div id="removeFoo" class="highlight-css" style="padding:0 0.7em;">
         <p>
           <span class="icon-css" style="float:left; margin-right:5px;"></span>
           <fmt:message key="${ modifyMessage }"/>
        </p>
    </div>
</c:if>
<script type="text/javascript">
    $(function() {
    $("#${removeFoo}").delay(2000).fadeOut(2000);
    });
</script>
有沒有覺的快瘋了,一直在 do loop   =口 =
那就把這一段拉出來,做tag。

第一步:在 WEB-INF\tags 下面,建立一個,延伸檔名為:tag的檔案
若用eclipse的話,可以選擇新建一個 JSP Tag
 image

第二步用法:
可以將各種格式 ( *日期 )、或CSS樣板、或JS特效,通通放進來
在JSP就只需要單純的引用自訂的標籤
以上面的範列來說,就可以改成這樣:
   1: <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
   2: <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
   3: <%@ attribute name="messageId" required="true" %>  
   4: <%@ attribute name="key" required="false" %>
   5: <!-- 自訂傳進來的參數,required="true"為必要值 -->
   6: <fmt:setBundle basename="message.bundle.path"/>
   7: <c:if test="${not empty key}">
   8:     <div id="${ messageId }" 
   9:             class="highlight-css" 
  10:             style="padding:0 0.7em;">
  11:          <p>
  12:             <span class="icon-css" 
  13:                       style="float:left; margin-right:5px;">
  14:            </span>
  15:            <fmt:message key="${key}"/>
  16:         </p>
  17:     </div>
  18:     <script type="text/javascript">
  19:     <!--//共用的script 效果
  20:     $(function() {
  21:         $("#${messageId}").delay(2000).fadeOut(2000);
  22:     });
  23:     -->
  24:     </script>    
  25: </c:if>

JSP使用:
  <%@ taglib prefix="frog" tagdir="/WEB-INF/tags" %>

<ris:statusMessage messageId="processMessage" key="${message}" />

這樣,有沒有覺得跳出地獄迴圈了~

No comments:

Post a Comment