青蛙跳跳: 自訂標籤

可以把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

第二步用法：
可以將各種格式 ( *日期 )、或CSS樣板、或JS特效，通通放進來
在JSP就只需要單純的引用自訂的標籤
以上面的範列來說，就可以改成這樣：

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ attribute name="messageId" required="true" %>  
<%@ attribute name="key" required="false" %>
<!-- 自訂傳進來的參數，required="true"為必要值 -->
<fmt:setBundle basename="message.bundle.path"/>
<c:if test="${not empty key}">
    <div id="${ messageId }" 
            class="highlight-css" 
            style="padding:0 0.7em;">
         <p>
            <span class="icon-css" 
                      style="float:left; margin-right:5px;">
           </span>
           <fmt:message key="${key}"/>
        </p>
    </div>
    <script type="text/javascript">
    <!--//共用的script 效果
    $(function() {
        $("#${messageId}").delay(2000).fadeOut(2000);
    });
    -->
    </script>    
</c:if>

JSP使用：

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

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

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

Monday, November 28, 2011

自訂標籤