Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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

   

Table of Contents

创建模块

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

创建模块描述符

...

  1. 创建一个文本文档并粘贴以下内容:
Code Block
languagehtml/xml
titletutorial-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>
  1. fake
  2. 保存这个模块描述符为tutorial-products.xml。

该模块描述符的要素是:

  • repositorymagnolia内容库是应用储存内容的地方。
  • workspace。为内容注册一个新的工作区:为内容注册一个新的工作区products
  • nodeTypeFile。到XML文件的相对路径,该XML文件定义您的内容应用将会管理的:到XML文件的相对路径。您的内容应用将会管理mgnl:product节点类型。节点类型,该XML文件就是定义这个节点类型的

定义节点类型

节点类型定义内容如何被存储在内容库里。对于Products应用,定义一个新的节点类型定义内容库里内容如何存储。对于Products应用,定义一个新的节点类型mgnl:product来扩展mgnl:content

...

您的模块被部署为.jar文件。JAR是一种档案文件格式,将所有需要的Java类和资源打包进单个文件中。

创建一个模块JAR:以下为如何创建一个模块JAR:

  1. 创建一个如下所示的文件夹层次结构。
  2. 将模块描述符和节点类型XML文件放入如下所示的文件夹。
  3. 打开一个命令窗口。
  4. tutorial-products目录下敲入如下命令:
    jar cvf tutorial-products-1.0.jar * 
Code Block
languagenone
titleJAR文件夹层次
/tutorial-products
   /META-INF
      /magnolia
         tutorial-products.xml
   /mgnl-nodetypes
      magnolia-products-nodetypes.xml

jar命令将创建一个.jar文件,您可以将之部署在Magnolia jar文件,您可以将它部署在Magnolia CMS上。

Tip
titleTip

如果您希望跳过下面的配置步骤并安装完整的应用,请下载这些文件并如图所示的将它们放到文件夹结构里:如果您希望跳过下面的配置步骤并安装完整的应用,请下载这些文件,并如图所示将它们放到文件夹结构里,然后再运行jar命令。

Code Block
languagenone
titleJAR文件夹层次
/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命令。

安装模块

  1. 拷贝这个.jar文件到<CATALINA_HOME>/webapps/<contextPath>/WEB-INF/lib文件夹,通常为文件夹,通常即<CATALINA_HOME>/webapps/magnoliaAuthor/WEB-INF/lib
  2. 重启您的Magnolia实例并运行网络更新,这会安装Tutorial Products App模块。
  3. 打开Manage > Configuration > 管理 > 配置 /modules/tutorial-products来找到配置。products,找到配置。
Advanced Tables - Table Plus
enableHeadingAttributesfalse
enableSortingfalse
classm5-configuration-tree
enableHighlightingfalse
节点名
server 

modules

 

tutorial-products

 

Paragraph

version

1.0.0

...

Advanced Tables - Table Plus
enableHeadingAttributesfalse
enableSortingfalse
classm5-configuration-tree
enableHighlightingfalse
Node name节点名Value

modules

 

tutorial-products

 

apps

 

products

 

Paragraph

appClass

info.magnolia.ui.contentapp.ContentApp

Paragraph

class

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

Paragraph

icon

icon-items

Paragraph

label

Products

...

Advanced Tables - Table Plus
enableHeadingAttributesfalse
enableSortingfalse
classm5-configuration-tree
enableHighlightingfalse
节点名

modules

 

tutorial-products

 

apps

 

products

 

subApps

 

browser

 

Paragraph

class

info.magnolia.ui.contentapp.browser.BrowserSubAppDescriptor

Paragraph

subAppClass

info.magnolia.ui.contentapp.browser.BrowserSubApp

配置工作台

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

browser子应用下,创建如下节点:

Advanced Tables - Table Plus
enableHeadingAttributesfalse
enableSortingfalse
classm5-configuration-tree
enableHighlightingfalse
节点名

browser

 

workbench

 

nodeTypes

 

product

 

Paragraph

icon

icon-items

Paragraph

name

mgnl:product 

folder

 

Paragraph

icon

icon-folder

Paragraph

name

mgnl:folder

Paragraph

defaultOrder

jcrName

Paragraph

dropConstraintClass

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

Paragraph

editable

false

Paragraph

includeProperties

false

Paragraph

path

/

Paragraph

workspace

products

...

Advanced Tables - Table Plus
enableHeadingAttributesfalse
enableSortingfalse
classm5-configuration-tree
enableHighlightingfalse
节点名
workbench 

contentViews

 

tree

 

columns

 

jcrName

 

Paragraph

class

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

Paragraph

editable

true

Paragraph

label

Product name

Paragraph

propertyName

jcrName

Paragraph

sortable

true

status

 

Paragraph

class

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

Paragraph

displayInChooseDialog

false

Paragraph

formatterClass

info.magnolia.ui.workbench.column.StatusColumnFormatter

Paragraph

label

Status

Paragraph

width

45

moddate

 

Paragraph

class

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

Paragraph

displayInChooseDialog

false

Paragraph

formatterClass

