CUST-8 Tackling a Complex User Interface
•
0 likes•838 views
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.
Recommended
More Related Content
What's hot
Similar to CUST-8 Tackling a Complex User Interface
Similar to CUST-8 Tackling a Complex User Interface (20)
More from Alfresco Software
More from Alfresco Software (20)
Recently uploaded
Recently uploaded (20)
CUST-8 Tackling a Complex User Interface
- 2. Page 2 | © Copyright Surevine 2011
- 3. What’s it all about? • Structure complex UIs • Minimal dependencies • More effective team development • More maintainable code Page 3 | © Copyright Surevine 2011
- 4. Spring Surf Web Script Template (ftl) Page (xml) .ftl .js Region Component Web Script Region Component .ftl .js Page 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 ComponentManager Page 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 Results Page 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 .js Page 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 @renderHtml Page 9 | © Copyright Surevine 2011
- 10. http://opencage.info/pics.e/large_8165.asp Page 10 | © Copyright Surevine 2011
- 11. 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
- 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 Results Page 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() : string Page 17 | © Copyright Surevine 2011
- 18. Code Demonstration Page 18 | © Copyright Surevine 2011
- 19. Good Stuff… • More manageable codebase • Simpler code reuse • Well defined interfaces • Standardised pattern • YUI – same as Share Page 19 | © Copyright Surevine 2011
- 20. Not so Good Stuff… • Lots of files • No MVC within JavaScript • Lots of boilerplate • Messages tied to Web Script Page 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 – Events Page 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/searchdashlet Page | © Copyright Surevine 2011