You are on page 1of 16

Spring Framework

Enterprise Content
Management with
Blossom
A Magnolia Tech Brief

Spring Enterprise Content Management with Blossom

Magnolia CMS

Table of Contents
!
Table of Contents

Introduction

Audience

Challenge: Learn a complex CMS or build (and maintain) your own?

Solution: Magnolia CMS with Blossom

Key Features

Benefits

Key Concepts for Developers

Templates

Controller Annotations

Views

10

Dialog Creation and Blossom

11

Packaging and Blossom

12

Case Study

13

Summary

14

More Information

15

Useful Links

15

Contact Us

15

Spring Enterprise Content Management with Blossom

Magnolia CMS

Introduction
!

he Spring Framework is the de facto standard programming model for


enterprise Java applications, used by two-thirds of all Java developers.
Magnolia CMS is an open source Java CMS, used by governments and
Fortune 500 enterprises.

Blossom is a Magnolia CMS module that allows developers to use the Spring
Framework and Spring coding idioms with Magnolia CMS. It adds a full set of
enterprise content management features to Spring developers' existing
toolkit, allowing them to rapidly deploy integrated solutions encompassing
multiple back-end business systems.

This Tech Brief introduces Blossom and explains how it enables developers
to combine all the benefits of the Spring programming model with the builtin versioning, workflow, staging and security features from Magnolia CMS.

!
Audience
!

This Tech Brief is written for IT project managers, solution architects and
application developers who have some familiarity with Spring. For project
managers and architects, this brief provides information on the key features
and benefits of Blossom, together with a case study of Blossom in the wild.
For developers, this brief provides information on key Blossom concepts to
help them get started building Blossom applications quicker.

Challenge: Learn a complex CMS or build


(and maintain) your own?
!

Dynamic content is the cornerstone of modern enterprise websites. And most


of the time, the key information elements needed to deliver dynamic content real-time prices, last-minute deals and promotions, social media messages are stored in back-office applications. Delivering an engaging user
experience requires you to integrate these applications with your enterprise
website or web application.

Spring Enterprise Content Management with Blossom

Magnolia CMS

No enterprise Content Management System (CMS), no matter how forwardthinking, will satisfy all your integration requirements out of the box. Custom
programming is always necessary and because each CMS has its own API,
architecture and data structures, there are inevitable delays while your
development team acquires the necessary knowledge. Even after this, there
may still be false starts as developers struggle to understand key features
and implement best practices in unfamiliar programming terrain.
Many developers find CMS' to be hostile territory for the above reasons and
try to work around the problem by developing a custom application to
manage content. This tool is usually designed around a few specific use
cases and offers only a subset of the full functionality of a typical CMS. As a
result, when users need changes, developers must add new functionality to
the tool and end up maintaining a custom CMS. It's a lose-lose situation:
developers waste time and effort, and users end up with only a subset of the
features they really need.

Solution: Magnolia CMS with Blossom


!

Learn a complex CMS, or build and maintain your own? Neither solution is
optimal. That's where Blossom comes in.
The Blossom module for Magnolia CMS provides a modern and elegant
solution to the challenge of integrating Spring Framework applications and
dynamic content with enterprise websites. Blossom allows developers to
easily extend and integrate core Magnolia CMS functionality, such as multichannel and multi-language support, scalability and mobile templating, with
third-party services and applications using ordinary Spring Framework code.
With Blossom, developers can leverage Magnolia CMS' ease of use to enable
rapid, easy content creation and management workflows. Multi-channel
support and best-practice mobile templates make it simple to support mobile
and desktop websites in a single central system. Multi-language support
makes it straightforward to manage and serve the same web content in
several languages and built-in clustering and load-balancing enable websites
to be mirrored to multiple physical servers without losing content integrity.
By building on existing Spring knowledge and conventions, Blossom reduces
the learning curve for developers and produces clean, robust code that
follows current best practices. You get the best of both worlds: all the
complex business logic and integrations possible with Spring without losing
the core benefits of using an enterprise CMS.

Spring Enterprise Content Management with Blossom

Magnolia CMS

Key Features
!

Blossom uses an annotation-based API to seamlessly expose Spring Web


MVC controllers inside the Magnolia CMS presentation layer. This lets
developers easily create code-driven Web pages with a high level of dynamic
behavior. Blossom encourages code reusability and extensibility, by making it
simple to reuse functionality across different parts of a website or across
different projects. With Blossom, developers have access to key features of
both the Spring Framework and Magnolia CMS, allowing them to have their
cake and eat it too. Heres a small sample of what Blossom offers.

Blossom = Spring Framework + Magnolia CMS

!
Features from Spring

Features From Magnolia CMS

Dependency Injection: Loose


coupling between application
components and improved
testability.

Java Stack Power: Built on the best of


