Magnolia 5.0 'GenUIne'

ou ts t us an ab din ili g m ty Placement w odu or l kf ar lo iza w t © Copyright 2009 by Magnolia International Ltd. , io D n M , ar S up c da hit te ec s, tu I1 re en 8n , te p rp er ris fo e rm fe a at nc ur e, es Magnolia GenUIne | 5

ou ts t us an ab din ili g m ty Placement w odu or l kf ar lo iza w t © Copyright 2009 by Magnolia International Ltd. , io D n M , ar S up c da hit te ec s, tu I1 re en 8n , te p rp er ris fo e rm fe a at nc ur e, es te m pl a tin g Magnolia GenUIne | 5

ou ts t us an ab din ili g m ty Placement w odu or l kf ar lo iza w t © Copyright 2009 by Magnolia International Ltd. , io D n M , ar S up c da hit te ec s, tu I1 re en 8n , te p rp er ris fo e rm fe a at nc ur e, es te m pl a tin g in te u ro sa pe b ra ilit bi y lit & y Magnolia GenUIne | 5

Motivations • usability • too many pitfalls • missing features • incomplete experience • maintainability • technology mix • self-cooked JS-library © Copyright 2009 by Magnolia International Ltd. Magnolia GenUIne | 6

Motivations • usability • too many pitfalls • missing features • incomplete experience • maintainability • technology mix • self-cooked JS-library • consequences © Copyright 2009 by Magnolia International Ltd. Magnolia GenUIne | 6

Features Imp ro ve inte ra ctio n s: • e fﬁc ie n cy √ • full keyboard support • av o id e r ro rs • c o n ve n ie n c e • jo y I nte r f a c e T ra i l © Copyright 2009 by Magnolia International Ltd. Magnolia GenUIne | 13

Features Imp ro ve inte ra ctio n s: • e fﬁc ie n cy √ • full keyboard support • av o id e r ro rs • c o n ve n ie n c e √ • full mouse support • jo y I nte r f a c e T ra i l © Copyright 2009 by Magnolia International Ltd. Magnolia GenUIne | 13

Features Imp ro ve inte ra ctio n s: • e fﬁc ie n cy √ • full keyboard support • av o id e r ro rs √ • c o n ve n ie n c e √ • full mouse support • jo y • validation I nte r f a c e T ra i l © Copyright 2009 by Magnolia International Ltd. Magnolia GenUIne | 13

Features Imp ro ve inte ra ctio n s: • e fﬁc ie n cy √ • full keyboard support • av o id e r ro rs √ • c o n ve n ie n c e √ • full mouse support • jo y √ • validation • usability supporting animations I nte r f a c e T ra i l © Copyright 2009 by Magnolia International Ltd. Magnolia GenUIne | 13

Features Imp ro ve inte ra ctio n s: • e fﬁc ie n cy √ • full keyboard support • av o id e r ro rs √ • c o n ve n ie n c e √ • full mouse support • jo y √ • validation • usability supporting animations • look & feel I nte r f a c e T ra i l © Copyright 2009 by Magnolia International Ltd. Magnolia GenUIne | 13

Tec hn ica l Go als: A new fou ndation, for... • intero per abi lity • extens ibil ity (cu stomiz abi lity) Te c h n i c a l Tra i l © Copyright 2009 by Magnolia International Ltd. Magnolia GenUIne | 18

Tec hn ica l Go als: A new fou ndation, for... • intero per abi lity • extens ibil ity (cu stomiz abi lity) • ma int ain abi lity Te c h n i c a l Tra i l © Copyright 2009 by Magnolia International Ltd. Magnolia GenUIne | 18

Today’s Architecture Magnolia Admin Central Generated DHTML Client JavaScript Library CLIENT SERVER Pages, Trees, Dialogs, ... Magnolia API Magnolia Server Te c h n i c a l Tra i l © Copyright 2009 by Magnolia International Ltd. Magnolia GenUIne | 19

Today’s Architecture Magnolia Admin Central Generated DHTML Client JavaScript Library „Ad-hoc“ CLIENT AJAX Communication SERVER Pages, Trees, Dialogs, ... Magnolia API Magnolia Server Te c h n i c a l Tra i l © Copyright 2009 by Magnolia International Ltd. Magnolia GenUIne | 19

