CUST-8 Tackling a Complex User Interface

1,532 views
1,380 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 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,532
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
36
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

CUST-8 Tackling a Complex User Interface

  1. 1. Alfresco DevCon2011Tackling aComplex UI
  2. 2. Page 2 | © Copyright Surevine 2011
  3. 3. What’s it all about? •  Structure complex UIs •  Minimal dependencies •  More effective team development •  More maintainable codePage 3 | © Copyright Surevine 2011
  4. 4. Spring Surf Web Script Template (ftl) Page (xml) .ftl .js Region Component Web Script Region Component .ftl .jsPage 4 | © Copyright Surevine 2011
  5. 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. 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. 7. A Solution: “Widgets” SearchDashlet InputPanel TermInput OrderByInput ResultsPage 7 | © Copyright Surevine 2011
  8. 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. 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. 10. http://opencage.info/pics.e/large_8165.aspPage 10 | © Copyright Surevine 2011
  11. 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. 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. 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. 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. 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. 16. Search Dashlet SearchDashlet InputPanel TermInput OrderByInput ResultsPage 16 | © Copyright Surevine 2011
  17. 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. 18. Code DemonstrationPage 18 | © Copyright Surevine 2011
  19. 19. Good Stuff… •  More manageable codebase •  Simpler code reuse •  Well defined interfaces •  Standardised pattern •  YUI – same as SharePage 19 | © Copyright Surevine 2011
  20. 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. 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. 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

×