社交元件架構 social-component-framework

社交元件架構(SCF)簡化了在伺服器端和用戶端配置、自訂和擴充Communities元件的程式。

該框架的好處：

使用互動式探索製作或發佈例項 社群元件指南.

概觀 overview

在SCF中，元件由SocialComponent POJO、Handlebars JS範本（用於呈現元件）和CSS（用於設定元件樣式）組成。

Handlebars JS範本可擴充模型/檢視JS元件，以處理使用者與用戶端上元件的互動。

如果元件需要支援資料修改，則可寫入SocialComponent API實作，以支援編輯/儲存與傳統Web應用程式中模型/資料物件類似的資料。 此外，可以添加操作（控制器）和操作服務以處理操作請求、執行業務邏輯以及在模型/資料對象上調用API。

SocialComponent API可延伸，以提供用戶端對檢視層或HTTP用戶端所需的資料。

如何為客戶端呈現頁面 how-pages-are-rendered-for-client

元件自訂和擴充功能 component-customization-and-extension

若要自訂或擴充元件，您只會將覆蓋圖和擴充功能寫入/apps目錄，簡化升級至未來版本的程式。

伺服器端架構 server-side-framework

該框架提供API以訪問伺服器上的功能，並支援客戶端與伺服器之間的交互。

Java API java-apis

Java API提供抽象類別和介面，這些類別和介面可輕鬆繼承或子類別。

主要類在 伺服器端自訂 頁面。

瀏覽 儲存資源提供程式概述 了解如何使用UGC。

HTTP API http-api

HTTP API支援為PhoneGap應用程式、原生應用程式及其他整合和綜合應用程式輕鬆自訂和選擇用戶端平台。 此外，HTTP API允許社區站點作為服務運行，而無需客戶端，這樣框架元件可以整合到任何基於技術構建的任何網頁中。

HTTP API -GET要求 http-api-get-requests

架構會針對每個SocialComponent提供HTTP型API端點。 端點的存取方式為使用「.social.json」選取器+擴充功能傳送GET要求至資源。 使用Sling時，系統會將要求傳送至 DefaultSocialGetServlet.

DefaultSocialGetServlet

GET Request

預設GETservlet監聽SocialComponent使用可自訂JSON回應的.social.json請求。

HTTP API -POST要求 http-api-post-requests

除了GET（讀取）操作外，框架還定義了端點模式以啟用元件上的其他操作，包括建立、更新和刪除。 這些端點是HTTP API，可接受輸入並以HTTP狀態代碼或JSON回應物件回應。

該框架端點模式使CUD操作可擴展、可重複使用和可測試。

POST Request

每個SocialComponent操作都有SlingPOST：操作。 每個操作的業務邏輯和維護代碼都包在OperationService中，該OperationService可通過HTTP API或從其他位置作為OSGi服務訪問。 提供了用於動作之前/之後的支援可插拔操作擴展的鈎。

儲存資源提供程式(SRP) storage-resource-provider-srp

若要了解如何處理儲存在 社群內容存放區，請參閱

伺服器端自訂 server-side-customizations

瀏覽 伺服器端自訂 有關在伺服器端自訂Communities元件的業務邏輯和行為的資訊。

Handlebars JS範本語言 handlebars-js-templating-language

新框架中更明顯的變化之一是使用 Handlebars JS 範本語言(HBS)，這是用於伺服器用戶端轉譯的熱門開放原始碼技術。

HBS指令碼簡單、無邏輯、在伺服器和客戶端上編譯、易於覆蓋和定制，並且自然地與客戶端UX綁定，因為HBS支援客戶端呈現。

此架構提供 手把手幫手 在開發SocialComponents時很有用。

在伺服器上，Sling解析GET請求時，會識別將用來回應請求的指令碼。 如果指令碼是HBS範本(.hbs),Sling會將要求委派給Handlebars引擎。 然後，Handlebars引擎將從適當的SocialComponentFactory中取得SocialComponent、建立內容並呈現HTML。

無訪問限制 no-access-restriction

Handlebars(HBS)範本檔案(.hbs)類似於.jsp和.html範本檔案，但它們可用於在用戶端瀏覽器和伺服器上呈現。 因此，請求用戶端範本的用戶端瀏覽器將從伺服器接收.hbs檔案。

這需要Sling搜尋路徑中的所有HBS範本（/libs/或/apps底下的任何.hbs檔案）可由任何使用者從製作或發佈中擷取。

不得禁止HTTP存取.hbs檔案。

添加或包含社區元件 add-or-include-a-communities-component

大多數Communities元件必須 新增 作為Sling可定址資源時。 Communities的一些元件可能是 包含 在範本中作為非現有資源，以允許動態包含和自訂寫入使用者產生內容(UGC)的位置。

無論是哪種情況，元件的 必要的客戶端庫 也必須有。

新增元件

新增元件是指新增資源（元件）例項的程式，例如從元件瀏覽器(sidekick)拖曳至作者編輯模式中的頁面時。

結果會是par節點底下的JCR子節點，即Sling可定址。

包含元件

包括元件是指將參照新增至 「非現有」資源 （無JCR節點），例如使用指令碼語言。

自AEM 6.1起，當元件以動態方式包含而非新增時，即可在製作 設計 模式中編輯元件的屬性。

只能動態加入少數幾個AEM Communities元件。 它們是：

此 社群元件指南 允許切換可包含的元件，使其不會新增至包含中。

使用Handlebars時 範本語言，則會使用 包含協助程式 通過指定其resourceType:

{{include this.id path="comments" resourceType="social/commons/components/hbs/comments"}}

使用JSP時，則會使用標籤包含資源 cq:include:

<cq:include path="votes"
 resourceType="social/tally/components/voting" />

Handlebars Helpers handlebars-helpers

請參閱 SCF Handlebars幫助器 以獲取SCF中提供的自定義幫助程式的清單和說明。

用戶端架構 client-side-framework

模型檢視Javascript架構 model-view-javascript-framework

此架構包含 骨幹.js，此元件為模型檢視的JavaScript架構，以促進開發豐富的互動式元件。 物件導向的性質支援可擴展/可重複使用的框架。 借由HTTP API可簡化用戶端與伺服器之間的通訊。

該框架利用伺服器端Handlebars模板來呈現客戶端的元件。 這些模型以HTTP API產生的JSON回應為基礎。 視圖將自身綁定到由Handlebars模板生成的HTML，並提供交互性。

CSS慣例 css-conventions

以下是定義和使用CSS類的建議慣例：

用戶端自訂 client-side-customizations

若要自訂用戶端上Communities元件的外觀和行為，請參閱 用戶端自訂，其中包含下列資訊：

功能和元件要點 feature-and-component-essentials

開發人員的基本資訊如 功能和元件要點 區段。

如需其他開發人員資訊，請參閱 編碼准則 區段。

疑難排解 troubleshooting

常見問題和已知問題於 疑難排解 區段。