the Java stack, giving developers with
a familiar, robust environment.

Spring MVC: A Model-ViewController implementation that


encourages separation of concerns
in Web applications.
Integrated Messaging: Messaging
and scheduling within Spring
applications as well as integration
with external systems, including
REST/HTTP, Web Services, JMS,
RabbitMQ and SMTP.
Data Access: Annotations and
template objects for simplified data
store access and manipulation.
Rich Collection of Components:
Access to a multitude of Springbased solutions for common
development needs, reducing the
need to write your own.

Security: Role-based user


management and access control.
Internationalization: Localized UI for
editors. Support for multilingual
content and translations.
User Interface: Instant WYSIWYG
inline editing using browser-based
interface.
Image Manipulation: Automatic
image resizing and cropping for tablet,
touch and other devices. Also includes
manual tools for managing image
meta-data, size and more.
Content Versioning & Staging: Builtin content versioning and staging with
rollback to earlier versions of a page.
Workflows: jBPM-based workflows
for modeling and enforcing content
management processes.

Spring Enterprise Content Management with Blossom

Magnolia CMS

Benefits
!

Blossom offers benefits for both developers and enterprises.

Developers
!For
MVC-style loose coupling
! Use
test-driven development for
! and
! more maintainable code
! Use code to extend and configure
! Magnolia's administration and
! content creation interface
! Benefit from automated class
! detection and registration
!
! Leverage built-in versioning,
! workflow, staging and security
! features from Magnolia CMS

For Enterprises
Simplify integration with back-end
business systems
Implement custom content
management workflows that
reflect business processes
Provide a more interactive
experience to end-users
Speed up development by
leveraging your development
team's existing Spring knowledge

Key Concepts for Developers


!

Blossom uses common Spring development idioms like annotations and


Inversion of Control to help Spring developers leverage their existing skills.
This section outlines key technical concepts to help developers get started
quickly with Blossom.

Execution Flow
In the typical MVC pattern, requests are mapped to controllers. Controllers
populate models and then views render the models.

REQUEST

CONTROLLER

MODEL

VIEW

TYPICAL MVC REQUEST/RESPONSE

Spring Enterprise Content Management with Blossom

Magnolia CMS

In a typical CMS, requests are first mapped to content. The content is


assigned to templates, which take care of rendering it.

REQUEST

CONTENT

TEMPLATE

TYPICAL CMS REQUEST/RESPONSE

Blossom works by turning Spring MVC controllers into templates. When


requests are received by the CMS, the content is rendered by its assigned
template. Templates are assigned at authoring time; these templates are
actually controllers, which take care of interacting with models and views,
and generating the response.

REQUEST

CONTENT

TEMPLATE
CONTROLLER
MODEL
VIEW

CMS + BLOSSOM REQUEST/RESPONSE

These templates are regular Spring MVC controllers. So, for example, they
can read data from, or write data to, databases or other data stores; invoke
REST APIs over HTTP; or validate and process user input from Web forms.
This makes it possible to add a high degree of dynamism and interactivity to
CMS-managed content.

Spring Enterprise Content Management with Blossom

Magnolia CMS

Templates

Magnolia CMS provides three types of templates: pages, areas and


components. Every page is composed of areas, which in turn are composed of
components. This gives content authors the freedom to compose their pages
as they like.
Pages are the building blocks of the
website navigation tree. They are
structured as a tree hierarchy of parent
and child pages.
Pages contain zero or more areas, which
can contain further areas or components.
Areas have two purposes: they structure
t h e p a g e a n d t h e y c o n t ro l w h a t
components can be placed inside each
area.

PAGE
AREA
COMPONENT

AREA

AREA

COMP.

COMPONENT

COMP.

COMP.

COMP.

Areas contain zero or more components.


COMPONENT
A component is the smallest block of
content that editors can edit, delete and
move as a single unit. At its simplest, a
component can be simple static content, like
a specific image or piece of text. Usually, it contains some kind of
structured content that's entered by a website editor. However, it can
contain almost anything: text and a related image, a list of links, a teaser to
another page, and so on.
All templates have some common properties:
The template script is written in FreeMarker, JSP or a custom templating
language. Any view rendering technology that works with Spring can be
used with Blossom. The script instructs the renderer where to place the
content and also contains placeholders for content elements such as
headings and images.
The template dialog (optional) allows Magnolia CMS authors to enter and
edit content. When the content is later retrieved for display, its
presentation will be controlled by the templates applied to it by the
appropriate area and component. In Magnolia CMS 5, dialogs are
presented using Vaadin components.

Spring Enterprise Content Management with Blossom

Magnolia CMS

Controller Annotations

Blossom uses annotations to make controllers function as templates. The


