3.3.6. Creating a page layout template

In eXo Platform, page is a set of portlets and gadgets. The portlets and gadgets can be arranged in columns, rows and tabs. A page layout template is a layout sample that is used in Page Creation Wizard.

In this tutorial, you will:

Create your own page layout template.
Localize the label with your language resources.
Customize the preview icon of your template.

The following picture points out the category, the preview icon and labels:

Create your custom extension as follows:

Edit the page template in page.xml:


<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 

xsi:schemaLocation="http://www.gatein.org/xml/ns/gatein_objects_1_3 http://www.gatein.org/xml/ns/gatein_objects_1_3" 

xmlns="http://www.gatein.org/xml/ns/gatein_objects_1_3">

    <name></name>

    <container template="system:/groovy/portal/webui/container/UIContainer.gtmpl">

        <access-permissions>Everyone</access-permissions>

    </container>

    <container template="system:/groovy/portal/webui/container/UITableColumnContainer.gtmpl">

        <access-permissions>Everyone</access-permissions>

        <container template="system:/groovy/portal/webui/container/UIContainer.gtmpl">

            <access-permissions>Everyone</access-permissions>

        </container>

        <container template="system:/groovy/portal/webui/container/UIContainer.gtmpl">

            <access-permissions>Everyone</access-permissions>

        </container>

    </container>

    <container template="system:/groovy/portal/webui/container/UIContainer.gtmpl">

        <access-permissions>Everyone</access-permissions>

    </container>

</page>

In which:

UIContainer (built-in in portal.war) is the smallest container that should not contain other containers. They will be aligned in row if you do not put them in any parent container.
To align them in column, put them in a UITableColumnContainer. To add a tab to the page, use UITabContainer. See more samples in portal.war!/WEB-INF/conf/portal/template/pages.

Copy content of the portal.war!/WEB-INF/conf/uiconf/portal/webui/page/PageConfigOptions.groovy to your PageConfigOptions.groovy file. Add the following code:


SelectItemCategory customPageConfigs = new SelectItemCategory("customPageConfigs") ;

categories.add(customPageConfigs) ;

customPageConfigs.addSelectItemOption(new SelectItemOption("customPage.CustomLayout", "custom", "CustomLayout")) ;

This code adds a category named "customPageConfigs" and a template named "CustomLayout".

Localize the labels as follows:

i. Edit the locale-configuration.xml file:


<configuration

   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

   xsi:schemaLocation="http://www.exoplatform.org/xml/ns/kernel_1_2.xsd http://www.exoplatform.org/xml/ns/kernel_1_2.xsd"

   xmlns="http://www.exoplatform.org/xml/ns/kernel_1_2.xsd">

   

    <external-component-plugins>

        <target-component>org.exoplatform.services.resources.ResourceBundleService</target-component>

        <component-plugin>

            <name>webui resources</name>

            <set-method>addResourceBundle</set-method>

            <type>org.exoplatform.services.resources.impl.BaseResourceBundlePlugin</type>

            <init-params>

                <values-param>

                    <name>init.resources</name>

                    <value>locale.portal.webui</value>

                </values-param>

                <values-param>

                    <name>portal.resource.names</name>

                    <value>locale.portal.webui</value>

                </values-param>

            </init-params>

        </component-plugin>

    </external-component-plugins>



</configuration>

ii. Edit the configuration.xml file to import locale-configuration.xml:


<configuration

   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

   xsi:schemaLocation="http://www.exoplatform.org/xml/ns/kernel_1_2.xsd http://www.exoplatform.org/xml/ns/kernel_1_2.xsd"

   xmlns="http://www.exoplatform.org/xml/ns/kernel_1_2.xsd">

   

    <import>war:/conf/locale-configuration.xml</import>

    

</configuration>

iii. Edit the webui_en.properties file to have:

UIDropDownPageTemp.item.customPageConfigs=Custom Page Configs
UIWizardPageSelectLayoutForm.label.customPage.CustomLayout=Custom Layout

Note

The localization is explained in Localizing with resources.
The locale.portal.webui resource name is configured in portal.war and you must not change its path.

Add the preview icon as follows:

i. Edit your stylesheet in myStylesheet.css:
```
.CustomLayout {

  width: 270px;

  height: 170px;

  margin: auto;

  background: url('images/ItemSelector.gif') no-repeat left -680px;

}
```
ii. For simplification, you can copy the image named ItemSelector.gif from eXoResources.war!/skin/DefaultSkin/webui/component/UISelector/UIItemSelector/background.

iii. Edit the gatein-resources.xml file:


<gatein-resources xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

    xsi:schemaLocation="http://www.gatein.org/xml/ns/gatein_resources_1_3 http://www.gatein.org/xml/ns/gatein_resources_1_3"

    xmlns="http://www.gatein.org/xml/ns/gatein_resources_1_3">



    <portal-skin>

        <skin-name>Default</skin-name>

        <skin-module>myStylesheet</skin-module>

        <css-path>/skin/myStylesheet.css</css-path>

    </portal-skin>

  

</gatein-resources>

Tip

Read more about the portal skinning technique in GateIn Reference.

Deploy your custom extension and test: