eXo Platform 4.1 Documentation > Developer Guide > Customizing Your Site > Managing features of a new site

3.3.7. 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:

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

  1. Create your custom extension as follows:

  2. 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.

  3. 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".

  4. 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.

  5. 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.

  6. Deploy your custom extension and test:

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