Page History

在本教程中，您将配置您的首个在本教程中，您将配置您的第一个内容应用。内容应用是一种特殊的应用，很适合用于定制的内容类型，如产品等。本例中的物品是古董车，您可以用任意东西来代替。。内容应用是一种特殊的应用，很适合用于定制的内容类型，如产品等。本例中的物品是古董车，您也可以用任意东西来代替。

Table of Contents

创建模块

您的应用需要被部署在一个模块里。让我们从创建一个最简单的模块描述符开始吧。

创建模块描述符

...

创建一个文本文档并粘贴以下内容：

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

title	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

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

节点名

值

Mgnl f

server

Mgnl f

modules

Mgnl f

tutorial-products

mgnl-p

version

1.0.0

配置应用

在/modules/tutorial-products下，创建一个基本的应用配置：

Advanced Tables - Table Plus

enableHeadingAttributes	false
enableSorting	false
class	m5-configuration-tree
enableHighlighting	false

Value

节点名

值

Mgnl f

Node name

modules

Mgnl f

tutorial-products

Mgnl f

apps

Mgnl n

products

mgnl-p

appClass

info.magnolia.ui.contentapp.ContentApp

mgnl-p

class

info.magnolia.ui.api.app.registry.ConfiguredAppDescriptor

mgnl-p

icon

icon-items

mgnl-p

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

节点名

Mgnl f

ui-admincentral

Mgnl f

config

Mgnl n

appLauncherLayout

Mgnl n

groups

Mgnl n

edit

Mgnl n

apps

Mgnl n

pages

Mgnl n

assets

Mgnl n

contacts

Mgnl n

配置工作台

工作台显示内容项目列表。默认情况下，它会提供树型视图。工作台（workbanch）显示内容项目列表。默认情况下，显示树型视图，可选的有列表和缩略视图及搜索为可选。创建一个工作台，并定义它应显示的节点类型：文件夹，或是内容项。。创建一个工作台，并定义它应显示的节点类型——是文件夹还是内容项。

在browser子应用下，创建如下节点：

Advanced Tables - Table Plus

enableHeadingAttributes	false
enableSorting	false
class	m5-configuration-tree
enableHighlighting	false

节点名

值

Mgnl n

browser

Mgnl n

workbench

Mgnl n

nodeTypes

Mgnl n

product

mgnl-p

icon

icon-items

mgnl-p

name

mgnl:product

Mgnl n

folder

mgnl-p

icon

icon-folder

mgnl-p

name

mgnl:folder

mgnl-p

defaultOrder

jcrName

mgnl-p

dropConstraintClass

info.magnolia.ui.workbench.tree.drop.AlwaysTrueDropConstraint

mgnl-p

editable

false

mgnl-p

includeProperties

false

mgnl-p

path

/

mgnl-p

workspace

products

配置树型视图

在workbench里，创建一个树型视图，并定义它的列：

Advanced Tables - Table Plus

enableHeadingAttributes	false
enableSorting	false
class	m5-configuration-tree
enableHighlighting	false

节点名

值

Mgnl n

workbench

Mgnl n

contentViews

Mgnl n

tree

Mgnl n

columns

Mgnl n

jcrName

mgnl-p

class

info.magnolia.ui.workbench.column.definition.PropertyColumnDefinition

mgnl-p

editable

true

mgnl-p

label

Product name

mgnl-p

propertyName

jcrName

mgnl-p

sortable

true

Mgnl n

status

mgnl-p

class

info.magnolia.ui.workbench.column.definition.StatusColumnDefinition

mgnl-p

displayInChooseDialog

false

mgnl-p

formatterClass

info.magnolia.ui.workbench.column.StatusColumnFormatter

mgnl-p

label

Status

mgnl-p

width

45

Mgnl n

moddate

mgnl-p

class

info.magnolia.ui.workbench.column.definition.MetaDataColumnDefinition

mgnl-p

displayInChooseDialog

false

mgnl-p

formatterClass

info.magnolia.ui.workbench.column.DateColumnFormatter

mgnl-p

label

Modification date

mgnl-p

propertyName

mgnl:lastModified

mgnl-p

sortable

true

mgnl-p

width

