• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Optaros Surf Code Camp Lab 3
 

Optaros Surf Code Camp Lab 3

on

  • 5,417 views

Surf Code Camp Lab 3 leaves Share behind and starts to show how a Surf web site is built from the ground, up. ...

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

Statistics

Views

Total Views
5,417
Views on SlideShare
5,392
Embed Views
25

Actions

Likes
0
Downloads
209
Comments
5

2 Embeds 25

http://www.slideshare.net 23
http://5aalayo.blogspot.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

15 of 5 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • ajmillar,

    The concepts are the same but there have been a lot of changes in the XML structure that will keep these examples from running verbatim in Spring Surf.

    Jeff
    Are you sure you want to
    Your message goes here
    Processing…
  • Will the above work in SpringSurf as well?
    Are you sure you want to
    Your message goes here
    Processing…
  • thanks Jeff
    Are you sure you want to
    Your message goes here
    Processing…
  • Download the full solution from: http://ecmarchitect.com/images/green-energy-code-camp.zip

    Then, look in WEB-INF/classes/alfresco/site-webscripts/blocks for those blocks. The assets are in css, html, images, js, and WEB-INF/classes/alfresco/templates directories.

    Jeff
    Are you sure you want to
    Your message goes here
    Processing…
  • Hi , I need assets.zip,blocks-include.zip,blocks-nav igation.zip Where can i find them
    can anybody send to my
    damube_mk@yahoo.co.in
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Optaros Surf Code Camp Lab 3 Optaros Surf Code Camp Lab 3 Presentation Transcript

    • Alfresco Surf Code Camp Lab 3: Green Energy
    • 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
    • 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
    • What should it look like? Intended UI shown on next page 12/12/08 4
    • Green Energy Home Page 12/12/08 5
    • Green Energy Solutions Page 12/12/08 6
    • Green Energy Products Page 12/12/08 7
    • 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
    • Templates Home Template • used by the home page Landing Template • used by the products page • used by the solutions page 12/12/08 9
    • 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
    • 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
    • Component Bindings Recommended component bindings... 12/12/08 12
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • <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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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