在本教程中,您将配置您的首个在本教程中,您将配置您的第一个内容应用。内容应用是一种特殊的应用,很适合用于定制的内容类型,如产品等。本例中的物品是古董车,您可以用任意东西来代替。。内容应用是一种特殊的应用,很适合用于定制的内容类型,如产品等。本例中的物品是古董车,您也可以用任意东西来代替。
创建模块
您的应用需要被部署在一个模块里。让我们从创建一个最简单的模块描述符开始吧。
创建模块描述符
...
- 创建一个文本文档并粘贴以下内容:
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文件的相对路径,该XML文件定义您的内容应用将会管理的:到XML文件的相对路径。您的内容应用将会管理mgnl:product
节点类型。节点类型,该XML文件就是定义这个节点类型的。
定义节点类型
节点类型定义内容如何被存储在内容库里。对于Products应用,定义一个新的节点类型定义内容库里内容如何存储。对于Products应用,定义一个新的节点类型mgnl:product
来扩展mgnl:content
。
...
您的模块被部署为.jar文件。JAR是一种档案文件格式,将所有需要的Java类和资源打包进单个文件中。
创建一个模块JAR:以下为如何创建一个模块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 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 命令。 |
安装模块
- 拷贝这个.jar文件到
<CATALINA_HOME>/webapps/<contextPath>/WEB-INF/lib
文件夹,通常为文件夹,通常即<CATALINA_HOME>/webapps/magnoliaAuthor/WEB-INF/lib
。 - 重启您的Magnolia实例并运行网络更新,这会安装Tutorial Products App模块。
- 打开Manage > Configuration > 管理 > 配置 >
/modules/tutorial-products
来找到配置。products,
找到配置。
Advanced Tables - Table Plus |
---|
enableHeadingAttributes | false |
---|
enableSorting | false |
---|
class | m5-configuration-tree |
---|
enableHighlighting | false |
---|
|
节点名 | 值 |
---|
server | | modules | | tutorial-products | | version | 1.0.0 |
|
...
Advanced Tables - Table Plus |
---|
enableHeadingAttributes | false |
---|
enableSorting | false |
---|
class | m5-configuration-tree |
---|
enableHighlighting | false |
---|
|
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 |
|
...
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 |
|
...
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子应用里,创建一个动作栏,并将文件夹动作添加进去。在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应用,验证您是否能够创建,编辑,和删除文件夹。启动Products应用,验证您是否能够创建、编辑和删除文件夹。
配置产品动作
在browser
子应用下,创建如下节点:
...
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 |
|
...
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 |
---|
|
...
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 创建一个内容应用。
...