In this session, attendees will learn how Magnolia uses Vaadin to implement a dynamic and extensible user interface for its products and custom applications.

1. MAGNOLIA CMS
UX/UI DESIGN
WITH VAADIN
JANUARY 26, 2015
Photo Credit:
AMPLIFY, MUNICH

2. ALEKSANDR PCHELINTCEV
SR. JAVA DEVELOPER @ MAGNOLIA INTERNATIONAL
!
ALEKSANDR.PCHELINTCEV@MAGNOLIA-CMS.COM

3. VIlle
VILLE INGMAN
VAADIN ADVOCATE

4. IN THIS TALK
Meet AdminCentral
Introduction to Vaadin
Apps
UI framework
Writing an app
UI Customisation with Vaadin
Data binding
Future

6. OPEN SUITE
Magnolia Bundle
CONFIGURATION
MAGNOLIA UI
TEMPLATING KIT
WORKFLOW
PERSONALISATION
…
CORE
IoC

7. MAGNOLIA UI:
ADMIN CENTRAL

8. ADMIN CENTRAL
The face of CMS
Place where time is spent
User Experience - priority #1

9. ADMIN CENTRAL V.4

10. ADMIN CENTRAL IN ACTION

11. MAGNOLIA UI
UX
Fresh look
Clear interactions
App Paradigm
Task-oriented
Modular & Scalable
Flexibility
Fully configurable
Server-side API

12. CHALLENGES
Architecture
Simple Java API
Security
Unit testing
Technical
Cross-browser
Support mobile platforms
Foundation
Rich set of re-usable components

13. FRAMEWORK PICK
GWT-based
Java OSS
Enterprise web-app oriented
Encapsulates browser quirks
The final choice:
Why?

14. INTRO TO VAADIN

15. Vaadin
Sections
Magnolia Amplify
Ville Ingman, Vaadin Ltd
ville@vaadin.com

16. intro section

18. Our Mission
Make building amazing
web applications easy

21. > 130.000 developers from
> 10.000 cities
> 500 add-ons in the
marketplace
Other
4%Asia
21%
Americas
21%
Europe
54%
Vaadin Ecosystem
Apache-licensed

22. Typical use-cases are
ERPs, Financial and Intranet/Extranet services
i.e. Business Applications
40% of Fortune 100

23. Building blocks

24. What kind of devices does your app support?
98.1%
3Desktop
browsers
Browsers developers expect to support in 2013
3.5 Browsers to support in 2012
IE 6/7 Safari Opera IE 8
6/7 8
14% 18% 36% 54%
Chrome
9 10
IE 9 IE 10 Firefox
79% 80% 94% 94%
Browsers developers expect to support in 2013
3.5 Browsers to support in 2012
IE 6/7 Safari Opera IE 8
6/7 8
14% 18% 36% 54%
Chrome
9 10
IE 9 IE 10 Firefox
79% 80% 94% 94%
app support?
98.1%
25.7%
Phones
36.1%
ts
Others
2.1%
“Since gwt is used e
in the enterprise, this
explain why tablets are
popular than support for
phones”
Daniel
iPhone
Android
WP
25.7%
Phones
36.1%
Tablets
“Since gwt is used extensively
in the enterprise, this may
explain why tablets are more
popular than support for
phones”
Daniel
iPad
Android
Windows
+
+

25. Architecture

32. How does it work,
really?

34. • Initial HTML
• CSS (theme)
• Images
• JavaScript
!
1.2M total
307k
compress
135k
reduced
widgetset

36. • name=”Joonas”
• button clicked
!
261 bytes

38. • name=”Joonas”
• button clicked
!
261 bytes
• Add notification
!
267 bytes

39. Server-
Client-
side
Optim
ized
for
Productivity
Optim
ized
for
Control

40. MAGNOLIA UI FRAMEWORK
Main principles and components
Let’s get a bit technical
See the apps

41. UI FRAMEWORK
Focus on the business:
Presentation logic
Vaadin view
Framework takes of the rest:
MagnoliaShell: App environment
Base app implementations
App life-cycle management
App communication

42. MAGNOLIA SHELL
Launch and navigate between apps
View and manage messages and workflow tasks
Bookmark and navigate between favourite locations

