開發沙盒應用程式

在本節中,由於範本已設定在初始應用程式區段中,而初始頁面已設定在初始內容區段中,因此可使用包括啟用使用Communities元件編寫功能的基礎指令碼來開發應用程式。 在本節結束時,網站將可正常運作。

使用Foundation頁指令碼

在新增轉譯播放頁面範本的元件時建立的預設指令碼,會加以修改,以包含基礎頁面的head.jsp和本機body.jsp。

超級資源類型

第一步是向/apps/an-scf-sandbox/components/playpage節點添加資源super type屬性,以便它繼承超類型的指令碼和屬性。

使用CRXDE Lite:

  1. 選擇節點/apps/an-scf-sandbox/components/playpage

  2. 在「屬性」頁籤中,輸入具有以下值的新屬性:

    名稱: sling:resourceSuperType

    類型: String

    值: foundation/components/page

  3. 按一下綠色​+Add​按鈕。

  4. 按一下​保存全部

    page-script

頭部和身體指令碼

  1. 在​CRXDE Lite​瀏覽器窗格中,導覽至/apps/an-scf-sandbox/components/playpage並連按兩下檔案playpage.jsp,以在編輯窗格中開啟它。

    /apps/an-scf-sandbox/components/playpage/playpage.jsp

    <%--
    
      An SCF Sandbox Play Component component.
    
      This is the component which renders content for An SCF Sandbox page.
    
    --%><%
    %><%@include file="/libs/foundation/global.jsp"%><%
    %><%@page session="false" %><%
    %><%
     // TODO add your code here
    %>
    
  2. 請注意開啟/關閉指令碼標籤,請取代" // TODO …" 包含用於 <html>.

    如果超類型為foundation/components/page,則未在此資料夾中定義的任何指令碼都將解析為/apps/foundation/components/page資料夾中的指令碼(如果存在),否則解析為/libs/foundation/components/page資料夾中的指令碼。

    /apps/an-scf-sandbox/components/playpage/playpage.jsp

    <%--
    
        An SCF Sandbox Play Component component: playpage.jsp
    
      This is the component which renders content for An SCF Sandbox page.
    
    --%><%
    %><%@include file="/libs/foundation/global.jsp"%><%
    %><%@page session="false" %>
    <html>
      <cq:include script="head.jsp"/>
      <cq:include script="body.jsp"/>
    </html>
    
  3. 基礎指令碼head.jsp不需要覆蓋,但基礎指令碼body.jsp為空。

    若要設定編寫功能,請以本機指令碼覆蓋body.jsp,並在內文中加入段落系統(parsys):

    1. 導航到 /apps/an-scf-sandbox/components.

    2. 選擇playpage節點。

    3. 按一下右鍵並選擇Create > Create File...

      • 名稱:body.jsp
    4. 按一下​保存全部

    開啟/apps/an-scf-sandbox/components/playpage/body.jsp並貼入下列文字:

    <%--
    
        An SCF Sandbox Play Component component: body.jsp
    
      This is the component which renders content for An SCF Sandbox page.
    
    --%><%
    %><%@include file="/libs/foundation/global.jsp"%><%
    %><%@page session="false" %>
    <body>
        <h2>Community Play</h2>
        <cq:include path="par" resourceType="foundation/components/parsys" />
    </body>
    
  4. 按一下​保存全部

在編輯模式下在瀏覽器中檢視頁面:

您不僅應看到標題​Community Play,還應看到編輯頁面內容的UI。

當兩個側面板都開啟且視窗足夠寬,以便同時顯示側面內容和頁面內容時,就會看到「資產/元件」側面板。

檢視頁面

以下是播放頁面在傳統UI中的顯示方式,包括內容搜尋器(cf):

play-page-view

社區元件

要啟用Communities元件進行編寫,請從以下說明開始:

為此沙盒的目的,請從以下​Communities​元件開始(勾選方塊即可啟用):

  • 評論
  • 論壇
  • 評等
  • 評論
  • 審核摘要 (顯示)
  • 投票

此外,選擇​General​元件,例如

  • 影像
  • 表格
  • 文字
  • 標題(基礎)
注意

為頁面par啟用的元件作為components屬性的值儲存在儲存庫中

/etc/designs/an-scf-sandbox/jcr:content/playpage/par 節點。

登陸頁面

在多語言環境中,根頁面將包含一個指令碼,該指令碼將解析來自客戶端的請求以確定首選語言。

在這個簡單範例中,根頁面會靜態設定為重新導向至英文頁面,未來可能會開發成具有播放頁面連結的主著陸頁面。

將瀏覽器URL變更為根頁面:http://localhost:4502/editor.html/content/an-scf-sandbox.html

  • 選取「頁面資訊」圖示

  • 選擇​開啟屬性

  • 在「高級」頁籤上

    • 對於「重新導向」項目,請瀏覽至「網站​ > SCF沙盒網站 > SCF沙盒
    • 按一下​確定
  • 按一下​確定

發佈網站後,瀏覽至發佈例項的根頁面會重新導向至英文頁面。

使用社區SCF元件前的最後一個步驟是添加客戶端庫資料夾(clientlibs)。… 新增Clienlibs

本頁內容

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free