munich city utilities: using magnolia’s flexibility for diverse environments

(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:\Info\Office_Vorlagen\Bilder_und_Grafiken\SWM

Munich City Utilities: Using Magnolia’s Flexibility for Diverse Environments

Dr. Maximilian Störzer // September 2013

11.04.2023 Dr. Maximilian Störzer, SMW Services GmbH 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


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

kmheating

• 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


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)

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, dynamic contents

http://www.muenchen.de/

http://www.swm.de/

http://www.mvg-mobil.de/


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


ATOMIC COMPONENTSHIERARCHICAL CONTAINERS

Maintenance and Usability

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


Our layout allows 1,2,3 or 6 colums … do the math!

Grids, Componentes, Containers – Technical Solution

11.04.2023Dr. 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

Grids, Componentes, Containers – Technical Solution


Area definitions are used in template definitions: i.e. Content (area600) plus Sidebar (area300)

Area definitions are also nestedin 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


INSTANTIABLE HTML COMPONENTS

Flexibility, Stability and Great Useability

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


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)

http://www.muenchen.de/


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


SEAMLESS WEB APPLICATION INTEGRATION

Adding the Power of Active Contents

Seamless Integration of Web Applications – Requirements


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


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/privatkunden/m-baeder/kursangebote-ticos.html#entryMask

https://www.swm.de/privatkunden/m-baeder/kursangebote-ticos.html



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

11.04.2023 Dr. Maximilian Störzer, SMW Services GmbH17

Classic Components

ApplicationComponents

}

GWT Hostpagerendered by Magnolia

[ ]Parameter-ized GWT includes

GWT UIJavaScript

GWT ServerJava Application Backend Services


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!

(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:\Info\Office_Vorlagen\Bilder_und_Grafiken\SWM

Thank you for your kind attention. Do you have question?

munich city utilities: using magnolia’s flexibility for diverse environments

Technology