Default page structures

When creating an admin web page you can use the PageContentStructure to help you build a reliable layout. The PageContentStructure is a ViewElement that represents the different sections on a page:

  • header with the page title and optionally page title sub text

  • feedback section below the header but before the other page content

  • nav section meant for the in-page navigation (for example tabs)

  • body section holding the main content

  • footer section at the bottom

PageContentStructure can be autowired as a request-scoped bean. If you then use the default template PageContentStructure.TEMPLATE this will render the entire page. This requires you to add all content as ViewElement components, but of course you can still specify one or more of the ViewElement values to use a custom template for rendering.

Example using the default page structure
@Autowired
private PageContentStructure page;

@RequestMapping("/page")
public String pageContent( ViewElementBuilderContext builderContext ) {

    // Render a tab layout
    page.setRenderAsTabs( true );

    // Manually create a menu structure
    Menu menu = new PathBasedMenuBuilder()
        .item( "/one", "One", "#" ).order( 1 ).and()
        .group( "/advanced", "Advanced settings" )
        .order( 2 )
        .attribute( "html:class", "pull-right" )
        .attribute( NavComponentBuilder.ATTR_ICON_ONLY, true )
        .and()
        .item( "/advanced/trash", "Move to trash", "#" )
        .attribute( NavComponentBuilder.ATTR_ICON, new GlyphIcon( GlyphIcon.TRASH ) )
        .and()
        .build();
    menu.sort();

    page.setPageTitle( "Some page title..." );
    page.addToPageTitleSubText( new GlyphIcon( GlyphIcon.ALERT ) );

    // Convert our menu to a tab nav
    page.addToNav( bootstrapUiComponentFactory.nav( menu ).tabs().build( builderContext ) );
    page.addToFeedback(
        bootstrapUiFactory.alert().danger().dismissible().text( "Hello!" )
                            .build( builderContext )
    );

    page.addChild( TextViewElement.text( "Some body content..." ) );

    return PageContentStructure.TEMPLATE;
}

If you do not want to use the request scoped PageContentStructure, you can always manually create an instance. For the default template to work, it requires the structure to be available on the model as the default pageContentStructure attribute.

Example using a custom page structure
@RequestMapping("/page")
public String pageContent( @ModelAttribute PageContentStructure page ) {
    ...

    return PageContentStructure.TEMPLATE;
}

Instead of using the default template PageContentStructure.TEMPLATE, you can always use your own page template and simply render some of the ViewElement properties of the PageContentStructure where and when you want them.

« User context menu Default page structures Developer tools »