Spring Surf 101

Editor's Notes

• #4: Quick bio:Kevin Roast - UI Team Leader, one of the founding Alfresco developers, worked on the Explorer JSF based client, the JavaScript and FreeMarker services and repository APIs, impl some of the features in Alfresco WebScripts, came up with the PageRenderer WebScript runtime which is the “core” of the SpringSurf rendering tech used in Alfresco Share – i.e. “WebScripts as UI components” – more on to that later…Introduction to SpringSurf – not a deep dive - we will examine the basics of the SpringSurf view composition framework for Spring MVC applications. Hope to show how to easy to construct pages, templates and components that can be used to quickly build web applications fromsimple scripts and templates.
• #5: WebScripts been around for more than 3 years in some form or anotherSurf has been around for over 2 yearsElaborate on important points in the history
• #6: M3 -> RC1 we’ve come a long way...RC1 is a revelation compared to stability, performance and test coverage since M3... Features a large suite of tests for functional area coverage.
• #7: What can you do with it? – Simple REST APIs to complete Rich web applications!WebScript pure REST API tier i.e. separate application – Activiti project; has a pure WebScript based REST API tier exposing new BPM engine (server), plus a SpringSurf based web-application consuming the REST APIs (UI). A mix of Java and JavaScript backed webscripts and FTL based pages <- mention Erik’s blog posts, download Activiti etc.WebQS, Mobile.
• #8: Why should you use it?Familiar with SpringMVC? Then this will make building views quicker, less (a lot less!) Java code (annotations yuk) and can use lovely WebScripts.Fast, powerful APIs, rapidRAPID dev cycle. Extend Share – jar packaging.Share uses it, WebQS, OpenCMIS and Activiti use itDeveloper tools coming!
• #9: Views (pages), templates, components – WebScripts, FreeMarker, JS, head templates, JSP, chrome.Page, can specify template instance to use (another xml descriptor) – otherwise Surf will “use template with the same name” but can reuse templates i.e. a product template can be used by multiple pages. Reused of pages, templates.Components can be global, template or page scoped – also uri or theme scope – unique to the URL (mostly same as page, but not if you use URL templates) and theme specific
• #10: Helps to identify the link between pages, template instances, templates and components
• #11: Surf model objects can be created, modified and persisted – they all respond to APIs – think dynamic dashboards in Share – could have real-time drag and drop if you felt that would provide the best UI experience...
• #12: Helps to identify the link between pages, template instances, templates and components
• #13: Example page def – note embedded page scoped component defs (since 3.3)Custom properties
• #14: If you have no template scoped components, or template specific properties - then you don’t need this! Surf will automatically attempt to find “products.ftl” and internally generate an intermediary object to represent the template instanceNote the embedded template scoped component defs
• #15: Note the ${head} freemarker model value – combined result of all components .head.ftl templates – well formed HTMLRegion tags themselves can be dynamic!i.e.<#list comps as c><@region id=“${c}" scope=“${something}" /></#list>Surf will work out what components are present on the page before pre-generating the ${head} contents.Simple DIV structure, use CSS for layout magic (also YUI in Share – entirely up to you what libs you use! JQuery etc.)Example template with region component bindings, examples of global, template and page scoped (next slide for detail)
• #16: <scope>page</scope> <region-id>title</region-id> <source-id>console</source-id>For uri/theme scopeWith nested components defs, only global scoped components tend to be defined in individual XML files – lot, lot less XML files than in 3.2 – see Share 3.4 for comparison!
• #18: Allows simple urls and multiple URLs (i.e. Spring Views) to Share the same SpringSurf Page instance
• #20: UI component WebScript component “contract”:Don’t output full page HTML i.e. Just an HTML fragmentOutput clean HTML consistent with parent page i.e. XHTML, HTML5Use .head.ftl template for dependant client-side files i.e. CSS, JSCan assume running in page context i.e. use of “page.url.args” is ok – but better to “bind” args into component URLEncode HTML with ?html and encode JS with ?js_string <- XSS!
• #22: If GET, can simplify to – remote.call(“/...”);Use eval() for JSON response – or use E4X to process XML responsePlace any processed JS objects into the “model” – generally an array of objects or just an object – will automatically be marshelled into FreeMarker object equivalents i.e Array to List, Object to MapCan just put the eval-ed resulting object directly into the model without further processing if required, but most scripts do some processing of the data in JS – remember if “production” mode the JS is compiled so quick (but not as quick as Java or modern JS engine like V8...)Get/post/put/delete on the connector objectImagine processing formdata form client, placing into a json structure and POSTing to an API – very quick and easy to do.
• #23: Walk arrays as lists or access object properties from the model – easy and fast
• #24: Full component model not available (special template – not running as a true WebScript presentation template) – but access to “page” etc. as you would expect i.e. args available
• #26: Adding a persister via SpringSurfModel objects will now be retrieved from remote Alfresco store by default (cached of course)Model objects can be save()ed to the remote store
• #28: Runtime: selects the “persister” group – WEB-INF (webapp), classpath locations (surf/), local is a folder on disk, alfresco is alfresco specific classpaths (alfresco/) i.e. Old Surf apps and Alfresco ShareDevelopment mode: selects the caching settings for the model objects loaded by the persitsers – runtime uses aggressive caching – will *need* to Refresh via console if adding files at runtime. The “development” mode disables caches. Note that WebScript components will still need Refresh-ing as the WebScript registry is populated once during server startup.
• #30: Mention blog post on JAR packaging for ShareSince 3.4.b it is possible to override Share web-assets also (fixed to use the /res resource controller for all assets – so can override on classpath or JARs)