SlideShare a Scribd company logo
1 of 22
Download to read offline
Alfresco DevCon
2011


Tackling a
Complex UI
Page 2 | © Copyright Surevine 2011
What’s it all about?
               •  Structure complex UIs
               •  Minimal dependencies

               •  More effective team development
               •  More maintainable code




Page 3 | © Copyright Surevine 2011
Spring Surf

                                                  Web Script
   Template (ftl)                    Page (xml)
                                                   .ftl   .js
       Region                         Component

                                                  Web Script
       Region                         Component
                                                   .ftl   .js




Page 4 | © Copyright Surevine 2011
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
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
A Solution: “Widgets”
                                     SearchDashlet
                                      InputPanel
                                       TermInput

                                       OrderByInput


                                      Results




Page 7 | © Copyright Surevine 2011
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
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
http://opencage.info/pics.e/large_8165.asp




Page 10 | © Copyright Surevine 2011
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
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
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
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
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
Search Dashlet
                                      SearchDashlet
                                       InputPanel
                                        TermInput

                                        OrderByInput


                                       Results




Page 16 | © Copyright Surevine 2011
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
Code Demonstration




Page 18 | © Copyright Surevine 2011
Good Stuff…
               •  More manageable codebase
               •  Simpler code reuse
               •  Well defined interfaces
               •  Standardised pattern
               •  YUI – same as Share




Page 19 | © Copyright Surevine 2011
Not so Good Stuff…
               •  Lots of files
               •  No MVC within JavaScript
               •  Lots of boilerplate
               •  Messages tied to Web Script




Page 20 | © Copyright Surevine 2011
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
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

More Related Content

What's hot

HTML5 and CSS3 refresher
HTML5 and CSS3 refresherHTML5 and CSS3 refresher
HTML5 and CSS3 refresherIvano Malavolta
 
Sightly - AEM6 UI Development using JS and JAVA
Sightly - AEM6 UI Development using JS and JAVASightly - AEM6 UI Development using JS and JAVA
Sightly - AEM6 UI Development using JS and JAVAYash Mody
 
Web Components v1
Web Components v1Web Components v1
Web Components v1Mike Wilcox
 
HTML5: the new frontier of the web
HTML5: the new frontier of the webHTML5: the new frontier of the web
HTML5: the new frontier of the webIvano Malavolta
 
Great Responsive-ability Web Design
Great Responsive-ability Web DesignGreat Responsive-ability Web Design
Great Responsive-ability Web DesignMike Wilcox
 
CIRCUIT 2015 - Content API's For AEM Sites
CIRCUIT 2015 - Content API's For AEM SitesCIRCUIT 2015 - Content API's For AEM Sites
CIRCUIT 2015 - Content API's For AEM SitesICF CIRCUIT
 

What's hot (6)

HTML5 and CSS3 refresher
HTML5 and CSS3 refresherHTML5 and CSS3 refresher
HTML5 and CSS3 refresher
 
Sightly - AEM6 UI Development using JS and JAVA
Sightly - AEM6 UI Development using JS and JAVASightly - AEM6 UI Development using JS and JAVA
Sightly - AEM6 UI Development using JS and JAVA
 
Web Components v1
Web Components v1Web Components v1
Web Components v1
 
HTML5: the new frontier of the web
HTML5: the new frontier of the webHTML5: the new frontier of the web
HTML5: the new frontier of the web
 
Great Responsive-ability Web Design
Great Responsive-ability Web DesignGreat Responsive-ability Web Design
Great Responsive-ability Web Design
 
CIRCUIT 2015 - Content API's For AEM Sites
CIRCUIT 2015 - Content API's For AEM SitesCIRCUIT 2015 - Content API's For AEM Sites
CIRCUIT 2015 - Content API's For AEM Sites
 

Similar to CUST-8 Tackling a Complex User Interface

D2W Branding Using jQuery ThemeRoller
D2W Branding Using jQuery ThemeRollerD2W Branding Using jQuery ThemeRoller
D2W Branding Using jQuery ThemeRollerWO Community
 
