将JSP scriptlet转换为Adobe Sightly / HTL？

Question

我在JSP Adob​​e Cq5中具有以下脚本，现在正在迁移到Adobe Sightly / HTL。 具有以下代码，在单击锚链接时将打开一个新窗口，必须立即编写相同的功能。 您能在这里帮助我吗？

---

     <% 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>

Answer 1

并排放置该备忘单，将使转换到视觉上变得容易得多。

Answer 2

显然，很酷的事情是着重于提高组件的“模板性”-以及将逻辑关注与表示分离。 但是，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看上去并不比看上去漂亮的示例复杂得多。

Answer 3

将逻辑移到Java或服务器端JavaScript中，以使Sightly模板干净无逻辑。 在这里，我们使用data-sly-use块将模板与Java bean绑定在一起，并将其保存到button对象中，以在整个模板中重复使用。 您需要处理的唯一另一件事是script标记中的上下文，以便识别Sightly应该应用的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;
    }
}