Framework sociale component

LET OP

AEM 6.4 heeft het einde van de uitgebreide ondersteuning bereikt en deze documentatie wordt niet meer bijgewerkt. Raadpleeg voor meer informatie onze technische ondersteuningsperioden. Ondersteunde versies zoeken hier.

Het sociale componentenkader (SCF) vereenvoudigt het proces om, componenten van Gemeenschappen op zowel server-kant als cliënt-kant te vormen aan te passen en uit te breiden.

De voordelen van het kader:

  • Functioneel: Eenvoudig te integreren, zonder of weinig aanpassingen voor 80% van de gebruiksgevallen
  • Skinnable: Consistent gebruik van HTML-kenmerken voor CSS-opmaak
  • Uitbreidbaar: De implementatie van de component is objectgeoriënteerd en licht op bedrijfslogica - gemakkelijk om stijgende bedrijfslogin op server toe te voegen
  • Flexibel: Eenvoudige JavaScript-sjablonen zonder logica die eenvoudig kunnen worden overschreven en aangepast
  • Toegankelijk: De HTTP-API biedt ondersteuning voor posten vanaf elke client, waaronder mobiele apps
  • Overdraagbaar: Integreren/insluiten in elke webpagina die is gebaseerd op elke technologie

Ontdek een auteur- of publicatieexemplaar met interactieve Community Components Guide.

Overzicht

In SCF, wordt een component samengesteld uit een POJO SocialComponent, een Malplaatje van Handlebars JS (om de component terug te geven), en CSS (om de component te stileren).

Een JS-sjabloon Handlebars kan de JS-componenten model/weergave uitbreiden om gebruikersinteractie met de component op de client af te handelen.

Als een component wijziging van gegevens moet ondersteunen, kan de implementatie van de API voor sociale componenten worden geschreven ter ondersteuning van het bewerken/opslaan van gegevens die vergelijkbaar zijn met model- en gegevensobjecten in traditionele webtoepassingen. Daarnaast kunnen bewerkingen (controllers) en een bewerkingsservice worden toegevoegd om bewerkingsverzoeken te verwerken, bedrijfslogica uit te voeren en de API's op het model/de gegevensobjecten aan te roepen.

De API van de sociale component kan worden uitgebreid om gegevens te verstrekken die door een cliënt voor een meningslaag of een cliënt van HTTP worden vereist.

Hoe pagina's voor de client worden gerenderd

chlimage_1-25

Component Customization and Extension

Als u de componenten wilt aanpassen of uitbreiden, schrijft u alleen de overlays en extensies naar de map /apps waarmee u het upgradeproces naar toekomstige releases kunt vereenvoudigen.

Server-Side Framework

Het framework biedt API's voor toegang tot functionaliteit op de server en voor ondersteuning van interactie tussen de client en de server.

Java API's

De Java API's bieden abstracte klassen en interfaces die gemakkelijk kunnen worden overgeërfd of gesubclassificeerd.

De hoofdklassen worden beschreven op het tabblad Aanpassing op de server pagina.

Bezoek Overzicht opslagbronprovider voor meer informatie over het werken met UGC.

HTTP-API

De HTTP-API ondersteunt eenvoudige aanpassingen en keuzemogelijkheden van clientplatforms voor PhoneGap-apps, native apps en andere integraties en mashups. Bovendien staat HTTP API een communautaire plaats toe om als dienst zonder een cliënt te lopen, zodat de kadercomponenten in om het even welke webpage kunnen worden geïntegreerd die op om het even welke technologie wordt voortgebouwd.

HTTP API - GET

Voor elke SocialComponent, verstrekt het kader een op HTTP-Gebaseerd API eindpunt. Het eindpunt wordt betreden door een verzoek van de GET naar het middel met ".social.json"selecteur + uitbreiding te verzenden. Met Sling wordt het verzoek aan de DefaultSocialGetServlet.

