0
Alfresco Surf Code Camp
Lab 3: Green Energy
Objectives

             Build the Green Energy web site

             Follows the same pattern as the walkthrough

      ...
Sample Site

             We will use this as a starting point: alfwf.war
              • A blank Surf framework with no s...
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
             • unauthent...
Templates

             Home Template
              • used by the home page

             Landing Template
              •...
Home Template




                                    navigation template scope




                 box1                 ...
Landing Template




                                     navigation template scope




                  box1
           ...
Component Bindings

             Recommended component bindings...




12/12/08                                         12
Component Bindings
           Home Page




                                                            Navigation


     ...
Component Bindings Solutions Page




                                              Navigation


                       In...
Component Bindings Products Page




                                                  Navigation


                      ...
High-Level Steps

           1. Deploy “Starter” Assets & Components

           2. Create a new Web Framework Configurati...
1. Deploy “starter” assets & components

             Unzip assets.zip into web application (webapps/alfwf)‫‏‬
           ...
2. Create Web Framework Configuration‫‏‬

            Configure Surf Framework
                 – Point to your Green Ener...
<alfresco-config>
                <config evaluator=quot;string-comparequot; condition=quot;WebFrameworkquot;>
           ...
3. Create Site Configuration object

             Add a site configuration object

             Points to a page: home

  ...
4a. Create Page objects

             Create one page object for each page in the site

             Make sure each page o...
4b. Create Template Instance objects

             Create one Template Instance object for each
             template

   ...
4c. Initial “Smoke” Test

             Start Alfresco

             Start Surf Tomcat (Restart if already running)‫‏‬

   ...
4d. Create Page Associations

             Create one Page Association object to represent each
             parent-child ...
Tips on associating child pages

             Here, the home page links down to the child page

             The associati...
4e. Create Component Bindings

             Create one component binding for each region

             If a region is scop...
Tips on Component Bindings

             For example, you may need to create:
             page.box1.home.xml
            ...
Tips on Component Bindings

             You may need to show an image
              • /WEB-INF/classes/alfresco/site-data...
Tips on creating a global footer

             You will need to create a globally-scoped footer
             component
   ...
4f. Final Test

             Refresh the Web Scripts cache
                  – Browse to http://labs3c:8580/alfwf/service/...
Wrap-up

                 In this lab, you...
                     • Set up login pages and configured Surf to use Alfresc...
Upcoming SlideShare
Loading in...5
×

Optaros Surf Code Camp Lab 3

3,222

Published on

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

Published in: Technology
5 Comments
0 Likes
Statistics
Notes
  • 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
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Will the above work in SpringSurf as well?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • thanks Jeff
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 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
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 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
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total Views
3,222
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
212
Comments
5
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Optaros Surf Code Camp Lab 3"

  1. 1. Alfresco Surf Code Camp Lab 3: Green Energy
  2. 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. 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. 4. What should it look like? Intended UI shown on next page 12/12/08 4
  5. 5. Green Energy Home Page 12/12/08 5
  6. 6. Green Energy Solutions Page 12/12/08 6
  7. 7. Green Energy Products Page 12/12/08 7
  8. 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. 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. 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. 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. 12. Component Bindings Recommended component bindings... 12/12/08 12
  13. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×