Download - CUST-8 Tackling a Complex User Interface

Tackling a Complex UI

Alfresco DevCon 2011

| © Copyright Surevine 2011

What’s it all about?

•  Structure complex UIs •  Minimal dependencies

•  More effective team development •  More maintainable code


Spring Surf


Template (ftl)

Region

Region

Page (xml)

Component

Component Web Script

.ftl .js

Web Script

.ftl .js

Alfresco Share UI Components


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


www.flickr.com/photos/jbgeekdad/2103500995/

A Solution: “Widgets”


SearchDashlet

InputPanel

Results

TermInput

OrderByInput

Share Component

What’s in a widget


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


Component

Widget 1 Widget 2

Widget 3

.html.ftl JS Object

@renderHtml JS Object JS Object

@renderHtml

@renderHtml JS Object


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



<#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


<#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


<#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


<#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


SearchDashlet

InputPanel

Results

TermInput

OrderByInput

Static JS Model


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


Good Stuff…

•  More manageable codebase •  Simpler code reuse •  Well defined interfaces •  Standardised pattern •  YUI – same as Share


Not so Good Stuff…

•  Lots of files •  No MVC within JavaScript •  Lots of boilerplate •  Messages tied to Web Script


Summary

•  Split large UI into “Widgets” •  Widget = ftl macros + js + css •  Parents know their children

– Method calls

•  Children don’t know parents – Events


Download - CUST-8 Tackling a Complex User Interface

Top Related