This session aims to give developers the knowledge they need to take the example WQS website and to develop their own website based on it. Kicking off with a quick demonstration of the website, we'll then take it apart bit by bit to expose the underlying architecture, how requests are handled, the WQS API, and how to write new templates and components.

1. Web Quick Start a look at the web tier 2 Brian Remmington Alfresco Product Architect, WCM

2. Web Quick Start 3 A quick demonstration The architecture How it’s wired together The WQS API How requests are handled Creating and using a new page template Primary goal: To equip you with knowledge of how the web tier of WQS works so that you can start building your own websites based on it What we’ll cover

3. A tour of the Quick Start website 4

4. The WQS architecture 5 WQS API WQS API Transfer Service

5. Wiring the application together 6 web.xml Creates Spring dispatcher servlet web-application-config.xml Loads up surf-config and wcmqs-webapp-context Bootstraps Surf itself and defines new default request handler and interceptors surf-config.xml Other request handlers, view resolvers, Freemarker directives, and interceptors wcmqs-webapp-context.xml

6. The Web Quick Start API 7 API wired with “wcmqs-api-context.xml” Auto-bootstrapped when dropped into a Surf application Properties that can be adjusted (with their defaults): wcmqs.api.alfresco=http://localhost:8080/alfresco wcmqs.api.user=admin wcmqs.api.password=admin wcmqs.api.alfresco.cmis=%{wcmqs.api.alfresco}/service/cmis wcmqs.api.alfresco.webscript=%{wcmqs.api.alfresco}/service/api/ Override in a file named “wqsapi-custom.properties” in the “alfresco/extension” folder on the classpath

7. The WQS API – websites, sections, assets 8 Bean “webSiteService” is a good starting point:

8. The WQS API – asset collections, renditions, feedback 9

9. The application data interceptor 10 Executes before the default controller is reached Uses the requested URL to find the website, section, and asset that are being addressed www.example.com/news/global/financial_outlook_good Stores the API objects on the request context with the names “website”, “section”, and “asset”. website asset section

10. The dynamic page view resolver 11 Wired in to respond whenever an asset has been resolved Discovers the page name to be used to render the asset Each section may define template mappings from asset type to view name Searches up the type hierarchy first, then the section hierarchy

11. The streamed asset controller 12 org.alfresco.wcm.client.controller.StreamedAssetController Provides support for simple-to-generate, permanent URLs for assets: http://localhost:8081/wcmqs/asset/de2f9b66-6bbd-4347-8f24-4ed06299ad8a Slightly faster to generate Remains the same when the asset is renamed or moved Supports renditions: …/asset/de2f9b66-6bbd-4347-8f24-4ed06299ad8a?rendition=mediumNewsThumbnail Still looks for the appropriate template Is mapped to the path “/asset/**” (in wcmqs-webapp-context.xml)

12. The other controllers 13 org.alfresco.wcm.client.controller.SearchFormController An example of a Spring Annotation Handler Search RSS org.alfresco.wcm.client.controller.RssController Another annotated handler Mapped to “**/rss.xml”

13. Handling a typical request 14

14. A whirlwind tour of the WQS folder structure 15

15. The anatomy of a page 16

16. The anatomy of a page 17

17. The anatomy of a page 18 five-block.ftl

18. The anatomy of a page 19 bellyband left1 right1 bottom-left bottom-right

19. The anatomy of a page 20

20. The anatomy of a page 21

21. The anatomy of a page 22 webscripts/list/wide.get.js webscripts/list/wide.get.html.ftl bottom-left bottom-right

22. The anatomy of a page 23 left1

23. Learn More 24 wiki.alfresco.com forums.alfresco.com twitter: @AlfrescoECM