如何在AEM 6.1中使用ssp转换jsp代码到html？

时间：2016-05-04 11:21:43

标签： javascript html jsp aem sightly

我想在AEM中使用ssp修改jsp代码到html。这是jsp scriptlet和 pageContext.setAttribute（＆＃34; coltype＆＃34;，xssAPI.filterHTML（properties.get（＆＃34; coltype＆＃34） ;，＆＃34;＆＃34;）））; - ＆gt;这段代码从对话框获取值并存储到jsp中。同样如何在html中使用明智的概念。

<jsp:directive.include file="/libs/foundation/global.jsp"/>
<cq:includeClientLib categories="bootstrap" />
<jsp:directive.page session="false" />

<!-- <%=properties.get("coltype","")%> -->

<jsp:scriptlet>
    pageContext.setAttribute("coltype", xssAPI.filterHTML(properties.get("coltype","")));
</jsp:scriptlet>

<c:if test="${empty coltype}">
     Responsive Grid and Column Control Component
</c:if>

<c:if test="${not empty coltype}">

<c:set var = "column" value = "${properties.coltype}" />
<c:set var = "color" value = "${properties.color}" />
<div class="row">
    <c:choose>
        <c:when test="${coltype eq '8-4-col'}">
            <div class="col-sm-8 ${color}" ><cq:include path="col-8-4-1" resourceType="/libs/foundation/components/parsys" /></div>
            <div class="col-sm-4 ${color}"><cq:include path="col-8-4-2" resourceType="/libs/foundation/components/parsys" /></div>
        </c:when>
        <c:when test="${coltype eq '4-8-col'}">
            <div class="col-sm-4 ${color}"><cq:include path="col-4-8-1" resourceType="/libs/foundation/components/parsys" /></div>
            <div class="col-sm-8 ${color}"><cq:include path="col-4-8-2" resourceType="/libs/foundation/components/parsys" /></div>
        </c:when>
        <c:when test="${coltype eq '4-4-4-col'}">
            <div class="col-sm-4 ${color}"><cq:include path="col-4-4-4-1" resourceType="/libs/foundation/components/parsys" /></div>
            <div class="col-sm-4 ${color}"><cq:include path="col-4-4-4-2" resourceType="/libs/foundation/components/parsys" /></div>
            <div class="col-sm-4 ${color}"><cq:include path="col-4-4-4-3" resourceType="/libs/foundation/components/parsys" /></div>
        </c:when>
        <c:when test="${coltype eq '6-6-col'}">
            <div class="col-sm-6 ${color}"><cq:include path="col-6-6-1" resourceType="/libs/foundation/components/parsys" /></div>
            <div class="col-sm-6 ${color}"><cq:include path="col-6-6-2" resourceType="/libs/foundation/components/parsys" /></div>
        </c:when>
        <c:when test="${coltype eq '3-3-3-3-col'}">
            <div class="col-sm-3  ${color}"><cq:include path="col-3-3-3-3-1" resourceType="/libs/foundation/components/parsys" /></div>
            <div class="col-sm-3  ${color}"><cq:include path="col-3-3-3-3-2" resourceType="/libs/foundation/components/parsys" /></div>
            <div class="col-sm-3  ${color}"><cq:include path="col-3-3-3-3-3" resourceType="/libs/foundation/components/parsys" /></div>
            <div class="col-sm-3  ${color}"><cq:include path="col-3-3-3-3-4" resourceType="/libs/foundation/components/parsys" /></div>
        </c:when>
        <c:when test="${coltype eq '2-2-2-2-2-2-col'}">
            <div class="col-xs-6 col-sm-4 col-md-2 ${color}"><cq:include path="col-2-2-2-2-2-2-1" resourceType="/libs/foundation/components/parsys" /></div>
            <div class="col-xs-6 col-sm-4 col-md-2 ${color}"><cq:include path="col-2-2-2-2-2-2-2" resourceType="/libs/foundation/components/parsys" /></div>
            <div class="col-xs-6 col-sm-4 col-md-2 ${color}"><cq:include path="col-2-2-2-2-2-2-3" resourceType="/libs/foundation/components/parsys" /></div>
            <div class="col-xs-6 col-sm-4 col-md-2 ${color}"><cq:include path="col-2-2-2-2-2-2-4" resourceType="/libs/foundation/components/parsys" /></div>
            <div class="col-xs-6 col-sm-4 col-md-2 ${color}"><cq:include path="col-2-2-2-2-2-2-5" resourceType="/libs/foundation/components/parsys" /></div>
            <div class="col-xs-6 col-sm-4 col-md-2 ${color}"><cq:include path="col-2-2-2-2-2-2-6" resourceType="/libs/foundation/components/parsys" /></div>
        </c:when>
        <c:when test="${coltype eq '3-9-col'}">
            <div class="col-sm-3  ${color}"><cq:include path="col-3-9-1" resourceType="/libs/foundation/components/parsys" /></div>
            <div class="col-sm-9  ${color}"><cq:include path="col-3-9-2" resourceType="/libs/foundation/components/parsys" /></div>
        </c:when>
        <c:when test="${coltype eq '9-3-col'}">
            <div class="col-sm-9  ${color}"><cq:include path="col-9-3-1" resourceType="/libs/foundation/components/parsys" /></div>
            <div class="col-sm-3  ${color}"><cq:include path="col-9-3-2" resourceType="/libs/foundation/components/parsys" /></div>
        </c:when>
        <c:when test="${coltype eq '3-3-6-col'}">
            <div class=" col-sm-3 ${color}"><cq:include path="col-3-3-6-1" resourceType="/libs/foundation/components/parsys" /></div>
            <div class=" col-sm-3 ${color}"><cq:include path="col-3-3-6-2" resourceType="/libs/foundation/components/parsys" /></div>
            <div class="col-sm-6 ${color}"><cq:include path="col-3-3-6-3" resourceType="/libs/foundation/components/parsys" /></div>
        </c:when>
        <c:when test="${coltype eq '6-3-3-col'}">
            <div class="col-sm-6  ${color}"><cq:include path="col-6-3-3-1" resourceType="/libs/foundation/components/parsys" /></div>
            <div class="col-sm-3  ${color}"><cq:include path="col-6-3-3-2" resourceType="/libs/foundation/components/parsys" /></div>
            <div class="col-sm-3  ${color}"><cq:include path="col-6-3-3-3" resourceType="/libs/foundation/components/parsys" /></div>
        </c:when>
        <c:when test="${coltype eq '6-2-2-2-col'}">
            <div class="col-sm-6  ${color}"><cq:include path="col-6-2-2-2-1" resourceType="/libs/foundation/components/parsys" /></div>
            <div class="col-sm-2  ${color}"><cq:include path="col-6-2-2-2-2" resourceType="/libs/foundation/components/parsys" /></div>
            <div class="col-sm-2  ${color}"><cq:include path="col-6-2-2-2-3" resourceType="/libs/foundation/components/parsys" /></div>
            <div class="col-sm-2  ${color}"><cq:include path="col-6-2-2-2-4" resourceType="/libs/foundation/components/parsys" /></div>
        </c:when>
        <c:when test="${coltype eq '3-6-3-col'}">
            <div class="col-sm-3 ${color}"><cq:include path="col-3-6-3-1" resourceType="/libs/foundation/components/parsys" /></div>
            <div class="col-sm-6 ${color}"><cq:include path="col-3-6-3-2" resourceType="/libs/foundation/components/parsys" /></div>
            <div class="col-sm-3 ${color}"><cq:include path="col-3-6-3-3" resourceType="/libs/foundation/components/parsys" /></div>
        </c:when>
    </c:choose>
