將JSP scriptlet轉換成Adobe Slightly？

我在JSP adobe Cq5中使用了以下scriptlet，現在正在稍微遷移到Adobe。有下面的代碼，這將在點擊錨鏈接打開一個新窗口，相同的功能必須把它寫在slightly..can你請幫我在這裏將JSP scriptlet轉換成Adobe Slightly？

------------------ if(!properties.get("buttonlabel","").equals("")){ 
     String targetUrl ="#"; 
     targetUrl = properties.get("buttonurl","#"); 
       if(targetUrl.startsWith("/content")){ 
        targetUrl = targetUrl+".html"; 
       } 
    String target = "_self"; 

    if(currentNode.hasProperty("openWindow")){ 
       target = "_blank"; 
      } 



%> 
<!-- 
<div class="fcdetails-button-holder"> 
         <a href='<%=targetUrl%>' target ='<%=target%>' name='<%=properties.get("buttonlabel","Title")%> button' id="wp-ctoa_button" class="button" role="button"><%=properties.get("buttonlabel","Title")%></a> 
        </div> 
--> 

    <div class="fcdetails-button-holder"> 
    <button type="button" id="wp-ctoa_button" class="button" onclick="redirect()"><%=properties.get("buttonlabel","Title")%></button> 
    </div> 
    <script type="text/javascript"> 
     function redirect() 
     { 
      var url = "<%=targetUrl%>"; 
      window.open(url,"<%=target%>"); 
     } 
    </script>

來源

2016-03-07 TP_JAVA

有並排this小抄側，將使轉換變得容易很多。

來源

2016-03-08 04:43:46 SubSul

關於視覺上的很酷的事情是關注於改善組件的「模板性」 - 以及將邏輯關注點與表示分離。但是，JSP也可以完成所有這些 - 只是AEM中的示例顯示瞭如何對所有代碼進行編碼的最差示例。

返工的JSP示例：

<c:if test="${not empty properties.buttonLabel}"> 
    <div class="fcdetails-button-holder"> 
    <button type="button" id="wp-ctoa_button" onclick="redirect()"> 
     ${empty properties.buttonLabel ? 'Title' : properties.buttonLabel} 
    </button> 
    </div> 
    <script type="text/javascript"> 
    function redirect() { 
     var url = '${properties.buttonUrl}' || '#'; 
     if (url.match(/^\/content\//) url += '.html'; 
     window.open(url, "${empty properties.openWindow ? '_self' : '_blank'}"); 
    } 
    </script> 
</c:if>

現在JSP看起來並不比悅目例子複雜得多。

來源

2016-03-08 16:43:06

將邏輯移入Java或服務器端JavaScript中，以使Sightly模板保持清潔和無邏輯。在這裏，我們使用data-sly-use塊將模板與Java bean綁定，並將其保存到button對象中，以便在整個模板中重用。您唯一需要處理的其他事情是腳本標記中的上下文，以便確定適用的XSS保護類型。

<sly data-sly-use.button="com.company.project.components.Button" data-sly-test="${button.label}"> 
    <div class="fcdetails-button-holder"> 
     <button type="button" id="wp-ctoa_button" class="button" onclick="redirect()" data-sly-text="${button.label}"></button> 
    </div> 
    <script type="text/javascript"> 
     function redirect() 
     { 
      var url = "${button.targetUrl @ context='scriptString'}"; 
      window.open(url, "${button.target @ context='scriptString'}"); 
     } 
    </script> 
</sly>

下面是擴展WCMUsePojo類的Java bean示例。您還可以查看Sling模型。

public class Button extends WCMUsePojo { 

    private String label; 
    private String target; 
    private String targetUrl; 

    @Override 
    public void activate() throws Exception { 
     ValueMap properties = getProperties(); 

     label = properties.get("buttonlabel", String.class); 
     target = properties.get("openWindow", false) ? "_blank" : "_self"; 
     targetUrl = properties.get("buttonurl", "#"); 

     if (targetUrl.startsWith("/content")) { 
      targetUrl += ".html"; 
     } 
    } 

    public String getLabel() { 
     return label; 
    } 

    public String getTargetUrl() { 
     return targetUrl; 
    } 

    public String getTarget() { 
     return target; 
    } 
}

來源

2016-03-11 16:13:58 nateyolles

將JSP scriptlet轉換成Adobe Slightly？

回答

相關問題