De DefaultSocialGetServlet

  1. Geeft de resource (resourceType) door aan de SocialComponentFactoryManageren ontvangt een SocialComponentFactory die een SocialComponentdie de bron vertegenwoordigt.

  2. Roept de fabriek aan en ontvangt een SocialComponentin staat om de bron en het verzoek af te handelen.

  3. Roept de SocialComponent, die de aanvraag verwerkt en een JSON-weergave van de resultaten retourneert.

  4. Retourneert de JSON-reactie op de client.

GET Request

Een standaard GET servlet luistert naar .social.json verzoeken waaraan de SocialComponent met klantgerichte JSON antwoordt.

chlimage_1-26

HTTP API - POST-aanvragen

Naast de (Gelezen) verrichtingen van de GET, bepaalt het kader een eindpuntpatroon om andere verrichtingen op een component toe te laten, met inbegrip van Create, Update en Schrapping. Deze eindpunten zijn HTTP-API's die invoer accepteren en reageren met HTTP-statuscodes of met een JSON-reactieobject.

Met dit eindpuntpatroon van het framework worden CUD-bewerkingen uitbreidbaar, herbruikbaar en getest.

POST Request

Er is een Sling POST:verrichting voor elke verrichting SocialComponent. De bedrijfslogica en onderhoudscode voor elke verrichting zijn verpakt in een OperationService die door HTTP API of van elders als dienst OSGi toegankelijk is. Hooks wordt geleverd ter ondersteuning van instelbare bewerkingsextensies voor acties voor en na acties.

chlimage_1-27

Storage Resource Provider (SRP)

Meer informatie over de verwerking van UGC die is opgeslagen in het dialoogvenster community content store, zie

Aanpassingen op de server

Bezoek Aanpassingen op de server voor informatie over het aanpassen van de bedrijfslogica en het gedrag van een onderdeel van de Gemeenschappen aan de serverzijde.

Handlebars JS Templating Language

Een van de meest opvallende wijzigingen in het nieuwe kader is het gebruik van de Handlebars JS Sjabloontaal (HBS), een populaire open-source technologie voor server-client rendering.

HBS-scripts zijn eenvoudig, zonder logica, kunnen op zowel de server als de client worden gecompileerd, zijn eenvoudig te bedekken en aan te passen en zijn op natuurlijke wijze gebonden aan de client-UX, omdat HBS renderen aan de clientzijde ondersteunt.

Het kader biedt verschillende Handbalkhelpers die nuttig zijn bij het ontwikkelen van sociale componenten.

Op de server, wanneer het Sling een verzoek van de GET verhelpt, identificeert het het manuscript dat zal worden gebruikt om op het verzoek te antwoorden. Als het manuscript een malplaatje HBS (.hbs) is, zal het Sling het verzoek aan de Motor van Handlebars delegeren. De Motor Handlebars zal dan de SocialComponent van aangewezen SocialComponentFactory krijgen, een context bouwen, en de HTML teruggeven.

Geen toegangsbeperking

Handlebars (HBS) malplaatjedossiers (.hbs) zijn analoog aan .jsp en .html malplaatjedossiers, behalve zij kunnen voor het teruggeven zowel in cliëntbrowser als op de server worden gebruikt. Daarom zal een cliëntbrowser die om een cliënt-zijmalplaatje verzoekt een .hbs dossier van de server ontvangen.

Dit vereist dat alle malplaatjes van HBS in de sling onderzoekspad (om het even welke .hbs dossiers onder /libs/ of /apps) door om het even welke gebruiker van auteur kunnen worden gehaald of publiceren.

De toegang van HTTP tot .hbs dossiers kan niet worden verboden.

Een onderdeel van een Gemeenschappen toevoegen of opnemen

