在本教程中,您将配置您的首个内容应用。内容应用是一种特殊的应用,很适合用于定制的内容类型,如产品等。本例中的物品是古董车,您可以用任意东西来代替。
创建模块
您的应用需要被部署在一个模块里。让我们从创建一个最简单的模块描述符开始吧。
创建模块描述符
创建模块描述符:
- 创建一个文本文档并粘贴以下内容:
<!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文件的相对路径,该XML文件定义您的内容应用将会管理的mgnl:product
节点类型。
定义节点类型
节点类型定义内容如何被存储在内容库里。对于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
如果您希望跳过下面的配置步骤并安装完整的应用,请下载这些文件并如图所示的将它们放到文件夹结构里:
模块描述符: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
命令。
安装模块
- 拷贝这个.jar文件到
<CATALINA_HOME>/webapps/<contextPath>/WEB-INF/lib
文件夹,通常为<CATALINA_HOME>/webapps/magnoliaAuthor/WEB-INF/lib
。 - 重启您的Magnolia实例并运行网络更新,这会安装Tutorial Products App模块。
- 打开Manage > Configuration >
/modules/tutorial-products
来找到配置。
节点名 | 值 |
---|---|
server | |
modules | |
tutorial-products | |
version | 1.0.0 |
配置应用
在/modules/tutorial-products
下,创建一个基本的应用配置:
Node name | Value |
---|---|
modules | |
tutorial-products | |
apps | |
products | |
appClass | info.magnolia.ui.contentapp.ContentApp |
class | info.magnolia.ui.api.app.registry.ConfiguredAppDescriptor |
icon | icon-items |
label | Products |
将应用添加到启动器中
- 打开
/modules/ui-admincentral/config/appLauncherLayout/groups/edit/apps
。 - 创建一个
products
内容节点。这将会在应用启动器中添加一个新的板块。
节点名 |
---|
ui-admincentral |
config |
appLauncherLayout |
groups |
edit |
apps |
pages |
assets |
contacts |
categories |
products |
打开应用启动器,验证您是否能看到Products应用图标。如需重启启动器,打开http://localhost:8080/magnoliaAuthor/.magnolia/admincentral?restartApplication
网页。
配置browser子应用
browser
子应用让您能够查看并组织项目,是每个内容应用的一部分。
在/modules/tutorial-products/apps/products
目录下,创建以下节点:
节点名 | 值 |
---|---|
modules | |
tutorial-products | |
apps | |
products | |
subApps |
|
browser |
|
class | info.magnolia.ui.contentapp.browser.BrowserSubAppDescriptor |
subAppClass | info.magnolia.ui.contentapp.browser.BrowserSubApp |
配置工作台
工作台显示内容项目列表。默认情况下,它会提供树型视图。列表和缩略视图及搜索为可选。创建一个工作台,并定义它应显示的节点类型:文件夹,或是内容项。
在browser子应用下,创建如下节点:
节点名 | 值 |
---|---|
browser |
|
workbench |
|
nodeTypes |
|
product |
|
icon | icon-items |
name | mgnl:product |
folder |
|
icon | icon-folder |
name | mgnl:folder |
defaultOrder | jcrName |
dropConstraintClass | info.magnolia.ui.workbench.tree.drop.AlwaysTrueDropConstraint |
editable | false |
includeProperties | false |
path | / |
workspace | products |
配置树型视图
在workbench里,创建一个树型视图,并定义它的列:
节点名 | 值 |
---|---|
workbench | |
contentViews |
|
tree |
|
columns |
|
jcrName |
|
class | info.magnolia.ui.workbench.column.definition.PropertyColumnDefinition |
editable | true |
label | Product name |
propertyName | jcrName |
sortable | true |
status | |
class | info.magnolia.ui.workbench.column.definition.StatusColumnDefinition |
displayInChooseDialog | false |
formatterClass | info.magnolia.ui.workbench.column.StatusColumnFormatter |
label | Status |
width | 45 |
moddate | |
class | info.magnolia.ui.workbench.column.definition.MetaDataColumnDefinition |
displayInChooseDialog | false |
formatterClass | info.magnolia.ui.workbench.column.DateColumnFormatter |
label | Modification date |
propertyName | mgnl:lastModified |
sortable | true |
width | 160 |
class | info.magnolia.ui.workbench.tree.TreePresenterDefinition |
配置文件夹动作
配置添加,编辑,以及删除文件夹的动作。在browser子应用下,创建如下节点:
节点名 | 值 |
---|---|
browser | |
actions |
|
addFolder |
|
availability | |
root | true |
class | info.magnolia.ui.framework.action.AddFolderActionDefinition |
icon | icon-add-item |
label | New folder |
editFolder |
|
class | info.magnolia.ui.framework.action.OpenEditDialogActionDefinition |
dialogName | ui-framework:folder |
icon | icon-edit |
label | Rename folder |
deleteFolder | |
class | info.magnolia.ui.framework.action.DeleteItemActionDefinition |
icon | icon-delete |
label | Delete folder |
创建动作栏
在browser子应用里,创建一个动作栏,并将文件夹动作添加进去。
节点名 | 值 |
---|---|
browser |
|
actionbar |
|
sections |
|
root | |
groups | |
addActions | |
items | |
addFolder | |
availability | |
nodes | false |
root | true |
label | Products |
folder | |
groups | |
addActions | |
items | |
addFolder | |
editActions | |
items | |
editFolder | |
deleteFolder | |
availability | |
nodeTypes | |
mgnl-folder | mgnl:folder |
label | Folder |
启动Products应用,验证您是否能够创建,编辑,和删除文件夹。
配置产品动作
在browser
子应用下,创建如下节点:
节点名 | 值 |
---|---|
browser |
|
actions |
|
addFolder |
|
editFolder |
|
deleteFolder |
|
addProduct |
|
availability | |
nodeTypes | |
folder | mgnl:folder |
root | true |
appName | products |
class | info.magnolia.ui.contentapp.detail.action.CreateItemActionDefinition |
icon | icon-add-item |
label | New product |
nodeType | mgnl:product |
subAppId | detail |
editProduct | |
appName | products |
class | info.magnolia.ui.contentapp.detail.action.EditItemActionDefinition |
icon | icon-edit |
label | Edit product |
nodeType | mgnl:product |
subAppId | detail |
deleteProduct | |
class | info.magnolia.ui.framework.action.DeleteItemActionDefinition |
icon | icon-delete |
label | Delete product |
将产品动作添加到动作栏
在actionbar
目录下,为产品动作创建一个新的section
。设置editProduct
为默认动作,也就是当用户在browser
子应用里双击一项内容时执行的动作。
节点名 | 值 |
---|---|
browser |
|
actionbar |
|
sections |
|
root | |
groups | |
addActions | |
items | |
addFolder | |
addProduct | |
availability | |
nodes | false |
root | true |
label | Products |
folder | |
groups | |
addActions | |
items | |
addFolder | |
addProduct | |
editActions | |
items | |
editFolder | |
deleteFolder | |
availability | |
nodeTypes | |
mgnl-folder | mgnl:folder |
label | Folder |
product | |
groups | |
editActions | |
items | |
editProduct | |
deleteProduct | |
availability | |
nodeTypes | |
mgnl-product | mgnl:prodcut |
label | Product |
defaultAction | editProduct |
配置detail子应用
detail
子应用使您能够编辑一个产品。在subApps
下,创建如下节点。
节点名 | 值 |
---|---|
subApps |
|
detail |
|
class | info.magnolia.ui.contentapp.detail.DetailSubAppDescriptor |
subAppClass | info.magnolia.ui.contentapp.detail.DetailSubApp |
配置编辑器
编辑器是一个能够编辑内容的组件,通常显示为一个表格。编辑器的配置定义内容被保存在哪个工作区,以及哪些节点能够编辑。
在detail子应用下,创建如下节点。
节点名 | 值 |
---|---|
detail | |
editor | |
nodeType | |
icon | icon-items |
name | mgnl:product |
workspace | products |
配置表格
您的应用可以创建和编辑任何种类的内容。所以内容决定了您在表格里需要的域。本教程中,产品为古董车。所以我们创建了一个表格,包含以下三个域:产品名,照片,以及照片评分。
在editor节点
下,创建以下节点。
节点名 | 值 |
---|---|
editor |
|
form |
|
tabs |
|
product |
|
fields |
|
name |
|
class | info.magnolia.ui.form.field.definition.TextFieldDefinition |
label | Product name |
name | jcrName |
fileUpload | |
allowedMimeTypePattern | image.* |
binaryNodeName | photo |
class | info.magnolia.dam.asset.field.definition.DamUploadFieldDefinition |
label | Photo |
photoCredit | |
class | info.magnolia.ui.form.field.definition.TextFieldDefinition |
description | Please define a photo credit |
label | Photo credit |
label | Product |
description | Define the product information |
label | Edit product |
配置保存和取消动作
在detail
子应用下,创建以下节点。
节点名 | 值 |
---|---|
detail |
|
actions |
|
cancel |
|
class | info.magnolia.ui.form.action.CancelFormActionDefinition |
label | Cancel |
save |
|
class | info.magnolia.ui.form.action.SaveFormActionDefinition |
implementationClass | info.magnolia.ui.form.action.SaveFormAction |
label | Save changes |
添加保存和取消按钮到编辑器
在editor
目录下,创建以下节点。
节点名 |
---|
editor |
actions |
cancel |
save |
测试detail子应用
创建一些项目,验证您是否也能编辑已有的项目。
配置图像生成器
图像生成器是一个绘制缩略图的组件,用于生成在动作栏底部以及缩略视图里的缩略图。
在browser
子应用下,创建以下节点。
节点名 | 值 |
---|---|
browser | |
imageProvider | |
class | info.magnolia.ui.imageprovider.definition.ConfiguredImageProviderDefinition |
imageProviderClass | info.magnolia.ui.imageprovider.DefaultImageProvider |
originalImageNodeName | photo |
在browser
子应用里选择一个项目来测试预览功能。预览图像被显示在动作栏的底部。
配置列表和缩略视图及搜索
您已经有一个树型视图了。现在来配置一个列表视图,以显示较平坦的层次。将树型视图展开以显示与树中相同的列。同时,为图像丰富的内容添加缩略视图。
在workbench
里,创建以下节点。
节点名 | 值 |
---|---|
workbench |
|
contentViews |
|
tree |
|
columns |
|
jcrName |
|
class | info.magnolia.ui.workbench.column.definition.PropertyColumnDefinition |
editable | true |
label | Product name |
propertyName | jcrName |
sortable | true |
class | info.magnolia.ui.workbench.tree.TreePresenterDefinition |
list |
|
columns |
|
extends | ../../tree/columns |
class | info.magnolia.ui.workbench.list.ListPresenterDefinition |
thumbnail | |
class | info.magnolia.ui.workbench.thumbnail.ThumbnailPresenterDefinition |
search | |
columns |
|
extends | ../../tree/columns |
class | 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)