erikwinlof

Create pages in Alfresco Share using new 'out of the box' templates

Blog Post created by erikwinlof on Oct 12, 2011

Introduction



This blog post explains how you can speed up the development of creating pages in Alfresco Share by using a couple of  'out of the box templates'.



The idea is that when creating a 'simple' page in Share with 1, 2 or 3 column you shouldn't have create your own template-instance.xml and template.ftl file. Instead you can re-use one of the 6 out of the box templates described below. That means that you only need to define 1 page.xml-definition in which you tell which webscripts to display inside each region.



The out of the box templates described below are using 'page scoped' regions which means that they can be configured from within a page.xml file. They also make use of a new Spring Surf feature that makes it possible to associate multiple webscripts to a single template region, a feature that was made available in Alfresco Community 4.0.a release.



Note! The actual out of the box templates were made available on HEAD in revision 31068. - They are thereby NOT included in the 4.0a release, so to use them you need to either download the Alfresco Community 4.0.b release OR (to use them in Alfresco Community 4.0.a) do the following...



  1. Download the alfresco-share-out-of-the-box-templates-r31068-lib.zip patch (which contains the 6 out of the box templates)


  2. Rename it from .zip to .jar


  3. Place it in your <SHARE_TOMCAT_HOME>/shared/classes directory


  4. Restart your server


Now we will take a look at how the new templates look and then give an example of how to use them.

.



The templates



Below you can see the 6 templates in action. I have created sample pages using them to make it easy for you to understand the structure of each template.



I am using the components/title/simple-title.get webscript to display the blue title (i.e. 'TEST 1 COLUMN') and a custom webscript created for this blog post (components/test/echo.get available in the source code for this blog post) to display the 'Echo strings' (i.e. 'Echo: FIRST').



To test out them out yourself just:



  1. Download the sample source code alfresco-share-out-of-the-box-templates-test-pages-source.zip (which contains the test pages & the Echo webscript).


  2. Rename it from .zip to .jar.


  3. Place it in your <SHARE_TOMCAT_HOME>/shared/classes directory.


  4. Restart your server.


  5. Follow the links below to view each template.


.

1-column (regions: title & column)



http://localhost:8081/share/page/test-1-column





.



2-columns (regions: title, left-column & right-column)



http://localhost:8081/share/page/test-2-columns





.



2-columns-narrow-left (regions: title, left-column & right-column)



http://localhost:8081/share/page/test-2-columns-narrow-left





.



2-columns-narrow-right (regions: title, left-column & right-column)



http://localhost:8081/share/page/test-2-columns-narrow-right





.



2-columns-resizable (regions: title, left-column & right-column)



http://localhost:8081/share/page/test-2-columns-resizable





.



3-columns (regions: title, left-column, middle-column & right-column)



http://localhost:8081/share/page/test-3-columns





.



How to create a page that uses one of the templates



We will create a page named 'test-1-column' that will use the 1-column template and will be reachable at http://localhost:8081/share/page/my-1-column-test.



As you can see below the 1-column template contains 2 'page scoped' regions (title & column) that therefore can be configured from within a  page.







To get the result as above do the following:



  1. Create the following directory stucture <SHARE_TOMCAT_HOME>/shared/classes/config/alfresco/site-data/pages


  2. Create a new page in the directory above and name it to my-1-column-test.xml


  3. In my-1-column-test.xml reference the webscripts you want to include in each region, i.e. using the code below.


<SHARE_TOMCAT_HOME>/shared/classes/config/alfresco/site-data/pages/my-1-column-test.xml

<?xml version='1.0' encoding='UTF-8'?>

<page>

   <title>Test 1 column</title>

   <description>Test 1 column</description>

   <template-instance>1-column</template-instance>

   <authentication>user</authentication>

   <components>



      <!-- Title -->

      <component>

         <region-id>title</region-id>

         <url>/components/title/simple-title</url>

         <properties>

            <title>TEST 1 COLUMN</title>

         </properties>

      </component>



      <!-- Column -->

      <component>

         <region-id>column</region-id>

         <sub-components>

            <sub-component id='first'>

               <url>/components/test/echo</url>

               <properties>

                  <echo>FIRST</echo>

               </properties>

            </sub-component>

            <sub-component id='second'>

               <url>/components/test/echo</url>

               <properties>

                  <echo>SECOND</echo>

               </properties>

            </sub-component>

         </sub-components>

      </component>



   </components>

</page>


First note that we use the <template-instance> element to define that the 1-column template shall be used.



Then note that the syntax used to 'bind in' the webscripts into a region are different in the two regions.



In the 'title' region we only need one webscript and therefor we use the same old syntax that has been used in Share since day 1.



In the 'column' region, however, we want to add in multiple webscripts into the same region. We therefore  have to use the new <sub-components>-syntax to get the job done (available since the Alfresco Share Community 4.0a release). Using this syntax means that you can add in as many webscripts as you like in 1 region. Note! Make sure you make the 'id' attribute in the <sub-component> element 'unique per region'.



To test your page make sure you have installed alfresco-share-out-of-the-box-templates-test-pages-source.zip as described earlier, if so just point your browser to: http://localhost:8081/share/page/my-1-column-test



.

Further reading



More about the new syntax for 'binding in' webscripts into a region can be found here:

Outcomes