This presentation was given at Magnolia Conference 2013 by Dr. Maximilian Störzer, Project Manager at Stadtwerke München: www.swm.de
Stadtwerke München (SWM) are a large company with business segments ranging from utilities, public pools, telecom infrastructure to public transportation. We also provide the CMS for the urban administration of Munich. Consequently, a “corporate CMS” has to fulfill diverse requirements.
SWM rely on Magnolia CMS and the following three core concepts to efficiently cope with this diversity:
- A hierarchical grid-based structure for components
- Insatiable HTML components called "modules"
- The seamless integration of web applications based on the Google Web Toolkit (GWT).
The talk will introduce these concepts and point out how SWM use a relatively small set of building blocks based on these concepts to provide adequate solutions for all our different company web sites.
Munich City Utilities: Using Magnolia’s Flexibility for Diverse Environments
1. (8 x 25,4 cm)
(Position: H 0; V 2,52)
Hier können Sie
ein Bild, Diagramm oder eine Grafik einfügen.
Die Größe sollte diese graue Fläche ganz ausfüllen.
Geeignete Bilder und Grafiken finden Sie unter:
I:InfoOffice_VorlagenBilder_und_GrafikenSWM
Munich City Utilities:
Using Magnolia’s Flexibility for Diverse Environments
Dr. Maximilian Störzer // September 2013
2. Agenda
• The SWM Group – Facts & figures, Branches … setting the stage
• Magnolia-based concepts to conquer diversity
A hierarchical grid-based structure for components
Insatiable HTML components called "modules"
The seamless integration of web applications based on the Google Web
Toolkit (GWT)
• Summary
23.09.2013 Dr. Maximilian Störzer, SMW Services GmbH 2
3. 23.09.2013 Dr. Maximilian Störzer, SMW Services GmbH 3
The SWM Group – Facts & figures
Stadtwerke München GmbH
SWM Infrastruktur Region GmbH
SWM Versorgungs GmbH
SWM Infrastruktur GmbH
SWM Services GmbH
SWM Kundenservice GmbH
M-net Telekommunikations GmbH
Münchner Verkehrsgesellschaft mbH (MVG)
Customers approx. 1.1 million
(energy and water)
Employees approx. 7,800
Turnover €4.5 billion
Networks
• Electricity approx. 12,000 km
• District approx. 800 km
heating
• Gas approx. 3,500 km
• Water approx. 3,200 km
• Transport approx. 628 km
Renewable Energies Expansion
Campaign: Including all ongoing
projects, the share of green electricity
will come to 32 %.
Munich owns the SWM group (100%)
Citizen Value as Guidline
4. Diverse Requirements in a diverse environment … setting the stage
• Web Sites in the SWM Group
www.muenchen.de [Magnolia 4.5] (Commercial section and City administration)
www.swm.de (including infrastructure sites) [Magnolia 4.4]
www.mvg-mobil.de [Magnolia 4.5 in 2014]
… and others (currently not Magnolia-based)
23.09.2013 Dr. Maximilian Störzer, SMW Services GmbH 4
SEO, SEO,
SEO
Instant reactions on
market neesds
Stable
systems
Standardized
Layout
No HTML / JS
knowledge required
Few editors / Expert
Web Developers
200+ editors with
low IT affinity
High flexibility
(layout /
functionality)
Barrier free
Seamless integration of
complex web applications
Low maintenance
cost
Reuse
components
in all contexts
Easy to use
for editors
Applications, d
ynamic
contents
5. Now let‘s choose THE Corporate CMS
• Well, ok ….
• Approach 1: Simple – An indiviually Customized CMS for each web site
No problem, perfectly fits individual requirements ….
… maintainability? We only have limited ressources.
… synergies? We end up inventing the wheel over and over again.
• Approach 2: Unify requirements ….
Great idea …. !
… Maybe not.
• Approach 3: Let„s play LEGO®
Provide a stable and common set of core concepts and components
shared among sites, add individual customization only where necessary
Basis: Magnolia 4 EE
23.09.2013 Dr. Maximilian Störzer, SMW Services GmbH 5
7. Grids, Componentes, Containers – Idea
• Editors often demand very similar
components like …
Text-Image-Component (very basic),
Teaser & Text-Image-Component
Multimedia & Text-Image-Component
etc. … and vice versa
Same components in a 2, 3 or 4
column-layout ( lots of templates)
• Consequences: Many different
templates & components
„Component flodding“ for editors
result in maintenance costs for IT
• Grid layouts & Hierarchical
containers to the rescue
23.09.2013 Dr. Maximilian Störzer, SMW Services GmbH 8
Our layout allows 1,2,3 or
6 colums … do the math!
8. Grids, Componentes, Containers – Technical Solution
23.09.2013
Dr. Maximilian Störzer, SMW Services GmbH 9
Few „atomic“ fixed width
shared components
• Each component has an individual layout
and functionality independent from page
• E.g. 150, 300, 600px (6 column grid /
150 px columns / 900 px template)
• Expample Components: Image, Teaser,
Carousels, Banner, Text, …
Areas
• One area for each component width
(area150, area300, …)
• Areas are independant of template
• Areas are defined once as prototypes
(not per page)
Building pages: Adapter components
• Adapter components allow to nest areas
(i.e. 900 600 + 300, 900 3x300, …)
900 600+300
900 600+300
600 4x150
9. Grids, Componentes, Containers – Technical Solution
23.09.2013 Dr. Maximilian Störzer, SMW Services GmbH 10
Area definitions are used in template
definitions: i.e. Content (area600) plus
Sidebar (area300)
Area definitions are also nested
in adapter components
• Render smaller components
floating within a larger area
Benefits
Unlimited component nesting
without area redefinitions
Requires customized STKRenderer to
allow prototype usage in components
Authors may place components in any
matching area – very flexible while also
enforcing design guidelines
Only few templates necessary
11. HTML Modules – Idea
Trade-off
• flexible component adaption
(at runtime!) vs.
• unique layouts and
secure & stable web sites
Scenario 1: few and expert authors
(both editing and web technology)
• FTL & HTML available,
open up the system
Scenario 2: At Munich City
Administration, 200+ “non-IT”
authors maintain www.muenchen.de
Predefined HTML-Modules
to the rescue
23.09.2013 Dr. Maximilian Störzer, SMW Services GmbH 12
Data Workspace
Module definition
Module
Component
}
Experts define
HTML-modules
in Magnolia data
workspace
Classic
Components
}
Authors instanciate
modules on use
• … similar to
regular compts.
Concept combines
• high flexibility (add HTML (inc. FTL!),
JavaScipt and CSS)
• Minimized risk (definition is expert only,
no change of used components)
12. 23.09.2013 Dr. Maximilian Störzer, SMW Services GmbH 13
HTML Modules – Technical Solution
• A new section in the data repository workspace allows
web experts to define and organize new modules
• Modules can be combined to create complex modules
(reuse of HTLM-chunks / FTL functions)
• Requires Data Types
• htmlModule: contains the markup (HTML / FTL);
basic elements
• containerModule: used to group modules using links
• linkModule: reference to other sub modules (even
complex modules)
• The module component allows authors to reference
htmlModules, containerModules and linkModules
• FTL markup in the component collects all referenced
modules and combines included markups
14. Seamless Integration of Web Applications – Requirements
23.09.2013 Dr. Maximilian Störzer, SMW Services GmbH 15
Seamless application integration
• no frames, no flash (or comparable
technology)
• no context change (different site)
Solid Technological Foundations
• Stable technology, high browser
independence
• Flexible layouting possible
• Powerful programming model
• Internationalization required
Mix-up strategy
• Applications are modules as any
other CMS module
• Application UIs may even
contain texts and pictures
editable in Magnolia
15. SWM Aqua Angebote
• Application ist used to list &
book swim courses in public
pools
• Application is configurable (i.e.
preselections are possible),
• Using the application does not
result in page changes
• See for yourself:
https://www.swm.de/privatkund
en/m-baeder/kursangebote-
ticos.html#entryMask
23.09.2013 Dr. Maximilian Störzer, SMW Services GmbH 16
16. Seamless Integration of Web Applications – Technical Solution
• The Google Web Toolkit (GWT) is a
perfect match for our requirements
• Integration in Magnolia is achieved
by defining Magnolia application
componentes. Main task:
hiding GWT includes from editors,
Allowing easy by-use
parameterisation
• Applications are programmed by IT
(classic application development)
Powerful programming model
Concepts for internationalisation
UI is generated by GWT
JavaScript code
Server is classical Application Server
based Java Application
23.09.2013 Dr. Maximilian Störzer, SMW Services GmbH
17
Classic
Components
Application
Components
}
GWT Hostpage
rendered by Magnolia
[ ]Parameter-
ized GWT
includes
GWT UI
JavaScript
GWT Server
Java Application
Backend Services
17. Take Aways … (Summary)
• Due to the high diversity in the SWM group,
we also experience a high diversity in requirements for a CMS
• Magnolia proved to be a perfect fit: Using Magnolia‟s flexible
architecture, we were able to implement concepts to customize a
relatively small set of core concepts for each particular scenario
The container concept allows to flexibly combine
„atomic“ components so building complex layouts
The module concepts allows to flexibly create special modules (i.e. for
campaigns) at runtime; instantiation and use is simple and low risk
Complex web applications can be easily integrated using the GWT
framework and wrapping Magnolia components
• Summary: Authors are happy, IT is happy, Management is happy
Thanks Magnolia!
23.09.2013 Dr. Maximilian Störzer, SMW Services GmbH 18
18. (8 x 22 cm)
(Position: H 3,41; V 2,52)
Hier können Sie
ein Bild, Diagramm oder eine Grafik einfügen.
Die Größe sollte diese graue Fläche ganz ausfüllen.
Geeignete Bilder und Grafiken finden Sie unter:
I:InfoOffice_VorlagenBilder_und_GrafikenSWM
Thank you for your kind attention.
Do you have question?