Framework sociale component

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
  • Schildbaar: 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
  • Draagbaar: Integreren/insluiten in elke webpagina die is gebaseerd op elke technologie

Ontdek een auteur- of publicatieexemplaar met de 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 belangrijkste klassen worden beschreven op Server-kant Aanpassing pagina.

Bezoek Overzicht van Storage Resource Provider 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. Gebruikend Sling, wordt het verzoek overhandigd aan DefaultSocialGetServlet.

The DefaultSocialGetServlet

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

  2. Roept de fabriek aan en ontvangt een SocialComponentdie de bron en het verzoek kan verwerken.

  3. Roept SocialComponent aan, die het verzoek verwerken en een vertegenwoordiging JSON van de resultaten terugkeert.

  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 in community content store wordt opgeslagen, raadpleegt u

Aanpassingen op de server

Bezoek Aanpassingen aan de serverzijde voor informatie over het aanpassen van de bedrijfslogica en het gedrag van een communautaire component aan de serverzijde.

Handlebars JS Templating Language

Een van de merkbaardere wijzigingen in het nieuwe framework 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 framework biedt verschillende Handlebars helpers die nuttig zijn bij het ontwikkelen van SocialComponents.

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 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 zijn als één adresseerbare resource. Een aantal van de onderdelen van de Gemeenschappen kan opgenomen zijn in een sjabloon als een niet-bestaande bron, zodat de locatie waarop door gebruikers gegenereerde inhoud (UGC) moet worden geschreven dynamisch kan worden opgenomen en aangepast.

In beide gevallen moeten de vereiste clientbibliotheken van de component 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 om een verwijzing naar "niet-bestaand"middel (geen knoop JCR) binnen het malplaatje toe te voegen, zoals het gebruiken van een scripting taal.

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:

Met de Community Components Guide kunnen meegeleverde onderdelen van het toevoegen naar het opnemen worden geschakeld.

Wanneer het gebruiken van Handlebarstemplating taal, wordt het niet bestaande middel inbegrepen gebruikend omvat helperby door zijn resourceType te specificeren:

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

Wanneer u JSP gebruikt, wordt een bron opgenomen met de tag cq:include:

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

Zie Component Sideloading 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.

Handlebars Helpers

Zie SCF Handlebars Helpers voor een lijst en een beschrijving van douanehelpers beschikbaar in SCF.

Client-Side Framework

JavaScript-framework voor modelweergave

Het framework omvat een extensie 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 van 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 verschijning en het gedrag van een component van de Gemeenschappen op de cliënt-kant, verwijzing Cliënt-zij Aanpassingen, die informatie over omvat:

Essentiële functies en componenten

Essentiële informatie voor ontwikkelaars wordt beschreven in de sectie Functie en Component Essentials.

Aanvullende ontwikkelaarsinformatie vindt u in de sectie Coderingsrichtlijnen.

Problemen oplossen

Veelvoorkomende problemen en bekende problemen worden beschreven in de sectie Problemen oplossen.

Op deze pagina