Magnolia 5.0 'GenUIne

Magnolia GenUIne |© Copyright 2009 by Magnolia International Ltd. 1

Magnolia "GenUIne"

by Vivian Steller and Philipp BärfußMagnolia International Ltd.

An Overview


Today's PresentationIntentions of this talk

• main ideas• spirit• not too "geeky"

Magnolia GenUIne |© Copyright 2009 by Magnolia International Ltd.

Overview

• Placement and Motivation

• Interface Design Trail

• Technological Trail

• Summary and Q&A

3



Magnolia Evolution"Not turning everything topsy-turvy."


Placement

5


Placement

5


Placement

5

outst

andin

g

usab

ility


Placement

5

outst

andin

g

usab

ility

mod

ulariz

ation

,

workflow

, DMS


Placement

5

outst

andin

g

usab

ility

mod

ulariz

ation

,

workflow

, DMS

arch

itectu

re,

upda

tes,

I18n


Placement

5

outst

andin

g

usab

ility

mod

ulariz

ation

,

workflow

, DMS

arch

itectu

re,

upda

tes,

I18n

perfo

rman

ce,

enterp

rise featur

es


Placement

5

outst

andin

g

usab

ility

mod

ulariz

ation

,

workflow

, DMS

arch

itectu

re,

upda

tes,

I18n

perfo

rman

ce,

enterp

rise featur

es

templa

ting


Placement

5

outst

andin

g

usab

ility

mod

ulariz

ation

,

workflow

, DMS

arch

itectu

re,

upda

tes,

I18n

perfo

rman

ce,

enterp

rise featur

es

templa

ting

usab

ility

&

inte

rope

rabi

lity


Motivations

6


• usability

Motivations

6


• usability• too many pitfalls

Motivations

6


• usability• too many pitfalls• missing features

Motivations

6


• usability• too many pitfalls• missing features• incomplete experience

Motivations

6



Motivations

6



Motivations

6



• maintainability

Motivations

6



• maintainability• technology mix

Motivations

6



• maintainability• technology mix• self-cooked JS-library

Motivations

6



• maintainability• technology mix• self-cooked JS-library• consequences

Motivations

6



More than just "surface cosmetics."

Goals & Features



Goals & Features



Goals & Features


Interface Trail8


Interface Trail8

Improve interactions.


Interface Trail8



Interface Trail8



Interface Trail9


Interface Trail9

Work more efficient.


Interface Trail9



Interface Trail9



Interface Trail10


Interface Trail10

Make less mistakes.


Interface Trail10

Make less mistakes.


Interface Trail11


Interface Trail11

Make it more convenient.


Interface Trail11

Make it more convenient.


Interface Trail12


Interface Trail12

Work withmore joy.


Features

13

Interface Trail


Features

13

Interface Trail

Improve interactions:• efficiency• avoid errors• convenience• joy


Features

• full keyboard support

13

Interface Trail


√


Features


• full mouse support

13

Interface Trail


√

√


Features



• validation

13

Interface Trail


√√√


Features



• validation

• usability supporting animations

13

Interface Trail


√√√

√


Features



• validation


• look & feel

13

Interface Trail


√√√

√


Features



• validation


• look & feel

13

Interface Trail


√√√

√


Technical Trail


Technical Trail

"If you don't know where you are going, any road will get you there."

from "Alice in Wonderland"


Technical Trail

Technical Goals:


Technical Trail

Technical Goals:A new foundation, for...


Technical Trail

Technical Goals:A new foundation, for...• interoperability


Technical Trail

Technical Goals:A new foundation, for...• interoperability• extensibility (customizability)


Technical Trail

Technical Goals:A new foundation, for...• interoperability• extensibility (customizability)• maintainability


Technical Trail

Technical Goals:A new foundation, for...• interoperability• extensibility (customizability)• maintainability


Technical Trail

Today’s Architecture

19

Magnolia Admin Central

Magnolia Server

GeneratedDHTML Client

SERVER

CLIENT

Pages, Trees, Dialogs, ...

JavaScript Library

Magnolia API


Technical Trail


19


Magnolia Server


SERVER

CLIENT


JavaScript Library

Magnolia API


Technical Trail


19


Magnolia Server


SERVER

CLIENT


JavaScript Library

Magnolia API


Technical Trail


19


Magnolia Server


SERVER

CLIENT


JavaScript Library

Magnolia API


Technical Trail


19

„Ad-hoc“ AJAX

Communication


Magnolia Server


SERVER

CLIENT


JavaScript Library

Magnolia API


Technical Trail


19

„Ad-hoc“ AJAX

Communication


Magnolia Server


SERVER

CLIENT


JavaScript Library „Ad-hoc“

AJAXCommunication

Magnolia API


Technical Trail


20


Magnolia Server


SERVER

