cust-8 tackling a complex user interface
Post on 17-May-2015
1.234 Views
Preview:
DESCRIPTION
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 ashley.ward@surevine.com @ashward123 uk.linkedin.com/in/ashward
www.slideshare.com/ashward123
github.com/ashward/searchdashlet
Page | © Copyright Surevine 2011
top related