Surf Code Camp walkthrough 1 was done as a joint exercise between the instructor and the class as a precursor to Lab 3. It covers Surf site construction basics.
Full solution source code is at http://ecmarchitect.com/images/green-energy-code-camp.zip
2. Objectives
Configure Web Framework
Set up a new site
Drop in assets
Add a home page
Bind a component to the page
12/01/09 2
3. Sample Site
We will use alfwf.war as a starting point
• Blank Surf framework with no site construction data in it
• Built from source; “web-framework” project
Extract as webapp into standalone Tomcat
Sample location:
• /opt/tomcat/webapps/alfwf
• http://localhost:8580/alfwf
12/01/09 3
4. Web Framework Configuration
Configure Surf to use your site configuration file
web-framework-config-custom.xml
• /WEB-INF/classes/alfresco/web-extension
• Check web-framework-application-context.xml to be sure
Create the web-extension directory
In that directory, create web-framework-config-
custom.xml with:
<alfresco-config>
<config evaluator=quot;string-comparequot; condition=quot;WebFrameworkquot;>
<web-framework>
<application-defaults>
<site-configuration>sample.site.configuration</site-configuration>
</application-defaults>
</web-framework>
</config>
</alfresco-config>
12/01/09 4
5. Set up a new site
Add a site configuration object
Convention
• Configuration for sample site
• /WEB-INF/classes/alfresco/site-
data/configurations/sample.site.configuration.xml
Points to a default root page: home
Create sample.site.configuration.xml
• /WEB-INF/classes/alfresco/site-data/configurations
<?xml version=quot;1.0quot; encoding=quot;UTF-8quot;?>
<configuration>
<title>Surf Sample Site</title>
<description>Surf Sample Site</description>
<source-id>site</source-id>
<properties>
<root-page>home</root-page>
</properties>
</configuration>
12/01/09 5
6. Drop in assets
Unzip the assets.zip file into the web application
• /opt/tomcat/webapps/alfwf/EXTRACT HERE
Manifest:
• /images/walkthrough/farman.jpg
12/01/09 6
7. Add a home page
Add a home page
Points to a rendering template: home
home.xml
• /WEB-INF/classes/alfresco/site-data/pages
<?xml version='1.0' encoding='UTF-8'?>
<page>
<title>Home Page</title>
<template-instance>home</template-instance>
<authentication>none</authentication>
</page>
The home page must know how to render
Use template instance: home
●
12/01/09 7
8. Add a home page
Add a home template instance
Points to a FreeMarker file: /walkthrough/home
home.xml
• /WEB-INF/classes/alfresco/site-data/template-instances
<?xml version='1.0' encoding='UTF-8'?>
<template-instance>
<template-type>/walkthrough/home</template-type>
</template-instance>
The template instance needs a renderer
• The FreeMarker renderer: /walkthrough/home.ftl
12/01/09 8
9. Add a home page
Add the FreeMarker template
home.ftl
• /WEB-INF/classes/alfresco/templates/walkthrough
<html xmlns=quot;http://www.w3.org/1999/xhtmlquot;>
<head>
<title>${page.title}</title>
${head}
</head>
<body>
This is the home page
<br/>
<br/>
<@region id=quot;contentquot; scope=quot;pagequot; />
</body>
</html>
Defines a region called content in the page scope
12/01/09 9
10. Bind a component to the page
Bind a component into the home page
• Region name is content and scope is page
• File name convention: <scope>.<regionId>.<sourceId>.xml
page.content.home.xml
• /WEB-INF/classes/alfresco/site-data/components
<?xml version='1.0' encoding='UTF-8'?>
<component>
<scope>page</scope>
<region-id>content</region-id>
<source-id>home</source-id>
<url>/blocks/image</url>
<properties>
<src>${url.context}/images/walkthrough/farman.jpg</src>
</properties>
</component>
The blocks/image web script needs to be defined
12/01/09 10
11. Bind a component to the page
Image Component
• Provided to you in blocks-image.zip
• May become part of Surf at some point
• Web Script Component
• URL: /blocks/image
• Extract blocks-image.zip to WEB-INF/classes/alfresco/site-
webscripts
12/01/09 11
13. Review
Review
Create Site - Basic Configuration
• web-extension/web-framework-config-custom.xml
• site-data/configurations/sample.site.configuration.xml
– Points to root page home
Define Page Template (Layout)
• Page - site-data/pages/home.xml
– Points to template-instance home
• Temlate-Instance - site-data/template-instances/home.xml
– Points to freemarker template /walkthrough/home (ftl)
• Template HTML - templates/walkthrough/home.ftl
– Defines region Content, scope page
Populate Layout
• site-data/components/page.content.home.xml (note convention)
• Points to /blocks/image web script
• site-webscripts/blocks/image.get.js
12/01/09 13
14. Try it out
Start Alfresco
• http://labs3c:8080/alfresco
Start Surf Tomcat (Restart if it was running)
• http://labs3c:8580/alfwf
Browse to
• http://labs3c:8580/alfwf/service/index
Click on ‘Refresh’ to reset the Web Scripts cache
Test your site
• http://labs3c:8580/alfwf/page
If you want the URL to work without “/page” use the
index.jsp provided to do a redirect
12/01/09 14
15. Wrap-up
In this walkthrough, you...
• Configured a fresh Surf framework (alfwf.war)
• Created a page
• Created a template instance
• Pointed the template instance to a FreeMarker template
• Created a component binding that pointed to an Image
component
– The component was bound to a region on the template
• Added an Image component implemented as a web script
12/01/09 Optaros and Client confidential. All rights reserved. 15