3.2.3. Creating page container template

Page container templates are Groovy ones that are used for (but not limited to) page decoration. You can re-use the built-in templates or write your own templates and package them in the site-extension.

By declaring a template in pages.xml, you decorate the individual pages. By declaring a template in portal.xml, you make the site layout that impacts all the pages of the site.

You can learn some templates in portal.war!/groovy/portal/webui/container/. In this tutorial the templates are not much more than this code:

<%uicomponent.renderChildren();%>
  1. Add the templates to your site extension so that it contains:

  2. Edit portal.xml to make the site layout:

    
    <portal-layout>
        <container id="MySiteLayoutContainer" template="war:/groovy/container/MySiteLayoutContainer.gtmpl">
            <page-body> </page-body>
        </container>
    </portal-layout>
  3. Edit pages.xml to place the Getting Started portlet into a container:

    
    <page>
        ...
        <container id="MyPageContainer" template="war:/groovy/container/MyPageContainer.gtmpl">
            <portlet-application>
                <portlet>
                    <application-ref>homepage-portlets</application-ref>
                    <portlet-ref>GettingStartedPortlet</portlet-ref>
                </portlet>
                <title>Getting Started</title>
                <access-permissions>*:/platform/users</access-permissions>
                <show-info-bar>false</show-info-bar>
                <show-application-state>false</show-application-state>
                <show-application-mode>false</show-application-mode>
            </portlet-application>
        </container>
        ...
    </page>
  4. Edit MySiteLayoutContainer.gtmpl:

    <div style="background-color: navy; font-size: 18px; padding: 15px; color: white">
      <span>ACME Intranet</span>
    </div>
    <div>
      <%uicomponent.renderChildren();%>
    </div>
    <div style="text-align: center; background-color: wheat; border-bottom-left-radius: 7px; border-bottom-right-radius: 7px">
      <span style="font-style: italic">Powered by eXo Platform</span>
    </div>
  5. Edit MyPageContainer.gtmpl:

    <div style="border: 3px solid deepskyblue">
      <%uicomponent.renderChildren();%>
    </div>

After redeploying the site extension, test the decoration of the page (navy and wheat blocks for site layout, and the blue border for the page container):

Copyright ©. All rights reserved. eXo Platform SAS
blog comments powered byDisqus