Ramverk för sociala komponenter social-component-framework

CAUTION
AEM 6.4 har nått slutet på den utökade supporten och denna dokumentation är inte längre uppdaterad. Mer information finns i teknisk supportperiod. Hitta de versioner som stöds här.

Det sociala ramverket (SCF) förenklar processen att konfigurera, anpassa och utöka webbgruppskomponenter på både server- och klientsidan.

Fördelarna med ramverket:

  • Funktionell: Enkel integrering direkt med liten eller ingen anpassning för 80 % av användningsfallen
  • Skalbar: Enhetlig användning av HTML-attribut för CSS-format
  • Utbyggbart: Komponentimplementeringen är objektorienterad och lätt utifrån affärslogik - enkel att lägga till inkrementell företagsinloggning på servern
  • Flexibel: Enkla logikfria javascript-mallar som enkelt kan överlappas och anpassas
  • Tillgänglig: HTTP-API:t stöder publicering från alla klienter, inklusive mobilappar
  • Portable: Integrera/bädda in i alla webbsidor som bygger på valfri teknik

Utforska en författare eller publicera en instans med hjälp av den interaktiva Community Components Guide.

Översikt overview

I SCF består en komponent av en SocialComponent POJO, en hanterarmall för JS (för att återge komponenten) och CSS (för att formatera komponenten).

JS-mallar för handtag kan utöka JS-komponenterna för modell/vy för att hantera användarinteraktion med komponenten på klienten.

Om en komponent behöver stödja ändring av data kan implementeringen av API:t för SocialComponent skrivas för att ge stöd för redigering/sparande av data som liknar modell-/dataobjekt i traditionella webbprogram. Dessutom kan operationer (kontrollanter) och en åtgärdstjänst läggas till för att hantera operationsbegäranden, utföra affärslogik och anropa API:erna för modell-/dataobjekten.

SocialComponent-API:t kan utökas för att tillhandahålla data som krävs av en klient för ett visningslager eller en HTTP-klient.

Hur sidor återges för klienten how-pages-are-rendered-for-client

chlimage_1-25

Komponentanpassning och tillägg component-customization-and-extension

Om du vill anpassa eller utöka komponenterna skriver du bara övertäckningar och tillägg till din /apps-katalog, vilket förenklar uppgraderingen till framtida versioner.

Serverside Framework server-side-framework

Ramverket innehåller API:er för att komma åt funktioner på servern och stödja interaktion mellan klienten och servern.

Java API:er java-apis

Java-API:erna innehåller abstrakta klasser och gränssnitt som enkelt ärvs eller underklassas.

Huvudklasserna beskrivs i Anpassning på serversidan sida.

Besök Översikt över lagringsresursprovider om du vill veta mer om hur du arbetar med UGC.

HTTP-API http-api

HTTP-API:t har stöd för enkel anpassning och val av klientplattformar för PhoneGap-appar, inbyggda appar och andra integreringar och mashups. Dessutom gör HTTP API det möjligt för en community-webbplats att köras som en tjänst utan en klient, så att ramverkskomponenter kan integreras i alla webbsidor som bygger på valfri teknik.

HTTP API - GET-begäranden http-api-get-requests

För varje SocialComponent tillhandahåller ramverket en HTTP-baserad API-slutpunkt. Slutpunkten nås genom att en GET-begäran skickas till resursen med väljaren .social.json + tillägget. Med Sling lämnas begäran till DefaultSocialGetServlet.

The DefaultSocialGetServlet

  1. Skickar resursen (resourceType) till SocialComponentFactoryManageroch tar emot en SocialComponentFactory som kan välja en SocialComponentsom representerar resursen.

  2. Anropar fabriken och tar emot en SocialComponentkan hantera resursen och begäran.

  3. Anropar SocialComponent, som bearbetar begäran och returnerar en JSON-representation av resultaten.

  4. Returnerar JSON-svaret till klienten.

GET Request

En standardserver för GET lyssnar på .social.json-begäranden som SocialComponent svarar på med anpassningsbar JSON.

chlimage_1-26

HTTP API - POSTER http-api-post-requests

Förutom åtgärderna GET (Läs) definierar ramverket ett slutpunktsmönster som möjliggör andra åtgärder för en komponent, inklusive Skapa, Uppdatera och Ta bort. Dessa slutpunkter är HTTP-API:er som accepterar indata och svarar med antingen en HTTP-statuskod eller med ett JSON-svarsobjekt.

Det här ramverkets slutpunktsmönster gör CUD-åtgärder utökningsbara, återanvändbara och testbara.

POST Request

Det finns en Sling-POST:åtgärd för alla SocialComponent-åtgärder. Affärslogik och underhållskod för varje åtgärd omsluts av en OperationService som är tillgänglig via HTTP-API:t eller någon annanstans som en OSGi-tjänst. Det finns kopplingar med stöd för utökningar av anslutningsbara åtgärder för åtgärder före/efter.

chlimage_1-27

Lagringsresursleverantör (SRP) storage-resource-provider-srp

Mer information om hur du hanterar UGC som lagras i community content store, se

Anpassningar på serversidan server-side-customizations

