社交组件框架

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

该框架的好处:

  • 功能:80%的用例只需进行少量或无定制,即可轻松实现集成。
  • 可设置外观:一致地使用HTML属性进行CSS样式设置。
  • 可扩展:组件实现是面向对象的,并且轻松处理业务逻辑——易于在服务器上添加增量式业务登录。
  • 灵活:轻松覆盖和自定义的简单无逻辑Javascript模板。
  • 可访问:HTTP API支持从任何客户端发布内容,包括移动应用程序。
  • 便携:集成/嵌入任何基于任何技术构建的网页。

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

概述

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

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

如果某个组件需要支持数据修改,可以编写SocialComponent API的实现以支持编辑/保存与传统Web应用程序中的模型/数据对象相似的数据。 此外,可以添加操作(控制器)和操作服务以处理操作请求,执行业务逻辑,并调用模型/数据对象上的API。

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

客户端的页面呈现方式

scf-page-rendering

组件自定义和扩展

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

服务器端框架

该框架提供API以访问服务器上的功能并支持客户端与服务器之间的交互。

Java API

Java API提供易于继承或子类的抽象类和接口。

服务器端自定义页上介绍了主类。

请访问存储资源提供者概述了解如何使用UGC。

HTTP API

HTTP API支持PhoneGap应用程序、本机应用程序以及其他集成和混合的轻松自定义和客户端平台选择。 此外,HTTP API允许社区站点作为无客户端的服务运行,这样框架组件可以集成到任何基于任何技术构建的网页中。

HTTP API -GET请求

对于每个SocialComponent,框架都提供一个基于HTTP的API端点。 通过使用“.social.json”选择器+扩展向资源发送GET请求来访问端点。 使用Sling,请求将交给DefaultSocialGetServlet

DefaultSocialGetServlet

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

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

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

  4. 将JSON响应返回给客户端。

GET Request

默认GETservlet监听。social.json请求,SocialComponent通过可自定义的JSON对其做出响应。

scf框架

HTTP API -POST请求

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

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

POST Request

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

scf-post-request

存储资源提供程序(SRP)

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

服务器端自定义

访问服务器端自定义,以了解有关自定义服务器端社区组件的业务逻辑和行为的信息。

Handlebars JS模板语言

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

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

该框架提供几个Handlebarshelpers,在开发SocialComponents时非常有用。

在服务器上,当Sling解析GET请求时,它标识将用于响应请求的脚本。 如果脚本是HBS模板(.hbs),Sling将将请求委派给Handlebars Engine。 然后,Handlebars引擎将从相应的SocialComponentFactory获取SocialComponent,构建上下文并渲染HTML。

无访问限制

Handlebars(HBS)模板文件(.hbs)与。jsp和。html模板文件类似,不同之处在于它们可用于在客户端浏览器中和服务器上进行渲染。 因此,请求客户端模板的客户端浏览器将从服务器接收。hbs文件。

这要求任何用户都可以从作者或发布中获取sling搜索路径中的所有HBS模板(/libs/或/apps下的任何。hbs文件)。

可能不禁止对。hbs文件的HTTP访问。

添加或包含社区组件

大多数Communities组件必须​添加​作为Sling可寻址资源。 在模板中,可以将选定的几个社区组件​作为非现有资源包含在​中,以允许动态包含和自定义写入用户生成内容(UGC)的位置。

无论哪种情况,组件的必需的客户端库都必须存在。

添加组件

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

结果是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 Handlebars Helpers以了解SCF中提供的自定义帮助器的列表和说明。

客户端框架

模型视图Javascript框架

该框架包含Backbone.js的扩展,该扩展是模型视图的JavaScript框架,用于促进丰富的交互式组件的开发。 面向对象的性质支持可扩展/可重用的框架。 通过HTTP API简化客户端与服务器之间的通信。

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

CSS约定

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

  • 使用名称清晰的CSS类选择器名称,并避免使用“heading”、“image”等通用名称。
  • 定义特定的类选择器样式,使CSS样式表能够与页面上的其他元素和样式很好地配合使用。 例如:.social-forum .topic-list .li { color: blue; }
  • 使用JavaScript驱动的UX的样式设置CSS类与CSS类分开。

客户端自定义

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

功能和组件基本工具

功能和组件基础知识部分介绍了开发人员的基本信息。

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

疑难解答

疑难解答部分介绍了常见问题和已知问题。

On this page

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now