创建和添加模板和组件

注意

Adobe建议对需要基于单页应用程序框架的客户端渲染(例如,React)的项目使用SPA编辑器。 了解更多.

AEM Mobile点播提供完全配置的应用程序模板、文章模板和文章组件。

We.Unlimited App是一个范例模板,它代表一个完全可配置和可管理的AEM Mobile点播应用程序的外壳。

创建新应用程序时选择此示例模板可提供AEM Mobile功能的丰富仪表板。

chlimage_1-70

注意

要从AEM Mobile应用控制中心管理您的应用程序和移动应用程序内容,请参阅AEM Mobile应用程序仪表板

创建应用程序模板

应用程序模板用于创建新应用程序并充当页面模板和组件的集合,这些模板和组件代表应用程序的基线或基础。 模板会标记一些基本属性,以便以适当的方式引导应用程序。 一般而言,客户总体不会创建太多应用程序。

应用程序模板提供了一种轻松的方法,可利用开发人员创建的现有设计,用于在AEM内创建新应用程序。

根据其他应用程序的模板创建新应用程序时,您将获得一个应用程序,其起点代表从中创建该应用程序的应用程序。

根据应用程序模板创建新应用程序的步骤:

  1. 导航到AEM Mobile应用程序目录:<server url>/aem/apps.html/content/mobileapps
  2. 选择​创建 —> 应用,如下所示

使用此模板创建应用程序后,即可向应用程序添加文章、横幅和集合。 要重新访问、创建文章、横幅和集合,请参阅内容管理操作

注意

或者,您也可以选择AEM开发人员为您提供的示例应用程序模板,例如​We.Unlimited​应用程序。 如果您将此示例模板用于您的应用程序,您将获得一些示例文章和集合以供处理。 您可以选择使用示例模板和组件、自定义现有模板和组件,或为应用程序创建新模板和组件。

注意

设置​redirectTarget​属性

使用其中一个应用程序模板时,开发人员定义应用程序的内容。 但是,开发人员必须知道在jcr中创建应用程序的位置以及​redirectTarget​属性的值。

redirectTarget​是作为创建应用程序操作的一部分计算的,并尝试解析路径(如果有redirectTarget属性作为应用程序模板的一部分可用),且redirectTarget的值定义为相对值。 当创建应用程序进程在应用程序模板中找到redirectTarget的相对值时,该值将附加到创建应用程序的已解析位置。

例如,如果应用程序模板定义值为“lanugage-masters/en”的​redirectTarget,并且该应用程序是在“/content/mobileapps/fooApp”中创建的,则创建应用程序后redirectTarget的最终值为“”/content/mobileapps/fooApp/language-masters/en"。

创建内容模板

每个实体类型都有两个现成的模板。 这四个关键原则分别是:

  • 默认模板: 用于创建具有适用默认属性/结构的内容
  • 导入的模板: 用于从具有适用默认属性/结构的AEM Mobile导入内容

文章模板

“无限制文章”是表示典型AEM Mobile点播文章布局的示例模板。

  1. 单击​管理文章​中的​+​以创建新文章。 您可以选择​无限制文章​或​富文本文章。 下图显示了一个选项,通过该选项,您可以从以下两个文章模板中的任何一个中进行选择。

  2. 单击​Next​可定义文章元数据,如文章名称/标题、描述、作者、摘要、部门、缩略图、文章访问等。

  3. 单击​下一步​以填写广告属性。

  4. 单击​下一步​以输入文章图像或社交媒体图像

  5. 单击​下一步​以选择此新文章所指向的集合链接。

  6. 单击​下一步​以输入社交共享的详细信息。

  7. 单击​创建​以完成使用示例创建文章的过程。 单击​完成​或​编辑文章​以编辑本文的属性。

chlimage_1-71

将组件添加到文章

创建后,作者可以通过添加文本和图像等组件来编辑文章的内容。 文章是AEM页面模板的扩展。

选择一篇文章,要编辑,然后单击​编辑​以向文章添加组件。

chlimage_1-72 chlimage_1-73

选择左面板上的“+”,向文章添加组件。

chlimage_1-74

创建现成模板

没有现成的文章模板,但是自定义模板应该扩展的默认模板,请参阅Geometrixx Unlimited应用程序的文章模板示例

超出常规AEM模板的关键属性需要包括;

dps-resourceType="dps:Article"

此属性可确保将AEM页面识别为AEM Mobile目标文章页面。

与AEM模板一样,您可以向模板的​jcr:content​添加任何默认属性或子节点。

注意

横幅和集合没有内容,因此其创建不支持自定义模板。

创建和添加组件

组件使用和允许访问构件,这些构件用于呈现内容。

代码存储库中包含一个简单组件,其源位于AEM中。 随后,也可以在本地以CRXDE Lite打开它。

注意

目前没有为AEM Mobile提供现成的组件。

您可以向页面添加组件。 任何组件都可用于AEM Mobile应用程序,但应用后可能无法正常呈现。

但是,如果没有在AEM中渲染的自定义导出内容同步处理程序,自定义组件可能无法正确导出并上传到AEM Mobile On-demand Services。

在AEM页面中包含该组件以及其他几个构建块组件后,您可以向页面添加其他组件或编辑现有组件。

要向页面添加其他组件,请执行以下操作:

  1. 选择该页面,并确保您处于编辑模式(通过编辑器标题右上方的下拉菜单)
  2. 使用编辑器标题中最左侧的图标切换侧面板
  3. 选择​组件​选项卡
  4. 将其中一个可用组件拖放到页面上

chlimage_1-75

要编辑现有组件,请执行以下操作:

  1. 选择该页面,确保处于​编辑​模式并选择组件
  2. 点按扳手图标以配置组件
注意

可以在AEM中创建一个组件,并使用使用CRXDE Lite进行开发自定义相同组件。 根据需要自定义现有组件后,您可以使用上图所示的“管理文章”下的​编辑​选项将其添加到页面中。

注意

请参阅AEM Mobile的模板和组件开发的最佳实践

后续步骤

On this page

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
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