Today’s Architecture Magnolia Admin Central Generated DHTML Client JavaScript Library „Ad-hoc“ AJAX CLIENT Communication SERVER Pages, Trees, Dialogs, ... Magnolia API Magnolia Server Te c h n i c a l Tra i l © Copyright 2009 by Magnolia International Ltd. Magnolia GenUIne | 20

Today’s Architecture Magnolia Admin Central Generated "If you don't like how DHTML Client JavaScript Library things are, change it! „Ad-hoc“ You're not a tree." AJAX Communication CLIENT SERVER Jim Rohn Pages, Trees, Dialogs, ... Magnolia API Magnolia Server Te c h n i c a l Tra i l © Copyright 2009 by Magnolia International Ltd. Magnolia GenUIne | 20

Features Overview G o a ls: • i n te ro p e r a b i l i t y • e x te n s i b i l i t y • m a i n t a i n a bi li t y Te c h n i c a l Tra i l © Copyright 2009 by Magnolia International Ltd. Magnolia GenUIne | 21

Features Overview G o a ls: • i n te ro p e r a b i l i t y • e x te n s i b i l i t y • decouple server & client • m a i n t a i n a bi li t y Te c h n i c a l Tra i l © Copyright 2009 by Magnolia International Ltd. Magnolia GenUIne | 21

Features Overview G o a ls: • i n te ro p e r a b i l i t y • e x te n s i b i l i t y • decouple server & client • m a i n t a i n a bi li t y • RESTful interface & protocol Te c h n i c a l Tra i l © Copyright 2009 by Magnolia International Ltd. Magnolia GenUIne | 21

Features Overview G o a ls: • i n te ro p e r a b i l i t y • e x te n s i b i l i t y • decouple server & client • m a i n t a i n a bi li t y • RESTful interface & protocol • generic JCR GUI Te c h n i c a l Tra i l © Copyright 2009 by Magnolia International Ltd. Magnolia GenUIne | 21

Features Overview G o a ls: • i n te ro p e r a b i l i t y • e x te n s i b i l i t y • decouple server & client • m a i n t a i n a bi li t y • RESTful interface & protocol • generic JCR GUI • modularized Te c h n i c a l Tra i l © Copyright 2009 by Magnolia International Ltd. Magnolia GenUIne | 21

Decouple Client and Server G o a ls: • int e rop e ra bi l i t y √ • e x te n s i b i l i t y √ Magnolia Admin Central • m a i n t a i n a bi li t y √ Rich Client CLIENT SERVER Magnolia API Magnolia Server Te c h n i c a l Tra i l © Copyright 2009 by Magnolia International Ltd. Magnolia GenUIne | 22

Decouple Client and Server G o a ls: • int e rop e ra bi l i t y √ • e x te n s i b i l i t y √ Magnolia Admin Central • m a i n t a i n a bi li t y √ Rich Client JavaScript GUI Widgets Framework Communication CLIENT SERVER Magnolia API Magnolia Server Te c h n i c a l Tra i l © Copyright 2009 by Magnolia International Ltd. Magnolia GenUIne | 22

Decouple Client and Server G o a ls: • int e rop e ra bi l i t y √ • e x te n s i b i l i t y √ Magnolia Admin Central • m a i n t a i n a bi li t y √ Rich Client JavaScript GUI Widgets Framework Communication CLIENT SERVER (Web) Services Data Magnolia API Magnolia Server Te c h n i c a l Tra i l © Copyright 2009 by Magnolia International Ltd. Magnolia GenUIne | 22

RESTful Interface & Protocol G o a ls: • int e rop e ra bi l i t y √ • e x te n s i b i l i t y Magnolia Admin Central • m a i n t a i n a bi li t y REST Enabled Rich Client JS Framework Client HTTP HTTP Client CLIENT HTTP + JSON SERVER REST Services HTTP Interface Magnolia API Magnolia Server Te c h n i c a l Tra i l © Copyright 2009 by Magnolia International Ltd. Magnolia GenUIne | 23

RESTful Interface & Protocol G o a ls: • int e rop e ra bi l i t y √ • e x te n s i b i l i t y Magnolia Admin Central • m a i n t a i n a bi li t y REST Enabled Rich Client JS Framework Client HTTP HTTP Client CLIENT HTTP + JSON Protocol SERVER REST Services HTTP Interface Magnolia API Magnolia Server Te c h n i c a l Tra i l © Copyright 2009 by Magnolia International Ltd. Magnolia GenUIne | 23

