...
| Advanced Tables - Table Plus |
|---|
| enableHeadingAttributes | false |
|---|
| enableSorting | false |
|---|
| class | m5-configuration-tree |
|---|
| enableHighlighting | false |
|---|
|
| 节点名 | 值 |
|---|
| server | | | modules | | | tutorial-products | | | 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 | | | appClass | info.magnolia.ui.contentapp.ContentApp | | class | info.magnolia.ui.api.app.registry.ConfiguredAppDescriptor | | icon | icon-items | | 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 |
|---|
|
| 节点名 |
|---|
| ui-admincentral | | config | | appLauncherLayout | | groups | | edit | | apps | | apps pages | | assets | | contacts | | categories | | products |
|
打开应用启动器，验证您是否能看到Products应用图标。如需重启启动器，打开http://localhost:8080/magnoliaAuthor/.magnolia/admincentral?restartApplication网页。
...
| 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 |
|
...
| 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 |
|
配置树型视图
在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 | | 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 |
|
...
| 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子应用里，创建一个动作栏，并将文件夹动作添加进去。
| 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应用，验证您是否能够创建、编辑和删除文件夹。
...
| Advanced Tables - Table Plus |
|---|
| enableHeadingAttributes | false |
|---|
| enableSorting | false |
|---|
| class | m5-configuration-tree |
|---|
| enableHighlighting | false |
|---|
|
| 节点名 | 值 |
|---|
| 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 |
|
将产品动作添加到动作栏
...
| Advanced Tables - Table Plus |
|---|
| enableHeadingAttributes | false |
|---|
| enableSorting | false |
|---|
| class | m5-configuration-tree |
|---|
| enableHighlighting | false |
|---|
|
| 节点名 | 值 |
|---|
| 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子应用
...
| 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 |
|
...
| 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 |
|
配置表单
您的应用可以创建和编辑任何内容，所以内容决定了您在表单里需要的字段。本教程中，产品为古董车，所以我们创建了一个表单，包含以下三个字段内容：产品名，照片，以及照片评分。
...
| 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 |
|---|
|
| 节点名 | 值 |
|---|
| 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 |
|
在编辑器里添加保存和取消按钮
...
| Advanced Tables - Table Plus |
|---|
| enableHeadingAttributes | false |
|---|
| enableSorting | false |
|---|
| class | m5-configuration-tree |
|---|
| enableHighlighting | false |
|---|
|
| 节点名 |
|---|
| editor | | actions | | cancel | | save |
|
测试detail子应用
创建一些项，验证您是否也能编辑已有的项。
...
| 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 |
|
...
| 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 |
|
...