Surf Pages

Surf pages are the "old school" pages that most of the Share UI is built up around. But more and more pages are converted to Aikau pages. All files involved in defining a Surf page are stored under /site-data and /templates.

Putting together a Surf page involves a lot of objects, such as page, template-instance, component etc. This is called the siteData model and the following picture illustrates how these objects play together:

The definition of a Surf page is done in XML and looks like this in a Hello World example:

<?xml version="1.0" encoding="UTF-8"?>
<page>
    <title>Hello World</title>
    <title-id>page.helloworld.title</title-id>
    <description>Hello World Description</description>
    <description-id>page.helloworld.description</description-id>
    <template-instance>helloworldhome-three-column</template-instance>
    <authentication>none</authentication>
</page>   

Page definition file names follow a naming convention: <page-id>.xml, the above page definition could be stored in a file called helloworld.xml under site-data/pages.

The page definition refers to a template instance that links to the physical template, it is defined in XML:

<?xml version="1.0" encoding="UTF-8"?>
<template-instance>
    <template-type>org/alfresco/training/helloworld-1-column</template-type>
</template-instance>   

Template instance definition file names follow a naming convention: <template-instance-id>.xml, the above template instance definition could be stored in a file called helloworld-1-column.xml under site-data/template-instances.

The physical template is defined in FreeMarker and looks something like this:

<#include "/org/alfresco/include/alfresco-template.ftl" />
<@templateHeader>
</@>

<@templateBody>
   <@markup id="alf-hd">
   <div id="alf-hd">
      <@region scope="global" id="share-header" chromeless="true"/>
   </div>
   </@>
   <@markup id="bd">
    <div id="bd">
        <@region id="body" scope="page" />
    </div>
   </@>
</@>

<@templateFooter>
   <@markup id="alf-ft">
   <div id="alf-ft">
      <@region id="footer" scope="global" />
   </div>
   </@>
</@>   

Template files are stored under /templates.

The page is built up of different regions, and each region is defined for a specific scope, such as global or page. If the scope is page then we always need to implement the rendition for the region. This is done via a component, which is defined in XML:

<?xml version="1.0" encoding="UTF-8"?>
<component>
    <url>/components/helloworld/body</url>
</component>

The component just points to a Surf Web Script that should render the HTML for the page region.

A Surf page is processed and generated via the Spring MVC framework. The following picture gives an overview of how it works:

As we can see in the picture, all dynamic content that should go onto the page is fetched indirectly via Surf Web Scripts, which can get the content from either the SkyVault Repository or from some other remote Web Service.

• tomcat/shared/classes/alfresco/web-extension/site-data/pages/ - Page definition
• tomcat/shared/classes/alfresco/web-extension/site-data/template-instances/ - Template instance pointing to FreeMarker template
• tomcat/shared/classes/alfresco/web-extension/site-data/components/ - Components fetching content and rendering presentation for a specific region in the physical template
• tomcat/shared/classes/alfresco/web-extension/templates - FreeMarker template location

For component Web Script file locations see: Web Script section.

• share-amp/src/main/amp/config/alfresco/web-extension/site-data/pages/
• share-amp/src/main/amp/config/alfresco/web-extension/site-data/template-instances/
• share-amp/src/main/amp/config/alfresco/web-extension/site-data/components/
• share-amp/src/main/amp/config/alfresco/web-extension/templates

• Introduction to Surf Pages) - This page contains a walk-through on how to create a Surf page, and it also has links to a page that shows how to create the same page with Aikau.
• Spring Surf Framework Guide - Deep dive into the Surf framework
• Site Date Model Reference - Details around all the model objects such as page, component, and template-instance.

• Custom Surf Pages, Surf Dashlets, and Surf Web Scripts

• Adding a new Surf page.
• Making a new Surf page the default page.
• Adding content to a Surf page
• Removing/hiding content from a Surf page
• Conditionally controlling rendering of content on Surf page
• Exploring root objects that can be used in a template.

• Adding a Surf page and making it the landing page
• Adding a Surf page and making it the login page
• Checksum dependencies for page resources
• CSS Data Image Support in pages