CLIENT


JavaScript Library „Ad-hoc“

AJAXCommunication

Magnolia API


Technical Trail


20

"If you don't like how things are, change it! You're not a tree."

Jim Rohn


Technical Trail

Features Overview

21


Technical Trail

Features Overview

21

Goals:• interoperability• extensibility • maintainability


Technical Trail

Features Overview

• decouple server & client

21



Technical Trail

Features Overview


• RESTful interface & protocol

21



Technical Trail

Features Overview



• generic JCR GUI

21



Technical Trail

Features Overview



• generic JCR GUI

• modularized

21



Magnolia Server

SERVER

CLIENT


Technical Trail


Decouple Client and Server

22

√√

Rich Client

Magnolia API

√


Magnolia Server

SERVER

CLIENT


Technical Trail



22

√√

Rich Client

Magnolia API

√


Magnolia Server

SERVER

CLIENT


Technical Trail



22

√√

Rich Client

JavaScript Framework

GUI Widgets

Communication

Magnolia API

√


Magnolia Server

SERVER

CLIENT


Technical Trail



22

√√

Rich Client


GUI Widgets

Communication

Magnolia API

(Web) Services Data

√


Magnolia Server

SERVER

CLIENT


Technical Trail



22

√√

Rich Client


GUI Widgets

Communication

Magnolia API

(Web) Services Data

√


Magnolia Server

SERVER

CLIENT


Technical Trail



22

√√

Rich Client


GUI Widgets

Communication

Magnolia API

(Web) Services Data

√


Magnolia Server

HTTP + JSON

SERVER

CLIENT

Magnolia API


Technical Trail

RESTful Interface & Protocol

23

REST Enabled Rich Client

HTTP Client

REST Services HTTP Interface

JS Framework HTTP Client


√


Magnolia Server

HTTP + JSON

SERVER

CLIENT

Magnolia API


Technical Trail


23


HTTP Client



Protocol


√


Magnolia Server

HTTP + JSON

SERVER

CLIENT

Magnolia API


Technical Trail


23


HTTP Client



Protocol


√


Magnolia Server

HTTP + JSON

SERVER

CLIENT

Magnolia API


Technical Trail


23


HTTP Client



Protocol


√


Magnolia Server

HTTP + JSON

SERVER

CLIENT

Magnolia API


Technical Trail


23


HTTP Client



Protocol


√


Magnolia Server

HTTP + JSON

SERVER

CLIENT

Magnolia API


Technical Trail


23


HTTP Client



Protocol


√


Magnolia Server


Technical Trail

Generic JCR GUI

24


√√

SERVER

CLIENT


HTTP Client

Magnolia API

REST Services


Protocol


Magnolia Server


Technical Trail

Generic JCR GUI

24


√√

SERVER

CLIENT


HTTP Client

Magnolia API

REST Services


Sling API

Adapter

Protocol


Magnolia Server


Technical Trail

Generic JCR GUI

24


√√

SERVER

CLIENT


HTTP Client

Magnolia API

REST Services


Sling API

Adapter

Protocol


Magnolia Server


Technical Trail

Generic JCR GUIServices

25


√√


HTTP Client

Magnolia API


REST Services

...

...

SERVER

CLIENT


Magnolia Server


Technical Trail


25


√√


HTTP Client

Magnolia API


REST Services

...

...

SERVER

CLIENT

Datastore Service(s)


Magnolia Server


Technical Trail


25


√√


HTTP Client

Magnolia API


REST Services

...

...

SERVER

CLIENT



Magnolia Server


Technical Trail


25


√√


HTTP Client

Magnolia API


REST Services

...

...

SERVER

CLIENT

UI Config Service



Magnolia Server


Technical Trail


25


√√


HTTP Client

Magnolia API


REST Services

...

...

SERVER

CLIENT

UI Config Service



Magnolia Server


Technical Trail


25


√√


HTTP Client

Magnolia API


REST Services

...

...

SERVER

CLIENT

UI Config Service



Magnolia Server


HTTP Client

Magnolia API

JS Framework GUI Widgets

REST Services

UI Config Service...


Technical Trail

Generic JCR GUIUI Config Service

26


√√

SERVER

CLIENT


Magnolia Server


HTTP Client

Magnolia API


REST Services

UI Config Service...Dialogs Actions Trees


Technical Trail


26


√√

SERVER

CLIENT


Magnolia Server


HTTP Client

Magnolia API


REST Services

UI Config Service...Dialogs Actions Trees


Technical Trail


26


√√

• register dialogs/actions...• for paragraphs/templates• for node types • using metadata• ...

SERVER

CLIENT


Magnolia Server


HTTP Client

Magnolia API


REST Services

UI Config Service...Trees Actions Dialogs


Technical Trail


27


√√

SERVER