WebBee rapid web app development teck stack
WebBee rapid web app development teck stackWebBee rapid web app development teck stack
WebBee rapid web app development teck stackALDAN3
 
Web Components + Backbone: a Game-Changing Combination
Web Components + Backbone: a Game-Changing CombinationWeb Components + Backbone: a Game-Changing Combination
Web Components + Backbone: a Game-Changing CombinationAndrew Rota
 
Applying Functional Programming to Build Platform-Independent Mobile Applicat...
Applying Functional Programming to Build Platform-Independent Mobile Applicat...Applying Functional Programming to Build Platform-Independent Mobile Applicat...
Applying Functional Programming to Build Platform-Independent Mobile Applicat...granicz
 
Re-Learning JavaScript
Re-Learning JavaScriptRe-Learning JavaScript
Re-Learning JavaScriptGodders83
 
JS for Mobile: The Enyo Framework (jsconf.us 2011)
JS for Mobile: The Enyo Framework (jsconf.us 2011)JS for Mobile: The Enyo Framework (jsconf.us 2011)
JS for Mobile: The Enyo Framework (jsconf.us 2011)Ben Combee
 
Building native Win8 apps with YUI
Building native Win8 apps with YUIBuilding native Win8 apps with YUI
Building native Win8 apps with YUITilo Mitra
 
Introduction to Web Components
Introduction to Web ComponentsIntroduction to Web Components
Introduction to Web ComponentsRich Bradshaw
 
Intro to jQuery @ Startup Institute
Intro to jQuery @ Startup InstituteIntro to jQuery @ Startup Institute
Intro to jQuery @ Startup InstituteRafael Gonzaque
 
What is WebElement in Selenium | Web Elements & Element Locators | Edureka
What is WebElement in Selenium | Web Elements & Element Locators | EdurekaWhat is WebElement in Selenium | Web Elements & Element Locators | Edureka
What is WebElement in Selenium | Web Elements & Element Locators | EdurekaEdureka!
 
Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)Peter Lubbers
 
Oracle JavaScript Extension Toolkit Web Components Bring Agility to App Devel...
Oracle JavaScript Extension Toolkit Web Components Bring Agility to App Devel...Oracle JavaScript Extension Toolkit Web Components Bring Agility to App Devel...
Oracle JavaScript Extension Toolkit Web Components Bring Agility to App Devel...Lucas Jellema
 
JQuery mobile
JQuery mobileJQuery mobile
JQuery mobileGary Yeh
 
Web Apps and more
Web Apps and moreWeb Apps and more
Web Apps and moreYan Shi
 
Web app and more
Web app and moreWeb app and more
Web app and morefaming su
 
Miha Lesjak Mobilizing The Web with Web Runtime
Miha Lesjak Mobilizing The Web with Web RuntimeMiha Lesjak Mobilizing The Web with Web Runtime
Miha Lesjak Mobilizing The Web with Web RuntimeNokiaAppForum
 
Three WEM Dev Tricks
Three WEM Dev TricksThree WEM Dev Tricks
Three WEM Dev TricksGabriel Walt
 

Similar to CUST-8 Tackling a Complex User Interface (20)

D2W Branding Using jQuery ThemeRoller
D2W Branding Using jQuery ThemeRollerD2W Branding Using jQuery ThemeRoller
D2W Branding Using jQuery ThemeRoller
 
WebBee rapid web app development teck stack
WebBee rapid web app development teck stackWebBee rapid web app development teck stack
WebBee rapid web app development teck stack
 
AWValuePitch, 7_12
AWValuePitch, 7_12AWValuePitch, 7_12
AWValuePitch, 7_12
 
Web Components + Backbone: a Game-Changing Combination
Web Components + Backbone: a Game-Changing CombinationWeb Components + Backbone: a Game-Changing Combination
Web Components + Backbone: a Game-Changing Combination
 
Applying Functional Programming to Build Platform-Independent Mobile Applicat...
Applying Functional Programming to Build Platform-Independent Mobile Applicat...Applying Functional Programming to Build Platform-Independent Mobile Applicat...
Applying Functional Programming to Build Platform-Independent Mobile Applicat...
 