Generic JCR GUI G o a ls: • int e rop e ra bi l i t y √ • e x te n s i b i l i t y √ Magnolia Admin Central • m a i n t a i n a bi li t y REST Enabled Rich Client JS Framework Client HTTP HTTP Client CLIENT Protocol SERVER REST Services Magnolia API Magnolia Server Te c h n i c a l Tra i l © Copyright 2009 by Magnolia International Ltd. Magnolia GenUIne | 24

Generic JCR GUI G o a ls: • int e rop e ra bi l i t y √ • e x te n s i b i l i t y √ Magnolia Admin Central • m a i n t a i n a bi li t y REST Enabled Rich Client JS Framework Client HTTP HTTP Client CLIENT Protocol SERVER Adapter REST Services Sling API Magnolia API Magnolia Server Te c h n i c a l Tra i l © Copyright 2009 by Magnolia International Ltd. Magnolia GenUIne | 24

Generic JCR GUI G o a ls: Ser vices • int e rop e ra bi l i t y √ • e x te n s i b i l i t y √ Magnolia Admin Central • m a i n t a i n a bi li t y REST Enabled Rich Client JS Framework Client HTTP HTTP Client CLIENT SERVER ... REST Services ... Magnolia API Magnolia Server Te c h n i c a l Tra i l © Copyright 2009 by Magnolia International Ltd. Magnolia GenUIne | 25

Generic JCR GUI G o a ls: Ser vices • int e rop e ra bi l i t y √ • e x te n s i b i l i t y √ Magnolia Admin Central • m a i n t a i n a bi li t y REST Enabled Rich Client JS Framework Client HTTP HTTP Client CLIENT SERVER Datastore Service(s) ... REST Services ... Magnolia API Magnolia Server Te c h n i c a l Tra i l © Copyright 2009 by Magnolia International Ltd. Magnolia GenUIne | 25

Generic JCR GUI G o a ls: Ser vices • int e rop e ra bi l i t y √ • e x te n s i b i l i t y √ Magnolia Admin Central • m a i n t a i n a bi li t y REST Enabled Rich Client JS Framework Client HTTP HTTP Client CLIENT SERVER Datastore UI Conﬁg Service(s) Service ... REST Services ... Magnolia API Magnolia Server Te c h n i c a l Tra i l © Copyright 2009 by Magnolia International Ltd. Magnolia GenUIne | 25

Generic JCR GUI G o a ls: UI Conﬁg Service • int e rop e ra bi l i t y √ • e x te n s i b i l i t y √ Magnolia Admin Central • m a i n t a i n a bi li t y REST Enabled Rich Client JS Framework Client Widgets HTTP GUI CLIENT SERVER ... UI Conﬁg Service REST Services Magnolia API Magnolia Server Te c h n i c a l Tra i l © Copyright 2009 by Magnolia International Ltd. Magnolia GenUIne | 26

Generic JCR GUI G o a ls: UI Conﬁg Service • int e rop e ra bi l i t y √ • e x te n s i b i l i t y √ Magnolia Admin Central • m a i n t a i n a bi li t y REST Enabled Rich Client JS Framework Client Widgets HTTP GUI CLIENT SERVER Dialogs Actions Trees ... UI Conﬁg Service REST Services Magnolia API Magnolia Server Te c h n i c a l Tra i l © Copyright 2009 by Magnolia International Ltd. Magnolia GenUIne | 26

Generic JCR GUI G o a ls: UI Conﬁg Service • int e rop e ra bi l i t y √ • e x te n s i b i l i t y √ Magnolia Admin Central • m a i n t a i n a bi li t y REST Enabled Rich Client JS Framework Client Widgets HTTP GUI • register dialogs/actions... CLIENT • for paragraphs/templates SERVER • for node types • using metadata Dialogs Actions Trees • ... ... UI Conﬁg Service REST Services Magnolia API Magnolia Server Te c h n i c a l Tra i l © Copyright 2009 by Magnolia International Ltd. Magnolia GenUIne | 26

