optaros surf code camp lab 3
DESCRIPTION
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.zipTRANSCRIPT
Alfresco Surf Code Camp
Lab 3: Green Energy
12/12/08 2
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
Objectives
12/12/08 3
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
Sample Site
12/12/08 4
Intended UI shown on next page
What should it look like?
12/12/08 5
Green Energy Home Page
12/12/08 6
Green Energy Solutions Page
12/12/08 7
Green Energy Products Page
12/12/08 8
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
Pages
12/12/08 9
Home Template• used by the home page
Landing Template• used by the products page
• used by the solutions page
Templates
12/12/08 10
box1page scope
box2apage scope
box3page scope
box4a1page scope
box4a2page scope
box4b1page scope
box4b2page scope
box2bpage scope
box2cpage scope
footer global scope
navigation template scope
Home Template
12/12/08 11
box1page scope
box2apage scope
box2bpage scope
box2cpage scope
contentpage scope
navigation template scope
footer global scope
Landing Template
12/12/08 12
Recommended component bindings...
Component Bindings
12/12/08 13
Include
${url.context}/html/box1.html
Include
${url.context}/html/box2a.html
Navigation
Include
${url.context}/html/box3.html
Include
${url.context}/html/box4a1.html
Include
${url.context}/html/box2b.html
Include
${url.context}/html/box2c.html
Include
${url.context}/html/box4a2.html
Include
${url.context}/html/box4b1.html
Include
${url.context}/html/box4b2.html
Component BindingsHome Page
12/12/08 14
Include
${url.context}/html/box1.html
Include
${url.context}/html/box2a.html
Include
${url.context}/html/box2b.html
Include
${url.context}/html/box2c.html
Navigation
Component Bindings Solutions Page
12/12/08 15
Image
${url.context}/images/age/farman.jpg
Include
${url.context}/html/box1.html
Include
${url.context}/html/box2a.html
Include
${url.context}/html/box2b.html
Include
${url.context}/html/box2c.html
Navigation
Component Bindings Products Page
12/12/08 16
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
High-Level Steps
12/12/08 17
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
1. Deploy “starter” assets & components
12/12/08 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 19
<alfresco-config><config evaluator="string-compare" condition="WebFramework">
<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="string-compare" condition="Remote">
<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 20
Add a site configuration object
Points to a page: home
green.site.configuration.xml
• /WEB-INF/classes/alfresco/site-data/configurations
<?xml version="1.0" encoding="UTF-8"?>
<configuration> <title>Green Energy Site</title> <description>Green Energy Site</description> <source-id>site</source-id> <properties> <root-page>home</root-page> </properties></configuration>
3. Create Site Configuration object
12/12/08 21
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
4a. Create Page objects
12/12/08 22
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
4b. Create Template Instance objects
12/12/08 23
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
4c. Initial “Smoke” Test
12/12/08 24
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”
4d. Create Page Associations
12/12/08 25
You will need to create page-association objects• /WEB-INF/classes/alfresco/site-data/page-associations
Simply link two pages together by id and type ‘child’
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>
Tips on associating child pages
12/12/08 26
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
4e. Create Component Bindings
12/12/08 27
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’
Points to the web script: /blocks/include• Picks up the property path value of /html/box1.html
<?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>
Tips on Component Bindings
12/12/08 28
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’
Points to the web script: /blocks/image• Picks up the property src value of /{webapp}/images/image.jpg
<?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>
Tips on Component Bindings
12/12/08 29
You will need to create a globally-scoped footer
component• /WEB-INF/classes/alfresco/site-data/components
global.footer.xml
You will need to write the web script to implement
global footer
How and what you do is up to you!
<?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>
Tips on creating a global footer
12/12/08 30
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
4f. Final Test
12/12/08 Optaros and Client confidential. All rights reserved. 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