Re-Learning JavaScript
Re-Learning JavaScriptRe-Learning JavaScript
Re-Learning JavaScript
 
ExtjsPart1
ExtjsPart1ExtjsPart1
ExtjsPart1
 
JS for Mobile: The Enyo Framework (jsconf.us 2011)
JS for Mobile: The Enyo Framework (jsconf.us 2011)JS for Mobile: The Enyo Framework (jsconf.us 2011)
JS for Mobile: The Enyo Framework (jsconf.us 2011)
 
Building native Win8 apps with YUI
Building native Win8 apps with YUIBuilding native Win8 apps with YUI
Building native Win8 apps with YUI
 
Introduction to Web Components
Introduction to Web ComponentsIntroduction to Web Components
Introduction to Web Components
 
Intro to jQuery @ Startup Institute
Intro to jQuery @ Startup InstituteIntro to jQuery @ Startup Institute
Intro to jQuery @ Startup Institute
 
What is WebElement in Selenium | Web Elements & Element Locators | Edureka
What is WebElement in Selenium | Web Elements & Element Locators | EdurekaWhat is WebElement in Selenium | Web Elements & Element Locators | Edureka
What is WebElement in Selenium | Web Elements & Element Locators | Edureka
 
Agile toolkit present 2012
Agile toolkit present 2012Agile toolkit present 2012
Agile toolkit present 2012
 
Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)
 
Oracle JavaScript Extension Toolkit Web Components Bring Agility to App Devel...
Oracle JavaScript Extension Toolkit Web Components Bring Agility to App Devel...Oracle JavaScript Extension Toolkit Web Components Bring Agility to App Devel...
Oracle JavaScript Extension Toolkit Web Components Bring Agility to App Devel...
 
JQuery mobile
JQuery mobileJQuery mobile
JQuery mobile
 
Web Apps and more
Web Apps and moreWeb Apps and more
Web Apps and more
 
Web app and more
Web app and moreWeb app and more
Web app and more
 
Miha Lesjak Mobilizing The Web with Web Runtime
Miha Lesjak Mobilizing The Web with Web RuntimeMiha Lesjak Mobilizing The Web with Web Runtime
Miha Lesjak Mobilizing The Web with Web Runtime
 
Three WEM Dev Tricks
Three WEM Dev TricksThree WEM Dev Tricks
Three WEM Dev Tricks
 

More from Alfresco Software

Alfresco Day Benelux Inholland studentendossier
Alfresco Day Benelux Inholland studentendossierAlfresco Day Benelux Inholland studentendossier
Alfresco Day Benelux Inholland studentendossierAlfresco Software
 
Alfresco Day Benelux Hogeschool Inholland Records Management application
Alfresco Day Benelux Hogeschool Inholland Records Management applicationAlfresco Day Benelux Hogeschool Inholland Records Management application
Alfresco Day Benelux Hogeschool Inholland Records Management applicationAlfresco Software
 
Alfresco Day BeNelux: Customer Success Showcase - Saxion Hogescholen
Alfresco Day BeNelux: Customer Success Showcase - Saxion HogescholenAlfresco Day BeNelux: Customer Success Showcase - Saxion Hogescholen
Alfresco Day BeNelux: Customer Success Showcase - Saxion HogescholenAlfresco Software
 
Alfresco Day BeNelux: Customer Success Showcase - Gemeente Amsterdam
Alfresco Day BeNelux: Customer Success Showcase - Gemeente AmsterdamAlfresco Day BeNelux: Customer Success Showcase - Gemeente Amsterdam
Alfresco Day BeNelux: Customer Success Showcase - Gemeente AmsterdamAlfresco Software
 
Alfresco Day BeNelux: The success of Alfresco
Alfresco Day BeNelux: The success of AlfrescoAlfresco Day BeNelux: The success of Alfresco
Alfresco Day BeNelux: The success of AlfrescoAlfresco Software
 
