開發沙箱應用程式

在本節中，現在已在初始應用程式節中設定了模板，並在初始內容節中建立了初始頁，可以使用基礎指令碼開發應用程式，包括啟用Communities元件的創作功能。 本節結束時，網站將可正常運作。

使用Foundation頁面指令碼

新增呈現播放頁面範本的元件時建立的預設指令碼，會修改為包含基礎頁面的head.jsp和本機body.jsp。

超級資源類型

第一步是向/apps/an-scf-sandbox/components/playpage節點添加資源超類型屬性，使其繼承超類型的指令碼和屬性。

使用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. 按一下「全部保存」。

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

  • 標準 UI: http://localhost:4502/editor.html/content/an-scf-sandbox/en/play.html

您不僅應該看到標題​社群播放，還應該看到用於編輯頁面內容的UI。

切換側面板時，會顯示「資產/元件」側面板，且視窗足夠寬，可同時顯示側邊內容和頁面內容。

檢視頁面

  • 傳統 UI: http://localhost:4502/cf#/content/an-scf-sandbox/en/play.html

以下是傳統UI中播放頁面的顯示方式，包括搭配內容尋找器(cf):

play-page-view

Communities元件

要啟用Communities元件進行創作，請按照以下說明開始：

為了此沙箱的目的，請從以下​Communities​元件開始（勾選方塊即可啟用）:

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

此外，選擇​常規​元件，如

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

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

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

登陸頁面

在多語言環境中，根頁面會包含指令碼，該指令碼會剖析來自用戶端的請求以判斷偏好的語言。

在這個簡單範例中，根頁面會靜態設定，以重新導向至英文頁面，日後可能開發為具有播放頁面連結的主要登陸頁面。

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

  • 選取頁面資訊圖示

  • 選擇​開啟屬性

  • 在「進階」標籤上

    • 對於重定向條目，瀏覽到​Websites > SCF沙箱站點 > SCF沙箱
    • 按一下​OK

  • 按一下​OK

發佈網站後，瀏覽至發佈執行個體上的根頁面會重新導向至英文頁面。

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

本頁內容