在本教程中,您将配置您的第一个内容应用。内容应用是一种特殊的应用,很适合用于定制的内容类型,如产品等。本例中的物品是古董车,您也可以用任意东西来代替。
创建模块
您的应用需要被部署在一个模块里。让我们从创建一个最简单的模块描述符开始吧。
创建模块描述符
- 创建一个文本文档并粘贴以下内容:
<!DOCTYPE module SYSTEM "module.dtd">
<module>
<name>tutorial-products</name>
<displayName>Tutorial Products App</displayName>
<description>Tutorial Products App</description>
<version>1.0</version>
<dependencies>
<dependency>
<name>ui-admincentral</name>
<version>5.0/*</version>
</dependency>
</dependencies>
<repositories>
<repository>
<name>magnolia</name>
<workspaces>
<workspace>products</workspace>
</workspaces>
<nodeTypeFile>/mgnl-nodetypes/magnolia-products-nodetypes.xml</nodeTypeFile>
</repository>
</repositories>
</module>
- 保存这个模块描述符为
tutorial-products.xml。
该模块描述符的要素是:
repository:magnolia内容库是应用储存内容的地方。workspace:为内容注册一个新的工作区products。nodeTypeFile:到XML文件的相对路径。您的内容应用将会管理mgnl:product节点类型,该XML文件就是定义这个节点类型的。
定义节点类型
节点类型定义内容库里内容如何存储。对于Products应用,定义一个新的节点类型mgnl:product来扩展mgnl:content。
- 创建一个文本文件,并将以下内容粘贴进去。
保存文件为magnolia-products-nodetypes.xml.
<nodeTypes
xmlns:rep="internal"
xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
xmlns:mix="http://www.jcp.org/jcr/mix/1.0"
xmlns:mgnl="http://www.magnolia.info/jcr/mgnl"
xmlns:jcr="http://www.jcp.org/jcr/1.0">
<!-- custom node types -->
<nodeType name="mgnl:product" isMixin="false" hasOrderableChildNodes="true" primaryItemName="">
<supertypes>
<supertype>mgnl:content</supertype>
</supertypes>
</nodeType>
</nodeTypes>
创建模块JAR
您的模块被部署为.jar文件。JAR是一种档案文件格式,将所有需要的Java类和资源打包进单个文件中。
以下为如何创建一个模块JAR:
- 创建一个如下所示的文件夹层次结构。
- 将模块描述符和节点类型XML文件放入如下所示的文件夹。
- 打开一个命令窗口。
- 在
tutorial-products目录下敲入如下命令:
jar cvf tutorial-products-1.0.jar *
/tutorial-products
/META-INF
/magnolia
tutorial-products.xml
/mgnl-nodetypes
magnolia-products-nodetypes.xml
该jar命令将创建一个.jar文件,您可以将它部署在Magnolia CMS上。
Tip
如果您希望跳过下面的配置步骤并安装完整的应用,请下载这些文件,并如图所示将它们放到文件夹结构里,然后再运行jar命令。
模块描述符:tutorial-products.xml应用启动器布局:config.modules.ui-admincentral.config.appLauncherLayout.groups.edit.apps.products.xml应用配置:config.modules.tutorial-products.apps.products.xml样例产品(轿车):products.xml定制节点类型mgnl:product:magnolia-products-nodetypes.xml
/tutorial-products
/META-INF
/magnolia
tutorial-products.xml
/mgnl-bootstrap
/tutorial-products
config.modules.ui-admincentral.config.appLauncherLayout.groups.edit.apps.products.xml
config.modules.tutorial-products.apps.products.xml
products.xml
/mgnl-nodetypes
magnolia-products-nodetypes.xml
安装模块
- 拷贝这个.jar文件到
<CATALINA_HOME>/webapps/<contextPath>/WEB-INF/lib文件夹,通常即<CATALINA_HOME>/webapps/magnoliaAuthor/WEB-INF/lib。 - 重启您的Magnolia实例并运行网络更新,这会安装Tutorial Products App模块。
- 打开管理 > 配置 >
/modules/tutorial-products,找到配置。
| 节点名 | 值 |
|---|---|
1.0.0 |
配置应用
在/modules/tutorial-products下,创建一个基本的应用配置:
| 节点名 | 值 |
|---|---|
info.magnolia.ui.contentapp.ContentApp | |
info.magnolia.ui.api.app.registry.ConfiguredAppDescriptor | |
icon-items | |
Products |
将应用添加到启动器中
- 打开
/modules/ui-admincentral/config/appLauncherLayout/groups/edit/apps。 - 创建一个
products内容节点。这将会在应用启动器中添加一个新的板块。
| 节点名 |
|---|
打开应用启动器,验证您是否能看到Products应用图标。如需重启启动器,打开http://localhost:8080/magnoliaAuthor/.magnolia/admincentral?restartApplication网页。
配置browser子应用
browser子应用让您能够查看并组织项目,是每个内容应用的一部分。
在/modules/tutorial-products/apps/products目录下,创建以下节点:
| 节点名 | 值 |
|---|---|
| |
| |
info.magnolia.ui.contentapp.browser.BrowserSubAppDescriptor | |
info.magnolia.ui.contentapp.browser.BrowserSubApp |
配置工作台
工作台(workbanch)显示内容项目列表。默认情况下,显示树型视图,可选的有列表和缩略视图及搜索。创建一个工作台,并定义它应显示的节点类型——是文件夹还是内容项。
在browser子应用下,创建如下节点:
| 节点名 | 值 |
|---|---|
| |
| |
| |
| |
icon-items | |
mgnl:product | |
| |
icon-folder | |
mgnl:folder | |
jcrName | |
info.magnolia.ui.workbench.tree.drop.AlwaysTrueDropConstraint | |
false | |
false | |
/ | |
products |
配置树型视图
在workbench里,创建一个树型视图,并定义它的列:
| 节点名 | 值 |
|---|---|
| |
| |
| |
| |
info.magnolia.ui.workbench.column.definition.PropertyColumnDefinition | |
true | |
Product name | |
jcrName | |
true | |
info.magnolia.ui.workbench.column.definition.StatusColumnDefinition | |
false | |
info.magnolia.ui.workbench.column.StatusColumnFormatter | |
Status | |
45 | |
info.magnolia.ui.workbench.column.definition.MetaDataColumnDefinition | |
false | |
info.magnolia.ui.workbench.column.DateColumnFormatter | |
Modification date | |
mgnl:lastModified | |
true | |
160 | |
info.magnolia.ui.workbench.tree.TreePresenterDefinition |
配置文件夹动作
配置添加、编辑以及删除文件夹的动作。在browser子应用下,创建如下节点:
| 节点名 | 值 |
|---|---|
| |
| |
true | |
info.magnolia.ui.framework.action.AddFolderActionDefinition | |
icon-add-item | |
New folder | |
| |
info.magnolia.ui.framework.action.OpenEditDialogActionDefinition | |
ui-framework:folder | |
icon-edit | |
Rename folder | |
info.magnolia.ui.framework.action.DeleteItemActionDefinition | |
icon-delete | |
Delete folder |
创建动作栏
在browser子应用里,创建一个动作栏,并将文件夹动作添加进去。
| 节点名 | 值 |
|---|---|
| |
| |
| |
false | |
true | |
Products | |
| mgnl:folder | |
Folder |
启动Products应用,验证您是否能够创建、编辑和删除文件夹。
配置产品动作
在browser子应用下,创建如下节点:
| 节点名 | 值 |
|---|---|
| |
| |
| |
| |
| |
| |
mgnl:folder | |
true | |
products | |
info.magnolia.ui.contentapp.detail.action.CreateItemActionDefinition | |
icon-add-item | |
New product | |
mgnl:product | |
detail | |
products | |
info.magnolia.ui.contentapp.detail.action.EditItemActionDefinition | |
icon-edit | |
Edit product | |
mgnl:product | |
detail | |
info.magnolia.ui.framework.action.DeleteItemActionDefinition | |
icon-delete | |
Delete product |
将产品动作添加到动作栏
在actionbar目录下,为产品动作创建一个新的section。设置editProduct为默认动作,也就是当用户在browser子应用里双击一项内容时执行的动作。
| 节点名 | 值 |
|---|---|
| |
| |
| |
false | |
true | |
Products | |
mgnl:folder | |
Folder | |
mgnl:prodcut | |
Product | |
editProduct |
配置detail子应用
detail子应用使您能够编辑一个产品。在subApps下,创建如下节点。
| 节点名 | 值 |
|---|---|
| |
| |
info.magnolia.ui.contentapp.detail.DetailSubAppDescriptor | |
info.magnolia.ui.contentapp.detail.DetailSubApp |
配置编辑器
编辑器是一个能够编辑内容的组件,通常显示为一个表单。编辑器配置定义内容保存在哪个工作区,以及哪些节点能够编辑。
在detail子应用下,创建如下节点。
| 节点名 | 值 |
|---|---|
icon-items | |
mgnl:product | |
products |
配置表单
您的应用可以创建和编辑任何内容,所以内容决定了您在表单里需要的字段。本教程中,产品为古董车,所以我们创建了一个表单,包含以下三个字段内容:产品名,照片,以及照片评分。
在editor节点下,创建以下节点。
节点名 | 值 |
|---|---|
| |
| |
| |
| |
| |
| |
info.magnolia.ui.form.field.definition.TextFieldDefinition | |
Product name | |
jcrName | |
image.* | |
photo | |
info.magnolia.dam.asset.field.definition.DamUploadFieldDefinition | |
Photo | |
info.magnolia.ui.form.field.definition.TextFieldDefinition | |
Please define a photo credit | |
Photo credit | |
Product | |
Define the product information | |
Edit product |
配置保存和取消动作
在detail子应用下,创建以下节点。
| 节点名 | 值 |
|---|---|
| |
| |
| |
| info.magnolia.ui.form.action.CancelFormActionDefinition | |
| Cancel | |
| |
info.magnolia.ui.form.action.SaveFormActionDefinition | |
info.magnolia.ui.form.action.SaveFormAction | |
Save changes |
在编辑器里添加保存和取消按钮
在editor目录下,创建以下节点。
| 节点名 |
|---|
测试detail子应用
创建一些项,验证您是否也能编辑已有的项。
配置图像生成器
图像生成器是一个绘制缩略图的组件,用于生成在动作栏底部以及缩略视图里的缩略图。
在browser子应用下,创建以下节点。
| 节点名 | 值 |
|---|---|
info.magnolia.ui.imageprovider.definition.ConfiguredImageProviderDefinition | |
info.magnolia.ui.imageprovider.DefaultImageProvider | |
photo |
在browser子应用里选择一个项目来测试预览功能。预览图像在动作栏的底部显示。
配置列表和缩略视图及搜索
您已经有树型视图了,现在来配置一个列表视图,显示较平坦的层次。将树型视图展开,使它显示与树中相同的列。同时,为图像丰富的内容添加缩略视图。
在workbench里,创建以下节点。
| 节点名 | 值 |
|---|---|
| |
| |
| |
| |
| |
info.magnolia.ui.workbench.column.definition.PropertyColumnDefinition | |
true | |
Product name | |
jcrName | |
true | |
info.magnolia.ui.workbench.tree.TreePresenterDefinition | |
| |
| |
| ../../tree/columns | |
| info.magnolia.ui.workbench.list.ListPresenterDefinition | |
| info.magnolia.ui.workbench.thumbnail.ThumbnailPresenterDefinition | |
| |
| ../../tree/columns | |
| info.magnolia.ui.workbench.search.SearchPresenterDefinition |
测试视图。默认情况下,搜索区分字母大小写。
这样更容易
您的第一个内容应用包含了很多配置。手动配置是一个很好的学习方法,但是非常慢。下一个应用,您将会创建得很快。
更快的方法:
- 拷贝现有应用
- 拷贝一个现有内容应用的配置,例如通信录。
- 将拷贝的配置导出到XML。
- 搜索并替换项目名称(contact到product)和标签(Contact到Product)。
- 将这个XML导入到Magnolia。
- 在模块描述符里注册一个新的工作区,并创建新的节点类型。
- 扩展现有应用
- 扩展一个现有应用的配置。
- 如果您不需要修改太多扩展应用的功能,但想要添加一些特殊的东西,那么这个方法很适合。例如,配置工作台,使它只显示工作区的一个分支。
参看Magnolia Academy里的U.4 创建一个内容应用。
评分:
- Pedro Ribeiro Simões: Riley Brooklands 1930 和 Fiat Cinquecento 的照片。Creative Commons Attribution 2.0 Generic (CC BY 2.0)
- John Lloyd: Pontiac 1952, Continental Mark II 和 Hudson 1927 的照片. Creative Commons Attribution 2.0 Generic (CC BY 2.0)