Show Menu
主题×

社交组件框架

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

概述

在SCF中,组件由SocialComponent POJO、Handlebars JS模板(用于呈现组件)和CSS(用于设置组件样式)组成。
Handlebars JS模板可扩展模型/视图JS组件,以处理用户与客户端组件的交互。
如果某个组件需要支持数据修改,可以编写SocialComponent API的实现以支持编辑/保存与传统Web应用程序中的模型/数据对象相似的数据。 此外,可以添加操作(控制器)和操作服务以处理操作请求,执行业务逻辑,并调用模型/数据对象上的API。
可以扩展SocialComponent API以提供视图层或HTTP客户端所需的数据。

如何为客户端呈现页面

组件自定义和扩展

要自定义或扩展组件,您只需将叠加和扩展写入/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对其做出响应。

HTTP API -POST请求

除了GET(读取)操作之外,框架还定义端点模式以对组件启用其他操作,包括创建、更新和删除。 这些端点是接受输入并使用HTTP状态代码或JSON响应对象进行响应的HTTP API。
该框架端点模式使CUD操作具有可扩展性、可重用性和可测试性。
POST Request
每个SocialComponent操作都有一个SlingPOST:操作。 每个操作的业务逻辑和维护代码都打包在OperationService中,OperationService可通过HTTP API访问,或从其他位置作为OSGi服务访问。 提供了支持用于前/后操作的可插拔操作扩展的钩子。

存储资源提供程序(SRP)

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

服务器端自定义

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

Handlebars JS模板语言

在新框架中,一个更显着的变化是使用Handlebars JS模板语言(HBS) ,这是一种用于服务器——客户端渲染的流行开源技术。
HBS脚本简单、无逻辑、在服务器和客户端上进行编译、易于叠加和自定义,并且与客户端UX自然绑定,因为HBS支持客户端渲染。
该框架提供几个 Handlebars帮助器 ,在开发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组件。 它们是:
区组件指南 ,允许将可包含的组件从添加切换为包含。
使用Handlebars模板 语言时,通过指定其resourceType ,使用include帮助程序 来包含非现有的资源:
{{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类分开。

客户端自定义

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

功能和组件基本工具

有关开发人员的基本信息,请参 阅功能和组件
其他开发人员信息可在编码指 南部分找到

疑难解答

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