Generic JCR GUI G o a ls: UI Conﬁg Service • int e rop e ra bi l i t y √ • e x te n s i b i l i t y √ Magnolia Admin Central • m a i n t a i n a bi li t y REST Enabled Rich Client JS Framework Client Widgets HTTP GUI CLIENT SERVER Trees Actions Dialogs ... UI Conﬁg Service REST Services Magnolia API Magnolia Server Te c h n i c a l Tra i l © Copyright 2009 by Magnolia International Ltd. Magnolia GenUIne | 27

Generic JCR GUI G o a ls: UI Conﬁg Service • int e rop e ra bi l i t y √ • e x te n s i b i l i t y √ Magnolia Admin Central • m a i n t a i n a bi li t y REST Enabled Rich Client JS Framework Client Widgets HTTP GUI • dialogs defined by: CLIENT • Magnolia configuration • JCR node types SERVER • Java annotations Trees Actions Dialogs • programmatically ... UI Conﬁg Service REST Services Magnolia API Magnolia Server Te c h n i c a l Tra i l © Copyright 2009 by Magnolia International Ltd. Magnolia GenUIne | 27

Generic JCR GUI G o a ls: UI Conﬁg Service • int e rop e ra bi l i t y √ • e x te n s i b i l i t y √ Magnolia Admin Central • m a i n t a i n a bi li t y REST Enabled Rich Client JS Framework Client Widgets HTTP GUI CLIENT SERVER Trees Actions Dialogs ... UI Conﬁg Service REST Services Magnolia API Magnolia Server Te c h n i c a l Tra i l © Copyright 2009 by Magnolia International Ltd. Magnolia GenUIne | 27

Modularization G o a ls: • i n te ro p e r a b i l i t y Magnolia Admin Central • e x te n s i b i l i t y √ • m a i n t a i n a bi li t y √ JavaScript GUI Widgets Framework Communication CLIENT SERVER REST Services Data UI Conﬁg Magnolia API Magnolia Server Te c h n i c a l Tra i l © Copyright 2009 by Magnolia International Ltd. Magnolia GenUIne | 28

Modularization G o a ls: • i n te ro p e r a b i l i t y Magnolia Admin Central • e x te n s i b i l i t y √ • m a i n t a i n a bi li t y √ Admin Central JavaScript GUI Widgets Framework Communication CLIENT SERVER REST Services Data UI Conﬁg Magnolia API Magnolia Server Te c h n i c a l Tra i l © Copyright 2009 by Magnolia International Ltd. Magnolia GenUIne | 28

Modularization G o a ls: • i n te ro p e r a b i l i t y Magnolia Admin Central • e x te n s i b i l i t y √ • m a i n t a i n a bi li t y √ WCM DMS Inbox ... Admin Central JavaScript GUI Widgets Framework Communication CLIENT SERVER REST Services Data UI Conﬁg Magnolia API Magnolia Server Te c h n i c a l Tra i l © Copyright 2009 by Magnolia International Ltd. Magnolia GenUIne | 28

Architecture Big Picture G o a ls: • int e rop e ra bi l i t y √ Magnolia Admin Central • e x te n s i b i l i t y √ • m a i n t a i n a bi li t y √ WCM DMS Inbox ... Admin Central JavaScript GUI Widgets Framework Communication CLIENT SERVER REST Services Data UI Conﬁg Magnolia API Magnolia Server Te c h n i c a l Tra i l © Copyright 2009 by Magnolia International Ltd. Magnolia GenUIne | 29

Technologies Considered G o a ls: • int e rop e ra bi l i t y √ Magnolia Admin Central • e x te n s i b i l i t y √ • m a i n t a i n a bi li t y √ WCM DMS Inbox ... Admin Central Google JavaScript Smart/Ext GWT GUI Widgets Web Framework Toolkit Communication CLIENT SERVER REST Services JAX-RS Data UI Conﬁg Magnolia API Magnolia Server Te c h n i c a l Tra i l © Copyright 2009 by Magnolia International Ltd. Magnolia GenUIne | 30

Technologies Considered G o a ls: • int e rop e ra bi l i t y √ Magnolia Admin Central • e x te n s i b i l i t y √ • m a i n t a i n a bi li t y √ WCM DMS Inbox ... Admin Central Google Smart/Ext GWT GUI Widgets Web Toolkit Communication CLIENT SERVER REST Services JAX-RS Data UI Conﬁg Magnolia API Magnolia Server Te c h n i c a l Tra i l © Copyright 2009 by Magnolia International Ltd. Magnolia GenUIne | 30

