Optaros Surf Code Camp Walkthrough 1


Published on

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

Published in: Technology, Education
  • I don't know what's in a 'standard Surf-with-samples installation'. I imagine you could simply use it as-is. You'll have your own site configuration file which will replace whatever that one has. Other than that, templates, components, and model objects can co-exist without a problem. If you see things that look suspiciously similar (for example, I provide an early version of the 'include', 'image', and 'navigation' blocks) either use the newer ones and adapt the examples or just overwrite the newer ones with the code camp versions.

    Your other alternative is to build the web-framework project from source.

    Hope that helps,

    Are you sure you want to  Yes  No
    Your message goes here
  • Is it possible to get a copy of alfwf.war? I couldn't find it in any of the code camp materials, and i wanted to avoid having to set up the environment to build it. Thanks.

    Or can you tell me what to delete from a standard Surf-with-samples installation?
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Optaros Surf Code Camp Walkthrough 1

  1. 1. Alfresco Surf Code Camp Walkthrough: Creating a Simple Surf Site
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
  12. 12. 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
  13. 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. 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. 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