@Template annotation indicates a page or component template, while the
@Area annotation indicates an area template. The annotation must contain a
unique identifier and title. The title is shown to authors in Magnolia's editing
interface, while the identifier is used to assign the template to its content.
The identifier follows a convention used in Magnolia: the module name,
followed by a path. The first part of the path marks a template as being a
component template or a page template. For example, for the page template
myPage in the myModule module, the identifier would be myModule:pages/
myPage. Similarly, a shopping cart component template in the same module
might use myModule:components/shoppingCart as an identifier.
@Controller
@Template(id="myModule:pages/main", title="Main")
public class MainTemplate {
@RequestMapping("/main")
public String render(ModelMap model) {
return "pages/main";
}
}
PAGE TEMPLATE

@Controller
@Template(id=myModule:pages/main, title="Main Template")
public class MainTemplate {
@Controller
@Area("main")
public static class MainArea {
@RequestMapping("/main/mainArea")
public String render() {
return "areas/main";
}
...
AREA TEMPLATE

!
9

Spring Enterprise Content Management with Blossom

Magnolia CMS

Components are controllers annotated with @Template.


@Controller
@Template( id=myModule:components/shoppingCart,
title="Shopping Cart")
@TemplateDescription("Shopping cart")
public class ShoppingCartComponent {
@RequestMapping("/shoppingCart")
public String handleRequest() {
...
return "components/shoppingCart";
}
COMPONENT TEMPLATE

Views

View renderers for FreeMarker and JSP are shipped with Magnolia CMS.
Blossom uses these renderers for its views, which can make use of standard
Freemarker and JSP tags as well as tags provided by Magnolia CMS.
Magnolia CMS provides the following custom tags to render areas and
components within a view:
cms:init embeds the CSS and JavaScript that powers Magnolia CMS'
WYSIWYG authoring interface.
cms:area renders an area.
cms:component renders a component.

FreeMarker
[#list components as component]
[@cms.component content=component /]
[/#list]

JSP
<c:forEach items="${components}" var="component">
<cms:component content="${component}" />
</c:forEach>
RENDERING COMPONENTS USING FREEMARKER OR JSP VIEWS

10

Spring Enterprise Content Management with Blossom

Magnolia CMS

Dialog Creation and Blossom

Blossom supports creation of dialogs using code. A key advantage of this is


that dialogs can include dynamic content generated by the controller. For
example, if the controller fetches data from a Web service, you can populate
your dialog with options retrieved from that Web service.
Dialogs are built by methods within the controller class itself, annotated with
the @TabFactory annotation.
@Controller
@Template(title="Article", id="myModule:pages/article")
public class ArticleTemplate {
@TabFactory("Content")
public void contentTab(UiConfig cfg, TabBuilder tab) {
tab.fields(cfg.fields.text("title").label("Title"));
}
}
CONTROLLER WITH METHOD BUILDING A DIALOG

Dialogs are described using a model of definition classes. These define the
structure of the dialog, its tabs and its fields. They describe both what the
dialogs and its forms should look like and how they should behave.
Blossoms fluent builder-style API with UiConfig, TabBuilder and
DialogBuilder classes makes it possible to define complex dialogs with
multiple tabs using very compact syntax. The API consists of config classes
that produce builders, the builders produce definitions.
public abstract class BasePageTemplate {
@TabFactory("Meta")
public void metaTab(UiConfig cfg, TabBuilder tab) {
tab.fields(
cfg.fields.text("metaAuthor").label("Author"),
cfg.fields.text("metaKeywords").label("Keywords"),
cfg.fields.text(metaDescription).label("Desc.")
...
DIALOG WITH MULTIPLE FIELDS

11

Spring Enterprise Content Management with Blossom

Magnolia CMS

You can easily change dialog code in your IDE, compile and hot-swap the new
code into an instance of Magnolia CMS running in debug mode. This makes
developing dialogs extremely fast.
Note that is also possible to extend the dialog creation mechanism in
Blossom to use custom config classes or replace UiConfig or TabBuilder
with classes of your own for adding your custom or third-party fields.

Packaging and Blossom

Magnolia has a small, well-defined core that provides only the essential
services needed by the system. Most of Magnolia's functionality is
implemented in discrete modules that plug into this core. A module is a
independent component that performs a particular task or packages content
and functionality. These modules are simple JAR files with a descriptor XML
file that declares dependencies on other modules.
Controllers using Blossom are packaged as Magnolia CMS modules.

MAGNOLIA CMS ARCHITECTURE

Deploying these is as simple as copying the JAR files into the WEB-INF/lib
folder of your Magnolia CMS instance and restarting the instance. The
Magnolia CMS update wizard recognizes the JAR files and installs their
contents.
When a module using Blossom is started, it initializes the Spring application
context, registers any @Template-annotated controllers and then adds a
special renderer to the rendering engine that handles delegating requests to
controllers.

12

Spring Enterprise Content Management with Blossom

Magnolia CMS

Case Study
!

With Magnolia CMS Enterprise Edition, we have the foundation we


need to deliver innovative solutions to our leisure travel clients.
Magnolias ease of use has enabled our staff to quickly bring new
promotions and products to market, while its ease of integration has
allowed us to take our online competitors on and match them, feature
for feature, while beating them on price and variety due to our industry
network.
Were now able to satisfy all our target customer groups: our
independent and techno-savvy travelers have the self-service tools they
need to search, plan and purchase their holidays online, while those who
are still unsure about online transactions can visit our physical stores
for expert advice and assistance in planning their vacations.
Katarina Sjgren Petrini, Vice President, Ticket Leisure Travel

Blossom has been successfully used by Magnolia CMS users around the
world to perform complex integrations and add sophisticated business logic
to Magnolia CMS-powered websites. Ticket Leisure Travel, the largest private
travel agency in Sweden and the second largest in Norway, uses Blossom and
Magnolia CMS compete with price comparison sites.
Despite being one of the biggest players in the Scandinavian market, Ticket
Leisure Travel (Ticket) was facing stiff competition in 2007 from price
comparison sites. These sites were emerging as a viable alternative to
traditional leisure travel operators, by allowing customers to view and book
a wide range of travel options entirely online, without the need to visit a retail
store. Although customers still valued the retail stores for the chance to gain
personal service and expert advice, the easy availability of pricing and
availability information on the Web was gradually shifting the purchase
process online.
To stay ahead of competition, Ticket needed a technical platform that would
enable it to deliver dynamic, real-time ticket pricing and availability through
integration with third-party services, and also be scalable enough to handle
Tickets growing transaction volumes. Blossom gave Ticket the ability to
deliver dynamic content through numerous integrations with third party
services and partner organizations.

13

Spring Enterprise Content Management with Blossom

Magnolia CMS

Ticket Leisure Travel uses Magnolia CMS and Blossom to integrate with a
wide variety of services, including:
Google Analytics
Google Maps
Payment integrations including credit card and direct bank payments
Mid-office sales application for email generation
Online forums
Charter searching/booking systems
Exchange rates
Travel guides
Affiliate programs

Today, Ticket has a dynamic, interactive travel portal with full transactional
capabilities, performing more than 250,000 searches per day. With Magnolia
CMS and Blossom, Ticket was able to upgrade its website to become more
dynamic and engaging, offering its users the tools they need to plan and
purchase their vacations online. Blossom has helped Ticket Leisure Travel
differentiate itself effectively from its competitors and offer innovative new
services at a lower cost.
Read more Blossom case studies on our website.

Summary
!

Blossom makes it easy to add complex business logic to websites, and


simplifies integration with back-office business systems and third-party
services. By enabling developers to combine their existing knowledge of the
Spring Framework with the enterprise-grade content management features
of Magnolia CMS, Blossom reduces the overall time, cost and risk of
development.

14

Spring Enterprise Content Management with Blossom

Magnolia CMS

More Information
!
Useful Links

See a screencast of Blossom in action


Get started quickly with a Blossom tutorial
Understand Blossoms internals in the Blossom documentation
Visit http://magnolia-cms.com/blossom for more resources
Subscribe to the Magnolia CMS forums and newsletter
Follow @magnolia_cms on Twitter and like us on Facebook

Contact Us

!
Head Office

North, Central and South America

Magnolia International Ltd.


St.Johanns-Vorstadt 38
4056 Basel
Switzerland

Magnolia Americas, Inc.


168 SE 1st Street
Suite 1007
Miami, FL 33131
United States of America

+41 61 228 90 00
info@magnolia-cms.com

+1 (305) 267-3033
info-us@magnolia-cms.com

Spain

Czech Republic

Magnolia Espaa Software and


Computer Applications S.L.
Paseo de la Castellana 153, bajo,
28046 Madrid
Espaa

Magnolia Software & Services CZ


s.r.o.
Chobot 1578
76701 Krom
esk Republika

+34 66 263 43 36
info-es@magnolia-cms.com

+420 571 118 715


info-cz@magnolia-cms.com

15

Spring Enterprise Content Management with Blossom

Magnolia CMS

Legal Notices
!
Copyright

Magnolia International Ltd. 2014


Some rights reserved. This work is licensed under a Creative
Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.

Trademarks
Magnolia, the Pulse, the Magnolia word mark and the trinity icons are
trademarks of Magnolia International Ltd. All other trademarks are the
property of their respective owners.

Attribution
Code Font: Anonymous Pro Minus by Mark Simonson
Worker designed by James Fenton from The Noun Project
Database designed by Ed Jones from The Noun Project
Document designed by Timur Zima from The Noun Project
Video Game Controller designed by Michael Rowe from The Noun Project

16

You might also like