• Rendered into HTML

  • Rendered into PDF

  • Rendered into CSV

Top level DSL that is responsible for arranging page graphical elements and update ajaxBlocks altogether. In case we are rendering a complete page, we also have to specify the page menu description via the Menu DSL.

This DSL is also responsible for managing modal windows stack. Open a modal using modal or close modal using closeModalAndUpdateBlock (and other variants).

Block Building Code Sample

screenshot dsl block
Figure 1. Sample Block with Tabs (see Block Sample with Tabs).
Block Sample with Tabs
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 Declare an invisible block of 1/2 window width
2 Declare 2 tabs inside, the first one is displayed when the page appear
3 Send the bloc along with the menu description to the browser.

Modal Stack Code Sample

After processing a form, you can refresh the content of the page, or another modal below the current one. You also can reload the page, or display another page. Reloading the page allows the code to be reusable, since it does not depend on the current URL (remember the redirectAction params you see in First App (Adding buttons to a table block) .

Usually a modal is closed after processing a form. Either it is not valid, and errors are shown into the browser directly into the form, either we save the object and refresh the content.

See

Close Modal and reload the page

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

If no error is detected saving CmsInsert, the page is simply reloaded.

Close Modal and load a page

@Transactional
@Secured(["ROLE_ADMIN", "ROLE_CMS_MANAGER", "ROLE_CMS_DIRECTOR"])
def saveCmsPage() {
    taackSaveService.saveThenRedirectOrRenderErrors(  (1)
        CmsPage, this.&pages as MethodClosure
    )
}
1 The method closure in this controller will be loaded (respecting URL Mappings)

Close Modal and refresh page ajax blocks

Complex Use Case: close the modal window and refresh ajaxBlock present in the page
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 After an action implying to save an object is called into a modal, you can close the modal and refresh page elements in one action
2 saveThenDisplayBlockOrRenderErrors take a UiBlockSpecifier as parameter
3 closeModalAndUpdateBlock will first close the last opened modal and then apply the modification

Block DSL Symbols Hierarchy

Diagram
Figure 2. Symbols hierachy diagram for Block DSL

ajaxBlock can surround other elements and allows to update only a portion of the page.