CLIENT


Magnolia Server


HTTP Client

Magnolia API


REST Services



Technical Trail


27


√√

• dialogs defined by:• Magnolia configuration• JCR node types• Java annotations• programmatically

SERVER

CLIENT


Magnolia Server


HTTP Client

Magnolia API


REST Services



Technical Trail


27


√√

SERVER

CLIENT


Magnolia Server


Technical Trail

Modularization

28

Goals:• interoperability• extensibility • maintainability√

√

REST Services


GUI Widgets

Communication

Magnolia API

UI ConfigData

SERVER

CLIENT


Magnolia Server


Technical Trail

Modularization

28


√

REST Services


GUI Widgets

Communication

Magnolia API

UI ConfigData

Admin Central

SERVER

CLIENT


Magnolia Server


Technical Trail

Modularization

28


√

REST Services


GUI Widgets

Communication

Magnolia API

UI ConfigData

Admin Central

SERVER

CLIENT


Magnolia Server


Technical Trail

Modularization

28


√

REST Services


GUI Widgets

Communication

Magnolia API

UI ConfigData

Admin Central

WCM DMS Inbox ...

SERVER

CLIENT


Magnolia Server


Technical Trail

Modularization

28


√

REST Services


GUI Widgets

Communication

Magnolia API

UI ConfigData

Admin Central

WCM DMS Inbox ...

SERVER

CLIENT


Technical Trail

Architecture Big Picture

29


√Magnolia Admin Central

Magnolia Server

REST Services


GUI Widgets

Communication

Magnolia API

UI ConfigData

WCM

Admin Central

DMS Inbox ...

√

SERVER

CLIENT


Technical Trail

Architecture Big Picture

29


√Magnolia Admin Central

Magnolia Server

REST Services


GUI Widgets

Communication

Magnolia API

UI ConfigData

WCM

Admin Central

DMS Inbox ...

√

SERVER

CLIENT


Magnolia Server

Magnolia API

WCM

Admin Central

DMS Inbox ...

SERVER

CLIENT

JAX-RS

GoogleWebToolkit


Technical Trail

Technologies Considered

30

REST Services



√√

UI ConfigData

Communication

Smart/Ext GWTGUI Widgets

Communication


Magnolia Server

Magnolia API

WCM

Admin Central

DMS Inbox ...

SERVER

CLIENT

JAX-RS

GoogleWebToolkit


Technical Trail


30

REST Services


√√

UI ConfigData

Communication


Communication


Magnolia Server

Magnolia API

WCM

Admin Central

DMS Inbox ...

SERVER

CLIENT

JAX-RS

GoogleWebToolkit


Technical Trail


30

REST Services


√√

UI ConfigData

Communication


Communication


Magnolia Server

Magnolia API

WCM

Admin Central

DMS Inbox ...

SERVER

CLIENT

JAX-RS

GoogleWebToolkit


Technical Trail


30

REST Services


√√

UI ConfigData

Communication



Magnolia Server

Magnolia API

WCM

Admin Central

DMS Inbox ...

SERVER

CLIENT

JAX-RS

GoogleWebToolkit


Technical Trail


30

REST Services


√√

UI ConfigData

Communication

Smart/Ext GWT


Magnolia Server

Magnolia API

WCM

Admin Central

DMS Inbox ...

SERVER

CLIENT

JAX-RS

GoogleWebToolkit


Technical Trail


30


√√

UI ConfigData

Communication

Smart/Ext GWT


Magnolia Server

Magnolia API

WCM

Admin Central

DMS Inbox ...

SERVER

CLIENT

JAX-RS

GoogleWebToolkit


Technical Trail


30


√√

UI ConfigData

Communication

Smart/Ext GWT


Magnolia Server

JAX-RS

GoogleWebToolkit

Magnolia API

UI ConfigData

WCM

Admin Central

DMS Inbox ...

Communication

Smart/Ext GWT

SERVER

CLIENT


Technical Trail


31


√√



Roadmap?


"Begin at the beginning and go on till you come to the end: then stop."

from "Alice in Wonderland"Roadmap?



SummaryThe round up: what you should remember.

"The difference between ordinary and extraordinary is that little extra."

Jimmy Johnson


Summary

34

Interface Trail


√√√

√


Summary



• validation

• look & feel

34

Interface Trail


√√√

√


Technical Trail

Summary

35

Technical goals:

• interoperability• extensibility • maintainability√

√√


Technical Trail

Summary

• decouple client & server

• generic JCR GUI

• GWT

• REST (JAX-RS)

35

Technical goals:


√√


Questions?And answers.



The EndThanks for yourattention!


√√√

√

Technical goals:


√√


The EndThanks for yourattention!


√√√

√

Technical goals:


√√

Technology

Magnolia 5.0 'GenUIne