• 支持HTML

  • 支持PDF

  • 支持CSV

为顶层DSL，负责统筹页面图形元素与局部内容更新。当我们打算渲染一个完整页面时，还需要通过菜单DSL为页面添加导航栏。

该DSL还负责管理弹窗。使用 modal 打开弹窗，或使用 closeModalAndUpdateBlock (和一些其他要素) 关闭弹窗。

代码示例：如何构建块

screenshot dsl block
Figure 1. 带有多个子标签页的块 (见代码示例).
代码示例
def editSlideshow(CmsPage slideshow) {
    UiBlockSpecifier b = new UiBlockSpecifier()

    Boolean createNew = slideshow == null
    if (!slideshow)
        slideshow = new CmsPage(pageType: CmsPageType.SLIDESHOW)

b.ui {
    if (createNew)
        modal {
            form
                buildCmsSlideshowForm(slideshow),
                BlockSpec.Width.MAX
        }
    else {
        anonymousBlock BlockSpec.Width.HALF, {          (1)
            form
                buildCmsSlideshowForm(slideshow),
                BlockSpec.Width.MAX
            }

        blockTabs BlockSpec.Width.HALF, {
            blockTab "Images", buildImagesTab(slideshow)(2)
            blockTab "Videos", buildVideosTab(slideshow)
        }
    }
}
taackUiService.show(b, buildMenu())                     (3)
1 创建一个不可见的块作为承载主体，占据二分之一页面宽度
2 创建2个子标签页，页面加载完成时默认先显示第一个
3 将整个块连同菜单一起发送至浏览器显示

代码示例：弹窗堆叠

表单处理完成后，您可以选择关闭弹窗并刷新页面一部分内容，可以在当前弹窗的基础上打开新一轮弹窗，可以重新加载当前页面，也可以直接导向至另外一个新页面。

通常来说完成表单后我们就会关闭弹窗。要么表单验证失败，错误报告会被发送至浏览器并直接显示在表单上，要么保存数据对象成功，关闭弹窗并刷新页面局部内容。

如下。

关闭弹窗并重新加载页面

@Transactional
@Secured(["ROLE_CMS_MANAGER", "ROLE_CMS_DIRECTOR"])
def saveCmsInsert() {
    taackSaveService.saveThenReloadOrRenderErrors(CmsInsert)
}

若保存CmsInsert时无错误，则页面将会被刷新、重新加载数据。

关闭弹窗并导向至新页面

@Transactional
@Secured(["ROLE_ADMIN", "ROLE_CMS_MANAGER", "ROLE_CMS_DIRECTOR"])
def saveCmsPage() {
    taackSaveService.saveThenRedirectOrRenderErrors(  (1)
        CmsPage, this.&pages as MethodClosure
    )
}
1 若保存CmsInsert时无错误，则将导向至 pages 页面 (遵守URL Mappings规则)

关闭弹窗并刷新页面局部内容

较为复杂的使用场景：关闭弹窗，并更新页面中某些ajaxBlock的内容
taackSaveService.saveThenDisplayBlockOrRenderErrors(
    EngineeringChangeRequest,                                   (1)
    new UiBlockSpecifier().ui {                                 (2)
        closeModalAndUpdateBlock {                              (3)
            show "Projects", buildShowProjects(ecr),
                BlockSpec.Width.MAX, {
                    action
                        ActionIcon.ADD,
                        Ecr2Controller.&projectsForm as MC,
                        [id: ecr.id, ajaxBlockId: ajaxBlockId]
            }
        }
    }
)
1 数据对象被保存后，您可以在同一个Action内关闭弹窗并刷新页面元素
2 saveThenDisplayBlockOrRenderErrors 使用 UiBlockSpecifier 作为参数
3 closeModalAndUpdateBlock 将先关闭弹窗，再应用改动

块状DSL架构

Diagram
Figure 2. 块状DSL架构图

可以使用 ajaxBlock 容纳其他元素，以此实现页面的局部更新。