Page History

...

Advanced Tables - Table Plus

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

节点名

值

server

modules

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

节点名

值

modules

tutorial-products

apps

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

节点名

值

modules

tutorial-products

apps

products

subApps

browser

mgnl-p

class

info.magnolia.ui.contentapp.browser.BrowserSubAppDescriptor

mgnl-p

subAppClass

info.magnolia.ui.contentapp.browser.BrowserSubApp

...

Advanced Tables - Table Plus

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

节点名

值

browser

workbench

nodeTypes

product

mgnl-p

icon

icon-items

mgnl-p

name

mgnl:product

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

节点名

值

workbench

contentViews

tree

columns

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

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

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

...

Advanced Tables - Table Plus

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

节点名

值

browser

actions

addFolder

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

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

deleteFolder

mgnl-p

class

info.magnolia.ui.framework.action.DeleteItemActionDefinition

mgnl-p

icon

icon-delete

mgnl-p

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

mgnl-p

nodes

false

mgnl-p

root

true

mgnl-p

label

Products

folder

groups

addActions

items

addFolder

editActions

items

editFolder

deleteFolder

availability

nodeTypes

mgnl-p

mgnl-folder

mgnl:folder

mgnl-p

label

Folder

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

...

Advanced Tables - Table Plus

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

节点名

值

browser

actions

addFolder

editFolder

deleteFolder

addProduct

availability

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

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

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

节点名

值

browser

actionbar

sections

root

groups

addActions

items

addFolder

addProduct

availability

mgnl-p

nodes

false

mgnl-p

root

true

mgnl-p

label

Products

folder

groups

addActions

items

addFolder

addProduct

editActions

items

editFolder

deleteFolder

availability

nodeTypes

mgnl-p

mgnl-folder

mgnl:folder

mgnl-p

label

Folder

product

groups

editActions

items

editProduct

deleteProduct

availability

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

节点名

值

subApps

detail

mgnl-p

class

info.magnolia.ui.contentapp.detail.DetailSubAppDescriptor

mgnl-p

subAppClass

info.magnolia.ui.contentapp.detail.DetailSubApp

...

Advanced Tables - Table Plus

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

节点名

值

detail

editor

nodeType

mgnl-p

icon

icon-items

mgnl-p

name

mgnl:product

mgnl-p

workspace

products

配置表单

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

...

Advanced Tables - Table Plus

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

节点名

值

editor

form

tabs

product

fields

name

mgnl-p

class

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

mgnl-p

label

Product name

mgnl-p

name

jcrName

fileUpload

mgnl-p

allowedMimeTypePattern

image.*

mgnl-p

binaryNodeName

photo

mgnl-p

class

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

mgnl-p

label

Photo

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

节点名

值

detail

actions

cancel

mgnl-p

class

info.magnolia.ui.form.action.CancelFormActionDefinition

mgnl-p

label

Cancel

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

节点名

值

browser

imageProvider

mgnl-p

class

info.magnolia.ui.imageprovider.definition.ConfiguredImageProviderDefinition

mgnl-p

imageProviderClass

info.magnolia.ui.imageprovider.DefaultImageProvider

mgnl-p

originalImageNodeName

photo

...

Advanced Tables - Table Plus

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

节点名

值

workbench

contentViews

tree

columns

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

list

columns

mgnl-p

extends

../../tree/columns

mgnl-p

class

info.magnolia.ui.workbench.list.ListPresenterDefinition

thumbnail

mgnl-p

class

info.magnolia.ui.workbench.thumbnail.ThumbnailPresenterDefinition

search

columns

mgnl-p

extends

../../tree/columns

mgnl-p

class

info.magnolia.ui.workbench.search.SearchPresenterDefinition

...

Page tree

Versions Compared

Old Version 11

New Version 12

Key

配置应用

将应用添加到启动器中

配置树型视图

创建动作栏

将产品动作添加到动作栏

配置detail子应用

配置表单

配置保存和取消动作

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