</div>
</c:if>

3 个答案:

答案 0 :(得分：0)

默认提供display context来防止XSS安全问题。大多数情况下，它会自动检测上下文，但您也可以明确指定上下文。

JSP代码将在Sightly中转换为类似的内容。

${properties.coltype @ context='html'}

答案 1 :(得分：0)

看一下JavaScript Use API： https://docs.adobe.com/docs/en/aem/6-1/develop/sightly/use-api-in-javascript.html#Passing%20Parameters%20to%20a%20Template

有一个关于如何使用服务器端JS Use API访问数据并将其传递给sightly html代码的小例子（还有一个Java Use API可用，或作为替代，Sling Models，但那些可能是为了你的目的有点超重。

答案 2 :(得分：0)

以下是使用sighlty传递变量的示例代码：

<sly data-sly-test.colomType="${properties.coltype}" />
<sly data-sly-test.color="${properties.color}" />

以上“ columType ”和“颜色”就像一个变量，您可以使用以下变量：

    <sly data-sly-test="${columType== '8-4-col'}">
        <div class="col-sm-8 ${color}"><sly data-sly-resource="${'col-8-4-1' @ resourceType='/libs/foundation/components/parsys'}" /></div>
        <div class="col-sm-4 ${color}"><sly data-sly-resource="${'col-8-4-2' @ resourceType='/libs/foundation/components/parsys'}" /></div>
    </sly>
    <sly data-sly-test="${columType== '4-8-col'}">
        <div class="col-sm-4 ${color}"><sly data-sly-resource="${'col-4-8-1' @ resourceType='/libs/foundation/components/parsys'}" /></div>
        <div class="col-sm-8 ${color}"><sly data-sly-resource="${'col-4-8-2' @ resourceType='/libs/foundation/components/parsys'}" /></div>
    </sly>
相关问题
最新问题