eXo Platform 3.5 provides you with some built-in templates when you create a new page via Page Creation Wizard. In this section, you will learn how to create a custom page template for Page Creation Wizard.
You should use the extension to add the page layout configuration. In this guide, you are going to work with the /examples/extension project.
Create a custom page template
1. Add your sample template "FourRowsLayout" by overriding the PageConfigOptions.groovy file (portal.war).
Add it to this path: /examples/extension/war/src/main/webapp/WEB-INF/conf/uiconf/portal/webui/page/PageConfigOptions.groovy
Sample code:
...
SelectItemCategory samplePageConfigs = new SelectItemCategory("samplePageConfigs"):
categories.add(samplePageConfigs):
samplePageConfigs.addSelectItemOption(new SelectItemOption("samplePage.FourRowsLayout","four-rows","FourRowsLayout:"));
...
2. Add your template file into the /examples/extension/war/src/main/webapp/WEB-INF/conf/portal/template/pages/four-rows/page.xml file.
Sample code:
<page xmlns:xsi="http://www.w3.org.2001/XMLSchema-instance" xsi:schemaLocation="httlp://www.gatein.org/xml/ns/gatein_object_1_2.xsd http://gatein.org/xml/ns/gatein_object_1_2.xsd" xmlns:"http://gatein.org/xml/ns/gatein_object_1_2.xsd"> <name></name> <container template="system:/groovy/portal/webui/container/UIContainer.gtmpl"> <access-permission>Everyone<access-permission> </container> <container template="system:/groovy/portal/webui/container/UIContainer.gtmpl"> <access-permission>Everyone<access-permission> </container> <container template="system:/groovy/portal/webui/container/UIContainer.gtmpl"> <access-permission>Everyone<access-permission> </container> <container template="system:/groovy/portal/webui/container/UIContainer.gtmpl"> <access-permission>Everyone<access-permission> </container> </page>
You can refer to the default template of eXo Platform in this path: /web/portal/src/main/webapp/WEB-INF/conf/portal/template/pages
3. Add the stylesheet to make the template preview image.
Add your own stylesheet in your extension webapp:
.UIItemSelector .<FourRowsLayout>{
width: 270px; height: 170px;
margin: auto;
background: url('background/ItemSelector.gif') no-repeat left -1700px;
}
You can refer to the eXo Platform 3.5's default stylesheet in this path: /web/eXoResources/src/main/webapp/skin/DefaultSkin/webui/component/UISelector/UIItemSelector/Stylesheet.css
4. Deploy your extension project. You will see the template and its preview image in the Page Creation Wizard.