160

mgnl-p

class

info.magnolia.ui.workbench.tree.TreePresenterDefinition

配置文件夹动作

配置添加，编辑，以及删除文件夹的动作。在配置添加、编辑以及删除文件夹的动作。在browser子应用下，创建如下节点：

Advanced Tables - Table Plus

enableHeadingAttributes	false
enableSorting	false
class	m5-configuration-tree
enableHighlighting	false

节点名

值

Mgnl n

browser

Mgnl n

actions

Mgnl n

addFolder

Mgnl n

availability

mgnl-p

root

true

mgnl-p

class

info.magnolia.ui.framework.action.AddFolderActionDefinition

mgnl-p

icon

icon-add-item

mgnl-p

label

New folder

Mgnl n

editFolder

mgnl-p

class

info.magnolia.ui.framework.action.OpenEditDialogActionDefinition

mgnl-p

dialogName

ui-framework:folder

mgnl-p

icon

icon-edit

mgnl-p

label

Rename folder

Mgnl n

deleteFolder

mgnl-p

class

info.magnolia.ui.framework.action.DeleteItemActionDefinition

mgnl-p

icon

icon-delete

mgnl-p

label

Delete folder

创建动作栏

在browser子应用里，创建一个动作栏，并将文件夹动作添加进去。在browser子应用里，创建一个动作栏，并将文件夹动作添加进去。

Advanced Tables - Table Plus

enableHeadingAttributes	false
enableSorting	false
class	m5-configuration-tree
enableHighlighting	false

节点名

值

Mgnl n

browser

Mgnl n

actionbar

Mgnl n

sections

Mgnl n

root

Mgnl n

groups

Mgnl n

addActions

Mgnl n

items

Mgnl n

addFolder

Mgnl n

availability

mgnl-p

nodes

false

mgnl-p

root

true

mgnl-p

label

Products

Mgnl n

folder

Mgnl n

groups

Mgnl n

addActions

Mgnl n

items

Mgnl n

addFolder

Mgnl n

editActions

Mgnl n

items

Mgnl n

editFolder

Mgnl n

deleteFolder

Mgnl n

availability

Mgnl n

nodeTypes

mgnl-p

mgnl-folder

mgnl:folder

mgnl-p

label

Folder

启动Products应用，验证您是否能够创建，编辑，和删除文件夹。启动Products应用，验证您是否能够创建、编辑和删除文件夹。

配置产品动作

在browser子应用下，创建如下节点：

Advanced Tables - Table Plus

enableHeadingAttributes	false
enableSorting	false
class	m5-configuration-tree
enableHighlighting	false

节点名

值

Mgnl n

browser

Mgnl n

actions

Mgnl n

addFolder

Mgnl n

editFolder

Mgnl n

deleteFolder

Mgnl n

addProduct

Mgnl n

availability

Mgnl n

nodeTypes

mgnl-p

folder

mgnl:folder

mgnl-p

root

true

mgnl-p

appName

products

mgnl-p

class

info.magnolia.ui.contentapp.detail.action.CreateItemActionDefinition

mgnl-p

icon

icon-add-item

mgnl-p

label

New product

mgnl-p

nodeType

mgnl:product

mgnl-p

subAppId

detail

Mgnl n

editProduct

mgnl-p

appName

products

mgnl-p

class

info.magnolia.ui.contentapp.detail.action.EditItemActionDefinition

mgnl-p

icon

icon-edit

mgnl-p

label

Edit product

mgnl-p

nodeType

mgnl:product

mgnl-p

subAppId

detail

Mgnl n

deleteProduct

mgnl-p

class

info.magnolia.ui.framework.action.DeleteItemActionDefinition

mgnl-p

icon

icon-delete

mgnl-p

label

Delete product

将产品动作添加到动作栏

...

Advanced Tables - Table Plus

enableHeadingAttributes	false
enableSorting	false
class	m5-configuration-tree
enableHighlighting	false

节点名

值

Mgnl n

browser

Mgnl n

actionbar

Mgnl n

sections

Mgnl n

root

Mgnl n

groups

Mgnl n

addActions

Mgnl n

items

Mgnl n

addFolder

Mgnl n

addProduct

