Your SlideShare is downloading. ×
CUST-8 Tackling a Complex User Interface
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

CUST-8 Tackling a Complex User Interface

1,203
views

Published on

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 …

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.

Published in: Technology, Design

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,203
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
32
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Alfresco DevCon2011Tackling aComplex UI
  • 2. Page 2 | © Copyright Surevine 2011
  • 3. What’s it all about? •  Structure complex UIs •  Minimal dependencies •  More effective team development •  More maintainable codePage 3 | © Copyright Surevine 2011
  • 4. Spring Surf Web Script Template (ftl) Page (xml) .ftl .js Region Component Web Script Region Component .ftl .jsPage 4 | © Copyright Surevine 2011
  • 5. Alfresco Share UI Components Web Script CSS Description (xml) JavaScript Controller (js) Component Object Includes Head Template (ftl) HTML Template (ftl) Inline JS Registers .properties Alfresco ComponentManagerPage 5 | © Copyright Surevine 2011
  • 6. So where’s the problem? Building a complex UI Break design into components Each component is a web script Sometimes we can’t www.flickr.com/photos/jbgeekdad/2103500995/Page 6 | © Copyright Surevine 2011
  • 7. A Solution: “Widgets” SearchDashlet InputPanel TermInput OrderByInput ResultsPage 7 | © Copyright Surevine 2011
  • 8. What’s in a widget Share Component Widget Web Script .css .lib.ftl .css .head.ftl .js @renderHead .js Object Object .html.ftl @renderHtml <html> <html> Inline JS Inline JS .js .jsPage 8 | © Copyright Surevine 2011
  • 9. How widgets are included Component .html.ftl JS Object Widget 1 Widget 2 JS Object JS Object @renderHtml @renderHtml Widget 3 JS Object @renderHtmlPage 9 | © Copyright Surevine 2011
  • 10. http://opencage.info/pics.e/large_8165.aspPage 10 | © Copyright Surevine 2011
  • 11. Golden Rules •  Parent references direct children •  A child doesn’t reference parent •  Parent -> Child: Method Call •  Child -> Parent: YUI CustomEventPage 11 | © Copyright Surevine 2011
  • 12. mycomponent.get.html.ftl <#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> Page 12 | © Copyright Surevine 2011
  • 13. widget1.lib.ftl - @renderHtml <#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 13 | © Copyright Surevine 2011
  • 14. mycomponent.get.head.ftl <#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 14 | © Copyright Surevine 2011
  • 15. widget1.lib.ftl - @renderHead <#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 15 | © Copyright Surevine 2011
  • 16. Search Dashlet SearchDashlet InputPanel TermInput OrderByInput ResultsPage 16 | © Copyright Surevine 2011
  • 17. Static JS Model SearchDashlet SearchDashletInputPanel SearchDashletResults onSearch : Event<term, orderBy> doSearch(siteId, term, orderBy) SearchDashletTermInput SearchDashletOrderByInput onChange : Event<term> onChange : Event<orderBy> getValue() : string getValue() : stringPage 17 | © Copyright Surevine 2011
  • 18. Code DemonstrationPage 18 | © Copyright Surevine 2011
  • 19. Good Stuff… •  More manageable codebase •  Simpler code reuse •  Well defined interfaces •  Standardised pattern •  YUI – same as SharePage 19 | © Copyright Surevine 2011
  • 20. Not so Good Stuff… •  Lots of files •  No MVC within JavaScript •  Lots of boilerplate •  Messages tied to Web ScriptPage 20 | © Copyright Surevine 2011
  • 21. Summary •  Split large UI into “Widgets” •  Widget = ftl macros + js + css •  Parents know their children –  Method calls •  Children don’t know parents –  EventsPage 21 | © Copyright Surevine 2011
  • 22. Contact: Ashley Ward ashley.ward@surevine.com @ashward123 uk.linkedin.com/in/ashward www.slideshare.com/ashward123 github.com/ashward/searchdashletPage | © Copyright Surevine 2011