43. Messages and tasks managed as filterable
lists, easing both communication & review
Launch and navigate between apps
View and manage messages and workflow tasks
Bookmark and navigate between favourite locations
MAGNOLIA SHELL
Launch and navigate between apps
View and manage messages and workflow tasks
Bookmark and navigate between favourite locations

44. MAGNOLIA SHELL
Launch and navigate between apps
View and manage messages and workflow tasks
Bookmark and navigate between favourite locations

45. MAGNOLIA SHELL
SERVER CLIENT
Apps
LocationController Shell Connector
LOCATION
VIEW
RPC/STATE
MagnoliaShellView
!
Viewport
Widget
Viewport
Magnolia
Shell

46. APPS AND SUB-APPS
FOUR SUB-APPS
OPENED IN THE TABBED APP VIEW.

47. CONTENT APP PACKAGE
Provides CRUD functionality
Set of sub-apps and components
- Content views
- Fields
- Actions
- …
Extensible and re-usable

48. Ordered list and
tree views for
data entries

49. Scalable thumbnail view

50. Entry management tools
conveniently displayed in
collapsible action bar

51. Data managed using forms that can be created
with a rich set of field types powered by Vaadin

52. APP CONFIGURATION

53. DEVELOPING AN APP

54. PATTERNS
Presenter
(sub-app)
Model
(JCR)
Vaadin View
EventBus
Definition
Action
(Command)

55. DEVELOPMENT PERKS
Automatic app location mapping
#app:<appName>:<subAppId>:<param1;param2>
!
Inversion of control
@Inject, @Singleton …
Scopes: <app>, <sub-app>, <admincentral>
Additional UI features
Notifications
Overlays

56. CUSTOM SUB-APPpublic class MySubApp extends BaseSubApp<MyView> {
private final EventBus eventBus;
@Inject
public MySubApp(
@Named(SubAppEventBus.NAME)
EventBus eventBus,SubAppContext ctx, MyView view){
super(subAppContext, view);
this.eventBus = eventBus;
}
@Override
protected void onSubAppStart() {/*Execute start-up logic*/}
@Override
protected void onSubAppStop() {/*Dispose the resources*/}
@Override
public void locationChanged(Location l){
// Update the view according to the changes
}

57. CUSTOM VIEW!
public class MyView implements View {
!
private Component label = new Label(“Hello Amplify!”);
!
@Override
Component asVaadinComponent() {
return this.label;
}
!
}

58. OUTCOME?

59. EDIT WEB CONTENT

60. MONITOR

61. WRITE SCRIPTS

62. GO LOW-LEVEL

63. APP SWITCHER

64. DIALOG EDITOR

65. VAADIN ADD-ONS
AND EXTENSIONS

66. add-ons, SASS,

67. Extendability:
Add-ons!
Server-side
component
compositions
Client-side
components with
GWT
Client-side JS
components
Custom themes

68. 507 add-ons available!

73. SASS Syntactically
Awesome Stylesheets

74. Variables & functions

75. Mixins

76. Nesting

77. Selector Inheritance

80. THE cool stuff

81. Built-in Server
@Push
Atmosphere:
WebSockets, HTTPStreaming, Long polling

86. Grid
• Custom
headers and
footers
• Frozen
columns
• Embedded
widgets
• Large datasets

87. Declarative UI
• HTML based
• New Visual
Designer with
collaborative
features

88. Vaadin Labs
vaadin.com/labs

89. getting
started

91. Eclipse
Download plugin
from Marketplace

92. IntelliJ
IDEA
Built-in support

93. Netbeans
Download plugin
Netbeans Plugin Portal

94. mvn
archetype:generate
-
DarchetypeGroupId=
com.vaadin
-
DarchetypeArtifactId
=
vaadin-archetype-
application
-DarchetypeVersion=
7.1.7
Maven

95. Download for Free
vaadin.com/book
PDF, ePub, HTML
9 789529 319701
ISBN 978-952-93-1970-1
9 789529 319701
ISBN 978-952-93-1970-1
Vol 1
288 pages
Vol 2
434 pages

96. Web apps,
not web sites!

98. VAADIN CONTAINERS
OoB
FileSystem
SQL
JPA
Magnolia
JCR Container
PoC @ Rest

99. CONTENT CONNECTORS
MANAGE EXTERNAL CONTENT WITH APPS

100. Contributions are welcome!
http://wiki.magnolia-cms.com/display/
FORGE/Home

102. Questions
Thank you?