Mgnl n

availability

mgnl-p

nodes

false

mgnl-p

root

true

mgnl-p

label

Products

Mgnl n

folder

Mgnl n

groups

Mgnl n

addActions

Mgnl n

items

Mgnl n

addFolder

Mgnl n

addProduct

Mgnl n

editActions

Mgnl n

items

Mgnl n

editFolder

Mgnl n

deleteFolder

Mgnl n

availability

Mgnl n

nodeTypes

mgnl-p

mgnl-folder

mgnl:folder

mgnl-p

label

Folder

Mgnl n

product

Mgnl n

groups

Mgnl n

editActions

Mgnl n

items

Mgnl n

editProduct

Mgnl n

deleteProduct

Mgnl n

availability

Mgnl n

nodeTypes

mgnl-p

mgnl-product

mgnl:prodcut

mgnl-p

label

Product

mgnl-p

defaultAction

editProduct

配置detail子应用

...

Advanced Tables - Table Plus

enableHeadingAttributes	false
enableSorting	false
class	m5-configuration-tree
enableHighlighting	false

节点名

值

Mgnl n

subApps

Mgnl n

detail

mgnl-p

class

info.magnolia.ui.contentapp.detail.DetailSubAppDescriptor

mgnl-p

subAppClass

info.magnolia.ui.contentapp.detail.DetailSubApp

配置编辑器

编辑器是一个能够编辑内容的组件，通常显示为一个表单。编辑器的配置定义内容被保存在哪个工作区，以及哪些节点能够编辑。编辑器是一个能够编辑内容的组件，通常显示为一个表单。编辑器配置定义内容保存在哪个工作区，以及哪些节点能够编辑。

在detail子应用下，创建如下节点。

Advanced Tables - Table Plus

enableHeadingAttributes	false
enableSorting	false
class	m5-configuration-tree
enableHighlighting	false

节点名

值

Mgnl n

detail

Mgnl n

editor

Mgnl n

nodeType

mgnl-p

icon

icon-items

mgnl-p

name

mgnl:product

mgnl-p

workspace

products

配置表单

您的应用可以创建和编辑任何种类的内容。所以内容决定了您在表单里需要的字段。本教程中，产品为古董车。所以我们创建了一个表单，包含以下三个字段：产品名，照片，以及照片评分。您的应用可以创建和编辑任何内容，所以内容决定了您在表单里需要的字段。本教程中，产品为古董车，所以我们创建了一个表单，包含以下三个字段内容：产品名，照片，以及照片评分。

在editor节点下，创建以下节点。

Advanced Tables - Table Plus

enableHeadingAttributes	false
enableSorting	false
class	m5-configuration-tree
enableHighlighting	false

节点名

值

Mgnl n

editor

Mgnl n

form

Mgnl n

tabs

Mgnl n

product

Mgnl n

fields

Mgnl n

name

mgnl-p

class

info.magnolia.ui.form.field.definition.TextFieldDefinition

mgnl-p

label

Product name

mgnl-p

name

jcrName

Mgnl n

fileUpload

mgnl-p

allowedMimeTypePattern

image.*

mgnl-p

binaryNodeName

photo

mgnl-p

class

info.magnolia.dam.asset.field.definition.DamUploadFieldDefinition

mgnl-p

label

Photo

Mgnl n

photoCredit

mgnl-p

class

info.magnolia.ui.form.field.definition.TextFieldDefinition

mgnl-p

description

Please define a photo credit

mgnl-p

label

Photo credit

mgnl-p

label

Product

mgnl-p

description

Define the product information

mgnl-p

label

Edit product

配置保存和取消动作

...

Advanced Tables - Table Plus

enableHeadingAttributes	false
enableSorting	false
class	m5-configuration-tree
enableHighlighting	false

节点名

值

Mgnl n

detail

Mgnl n

actions

Mgnl n

cancel

mgnl-p

class

info.magnolia.ui.form.action.CancelFormActionDefinition

mgnl-p

label

Cancel

Mgnl n

save

mgnl-p

class

info.magnolia.ui.form.action.SaveFormActionDefinition

mgnl-p

implementationClass

info.magnolia.ui.form.action.SaveFormAction

