SlideShare ist ein Scribd-Unternehmen logo
1 von 22
Downloaden Sie, um offline zu lesen
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

Weitere ähnliche Inhalte

Was ist angesagt?

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
 

Was ist angesagt? (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
 

Ähnlich wie 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
 

Ähnlich wie 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
 

Mehr von 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
 

Mehr von 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
 

Kürzlich hochgeladen

Vector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector DatabasesVector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector DatabasesZilliz
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii SoldatenkoFwdays
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticscarlostorres15106
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebUiPathCommunity
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLScyllaDB
 
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxNavinnSomaal
 
The Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdfThe Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdfSeasiaInfotech2
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsMark Billinghurst
 
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsAI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsMemoori
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machinePadma Pradeep
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024Lorenzo Miniero
 
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Wonjun Hwang
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024Stephanie Beckett
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University
 
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time ClashPowerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clashcharlottematthew16
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro
 
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level pieceStory boards and shot lists for my a level piece
Story boards and shot lists for my a level piececharlottematthew16
 
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostLeverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostZilliz
 

Kürzlich hochgeladen (20)

Vector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector DatabasesVector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector Databases
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
 
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptx
 
The Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdfThe Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdf
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
 
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsAI as an Interface for Commercial Buildings
AI as an Interface for Commercial Buildings
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machine
 
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special EditionDMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024
 
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
 
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time ClashPowerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clash
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
 
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level pieceStory boards and shot lists for my a level piece
Story boards and shot lists for my a level piece
 
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostLeverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
 

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