Alfresco Day BeNelux: Customer Success Showcase - Credendo Group
Alfresco Day BeNelux: Customer Success Showcase - Credendo GroupAlfresco Day BeNelux: Customer Success Showcase - Credendo Group
Alfresco Day BeNelux: Customer Success Showcase - Credendo GroupAlfresco Software
 
Alfresco Day BeNelux: Digital Transformation - It's All About Flow
Alfresco Day BeNelux: Digital Transformation - It's All About FlowAlfresco Day BeNelux: Digital Transformation - It's All About Flow
Alfresco Day BeNelux: Digital Transformation - It's All About FlowAlfresco Software
 
Alfresco Day Vienna 2016: Activiti – ein Katalysator für die DMS-Strategie be...
Alfresco Day Vienna 2016: Activiti – ein Katalysator für die DMS-Strategie be...Alfresco Day Vienna 2016: Activiti – ein Katalysator für die DMS-Strategie be...
Alfresco Day Vienna 2016: Activiti – ein Katalysator für die DMS-Strategie be...Alfresco Software
 
Alfresco Day Vienna 2016: Elektronische Geschäftsprozesse auf Basis von Alfre...
Alfresco Day Vienna 2016: Elektronische Geschäftsprozesse auf Basis von Alfre...Alfresco Day Vienna 2016: Elektronische Geschäftsprozesse auf Basis von Alfre...
Alfresco Day Vienna 2016: Elektronische Geschäftsprozesse auf Basis von Alfre...Alfresco Software
 
Alfresco Day Vienna 2016: Alfrescos neue Rest API
Alfresco Day Vienna 2016: Alfrescos neue Rest APIAlfresco Day Vienna 2016: Alfrescos neue Rest API
Alfresco Day Vienna 2016: Alfrescos neue Rest APIAlfresco Software
 
Alfresco Day Vienna 2016: Support Tools für die Admin-Konsole
Alfresco Day Vienna 2016: Support Tools für die Admin-KonsoleAlfresco Day Vienna 2016: Support Tools für die Admin-Konsole
Alfresco Day Vienna 2016: Support Tools für die Admin-KonsoleAlfresco Software
 
Alfresco Day Vienna 2016: Entwickeln mit Alfresco
Alfresco Day Vienna 2016: Entwickeln mit AlfrescoAlfresco Day Vienna 2016: Entwickeln mit Alfresco
Alfresco Day Vienna 2016: Entwickeln mit AlfrescoAlfresco Software
 
Alfresco Day Vienna 2016: Activiti goes enterprise: Die Evolution der BPM Sui...
Alfresco Day Vienna 2016: Activiti goes enterprise: Die Evolution der BPM Sui...Alfresco Day Vienna 2016: Activiti goes enterprise: Die Evolution der BPM Sui...
Alfresco Day Vienna 2016: Activiti goes enterprise: Die Evolution der BPM Sui...Alfresco Software
 
Alfresco Day Vienna 2016: Partner Lightning Talk: Westernacher
Alfresco Day Vienna 2016: Partner Lightning Talk: WesternacherAlfresco Day Vienna 2016: Partner Lightning Talk: Westernacher
Alfresco Day Vienna 2016: Partner Lightning Talk: WesternacherAlfresco Software
 
Alfresco Day Vienna 2016: Bringing Content & Process together with the App De...
Alfresco Day Vienna 2016: Bringing Content & Process together with the App De...Alfresco Day Vienna 2016: Bringing Content & Process together with the App De...
Alfresco Day Vienna 2016: Bringing Content & Process together with the App De...Alfresco Software
 
Alfresco Day Vienna 2016: Partner Lightning Talk - it-novum
Alfresco Day Vienna 2016: Partner Lightning Talk - it-novumAlfresco Day Vienna 2016: Partner Lightning Talk - it-novum
Alfresco Day Vienna 2016: Partner Lightning Talk - it-novumAlfresco Software
 
Alfresco Day Vienna 2016: How to Achieve Digital Flow in the Enterprise - Joh...
Alfresco Day Vienna 2016: How to Achieve Digital Flow in the Enterprise - Joh...Alfresco Day Vienna 2016: How to Achieve Digital Flow in the Enterprise - Joh...
Alfresco Day Vienna 2016: How to Achieve Digital Flow in the Enterprise - Joh...Alfresco Software
 
