Optaros Surf Code Camp Walkthrough 1

Alfresco Surf Code Camp
Walkthrough: Creating a Simple Surf Site

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

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

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

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

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

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

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

<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

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


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

<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


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

Image.get Script (Built In)‫‏‬
Image Web Script

site-webscripts/blocks/image.get.desc.xml
<webscript>
<shortname>Image - Web Component</shortname>
<description>Image - Web Component</description>
<url>/blocks/image</url>
</webscript>

site-webscripts/blocks/image.get.js
var src = instance.properties[quot;srcquot;];
if(src == null)‫‏‬
{
src = quot;/quot;;
}
src = src.replace('${url.context}', url.context);
model.src = src;

site-webscripts/blocks/image.get.html.ftl
<#assign titleString = quot;quot;>
<#if title?exists>
<#assign titleString = quot;title='quot; + title + quot;' quot;>
</#if>
<img src=quot;${src}quot; border=quot;0quot; ${titleString} />
12/01/09 12

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

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

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

Optaros Surf Code Camp Walkthrough 1

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Optaros Surf Code Camp Walkthrough 1

Similar to Optaros Surf Code Camp Walkthrough 1 (20)

More from Jeff Potts

More from Jeff Potts (20)

Recently uploaded

Recently uploaded (20)

Optaros Surf Code Camp Walkthrough 1