mgnl-p

label

Save changes

在编辑器里添加保存和取消按钮

...

Advanced Tables - Table Plus

enableHeadingAttributes	false
enableSorting	false
class	m5-configuration-tree
enableHighlighting	false

节点名

Mgnl n

editor

Mgnl n

actions

Mgnl n

cancel

Mgnl n

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

节点名

值

Mgnl n

browser

Mgnl n

imageProvider

mgnl-p

class

info.magnolia.ui.imageprovider.definition.ConfiguredImageProviderDefinition

mgnl-p

imageProviderClass

info.magnolia.ui.imageprovider.DefaultImageProvider

mgnl-p

originalImageNodeName

photo

在browser子应用里选择一个项目来测试预览功能。预览图像被显示在动作栏的底部。子应用里选择一个项目来测试预览功能。预览图像在动作栏的底部显示。

配置列表和缩略视图及搜索

您已经有一个树型视图了。现在来配置一个列表视图，以显示较平坦的层次。将树型视图展开以显示与树中相同的列。同时，为图像丰富的内容添加缩略视图。您已经有树型视图了，现在来配置一个列表视图，显示较平坦的层次。将树型视图展开，使它显示与树中相同的列。同时，为图像丰富的内容添加缩略视图。

在workbench里，创建以下节点。

Advanced Tables - Table Plus

enableHeadingAttributes	false
enableSorting	false
class	m5-configuration-tree
enableHighlighting	false

节点名

值

Mgnl n

workbench

Mgnl n

contentViews

Mgnl n

tree

Mgnl n

columns

Mgnl n

jcrName

mgnl-p

class

info.magnolia.ui.workbench.column.definition.PropertyColumnDefinition

mgnl-p

editable

true

mgnl-p

label

Product name

mgnl-p

propertyName

jcrName

mgnl-p

sortable

true

mgnl-p

class

info.magnolia.ui.workbench.tree.TreePresenterDefinition

Mgnl n

list

Mgnl n

columns

mgnl-p

extends

../../tree/columns

mgnl-p

class

info.magnolia.ui.workbench.list.ListPresenterDefinition

Mgnl n

thumbnail

mgnl-p

class

info.magnolia.ui.workbench.thumbnail.ThumbnailPresenterDefinition

Mgnl n

search

Mgnl n

columns

mgnl-p

extends

../../tree/columns

mgnl-p

class

info.magnolia.ui.workbench.search.SearchPresenterDefinition

测试视图。默认情况下，搜索区分字母大小写。

这样更容易

您的第一个内容应用包含了很多配置。手动配置是一个很好的学习方法，但是非常慢。您的下一个应用将会创建得您的第一个内容应用包含了很多配置。手动配置是一个很好的学习方法，但是非常慢。下一个应用，您将会创建得很快。

更快的方法：

拷贝现有应用
1. 拷贝一个现有内容应用得配置，例如拷贝一个现有内容应用的配置，例如通信录。
2. 将拷贝的配置导出到XML。
3. 搜索并替换项目名称（contact到product）和标签（Contact到Product）。
4. 将这个XML导入到Magnolia。
5. 在模块描述符里注册一个新的工作区，并创建新的节点类型。
扩展现有应用
1. 扩展一个现有应用的配置。
2. 如果您不需要修改太多扩展应用的功能，但想要添加一些特殊的东西，那么这个方法很适合。例如，配置工作台来只显示工作区的一个分支。如果您不需要修改太多扩展应用的功能，但想要添加一些特殊的东西，那么这个方法很适合。例如，配置工作台，使它只显示工作区的一个分支。

参看Magnolia Academy里的U.4 创建一个内容应用。

...

Page tree

Versions Compared

Old Version 6

New Version Current

Key

创建模块

创建模块描述符

定义节点类型

安装模块

配置应用

将应用添加到启动器中

配置工作台

配置树型视图

配置文件夹动作

创建动作栏

配置产品动作

将产品动作添加到动作栏

配置detail子应用

配置编辑器

配置表单

配置保存和取消动作

在编辑器里添加保存和取消按钮

测试detail子应用

配置图像生成器

配置列表和缩略视图及搜索

这样更容易