optaros surf code camp walkthrough 1
DESCRIPTION
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.zipTRANSCRIPT
Alfresco Surf Code Camp
Walkthrough: Creating a Simple Surf Site
12/01/09 2
Configure Web FrameworkSet up a new siteDrop in assetsAdd a home pageBind a component to the page
Objectives
12/01/09 3
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 TomcatSample location:
• /opt/tomcat/webapps/alfwf• http://localhost:8580/alfwf
Sample Site
12/01/09 4
Configure Surf to use your site configuration fileweb-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="string-compare" condition="WebFramework"> <web-framework> <application-defaults> <site-configuration>sample.site.configuration</site-configuration> </application-defaults> </web-framework> </config>
</alfresco-config>
Web Framework Configuration
12/01/09 5
Add a site configuration objectConvention
• 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="1.0" encoding="UTF-8"?><configuration> <title>Surf Sample Site</title> <description>Surf Sample Site</description> <source-id>site</source-id> <properties> <root-page>home</root-page> </properties></configuration>
Set up a new site
12/01/09 6
Unzip the assets.zip file into the web application• /opt/tomcat/webapps/alfwf/EXTRACT HERE
Manifest:• /images/walkthrough/farman.jpg
Drop in assets
12/01/09 7
Add a home pagePoints to a rendering template: homehome.xml
• /WEB-INF/classes/alfresco/site-data/pages
The home page must know how to render● Use template instance: home
<?xml version='1.0' encoding='UTF-8'?><page> <title>Home Page</title> <template-instance>home</template-instance> <authentication>none</authentication></page>
Add a home page
12/01/09 8
Add a home template instancePoints to a FreeMarker file: /walkthrough/homehome.xml
• /WEB-INF/classes/alfresco/site-data/template-instances
The template instance needs a renderer• The FreeMarker renderer: /walkthrough/home.ftl
<?xml version='1.0' encoding='UTF-8'?><template-instance> <template-type>/walkthrough/home</template-type></template-instance>
Add a home page
12/01/09 9
Add the FreeMarker templatehome.ftl
• /WEB-INF/classes/alfresco/templates/walkthrough
Defines a region called content in the page scope
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>${page.title}</title> ${head} </head> <body> This is the home page <br/> <br/> <@region id="content" scope="page" /> </body></html>
Add a home page
12/01/09 10
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
The blocks/image web script needs to be defined
<?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>
Bind a component to the page
12/01/09 11
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
Bind a component to the page
12/01/09 12
Image.get Script (Built In)
<webscript> <shortname>Image - Web Component</shortname> <description>Image - Web Component</description> <url>/blocks/image</url></webscript>
var src = instance.properties["src"];if(src == null){
src = "/";}src = src.replace('${url.context}', url.context);model.src = src;
<#assign titleString = ""><#if title?exists>
<#assign titleString = "title='" + title + "' "></#if><img src="${src}" border="0" ${titleString} />
Image Web Script
site-webscripts/blocks/image.get.desc.xml
site-webscripts/blocks/image.get.js
site-webscripts/blocks/image.get.html.ftl
12/01/09 13
ReviewReview
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 14
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
Try it out
12/01/09 Optaros and Client confidential. All rights reserved. 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