Alfresco Day Warsaw 2016 - Czy możliwe jest spełnienie wszystkich regulacji p...
Alfresco Day Warsaw 2016 - Czy możliwe jest spełnienie wszystkich regulacji p...Alfresco Day Warsaw 2016 - Czy możliwe jest spełnienie wszystkich regulacji p...
Alfresco Day Warsaw 2016 - Czy możliwe jest spełnienie wszystkich regulacji p...Alfresco Software
 
Alfresco Day Warsaw 2016: Identyfikacja i podpiselektroniczny - Safran
Alfresco Day Warsaw 2016: Identyfikacja i podpiselektroniczny - SafranAlfresco Day Warsaw 2016: Identyfikacja i podpiselektroniczny - Safran
Alfresco Day Warsaw 2016: Identyfikacja i podpiselektroniczny - SafranAlfresco Software
 
Alfresco Day Warsaw 2016: Advancing the Flow of Digital Business
Alfresco Day Warsaw 2016: Advancing the Flow of Digital BusinessAlfresco Day Warsaw 2016: Advancing the Flow of Digital Business
Alfresco Day Warsaw 2016: Advancing the Flow of Digital BusinessAlfresco Software
 

More from Alfresco Software (20)

Alfresco Day Benelux Inholland studentendossier
Alfresco Day Benelux Inholland studentendossierAlfresco Day Benelux Inholland studentendossier
Alfresco Day Benelux Inholland studentendossier
 
Alfresco Day Benelux Hogeschool Inholland Records Management application
Alfresco Day Benelux Hogeschool Inholland Records Management applicationAlfresco Day Benelux Hogeschool Inholland Records Management application
Alfresco Day Benelux Hogeschool Inholland Records Management application
 
Alfresco Day BeNelux: Customer Success Showcase - Saxion Hogescholen
Alfresco Day BeNelux: Customer Success Showcase - Saxion HogescholenAlfresco Day BeNelux: Customer Success Showcase - Saxion Hogescholen
Alfresco Day BeNelux: Customer Success Showcase - Saxion Hogescholen
 
Alfresco Day BeNelux: Customer Success Showcase - Gemeente Amsterdam
Alfresco Day BeNelux: Customer Success Showcase - Gemeente AmsterdamAlfresco Day BeNelux: Customer Success Showcase - Gemeente Amsterdam
Alfresco Day BeNelux: Customer Success Showcase - Gemeente Amsterdam
 
Alfresco Day BeNelux: The success of Alfresco
Alfresco Day BeNelux: The success of AlfrescoAlfresco Day BeNelux: The success of Alfresco
Alfresco Day BeNelux: The success of Alfresco
 
Alfresco Day BeNelux: Customer Success Showcase - Credendo Group
Alfresco Day BeNelux: Customer Success Showcase - Credendo GroupAlfresco Day BeNelux: Customer Success Showcase - Credendo Group
Alfresco Day BeNelux: Customer Success Showcase - Credendo Group
 
Alfresco Day BeNelux: Digital Transformation - It's All About Flow
Alfresco Day BeNelux: Digital Transformation - It's All About FlowAlfresco Day BeNelux: Digital Transformation - It's All About Flow
Alfresco Day BeNelux: Digital Transformation - It's All About Flow
 
Alfresco Day Vienna 2016: Activiti – ein Katalysator für die DMS-Strategie be...
Alfresco Day Vienna 2016: Activiti – ein Katalysator für die DMS-Strategie be...Alfresco Day Vienna 2016: Activiti – ein Katalysator für die DMS-Strategie be...
Alfresco Day Vienna 2016: Activiti – ein Katalysator für die DMS-Strategie be...
 
Alfresco Day Vienna 2016: Elektronische Geschäftsprozesse auf Basis von Alfre...
Alfresco Day Vienna 2016: Elektronische Geschäftsprozesse auf Basis von Alfre...Alfresco Day Vienna 2016: Elektronische Geschäftsprozesse auf Basis von Alfre...
Alfresco Day Vienna 2016: Elektronische Geschäftsprozesse auf Basis von Alfre...
 
