magnolia tech brief spring enterprise content management with blossom

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 2

Introduction 3

Audience 3

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

Solution: Magnolia CMS with Blossom 4

Key Features 5

Benefits 6

Key Concepts for Developers 6

Templates 8

Controller Annotations 9

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

2


Introduction !

T 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 built-in 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.

3


No enterprise Content Management System (CMS), no matter how forward-thinking, 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 multi-channel 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.

4


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. Here’s a small sample of what Blossom offers.

Blossom = Spring Framework + Magnolia CMS

!Features from Spring Features From Magnolia CMSDependency Injection: Loose coupling between application components and improved testability.

Spring MVC: A Model-View-Controller 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 Spring-based solutions for common development needs, reducing the need to write your own.

Java Stack Power: Built on the best of the Java stack, giving developers with a familiar, robust environment.

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: Built-in content versioning and staging with rollback to earlier versions of a page.

Workflows: jBPM-based workflows for modeling and enforcing content management processes.

5


Benefits !

Blossom offers benefits for both developers and enterprises.

!!!!!!!!!!!!!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.

TYPICAL MVC REQUEST/RESPONSE

For Developers For Enterprises• Use MVC-style loose coupling

and test-driven development for 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

• 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

6

REQUEST CONTROLLER MODEL VIEW


In a typical CMS, requests are first mapped to content. The content is assigned to templates, which take care of rendering it.

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.

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.

!

7

REQUEST CONTENT TEMPLATE

REQUEST CONTENT TEMPLATE

CONTROLLER

MODEL

VIEW


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 the page and they contro l what components can be placed inside each area.

• Areas contain zero or more components. 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.

8

COMPONENT

COMP.

COMP.

COMPONENT

COMP.

COMPONENT

COMP.

PAGE AREA

AREA AREA


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.

! 9

@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


Components are controllers annotated with @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. !

@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

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


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.

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.

Blossom’s 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.

@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

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


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.

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

MAGNOLIA CMS ARCHITECTURE


Case Study !

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 Ticket’s growing transaction volumes. Blossom gave Ticket the ability to deliver dynamic content through numerous integrations with third party services and partner organizations.

“ With Magnolia CMS Enterprise Edition, we have the foundation we need to deliver innovative solutions to our leisure travel clients. Magnolia’s 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.

We’re 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 Sjögren Petrini, Vice President, Ticket Leisure Travel

13


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


More Information !Useful Links

!• See a screencast of Blossom in action • Get started quickly with a Blossom tutorial• Understand Blossom’s 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 !Magnolia International Ltd. St.Johanns-Vorstadt 38 4056 Basel Switzerland !+41 61 228 90 00 [email protected]

North, Central and South America !Magnolia Americas, Inc. 168 SE 1st Street Suite 1007 Miami, FL 33131 United States of America !+1 (305) 267-3033 [email protected]

Spain !Magnolia España Software andComputer Applications S.L.Paseo de la Castellana 153, bajo,28046 MadridEspaña!+34 66 263 43 [email protected]

Czech Republic !Magnolia Software & Services CZ s.r.o. Chobot 1578 76701 KroměřížČeská Republika !+420 571 118 715 [email protected]

15


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

magnolia tech brief spring enterprise content management with blossom

Documents