Besök Serveranpassning om du vill ha information om hur du anpassar affärslogiken och beteendet för en Communities-komponent på serversidan.

Hanterarfält - språk för JS-mallar handlebars-js-templating-language

En av de mer märkbara förändringarna i det nya ramverket är användningen av Handlebars JS mallating language (HBS), en populär öppen källkod-teknik för server-klientåtergivning.

HBS-skript är enkla, logikfria, kompilerade på både server och klient, är enkla att överlagra och anpassa och binds naturligt med klientens användargränssnitt eftersom HBS stöder rendering på klientsidan.

Ramverket innehåller flera Handtag som är användbara vid utveckling av sociala komponenter.

När Sling löser en GET-begäran på servern identifieras det skript som ska användas för att svara på begäran. Om skriptet är en HBS-mall (.hbs) delegerar Sling begäran till Handlebars Engine. Handlebars Engine hämtar sedan SocialComponent från lämplig SocialComponentFactory, skapar en kontext och återger HTML.

Ingen åtkomstbegränsning no-access-restriction

HBS-mallfiler (Handlebars) (.hbs) är detsamma som .jsp- och .html-mallfiler, förutom att de kan användas för återgivning både i klientwebbläsaren och på servern. En klientwebbläsare som begär en klientmall får därför en .hbs-fil från servern.

Detta kräver att alla HBS-mallar i sling-söksökvägen (alla HBS-filer under /libs/ eller /apps) kan hämtas av alla användare från författaren eller publiceringen.

HTTP-åtkomst till HBS-filer är inte förbjuden.

Lägg till eller inkludera en webbgruppskomponent add-or-include-a-communities-component

De flesta webbgruppskomponenter måste tillagd som en Sling-adresserbar resurs. Ett urval av Communities-komponenter kan ingår i en mall som en icke-befintlig resurs för dynamisk inkludering och anpassning av den plats där användargenererat innehåll (UGC) ska skrivas.

I båda fallen är komponentens nödvändiga klientbibliotek måste också finnas.

Lägg till en komponent

Att lägga till en komponent innebär att lägga till en instans av en resurs (komponent), till exempel när den dras från komponentens webbläsare (sidospark) till en sida i redigeringsläget för författare.

Resultatet är en underordnad JCR-nod under en par-nod, som är Sling-adresserbar.

Inkludera en komponent

Att ta med en komponent refererar till processen att lägga till en referens till en "non-existing" resource (ingen JCR-nod) i mallen, t.ex. med ett skriptspråk.

Från och med AEM 6.1 går det att redigera komponentens egenskaper i *design-läget när en komponent inkluderas dynamiskt i stället för att läggas till.

Endast ett fåtal av AEM Communities-komponenterna kan inkluderas dynamiskt. De är:

The Community Components Guide tillåter att komponenter som inte kan inkluderas växlas från att läggas till till.

När du använder handtag mallspråk inkluderas den icke-befintliga resursen med include helper genom att ange dess resourceType:

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

Vid användning av JSP, ingår en resurs med taggen cq:include:

<cq:include path="votes"
 resourceType="social/tally/components/voting" />
NOTE
Information om hur du lägger till en komponent dynamiskt på en sida, i stället för att lägga till eller ta med den i en mall, finns i Komponentsidladdning.

Handtag handlebars-helpers

Se Hjälpmedel för SCF-handtag om du vill ha en lista och en beskrivning av anpassade hjälpredor som finns i SCF.

Klientbaserat ramverk client-side-framework

Model-View Javascript Framework model-view-javascript-framework

Ramverket innehåller en förlängning av Backbone.js, ett modellbaserat JavaScript-ramverk som underlättar utvecklingen av avancerade, interaktiva komponenter. Den objektorienterade naturen har stöd för ett utbyggbart/återanvändbart ramverk. Kommunikationen mellan klient och server förenklas med HTTP API.

Ramverket använder mallar för serversidans handtag för att återge komponenterna för klienten. Modellerna baseras på JSON-svar som genereras av HTTP API. Vyerna binder sig till HTML som genereras av Handlebars-mallarna och ger interaktivitet.

CSS-konventioner css-conventions

Följande är rekommenderade konventioner för att definiera och använda CSS-klasser:

  • Använd CSS-klassväljarnamn med tydligt namn och undvik generiska namn som heading, image osv.
  • Definiera specifika klassväljarformat så att CSS-formatmallarna fungerar bra med andra element och format på sidan. Till exempel: .social-forum .topic-list .li { color: blue; }
  • Håll CSS-klasser för formatering åtskilda från CSS-klasser för UX som drivs av JavaScript

Anpassningar på klientsidan client-side-customizations

Om du vill anpassa utseendet och beteendet för en Communities-komponent på klientsidan, se Anpassningar på klientsidan, som innehåller information om

Grundläggande funktioner och komponenter feature-and-component-essentials

Viktig information för utvecklare finns i Grundläggande funktioner och komponenter -avsnitt.

Ytterligare utvecklarinformation finns i Riktlinjer för kodning -avsnitt.

Felsökning troubleshooting

Vanliga problem och kända problem beskrivs i Felsökning -avsnitt.

recommendation-more-help
5d37d7b0-a330-461b-814d-068612705ff6