社交元件架構

社交元件架構(SCF)可簡化在伺服器端和用戶端上設定、自訂和擴充社群元件的程式。

該框架的優點：

• 功能:80%的使用案例只需少量或完全不需自訂，即可輕鬆整合。
• 可變更外觀:CSS樣式的HTML屬性使用一致。
• 可擴充:元件實施是物件導向的，並且輕鬆處理業務邏輯——易於在伺服器上添加增量業務登錄。
• 彈性:簡單、無邏輯的Javascript範本，可輕鬆覆蓋和自訂。
• 可存取:HTTP API支援從任何用戶端發佈內容，包括行動應用程式。
• 可攜式:整合／嵌入任何以任何技術為基礎的網頁。

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

概覽

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

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

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

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

為客戶端呈現頁面的方式

元件定制和擴展

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

• 針對外觀設定：
  • 只有CSS需要編輯。
• 外觀與感覺：
  • 變更JS範本和CSS。
• 外觀、感覺和UX:
  • 變更JS範本、CSS和擴充／覆寫Javascript。
• 要修改JS模板或GET端點的可用資訊：
  • 延伸SocialComponent。
• 要在操作過程中添加自定義處理，請執行以下操作：
  • 編寫OperationExtension。
• 要添加新的自定義操作，請執行以下操作：
  • 建立新的Sling Post Operation。
  • 視需要使用現有的OperationServices。
  • 視需要新增Javascript程式碼，從用戶端叫用您的作業。

伺服器端架構

此架構提供API來存取伺服器上的功能，並支援用戶端與伺服器之間的互動。

Java API

Java API提供可輕鬆繼承或子分類的抽象類別和介面。

伺服器端自訂頁面中說明了主要類別。

請訪問儲存資源提供方概述以瞭解如何使用UGC。

HTTP API

HTTP API支援PhoneGap應用程式、原生應用程式和其他整合與綜合應用程式的輕鬆自訂和用戶端平台選擇。 此外，HTTP API允許社群網站在沒有用戶端的情況下以服務形式運作，如此架構元件就可整合在任何技術上建立的任何網頁中。

HTTP API - GET Requests

對於每個SocialComponent，架構都提供以HTTP為基礎的API端點。 透過傳送GET要求至具有「.social.json」選擇器+副檔名的資源，即可存取端點。 使用Sling，請求會遞交至DefaultSocialGetServlet。

DefaultSocialGetServlet

1. 將資源(resourceType)傳遞至SocialComponentFactoryManager，並接收能夠選擇代表資源的SocialComponent的SocialComponentFactory。

2. 調用工廠並接收能夠處理資源和請求的SocialComponent。

3. 叫用SocialComponent，處理請求並傳回結果的JSON表示法。

4. 傳回JSON回應給用戶端。

GET Request

預設的GET servlet會監聽SocialComponent以可自訂JSON回應的。social.json請求。

HTTP API - POST請求

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

該框架端點模式使CUD操作具有可擴充性、可重用性和可測試性。

POST Request

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

儲存資源提供程式(SRP)

要瞭解如何處理儲存在社區內容儲存中的UGC，請參閱：

• 儲存資源提供方概述 -簡介和儲存庫使用概述。
• SRP和UGC Essentials - SRP API實用程式方法和示例。
• 使用SRP -編碼准則存取UGC。

伺服器端自訂

有關自定義伺服器端Communities元件的業務邏輯和行為的資訊，請訪問伺服器端自定義。

Handlebars JS範本語言

新架構中更明顯的改變之一，是使用Handlebars JS範本語言(HBS)，這是伺服器——用戶端轉換的常用開放原始碼技術。

HBS指令碼簡單、無邏輯、可在伺服器和用戶端上編譯、易於覆蓋和自訂，而且自然地與用戶端UX系結，因為HBS支援用戶端轉譯。

該框架提供幾個Handlebars helpers，在開發SocialComponents時非常有用。

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

無訪問限制

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

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

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

添加或包含社區元件

Most Communities元件必須是​added​作為Sling可定址資源。 在模板中可以包含​少量的社區元件作為非現有資源，以允許動態地包含和定制用戶生成內容(UGC)的寫入位置。

在這兩種情況下，元件的必要用戶端程式庫也必須存在。

新增元件

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

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

包含元件

包括元件是指在模板中添加對「非現有」資源（無JCR節點）的引用的過程，如使用指令碼語言。

自AEM 6.1起，當元件動態包含而非新增時，就可以在作者*design *mode中編輯元件的屬性。

只能動態包含部分的AEM Communities元件。 它們是：

• 評論
• 評等
• 評論
• 投票

社群元件指南允許將可包含的元件切換為可加入。

使用 Handlebarstemplating語言時，非現有資源會使用include helperby 指定其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

有關SCF中提供的定製幫助的清單和說明，請參見SCF Handlebars Helpers。

客戶端框架

Model-View Javascript Framework

此架構包含Backbone.js的擴充功能，此為模型檢視的JavaScript架構，可協助開發豐富的互動式元件。 物件導向的性質支援一個可擴展／可重用的框架。 借由HTTP API，可簡化用戶端與伺服器間的通訊。

該框架利用伺服器端的Handlebars模板為客戶端渲染元件。 這些模型是以HTTP API產生的JSON回應為基礎。 這些視圖會與Handlebars範本產生的HTML系結，並提供互動功能。

CSS慣例

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

• 使用清楚命名的CSS類別選擇器名稱，並避免使用一般名稱，例如「標題」、「影像」等。
• 定義特定類別選擇器樣式，讓CSS樣式表能與頁面上的其他元素和樣式搭配使用。 例如：.social-forum .topic-list .li { color: blue; }
• 將CSS類別與JavaScript所驅動之UX的CSS類別分開，以設定樣式。

客戶端定制

要自定義客戶端上Communities元件的外觀和行為，請參考客戶端自定義，其中包括有關以下內容的資訊：

• 覆蓋
• 擴充功能
• HTML標籤
• 設定CSS外觀
• 擴充Javascript
• SCF的Clientlibs

功能和元件基本工具

Feature and Component Essentials一節將說明開發人員的基本資訊。

其他開發人員資訊請參閱編碼准則一節。

疑難排解

疑難排解一節中介紹了常見問題和已知問題。