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
![Page 1: CUST-8 Tackling a Complex User Interface](https://reader034.vdocuments.site/reader034/viewer/2022052523/55584392d8b42ac6078b5164/html5/thumbnails/1.jpg)
Tackling a Complex UI
Alfresco DevCon 2011
![Page 2: CUST-8 Tackling a Complex User Interface](https://reader034.vdocuments.site/reader034/viewer/2022052523/55584392d8b42ac6078b5164/html5/thumbnails/2.jpg)
Page 2 | © Copyright Surevine 2011
![Page 3: CUST-8 Tackling a Complex User Interface](https://reader034.vdocuments.site/reader034/viewer/2022052523/55584392d8b42ac6078b5164/html5/thumbnails/3.jpg)
What’s it all about?
• Structure complex UIs • Minimal dependencies
• More effective team development • More maintainable code
Page 3 | © Copyright Surevine 2011
![Page 4: CUST-8 Tackling a Complex User Interface](https://reader034.vdocuments.site/reader034/viewer/2022052523/55584392d8b42ac6078b5164/html5/thumbnails/4.jpg)
Spring Surf
Page 4 | © Copyright Surevine 2011
Template (ftl)
Region
Region
Page (xml)
Component
Component Web Script
.ftl .js
Web Script
.ftl .js
![Page 5: CUST-8 Tackling a Complex User Interface](https://reader034.vdocuments.site/reader034/viewer/2022052523/55584392d8b42ac6078b5164/html5/thumbnails/5.jpg)
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
![Page 6: CUST-8 Tackling a Complex User Interface](https://reader034.vdocuments.site/reader034/viewer/2022052523/55584392d8b42ac6078b5164/html5/thumbnails/6.jpg)
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/
![Page 7: CUST-8 Tackling a Complex User Interface](https://reader034.vdocuments.site/reader034/viewer/2022052523/55584392d8b42ac6078b5164/html5/thumbnails/7.jpg)
A Solution: “Widgets”
Page 7 | © Copyright Surevine 2011
SearchDashlet
InputPanel
Results
TermInput
OrderByInput
![Page 8: CUST-8 Tackling a Complex User Interface](https://reader034.vdocuments.site/reader034/viewer/2022052523/55584392d8b42ac6078b5164/html5/thumbnails/8.jpg)
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
![Page 9: CUST-8 Tackling a Complex User Interface](https://reader034.vdocuments.site/reader034/viewer/2022052523/55584392d8b42ac6078b5164/html5/thumbnails/9.jpg)
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: CUST-8 Tackling a Complex User Interface](https://reader034.vdocuments.site/reader034/viewer/2022052523/55584392d8b42ac6078b5164/html5/thumbnails/10.jpg)
Page 10 | © Copyright Surevine 2011
http://opencage.info/pics.e/large_8165.asp
![Page 11: CUST-8 Tackling a Complex User Interface](https://reader034.vdocuments.site/reader034/viewer/2022052523/55584392d8b42ac6078b5164/html5/thumbnails/11.jpg)
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: CUST-8 Tackling a Complex User Interface](https://reader034.vdocuments.site/reader034/viewer/2022052523/55584392d8b42ac6078b5164/html5/thumbnails/12.jpg)
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
![Page 13: CUST-8 Tackling a Complex User Interface](https://reader034.vdocuments.site/reader034/viewer/2022052523/55584392d8b42ac6078b5164/html5/thumbnails/13.jpg)
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>
![Page 14: CUST-8 Tackling a Complex User Interface](https://reader034.vdocuments.site/reader034/viewer/2022052523/55584392d8b42ac6078b5164/html5/thumbnails/14.jpg)
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 />
![Page 15: CUST-8 Tackling a Complex User Interface](https://reader034.vdocuments.site/reader034/viewer/2022052523/55584392d8b42ac6078b5164/html5/thumbnails/15.jpg)
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>
![Page 16: CUST-8 Tackling a Complex User Interface](https://reader034.vdocuments.site/reader034/viewer/2022052523/55584392d8b42ac6078b5164/html5/thumbnails/16.jpg)
Search Dashlet
Page 16 | © Copyright Surevine 2011
SearchDashlet
InputPanel
Results
TermInput
OrderByInput
![Page 17: CUST-8 Tackling a Complex User Interface](https://reader034.vdocuments.site/reader034/viewer/2022052523/55584392d8b42ac6078b5164/html5/thumbnails/17.jpg)
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
![Page 18: CUST-8 Tackling a Complex User Interface](https://reader034.vdocuments.site/reader034/viewer/2022052523/55584392d8b42ac6078b5164/html5/thumbnails/18.jpg)
Code Demonstration
Page 18 | © Copyright Surevine 2011
![Page 19: CUST-8 Tackling a Complex User Interface](https://reader034.vdocuments.site/reader034/viewer/2022052523/55584392d8b42ac6078b5164/html5/thumbnails/19.jpg)
Good Stuff…
• More manageable codebase • Simpler code reuse • Well defined interfaces • Standardised pattern • YUI – same as Share
Page 19 | © Copyright Surevine 2011
![Page 20: CUST-8 Tackling a Complex User Interface](https://reader034.vdocuments.site/reader034/viewer/2022052523/55584392d8b42ac6078b5164/html5/thumbnails/20.jpg)
Not so Good Stuff…
• Lots of files • No MVC within JavaScript • Lots of boilerplate • Messages tied to Web Script
Page 20 | © Copyright Surevine 2011
![Page 21: CUST-8 Tackling a Complex User Interface](https://reader034.vdocuments.site/reader034/viewer/2022052523/55584392d8b42ac6078b5164/html5/thumbnails/21.jpg)
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
![Page 22: CUST-8 Tackling a Complex User Interface](https://reader034.vdocuments.site/reader034/viewer/2022052523/55584392d8b42ac6078b5164/html5/thumbnails/22.jpg)
Contact:
Ashley Ward [email protected] @ashward123 uk.linkedin.com/in/ashward
www.slideshare.com/ashward123
github.com/ashward/searchdashlet
Page | © Copyright Surevine 2011