cust-8 tackling a complex user interface
DESCRIPTION
If you’re creating complex User Interface components within Share, you might, like us, have found that they can quickly become unwieldy to manage. To tackle this we devised a structured design pattern by which the complex control could be broken into multiple simpler YUI components. This pattern is similar to the one already used for other share components but allows a much finer grained breakdown of components. The benefits of adopting this approach are: The initial overall design falls into place very quickly; Reuse of similar parts of the user interface is straightforward which reduces code duplication; Specifying a well-defined interface for each component allows straightforward splitting of the workload across multiple developers; and Components can easily communicate with each other in a structured way without breaking encapsulation. In this presentation I will introduce the pattern, and use live coding to demonstrate usage of the pattern to create an example component.TRANSCRIPT
Tackling a Complex UI
Alfresco DevCon 2011
Page 2 | © Copyright Surevine 2011
What’s it all about?
• Structure complex UIs • Minimal dependencies
• More effective team development • More maintainable code
Page 3 | © Copyright Surevine 2011
Spring Surf
Page 4 | © Copyright Surevine 2011
Template (ftl)
Region
Region
Page (xml)
Component
Component Web Script
.ftl .js
Web Script
.ftl .js
Alfresco Share UI Components
Page 5 | © Copyright Surevine 2011
Web Script
Controller (js)
Head Template (ftl)
HTML Template (ftl)
Description (xml) CSS
JavaScript
Component Object Includes
Inline JS
Alfresco ComponentManager
Registers
.properties
So where’s the problem?
Building a complex UI
Break design into components Each component is a web script
Sometimes we can’t
Page 6 | © Copyright Surevine 2011
www.flickr.com/photos/jbgeekdad/2103500995/
A Solution: “Widgets”
Page 7 | © Copyright Surevine 2011
SearchDashlet
InputPanel
Results
TermInput
OrderByInput
Share Component
What’s in a widget
Page 8 | © Copyright Surevine 2011
Web Script
.html.ftl <html>
.js
.head.ftl
Widget
.css
.js
.lib.ftl
@renderHead
@renderHtml <html>
Object
.css
.js
Object
Inline JS Inline JS
.js
How widgets are included
Page 9 | © Copyright Surevine 2011
Component
Widget 1 Widget 2
Widget 3
.html.ftl JS Object
@renderHtml JS Object JS Object
@renderHtml
@renderHtml JS Object
Page 10 | © Copyright Surevine 2011
http://opencage.info/pics.e/large_8165.asp
Golden Rules
• Parent references direct children • A child doesn’t reference parent
• Parent -> Child: Method Call • Child -> Parent: YUI CustomEvent
Page 11 | © Copyright Surevine 2011
Page 12 | © Copyright Surevine 2011
<#import "widget1.lib.ftl" as widget1 /><#import "widget2.lib.ftl" as widget2 /><div id="${args.htmlid?html}"> <h1>Parent component</h1> <@widget1.renderHtml htmlId = args.htmlid + "-widget1" /> <@widget2.renderHtml htmlId = args.htmlid + "-widget2" /></div>
<script type="text/javascript"> new MyComponent("${args.htmlid?js_string}") .setMessages(${messages});</script>
mycomponent.get.html.ftl
widget1.lib.ftl - @renderHtml
Page 13 | © Copyright Surevine 2011
<#macro renderHtml htmlId> <#import "widget3.lib.ftl" as widget3 /> <div id=”${htmlId}"> <h2>Widget 1</h2> <@widget3.renderHtml htmlId = htmlId + "-widget3” /> </div>
<script type="text/javascript”> new Widget1("${args.htmlid?js_string}”); </script></#macro>
mycomponent.get.head.ftl
Page 14 | © Copyright Surevine 2011
<#include "/org/alfresco/components/component.head.inc">
<@link rel="stylesheet" type="text/css" href="${page.url.context}/css/mycomponent.css" />
<@script type="text/javascript” src="${page.url.context}/scripts/mycomponent.js"></@script>
<#import ”widget1.lib.ftl" as widget1 /><@widget1.renderHead />
<#import ”widget2.lib.ftl" as widget2 /><@widget2.renderHead />
widget1.lib.ftl - @renderHead
Page 15 | © Copyright Surevine 2011
<#include "/org/alfresco/components/component.head.inc">
<#macro renderHead>
<@link rel="stylesheet" type="text/css" href="${page.url.context}/css/widget1.css" />
<@script type="text/javascript” src="${page.url.context}/scripts/widget1.js"></@script>
<#import ”widget3.lib.ftl" as widget3 /> <@widget3.renderHead />
</#macro>
Search Dashlet
Page 16 | © Copyright Surevine 2011
SearchDashlet
InputPanel
Results
TermInput
OrderByInput
Static JS Model
Page 17 | © Copyright Surevine 2011
SearchDashlet
SearchDashletInputPanel
onSearch : Event<term, orderBy>
SearchDashletResults
doSearch(siteId, term, orderBy)
SearchDashletTermInput
onChange : Event<term>
getValue() : string
SearchDashletOrderByInput
onChange : Event<orderBy>
getValue() : string
Code Demonstration
Page 18 | © Copyright Surevine 2011
Good Stuff…
• More manageable codebase • Simpler code reuse • Well defined interfaces • Standardised pattern • YUI – same as Share
Page 19 | © Copyright Surevine 2011
Not so Good Stuff…
• Lots of files • No MVC within JavaScript • Lots of boilerplate • Messages tied to Web Script
Page 20 | © Copyright Surevine 2011
Summary
• Split large UI into “Widgets” • Widget = ftl macros + js + css • Parents know their children
– Method calls
• Children don’t know parents – Events
Page 21 | © Copyright Surevine 2011
Contact:
Ashley Ward [email protected] @ashward123 uk.linkedin.com/in/ashward
www.slideshare.com/ashward123
github.com/ashward/searchdashlet
Page | © Copyright Surevine 2011