Technologies Considered G o a ls: • int e rop e ra bi l i t y √ Magnolia Admin Central • e x te n s i b i l i t y √ • m a i n t a i n a bi li t y √ WCM DMS Inbox ... Admin Central Google Smart/Ext GWT Web Toolkit Communication CLIENT SERVER REST Services JAX-RS Data UI Conﬁg Magnolia API Magnolia Server Te c h n i c a l Tra i l © Copyright 2009 by Magnolia International Ltd. Magnolia GenUIne | 30

Technologies Considered G o a ls: • int e rop e ra bi l i t y √ Magnolia Admin Central • e x te n s i b i l i t y √ • m a i n t a i n a bi li t y √ WCM DMS Inbox ... Admin Central Google Smart/Ext GWT Web Toolkit Communication CLIENT SERVER JAX-RS Data UI Conﬁg Magnolia API Magnolia Server Te c h n i c a l Tra i l © Copyright 2009 by Magnolia International Ltd. Magnolia GenUIne | 30

Technologies Considered G o a ls: • int e rop e ra bi l i t y √ Magnolia Admin Central • e x te n s i b i l i t y √ • m a i n t a i n a bi li t y √ WCM DMS Inbox ... Admin Central Google Smart/Ext GWT Web Toolkit Communication CLIENT SERVER JAX-RS Data UI Conﬁg Magnolia API Magnolia Server Te c h n i c a l Tra i l © Copyright 2009 by Magnolia International Ltd. Magnolia GenUIne | 31

"The difference between ordinary and extraordinary is that little extra." Jimmy Johnson Summary The round up: what you should remember. © Copyright 2009 by Magnolia International Ltd. Magnolia GenUIne | 33

Summary Imp ro ve inte ra ctio n s: • e fﬁc ie n cy √ • av o id e r ro rs √ • c o n ve n ie n c e √ • jo y √ I nte r f a c e T ra i l © Copyright 2009 by Magnolia International Ltd. Magnolia GenUIne | 34

Summary Imp ro ve inte ra ctio n s: • full keyboard support • e fﬁc ie n cy √ • full mouse support • av o id e r ro rs √ • c o n ve n ie n c e √ • validation • jo y √ • look & feel I nte r f a c e T ra i l © Copyright 2009 by Magnolia International Ltd. Magnolia GenUIne | 34

Summary Te c h n ic a l g o a ls: • i n te ro p e r a b i l i t y √ • e x te n s i b i l i t y √ • ma i n t a i n a bi li t y √ Te c h n i c a l Tra i l © Copyright 2009 by Magnolia International Ltd. Magnolia GenUIne | 35

Summary Te c h n ic a l g o a ls: • i n te ro p e r a b i l i t y √ • decouple client & server • e x te n s i b i l i t y √ • generic JCR GUI • ma i n t a i n a bi li t y √ • GWT • REST (JAX-RS) Te c h n i c a l Tra i l © Copyright 2009 by Magnolia International Ltd. Magnolia GenUIne | 35

Te c h n ic a l g o a ls: • i n te ro p e r a b i l i t y √ • e x te n s i b i l i t y √ Imp ro ve inte ra ctio n s: • ma i n t a i n a bi li t y √ • e fﬁc ie n cy √ • av o id e r ro rs √ • c o n ve n ie n c e √ • jo y √ T he En d Tha nks for you r attent ion ! © Copyright 2009 by Magnolia International Ltd. Magnolia GenUIne | 37

http://philipp-baerfuss-magnolia.blogspot.com	213
http://www.magnolia-cms.com	54
http://www.slideshare.net	11
http://magnolia-cms.com	7
http://philipp-baerfuss-magnolia.blogspot.de	4
http://philipp-baerfuss-magnolia.blogspot.it	3
http://static.slidesharecdn.com	2
http://philipp-baerfuss-magnolia.blogspot.fr	1
http://philipp-baerfuss-magnolia.blogspot.com.br	1
http://wiki.ventiv.com.au	1
http://translate.googleusercontent.com	1
http://philipp-baerfuss-magnolia.blogspot.in	1

Magnolia 5.0 'GenUIne'

by Philipp Bärfuss on Sep 10, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

12 Embeds 299

Statistics

Magnolia 5.0 ’GenUIne’ — Presentation Transcript