社交组件框架 social-component-framework

社交组件框架(SCF)简化了服务器端和客户端上配置、自定义和扩展Communities组件的过程。

框架的好处包括:

  • 功能:开箱即用的易用性集成,对80%的用例很少或没有自定义设置。
  • 可剥皮:以一致方式使用HTML属性来设置CSS样式。
  • 可扩展:组件实施是面向对象的,并且遵循业务逻辑 — 易于在服务器上添加增量业务登录。
  • 灵活:简单的无逻辑JavaScript模板,易于叠加和自定义。
  • 可访问: HTTP API支持从任何客户端(包括移动应用程序)发布。
  • 可移植:集成/嵌入到基于任何技术构建的任何网页中。

使用交互式浏览创作或发布实例 社区组件指南.

概述 overview

在SCF中,组件由SocialComponent POJO、Handlebars JS模板(用于呈现组件)和CSS(用于设置组件样式)组成。

Handlebars JS模板可以扩展模型/视图JS组件,以处理用户与客户端上的组件的交互。

如果组件必须支持数据修改,则可以编写SocialComponent API的实施以支持编辑/保存类似于传统Web应用程序中模型/数据对象的数据。 此外,可以添加操作(控制器)和操作服务来处理操作请求、执行业务逻辑以及调用模型/数据对象上的API。

可以扩展SocialComponent API以提供客户端对视图层或HTTP客户端所需的数据。

如何为客户端呈现页面 how-pages-are-rendered-for-client

scf-page-rendering

组件自定义和扩展 component-customization-and-extension

要自定义或扩展组件,您只需将叠加和扩展写入/apps目录,这可以简化升级到未来版本的过程。

  • 对于外观设计:

  • 外观:

    • 更改JS模板和CSS。
  • 对于Look、Feel和UX:

  • 要修改JS模板或GET端点可用的信息,请执行以下操作:

  • 要在操作期间添加自定义处理,请执行以下操作:

  • 要添加自定义操作,请执行以下操作:

服务器端框架 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端点。 通过向资源发送GET请求来访问端点,该资源具有“.social.json”选择器+扩展。 使用Sling,请求将传递给 DefaultSocialGetServlet.

DefaultSocialGetServlet

  1. 将资源(resourceType)传递给 SocialComponentFactoryManager 并接收能够选择 SocialComponent 表示资源。

  2. 调用工厂并接收 SocialComponent 能够处理资源和请求。

  3. 调用 SocialComponent,用于处理请求并返回结果的JSON表示形式。

  4. 向客户端返回JSON响应。

GET Request

默认的GETservlet监听.social.json请求,SocialComponent使用可自定义的JSON对这些请求进行响应。

scf框架

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

除了GET(读取)操作外,框架还定义端点模式以启用组件上的其他操作,包括创建、更新和删除。 这些端点是HTTP API,它们接受输入并使用HTTP状态代码或JSON响应对象进行响应。

此框架端点模式使得CUD操作具有可扩展、可重用和可测试性。

POST Request

每个SocialComponent操作都有一个SlingPOST:operation。 每个操作的业务逻辑和维护代码都封装在OperationService中,该服务可通过HTTP API或从其他位置作为OSGi服务访问。 提供了用于操作前/操作后支持可插拔操作扩展的挂接。

scf-post-request

存储资源提供程序(SRP) storage-resource-provider-srp

了解如何处理存储在中的UGC 社区内容存储,请参见:

服务器端自定义 server-side-customizations

访问 服务器端自定义 有关自定义服务器端上Communities组件的业务逻辑和行为的信息。

Handlebars JS模板语言 handlebars-js-templating-language

新框架中更显着的变化之一是使用了 Handlebars JS (HBS)模板化语言,一种用于服务器 — 客户端渲染的流行开源技术。

HBS脚本简单、无逻辑,在服务器和客户端都可编译,易于叠加和自定义,并且可自然绑定到客户端UX,因为HBS支持客户端渲染。

该框架提供了多个 Handlebars助手 在开发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文件)均可由任何用户从创作或发布中获取。

可能无法禁止对.hbs文件的HTTP访问。

添加或包含社区组件 add-or-include-a-communities-component

大多数社区组件必须 已添加 作为Sling可寻址资源。 Communities组件中的少数组件可能是 已包括 作为非现有资源的模板中允许动态包含和自定义写入用户生成内容(UGC)的位置。

在任一情况下,组件的 所需的客户端库 也必须出席。

添加组件

添加组件是指添加资源(组件)实例的过程,例如从组件浏览器(sidekick)拖动到创作编辑模式下的页面上的过程。

结果是par节点下的JCR子节点,该节点是Sling可寻址的。

包括组件

包括元件是指将参照添加到 “非现有”资源 (无JCR节点),例如使用脚本语言。

从Adobe Experience Manager (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" />
NOTE
要将组件动态添加到页面,而不是在模板中添加或包含组件,请参阅 组件侧载.

Handlebars帮助程序 handlebars-helpers

请参阅 SCF Handlebars助手 有关SCF中可用的自定义帮助程序的列表和说明。

客户端框架 client-side-framework

模型视图JavaScript框架 model-view-javascript-framework

该框架包括以下扩展 Backbone.js,是一个模型视图JavaScript框架,便于开发丰富、交互式的组件。 面向对象的性质支持可扩展/可重用的框架。 HTTP API简化了客户端和服务器之间的通信。

框架使用服务器端Handlebars模板来呈现客户端的组件。 这些模型基于HTTP API生成的JSON响应。 视图将自己绑定到Handlebars模板生成的HTML并提供交互性。

CSS约定 css-conventions

以下是定义和使用CSS类的推荐约定:

  • 使用命名空间明确的CSS类选择器名称并避免使用通用名称,如“标题”和“图像”。
  • 定义特定的类选择器样式,以便CSS样式表可以很好地与页面上的其他元素和样式配合使用。 例如:.social-forum .topic-list .li { color: blue; }
  • 对于由JavaScript驱动的UX,将用于样式设置的CSS类与CSS类分开。

客户端自定义 client-side-customizations

要自定义客户端上Communities组件的外观和行为,请参考 客户端自定义,其中包括有关以下项的信息:

功能和组件要点 feature-and-component-essentials

有关面向开发人员的基本信息,请参见 功能和组件要点 部分。

其他开发人员信息可在 编码准则 部分。

疑难解答 troubleshooting

有关常见问题和已知问题的说明,请参见 疑难解答 部分。

recommendation-more-help
81e2cd9d-0789-409d-b87c-2a8ce4f28791