webinar - why magnolia 5 rocks for it

Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.0

Philipp Bärfuss, Head of Product Development 11.07.2013 at Webinar

Magnolia 5 - ZoologyWhy Magnolia 5 Rocks for IT

1

http://www.flickr.com/photos/chanycrystal/



Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.

The Zookeeper

2

Philipp Bärfuss

36 years, Swiss

8 years at Magnolia

Head of Product Development


Demo: 3 Minutes of Magnolia 5

3


Assistant: The Geek

4

Now it gets geeky

Coding examples

Very technical

Don’t panic! We get back to normal


Assistant: The Fairy

Future

Ideas

Features

Wishes

Things you could do

5


The Zoology - Aspects of M5

6

Ants

ElephantFlamingo


The Elephant

good memory

strong

working animal

7


Text

The Ants

Collective intelligence

Complexity with simplicity

Basic signal -> big impact

8


The Flamingo

elegant and beautiful

perfect tools and technics

strong flyer

reliable

found around the world

9



10

Collaboration

WCMUX



10

Collaboration

WCMUX

Publishing

Templates

Content Apps

DAM



10

Collaboration

WCMUX

Publishing

Templates

Content Apps

WorkflowThe Pulse

DAM



10

Collaboration

WCMUX

Apps

Forms

Publishing

Templates

Content Apps

WorkflowThe Pulse

DAM

Favorites


Online Digital Channel Management

11

Collaboration

WCMUX



11

Collaboration

WCMUX

Digital Channels (IN)



11

Collaboration

WCMUX

Digital Channels (OUT)




11

Collaboration

WCMUXeCommerce CRM

Digital Channels (OUT)



Digital Channel Management

12

In

• Authors• Flickr• Mobile• ...

Out

• Devices: Mobile, Print, ..• Medium: eMail, Web, PDF• Twitter, Facebook, ...

Integration

• Analytics, CRM, Shop


CMS

13

WCM

Publishing

Templates

Content Apps

DAM


Content Apps

14


Content App - Browser

15


Content App - Detail / Editor

16


Just configure it

17

node types

• icons

tree, list, columns

forms

• to edit the content

actions


Extend Contacts App

add a field to the contacts form

add a column to the tree

18


Digital Asset Management

19


DAM - API

20

Providers

• to access other sources

Renditions

• thumbnails, sizes, formats

Metadata

• Dublin Core


Image Cropping

21

independent media file editor


Integration - Blossom (Spring)

22


CMS

Content Pools

• Article, News, Events

DAM

• Video• Originals• Flickr, ...

Integrations

• eCommerce• Database

Publishing

• Twitter, Facebook

Personalization

• Persona• A/B Testing

23


Text

Collaboration & Processes

24

CollaborationWorkflowThe Pulse


Text

The Pulse - Collaboration

25

The Pulse


Text


25

The Pulse

App


Text


25

The Pulse

Workflow

App


Text


25

The Pulse

WorkflowImport

App


Text


25

The Pulse

Workflow

eMail

Import

App


Text


25

The Pulse

Workflow

eMail

Import

App

App


Text

Demo - Send a Message

26


Text

Message View

27

define screen per message

• what info to show

define actions

• proceed workflow• jump into an app


Collaboration Example

Pages

• click on “Request Translation”

Pulse

• translator group gets a message

28


Text

Workflow Engine - JBPM

29

Well known

Visual Tools available

• Eclipse workflow editor

Execute Commands

• activation, versioning, ...

Define Message Screen for Human Tasks


Collaboration & Processes

Build your processes

• Notifications• Watch List

Task oriented apps

• Task oriented apps (review, ..)

Notification channels

• eMail• RSS• SMS

Group work items

• Assignee• Status

Workflow designer

• for basic steps

30


UX Framework

31

UX

Apps

Forms

Favorites


AdminCentral

Vaadin (GWT)

Vaadin

UI Model

Web Services (CMIS)

Content Model

CMIS App

REST/AtomHTTP

JCR

JCR App

Rendering Engine

Web Browser

Web pages, Images, ..

Templates

SecurityNode Types

Mixins......

AJAX/JSON

32

Overview


Technology Stack

33

Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.34

Vaadin

Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.35

Vaadin

• Rich widget framework

• Out-of-the-box theming

• Java developer friendly

• Close to Swing

• GWT based (Java -> Javascript)

• Can integrate any GWT-components

• Rare GWT-compiles (compared to plain GWT)

• Testing with pure JUnit

• Apache License

• Well documented


API - Layers

36

Magnolia Core

Widgets (Form, Workbench)

UI Framework (Impl)

AdminCentral

Vaadin

UI API (App, Context, Location)


Packages - AdminCentral

37

UI Framework - Apps, Locations, Messages, Actions



37

AdminCentral& Shell Apps




37


App App




37

Content App


App App




37

Content App


App App

App App



Apps

is a AdminCentral extension

task oriented

• authoring• reviewing

use Vaadin for the views

• easy Swing like coding/debugging

use Magnolia/Java for the presenters

sub apps

• shown in tabs

38


App API - UML

39


Timezone App

40

Extend the base app

Use Vaadin to build the UI

Open a sub app tab


Favorites

41


Location, Location, Location

42

URL Anchor

• #app:<appName>:<subAppId>:<parameter>

In App navigation

• main, app, subapp

Bookmarks

• save URL, send them to other users, ...

History

• back and forward buttons



Task

• translator jumps to the page to translate

43


Definition to UI

44

FormDefinition Factory


Notifications

45

App Context

• Alerts• Confirmation

Messages to the Pulse

• Info• Warning• Error


IoC

46

All UI components can be replaced

• Apps, Sub-apps• View and Presenters

Get the Objects you nee

• Definitions• App Context

Apps are configurable

• extend apps, sub-apps• add actions


Actions and Commands

47


Actions

48

The UI event handling

Open Dialog

Call Command

Show message to user

Change location


Commands

49

Backend executable

No UI

Invoked by

• UI• WebServices• Workflow


Action Bar

50

Configured

• Customize the App• Add Actions by Module

Independent

• Content Apps• Page Editor• Messages

Preview

Sensitive

• Content type



Add an Action

• new action in the Pages app• Code sample

51


Form, Fields and Tabs

52

Configured

• no coding needed

Independent

• used in Apps• used in Dialogs

Data binding

• Items not Nodes


Form in an App

53


Form in a Dialog

54


Validation, Errors and Warnings

55


UX

Internationalization

• RTL

Mobile

• Smartphone UI

Configuration

• Form Editor

Dialogs

• Wizards

Widgets

• Graphs

Rich Text Editors

• Plugins

56


Magnolia is more than a Zoo

57



WCM Features

• Pages, Dam, Content Apps• Spring (Blossom)

57



WCM Features


Collaboration Features

• The Pulse, Workflow

57



WCM Features


Collaboration Features

• The Pulse, Workflow

UI Framework

• Apps, Favorites, Locations• Forms, Actions, Widgets• Vaadin based

57


Timeline

58

5.25.1EE5.0

Platform Smooth UXCompletenessBasis

Features

15. NovConferenceAug


ConferenceMConf13-WEBINAR-20

20% discount / sign up now: www.magnolia-cms.com/conference

59

http://www.magnolia-cms.com/conference

http://www.magnolia-cms.com/conference


Questions & some Answers

60