Surf Code Camp Lab 3 leaves Share behind and starts to show how a Surf web site is built from the ground, up. Full solution source code is at http://ecmarchitect.com/images/green-energy-code-camp.zip

1. Alfresco Surf Code Camp
Lab 3: Green Energy

2. Objectives
Build the Green Energy web site
Follows the same pattern as the walkthrough
Adds a few new concepts
• Navigation
• Authenticated pages, Login/Logout
• “Include” component
12/12/08 2

3. Sample Site
We will use this as a starting point: alfwf.war
• A blank Surf framework with no site construction data in it
• If you want, blow away current alfwf web app and re-deploy a
fresh alfwf.war (Or don't)‫‏‬
Sample location:
• /opt/tomcat/webapps/alfwf
• http://labs3c:8580/alfwf
12/12/08 3

4. What should it look like?
Intended UI shown on next page
12/12/08 4

5. Green Energy Home Page
12/12/08 5

6. Green Energy Solutions Page
12/12/08 6

7. Green Energy Products Page
12/12/08 7

8. Pages
Home Page
• root page for site
• uses template: home
• unauthenticated
Products Page
• parent: Home Page
• uses template: landing
• authentication: user
Solutions Page
• parent: Home Page
• uses template: landing
• authentication: user
12/12/08 8

9. Templates
Home Template
• used by the home page
Landing Template
• used by the products page
• used by the solutions page
12/12/08 9

10. Home Template
navigation template scope
box1 box3
page scope page scope
box2a
page scope
box4a1 box4b1
page scope page scope
box2b
page scope
box2c box4a2 box4b2
page scope page scope page scope
footer global scope
12/12/08 10

11. Landing Template
navigation template scope
box1
page scope
box2a
page scope
content
page scope
box2b
page scope
box2c
page scope
footer global scope
12/12/08 11

12. Component Bindings
Recommended component bindings...
12/12/08 12

13. Component Bindings
Home Page
Navigation
Include Include
${url.context}/html/box1.html
${url.context}/html/box3.html
Include
Include Include
${url.context}/html/box2a.html
Include ${url.context}/html/ ${url.context}/html/
box4a1.html box4b1.html
${url.context}/html/box2b.html
Include Include
Include
${url.context}/html/ ${url.context}/html/
${url.context}/html/box2c.html
box4a2.html box4b2.html
12/12/08 13

14. Component Bindings Solutions Page
Navigation
Include
${url.context}/html/box1.html
Include
${url.context}/html/box2a.html
Include
${url.context}/html/box2b.html
Include
${url.context}/html/box2c.html
12/12/08 14

15. Component Bindings Products Page
Navigation
Include
${url.context}/html/box1.html
Include
${url.context}/html/box2a.html
Image
Include
${url.context}/images/age/farman.jpg
${url.context}/html/box2b.html
Include
${url.context}/html/box2c.html
12/12/08 15

16. High-Level Steps
1. Deploy “Starter” Assets & Components
2. Create a new Web Framework Configuration
3. Create Site Configuration object
4. Build Site
(a)Create pages
(b)Create template instances
(c)Initial “Smoke” Test
(d)Create page associations
(e)Create components
(f)Final Test
12/12/08 16

17. 1. Deploy “starter” assets & components
Unzip assets.zip into web application (webapps/alfwf)‫‏‬
• Static elements – css, js, images, html
• Templates: home, landing
• Login/Logout setup: updated web.xml, pages, template-
instances
Unzip blocks-include.zip into web application
Unzip blocks-navigation.zip into web application
Steps covered in following pages:
• Create new Web Framework Configuration
• Set up a new site
• Build site
12/12/08 17

18. 2. Create Web Framework Configuration‫‏‬
Configure Surf Framework
– Point to your Green Energy site configuration file
– Add the mapping to the login and logout pages
– Declare Alfresco as your authentication source
– Add a new endpoint called http-local which is used by the
include component you expanded earlier
Contents of web-framework-config-custom.xml
appears on the next slide
The web-framework-config-custom.xml file goes in:
• /WEB-INF/classes/alfresco/web-extension
12/12/08 18

19. <alfresco-config>
<config evaluator=quot;string-comparequot; condition=quot;WebFrameworkquot;>
<web-framework>
<application-defaults>
<site-configuration>green.site.configuration</site-configuration>
<page-type>
<id>login</id>
<page-instance-id>sample-login</page-instance-id>
</page-type>
<page-type>
<id>logout</id>
<page-instance-id>sample-logout</page-instance-id>
</page-type>
</application-defaults>
<framework-defaults>
<user-factory>alfresco</user-factory>
</framework-defaults>
</web-framework>
</config>
<config evaluator=quot;string-comparequot; condition=quot;Remotequot;>
<remote>
<endpoint>
<id>http-local</id>
<name>HTTP access</name>
<description>Generic HTTP connector</description>
<connector-id>http</connector-id>
<endpoint-url>http://localhost:8580</endpoint-url>
<identity>none</identity>
<unsecure>true</unsecure>
</endpoint>
</remote>
</config>
</alfresco-config>
12/12/08 19

20. 3. Create Site Configuration object
Add a site configuration object
Points to a page: home
green.site.configuration.xml
• /WEB-INF/classes/alfresco/site-data/configurations
<?xml version=quot;1.0quot; encoding=quot;UTF-8quot;?>
<configuration>
<title>Green Energy Site</title>
<description>Green Energy Site</description>
<source-id>site</source-id>
<properties>
<root-page>home</root-page>
</properties>
</configuration>
12/12/08 20

21. 4a. Create Page objects
Create one page object for each page in the site
Make sure each page object points to the right
template instance
See earlier slide for page list
12/12/08 21

22. 4b. Create Template Instance objects
Create one Template Instance object for each
template
Make sure the template instance points to the right
FreeMarker renderer
The FreeMarker renderers were unzipped into your
alfwf web application earlier
– /WEB-INF/classes/alfresco/templates
12/12/08 22

23. 4c. Initial “Smoke” Test
Start Alfresco
Start Surf Tomcat (Restart if already running)‫‏‬
Refresh the Web Script cache
– Browse to http://labs3c:8580/alfwf/service/index
– Click ‘Refresh Web Scripts’
Test your site
• http://labs3c:8580/alfwf
• Your home page should display
• You can navigate to the other two pages using /page?p=[page
name]
• The home page should display with a bunch of missing
components
• The other two pages should require a login before displaying
12/12/08 23

24. 4d. Create Page Associations
Create one Page Association object to represent each
parent-child relationship in the site page hierarchy
– Home → Products
– Home → Solutions
Make sure assoc-type is set to “child”
12/12/08 24

25. Tips on associating child pages
Here, the home page links down to the child page
The association is of type ‘child’
File name is arbitrary. Recommend <parent>-
<child>.xml
<?xml version='1.0' encoding='UTF-8'?>
<page-association>
<source-id>home</source-id>
<dest-id>products</dest-id>
<assoc-type>child</assoc-type>
</page-association>
12/12/08 25

26. 4e. Create Component Bindings
Create one component binding for each region
If a region is scoped to a page, you have to create one
component for each region for each page
The example templates have a lot of regions. Feel free
to do a couple until you've got the idea, then let the
rest be broken
12/12/08 26

27. Tips on Component Bindings
For example, you may need to create:
page.box1.home.xml
• /WEB-INF/classes/alfresco/site-data/components
• This is a page-scoped binding of the region ‘box1’ on the page
‘home’
<?xml version='1.0' encoding='UTF-8'?>
<component>
<scope>page</scope>
<region-id>box1</region-id>
<source-id>home</source-id>
<url>/blocks/include</url>
<properties>
<path>/html/box1.html</path>
</properties>
</component>
Points to the web script: /blocks/include
• Picks up the property path value of /html/box1.html
12/12/08 27

28. Tips on Component Bindings
You may need to show an image
• /WEB-INF/classes/alfresco/site-data/components
Example of a page-scoped binding of the region
‘content’ on the page ‘products’
<?xml version='1.0' encoding='UTF-8'?>
<component>
<scope>page</scope>
<region-id>box1</region-id>
<source-id>home</source-id>
<url>/blocks/image</url>
<properties>
<src>${url.context}/images/image.jpg</path>
</properties>
</component>
Points to the web script: /blocks/image
• Picks up the property src value of /
{webapp}/images/image.jpg
12/12/08 28

29. Tips on creating a global footer
You will need to create a globally-scoped footer
component
• /WEB-INF/classes/alfresco/site-data/components
global.footer.xml
<?xml version='1.0' encoding='UTF-8'?>
<component>
<scope>global</scope>
<region-id>footer</region-id>
<source-id>global</source-id>
<url>/age/footer</url>
</component>
You will need to write the web script to implement
global footer
How and what you do is up to you!
12/12/08 29

30. 4f. Final Test
Refresh the Web Scripts cache
– Browse to http://labs3c:8580/alfwf/service/index
– Click on ‘Refresh Web Scripts’
Test your site
• http://labs3c:8580/alfwf
• You should be able to navigate between the three pages
• The components you configured should be showing up
12/12/08 30

31. Wrap-up
In this lab, you...
• Set up login pages and configured Surf to use Alfresco as the
authentication source
• Added navigation and include components
• Configured page associations
• Created template instances, page instances, and component
bindings for Green Energy
• Implemented a global footer web script component
12/12/08 Optaros and Client confidential. All rights reserved. 31