You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 11 Next »

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

   

创建模块

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

创建模块描述符

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

该模块描述符的要素是：

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

定义节点类型

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

  1. 创建一个文本文件，并将以下内容粘贴进去。
  2. 保存文件为magnolia-products-nodetypes.xml.
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：

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

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

Tip

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

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

安装模块

  1. 拷贝这个.jar文件到<CATALINA_HOME>/webapps/<contextPath>/WEB-INF/lib文件夹，通常即<CATALINA_HOME>/webapps/magnoliaAuthor/WEB-INF/lib。
  2. 重启您的Magnolia实例并运行网络更新，这会安装Tutorial Products App模块。
  3. 打开管理 > 配置 > /modules/tutorial-products，找到配置。
节点名值
server 

modules

 

tutorial-products

 

version

1.0.0

配置应用

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

节点名值

modules

 

tutorial-products

 

apps

 

products

 

appClass

info.magnolia.ui.contentapp.ContentApp

class

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

icon

icon-items

label

Products

将应用添加到启动器中

  1. 打开/modules/ui-admincentral/config/appLauncherLayout/groups/edit/apps。
  2. 创建一个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

配置工作台

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

在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

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

这样更容易

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

更快的方法：

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

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

评分：

  • No labels