CUST-8 Tackling a Complex User Interface
-
Upload
alfresco-software -
Category
Technology
-
view
1.234 -
download
3
description
Transcript of CUST-8 Tackling a Complex User Interface
![Page 1: CUST-8 Tackling a Complex User Interface](https://reader034.fdocuments.us/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.fdocuments.us/reader034/viewer/2022052523/55584392d8b42ac6078b5164/html5/thumbnails/2.jpg)
Page 2 | © Copyright Surevine 2011
![Page 3: CUST-8 Tackling a Complex User Interface](https://reader034.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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