在本教程中,您将配置您的第一个内容应用。内容应用是一种特殊的应用,很适合用于定制的内容类型,如产品等。本例中的物品是古董车,您也可以用任意东西来代替。
创建模块
您的应用需要被部署在一个模块里。让我们从创建一个最简单的模块描述符开始吧。
创建模块描述符
- 创建一个文本文档并粘贴以下内容:
Code Block |
---|
language | html/xml |
---|
title | tutorial-products.xml |
---|
|
<!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> |
- fake
- 保存这个模块描述符为
tutorial-products.xml。
该模块描述符的要素是:
repository:
magnolia
内容库是应用储存内容的地方。workspace
:为内容注册一个新的工作区products
。nodeTypeFile
:到XML文件的相对路径。您的内容应用将会管理mgnl:product
节点类型,该XML文件就是定义这个节点类型的。
定义节点类型
节点类型定义内容库里内容如何存储。对于Products应用,定义一个新的节点类型mgnl:product
来扩展mgnl:content
。
- 创建一个文本文件,并将以下内容粘贴进去。
保存文件为magnolia-products-nodetypes.xml
.
Code Block |
---|
language | html/xml |
---|
title | 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 *
Code Block |
---|
language | none |
---|
title | JAR文件夹层次 |
---|
|
/tutorial-products
/META-INF
/magnolia
tutorial-products.xml
/mgnl-nodetypes
magnolia-products-nodetypes.xml |
该jar
命令将创建一个.jar文件,您可以将它部署在Magnolia CMS上。
Tip |
---|
|
如果您希望跳过下面的配置步骤并安装完整的应用,请下载这些文件,并如图所示将它们放到文件夹结构里,然后再运行jar 命令。 Code Block |
---|
language | none |
---|
title | JAR文件夹层次 |
---|
| /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,
找到配置。
Advanced Tables - Table Plus |
---|
enableHeadingAttributes | false |
---|
enableSorting | false |
---|
class | m5-configuration-tree |
---|
enableHighlighting | false |
---|
|
节点名 | 值 |
---|
server | | modules | | tutorial-products | | version | 1.0.0 |
|
配置应用
在/modules/tutorial-products
下,创建一个基本的应用配置:
Advanced Tables - Table Plus |
---|
enableHeadingAttributes | false |
---|
enableSorting | false |
---|
class | m5-configuration-tree |
---|
enableHighlighting | false |
---|
|
节点名 | 值 |
---|
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
内容节点。这将会在应用启动器中添加一个新的板块。
Advanced Tables - Table Plus |
---|
enableHeadingAttributes | false |
---|
enableSorting | false |
---|
class | m5-configuration-tree |
---|
enableHighlighting | false |
---|
|
节点名 |
---|
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
目录下,创建以下节点:
Advanced Tables - Table Plus |
---|
enableHeadingAttributes | false |
---|
enableSorting | false |
---|
class | m5-configuration-tree |
---|
enableHighlighting | false |
---|
|
节点名 | 值 |
---|
modules | | tutorial-products | | apps | | products | | subApps | | browser | | class | info.magnolia.ui.contentapp.browser.BrowserSubAppDescriptor | subAppClass | info.magnolia.ui.contentapp.browser.BrowserSubApp |
|
配置工作台
工作台(workbanch)显示内容项目列表。默认情况下,显示树型视图,可选的有列表和缩略视图及搜索。创建一个工作台,并定义它应显示的节点类型——是文件夹还是内容项。
在browser子应用下,创建如下节点:
Advanced Tables - Table Plus |
---|
enableHeadingAttributes | false |
---|
enableSorting | false |
---|
class | m5-configuration-tree |
---|
enableHighlighting | false |
---|
|
节点名 | 值 |
---|
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里,创建一个树型视图,并定义它的列:
Advanced Tables - Table Plus |
---|
enableHeadingAttributes | false |
---|
enableSorting | false |
---|
class | m5-configuration-tree |
---|
enableHighlighting | false |
---|
|
节点名 | 值 |
---|
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子应用下,创建如下节点:
Advanced Tables - Table Plus |
---|
enableHeadingAttributes | false |
---|
enableSorting | false |
---|
class | m5-configuration-tree |
---|
enableHighlighting | false |
---|
|
节点名 | 值 |
---|
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
子应用里,创建一个动作栏,并将文件夹动作添加进去。
Advanced Tables - Table Plus |
---|
enableHeadingAttributes | false |
---|
enableSorting | false |
---|
class | m5-configuration-tree |
---|
enableHighlighting | false |
---|
|
节点名 | 值 |
---|
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
子应用下,创建如下节点:
Advanced Tables - Table Plus |
---|
enableHeadingAttributes | false |
---|
enableSorting | false |
---|
class | m5-configuration-tree |
---|
enableHighlighting | false |
---|
|
节点名 | 值 |
---|
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
子应用里双击一项内容时执行的动作。
Advanced Tables - Table Plus |
---|
enableHeadingAttributes | false |
---|
enableSorting | false |
---|
class | m5-configuration-tree |
---|
enableHighlighting | false |
---|
|
节点名 | 值 |
---|
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
下,创建如下节点。
Advanced Tables - Table Plus |
---|
enableHeadingAttributes | false |
---|
enableSorting | false |
---|
class | m5-configuration-tree |
---|
enableHighlighting | false |
---|
|
节点名 | 值 |
---|
subApps | | detail | | class | info.magnolia.ui.contentapp.detail.DetailSubAppDescriptor | subAppClass | info.magnolia.ui.contentapp.detail.DetailSubApp |
|
配置编辑器
编辑器是一个能够编辑内容的组件,通常显示为一个表单。编辑器配置定义内容保存在哪个工作区,以及哪些节点能够编辑。
在detail子应用下,创建如下节点。
Advanced Tables - Table Plus |
---|
enableHeadingAttributes | false |
---|
enableSorting | false |
---|
class | m5-configuration-tree |
---|
enableHighlighting | false |
---|
|
节点名 | 值 |
---|
detail | | editor | | nodeType | | icon | icon-items | name | mgnl:product | workspace | products |
|
配置表单
您的应用可以创建和编辑任何内容,所以内容决定了您在表单里需要的字段。本教程中,产品为古董车,所以我们创建了一个表单,包含以下三个字段内容:产品名,照片,以及照片评分。
在editor节点
下,创建以下节点。
Advanced Tables - Table Plus |
---|
enableHeadingAttributes | false |
---|
enableSorting | false |
---|
class | m5-configuration-tree |
---|
enableHighlighting | false |
---|
|
节点名 | 值 |
---|
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
子应用下,创建以下节点。
Advanced Tables - Table Plus |
---|
enableHeadingAttributes | false |
---|
enableSorting | false |
---|
class | m5-configuration-tree |
---|
enableHighlighting | false |
---|
|
节点名 | 值 |
---|
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
目录下,创建以下节点。
Advanced Tables - Table Plus |
---|
enableHeadingAttributes | false |
---|
enableSorting | false |
---|
class | m5-configuration-tree |
---|
enableHighlighting | false |
---|
|
节点名 |
---|
editor | actions | cancel | save |
|
测试detail子应用
创建一些项,验证您是否也能编辑已有的项。
配置图像生成器
Include Page |
---|
| _What is an image provider |
---|
| _What is an image provider |
---|
|
在browser
子应用下,创建以下节点。
Advanced Tables - Table Plus |
---|
enableHeadingAttributes | false |
---|
enableSorting | false |
---|
class | m5-configuration-tree |
---|
enableHighlighting | false |
---|
|
节点名 | 值 |
---|
browser | | imageProvider | | class | info.magnolia.ui.imageprovider.definition.ConfiguredImageProviderDefinition | imageProviderClass | info.magnolia.ui.imageprovider.DefaultImageProvider | originalImageNodeName | photo |
|
在browser
子应用里选择一个项目来测试预览功能。预览图像在动作栏的底部显示。
配置列表和缩略视图及搜索
您已经有树型视图了,现在来配置一个列表视图,显示较平坦的层次。将树型视图展开,使它显示与树中相同的列。同时,为图像丰富的内容添加缩略视图。
在workbench
里,创建以下节点。
Advanced Tables - Table Plus |
---|
enableHeadingAttributes | false |
---|
enableSorting | false |
---|
class | m5-configuration-tree |
---|
enableHighlighting | false |
---|
|
节点名 | 值 |
---|
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 创建一个内容应用。
评分: