将 JSP scriptlet 转换为 Adobe Sightly/HTL？答案

【问题标题】：Converting JSP scriptlet to Adobe Sightly/HTL?将 JSP scriptlet 转换为 Adobe Sightly/HTL？
【发布时间】：2016-03-07 19:26:06
【问题描述】：

我在 JSP adobe Cq5 中有以下 scriptlet，现在正在迁移到 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>

【问题讨论】：

标签： jsp aem

【解决方案1】：

将this 备忘单并排放置，将使转换成视觉效果更容易。

【讨论】：

【解决方案2】：

sightly 最酷的一点是专注于改进组件的“模板性”——以及将逻辑关注点与表示分离。但是，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 看起来并不比这个漂亮的例子复杂多少。

【讨论】：

【解决方案3】：

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

【讨论】：