info.magnolia.ui.workbench.column.DateColumnFormatter

Paragraph

label

Modification date

Paragraph

propertyName

mgnl:lastModified

Paragraph

sortable

true

Paragraph

width

160

Paragraph

class

info.magnolia.ui.workbench.tree.TreePresenterDefinition

配置文件夹动作

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

Advanced Tables - Table Plus
enableHeadingAttributesfalse
enableSortingfalse
classm5-configuration-tree
enableHighlightingfalse
节点名
browser 

actions

 

addFolder

 

availability

 

Paragraph

root

true

Paragraph

class

info.magnolia.ui.framework.action.AddFolderActionDefinition

Paragraph

icon

icon-add-item

Paragraph

label

New folder

editFolder

 

Paragraph

class

info.magnolia.ui.framework.action.OpenEditDialogActionDefinition

Paragraph

dialogName

ui-framework:folder

Paragraph

icon

icon-edit

Paragraph

label

Rename folder

deleteFolder

 

Paragraph

class

info.magnolia.ui.framework.action.DeleteItemActionDefinition

Paragraph

icon

icon-delete

Paragraph

label

Delete folder

创建动作栏

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

Advanced Tables - Table Plus
enableHeadingAttributesfalse
enableSortingfalse
classm5-configuration-tree
enableHighlightingfalse
节点名

browser

 

actionbar

 

sections

 

root

 

groups

 

addActions

 

items

 

addFolder

 

availability

 

Paragraph

nodes

false

Paragraph

root

true

Paragraph

label

Products

folder

 

groups

 

addActions

 

items

 

addFolder

 

editActions

 

items

 

editFolder

 

deleteFolder

 

availability

 

nodeTypes

 

Paragraph

mgnl-folder

mgnl:folder

Paragraph

label

Folder

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

配置产品动作

browser子应用下,创建如下节点:

...

Advanced Tables - Table Plus
enableHeadingAttributesfalse
enableSortingfalse
classm5-configuration-tree
enableHighlightingfalse
节点名

subApps

 

detail

 

Paragraph

class

 info.magnolia.ui.contentapp.detail.DetailSubAppDescriptor

Paragraph

subAppClass

 info.magnolia.ui.contentapp.detail.DetailSubApp

配置编辑器

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

detail子应用下,创建如下节点。

Advanced Tables - Table Plus
enableHeadingAttributesfalse
enableSortingfalse
classm5-configuration-tree
enableHighlightingfalse
节点名

detail

 

editor

 

nodeType

 

Paragraph

icon

icon-items

Paragraph

name

mgnl:product

Paragraph

workspace

products

配置表单

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

editor节点下,创建以下节点。

Advanced Tables - Table Plus
enableHeadingAttributesfalse
enableSortingfalse
classm5-configuration-tree
enableHighlightingfalse

节点名

editor

 

form

 

tabs

 

product

 

fields

 

name

 

Paragraph

class

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

Paragraph

label

Product name

Paragraph

name

jcrName

fileUpload

 

Paragraph

allowedMimeTypePattern

image.*

Paragraph

binaryNodeName

photo

Paragraph

class

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

Paragraph

label

Photo

photoCredit

 

Paragraph

class

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

Paragraph

description

Please define a photo credit

Paragraph

label

Photo credit

Paragraph

label

Product

Paragraph

description

Define the product information

Paragraph

label

Edit product

...

Advanced Tables - Table Plus
enableHeadingAttributesfalse
enableSortingfalse
classm5-configuration-tree
enableHighlightingfalse
节点名

editor

actions

cancel

save

测试detail子应用

创建一些项目,验证您是否也能编辑已有的项目。创建一些项,验证您是否也能编辑已有的项。

配置图像生成器

Include Page
_What is an image provider
_What is an image provider

...

Advanced Tables - Table Plus
enableHeadingAttributesfalse
enableSortingfalse
classm5-configuration-tree
enableHighlightingfalse
节点名

browser

 

imageProvider

 

Paragraph

class

info.magnolia.ui.imageprovider.definition.ConfiguredImageProviderDefinition

Paragraph

imageProviderClass

info.magnolia.ui.imageprovider.DefaultImageProvider

Paragraph

originalImageNodeName

photo

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

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

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

workbench里,创建以下节点。

Advanced Tables - Table Plus
enableHeadingAttributesfalse
enableSortingfalse
classm5-configuration-tree
enableHighlightingfalse
节点名

workbench

 

contentViews

 

tree

 

columns

 

jcrName

 

Paragraph

class

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

Paragraph

editable

true

Paragraph

label

Product name

Paragraph

propertyName

jcrName

Paragraph

sortable

true

Paragraph

class

info.magnolia.ui.workbench.tree.TreePresenterDefinition

list

 

columns

 

Paragraph

extends

../../tree/columns

Paragraph

class

info.magnolia.ui.workbench.list.ListPresenterDefinition

thumbnail

 

Paragraph

class

info.magnolia.ui.workbench.thumbnail.ThumbnailPresenterDefinition

search

 

columns

 

Paragraph

extends

../../tree/columns

Paragraph

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 创建一个内容应用

...