jspコードをhtmlに変換するにはどうすればAEM 6.1を使用できますか？

Question

jspコードをhtmlに変更して、AEMを目立つようにしたいのですが、ここではjspスクリプトレットとpageContext.setAttribute（ "coltype"、xssAPI.filterHTML（properties.get（ "coltype"、 ""））））; - >このコードは、ダイアログから値を取得して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> 

Answer 1

デフォルトで、XSSのセキュリティの問題を防ぐために、視覚的にはdisplay contextが提供されています。主にコンテキストを自動的に検出しますが、コンテキストを明示的に指定することもできます。

JSPコードは、Sightlyのように変換されます。

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

Answer 2

はJavaScriptを使用API​​を見てみましょう： https://docs.adobe.com/docs/en/aem/6-1/develop/sightly/use-api-in-javascript.html#Passing%20Parameters%20to%20a%20Template

データにアクセスし、サーバ側JS使用API​​を使用して見た目HTMLコードにそれを渡す方法についての小さな例がある（ありましたまた、Java Use APIを使用することもできますし、代わりにSling Modelsを使用することもできますが、目的に合わせて少し太り過ぎかもしれません）。

Answer 3

次こんにちはsighltyを使用して変数を渡すためのサンプルコードです：「columType」と上記

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

「色」変数のようなものです、あなたは以下のようにこれらの変数を使用することができます。

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