De meeste onderdelen van een Gemeenschappen moeten added als Verlenen adresseerbare bron. Een aantal communautaire componenten kan inbegrepen in een sjabloon als een niet-bestaande bron, zodat de locatie waar door de gebruiker gegenereerde inhoud (UGC) moet worden geschreven, dynamisch kan worden opgenomen en aangepast.

In beide gevallen geldt dat de component vereiste clientbibliotheken moet ook aanwezig zijn.

Een component toevoegen

Het toevoegen van een component verwijst naar het proces om een geval van een middel (component) toe te voegen, zoals wanneer gesleept van componentenbrowser (sidekick) op een pagina in auteur uitgeeft wijze.

Het resultaat is een JCR-onderliggend knooppunt onder een pari-knooppunt, dat adresseerbaar is.

Een component opnemen

Het opnemen van een component verwijst naar het proces waarbij een verwijzing naar een component wordt toegevoegd "niet-bestaande" resource (geen JCR-knooppunt) in de sjabloon, zoals het gebruik van een scripttaal.

Vanaf AEM 6.1, wanneer een component dynamisch in plaats van toegevoegd wordt omvat, is het mogelijk om de eigenschappen van de component in auteur *design *mode uit te geven.

Slechts een paar AEM Communities-componenten kunnen dynamisch worden opgenomen. Het zijn:

De Community Components Guide staat toe inbegrepen componenten om van worden een knevel te schakelen van worden toegevoegd aan worden omvat.

Bij gebruik van handgrepen sjabloontaal, de niet-bestaande bron wordt opgenomen met de inclusief helper door zijn resourceType te specificeren:

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

Bij gebruik van JSP, wordt een bron opgenomen met de tag cq:include:

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

Als u een component dynamisch aan een pagina wilt toevoegen in plaats van deze toe te voegen aan of op te nemen in een sjabloon, raadpleegt u Component Sideloading.

Handlebars Helpers

Zie SCF Handlebars Helpers voor een lijst en beschrijving van aangepaste hulplijnen die beschikbaar zijn in het SCF.

Client-Side Framework

JavaScript-framework voor modelweergave

Het kader omvat een verlenging van Backbone.js, een model-weergave JavaScript-framework, om de ontwikkeling van rijke, interactieve componenten te vergemakkelijken. De objectgeoriënteerde aard ondersteunt een uitbreidbaar/herbruikbaar framework. De communicatie tussen client en server wordt vereenvoudigd door middel van de HTTP API.

Het framework maakt gebruik van Handlebars-sjablonen aan de serverzijde om de componenten voor de client te renderen. De modellen zijn gebaseerd op de JSON-reacties die door de HTTP-API zijn gegenereerd. De meningen binden zich aan HTML die door de malplaatjes Handlebars wordt geproduceerd en verstrekken interactiviteit.

CSS-conventies

Hieronder vindt u aanbevolen conventies voor het definiëren en gebruiken van CSS-klassen:

  • Gebruik duidelijk benoemde CSS-klassenselectienamen en vermijd generieke namen zoals 'kop', 'afbeelding', enzovoort.
  • Definieer specifieke klassenselectorstijlen, zodat de CSS-opmaakmodellen goed werken met andere elementen en stijlen op de pagina. Bijvoorbeeld: .social-forum .topic-list .li { color: blue; }
  • CSS-klassen voor opmaak gescheiden houden van CSS-klassen voor UX aangestuurd door JavaScript

Aanpassingen op de client

Voor het aanpassen van de weergave en het gedrag van een onderdeel van een Community op de client-side, verwijst u naar Aanpassingen op de client, met informatie over:

Essentiële functies en componenten

De essentiële informatie voor ontwikkelaars wordt beschreven in de Essentiële functies en componenten sectie.

Aanvullende informatie over ontwikkelaars vindt u in het gedeelte Codeerrichtlijnen sectie.

Problemen oplossen

Gemeenschappelijke punten van zorg en bekende punten worden beschreven in de Problemen oplossen sectie.

Op deze pagina