Alfresco Day Vienna 2016: Alfrescos neue Rest API
Alfresco Day Vienna 2016: Alfrescos neue Rest APIAlfresco Day Vienna 2016: Alfrescos neue Rest API
Alfresco Day Vienna 2016: Alfrescos neue Rest API
 
Alfresco Day Vienna 2016: Support Tools für die Admin-Konsole
Alfresco Day Vienna 2016: Support Tools für die Admin-KonsoleAlfresco Day Vienna 2016: Support Tools für die Admin-Konsole
Alfresco Day Vienna 2016: Support Tools für die Admin-Konsole
 
Alfresco Day Vienna 2016: Entwickeln mit Alfresco
Alfresco Day Vienna 2016: Entwickeln mit AlfrescoAlfresco Day Vienna 2016: Entwickeln mit Alfresco
Alfresco Day Vienna 2016: Entwickeln mit Alfresco
 
Alfresco Day Vienna 2016: Activiti goes enterprise: Die Evolution der BPM Sui...
Alfresco Day Vienna 2016: Activiti goes enterprise: Die Evolution der BPM Sui...Alfresco Day Vienna 2016: Activiti goes enterprise: Die Evolution der BPM Sui...
Alfresco Day Vienna 2016: Activiti goes enterprise: Die Evolution der BPM Sui...
 
Alfresco Day Vienna 2016: Partner Lightning Talk: Westernacher
Alfresco Day Vienna 2016: Partner Lightning Talk: WesternacherAlfresco Day Vienna 2016: Partner Lightning Talk: Westernacher
Alfresco Day Vienna 2016: Partner Lightning Talk: Westernacher
 
Alfresco Day Vienna 2016: Bringing Content & Process together with the App De...
Alfresco Day Vienna 2016: Bringing Content & Process together with the App De...Alfresco Day Vienna 2016: Bringing Content & Process together with the App De...
Alfresco Day Vienna 2016: Bringing Content & Process together with the App De...
 
Alfresco Day Vienna 2016: Partner Lightning Talk - it-novum
Alfresco Day Vienna 2016: Partner Lightning Talk - it-novumAlfresco Day Vienna 2016: Partner Lightning Talk - it-novum
Alfresco Day Vienna 2016: Partner Lightning Talk - it-novum
 
Alfresco Day Vienna 2016: How to Achieve Digital Flow in the Enterprise - Joh...
Alfresco Day Vienna 2016: How to Achieve Digital Flow in the Enterprise - Joh...Alfresco Day Vienna 2016: How to Achieve Digital Flow in the Enterprise - Joh...
Alfresco Day Vienna 2016: How to Achieve Digital Flow in the Enterprise - Joh...
 
Alfresco Day Warsaw 2016 - Czy możliwe jest spełnienie wszystkich regulacji p...
Alfresco Day Warsaw 2016 - Czy możliwe jest spełnienie wszystkich regulacji p...Alfresco Day Warsaw 2016 - Czy możliwe jest spełnienie wszystkich regulacji p...
Alfresco Day Warsaw 2016 - Czy możliwe jest spełnienie wszystkich regulacji p...
 
Alfresco Day Warsaw 2016: Identyfikacja i podpiselektroniczny - Safran
Alfresco Day Warsaw 2016: Identyfikacja i podpiselektroniczny - SafranAlfresco Day Warsaw 2016: Identyfikacja i podpiselektroniczny - Safran
Alfresco Day Warsaw 2016: Identyfikacja i podpiselektroniczny - Safran
 
Alfresco Day Warsaw 2016: Advancing the Flow of Digital Business
Alfresco Day Warsaw 2016: Advancing the Flow of Digital BusinessAlfresco Day Warsaw 2016: Advancing the Flow of Digital Business
Alfresco Day Warsaw 2016: Advancing the Flow of Digital Business
 

Recently uploaded

IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 

Recently uploaded (20)

IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 

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