Magnolia 6.1 reached end of life on March 31, 2021. This branch is no longer supported, see End-of-life policy.

Page tree
Skip to end of metadata
Go to start of metadata

This page describes the function of a widgetset, widgetset types provided by Magnolia and how you can use a custom widgetset.

Widgetset basics

A Vaadin WidgetSet is a GWT module that ties together client side component implementations used by a particular Vaadin application. It is the part of the client side terminal that creates components from UIDL messages generated by the server side. (WidgetSet – Vaadin)

Things important to know about widgetsets:

  • In any GWT or Vaadin application, there can be only one widgetset. Since Magnolia's admin UI is a Vaadin application, Magnolia can have only one widgetset. Therefore, it should inherit all the widgetsets you intend to use.
  • A custom widgetset for Magnolia must always inherit Magnolia's default info.magnolia.widgetset.MagnoliaWidgetSet or any other widgetset which inherits from it.
  • A widgetset must always be GWT-compiled before you run your Web application, and it has to be recompiled every time the client-side code changes or when you add a new Vaadin add-on.

For further information about Vaadin client-side development and ways to compile the widgetset, see the Book of Vaadin or the GWT project website.

Magnolia widgetsets

Magnolia provides the following widgetsets:

IdentifierDescriptionProvided by the module
info.magnolia.widgetset.MagnoliaWidgetSetDefault Magnolia widgetset for CE bundlesmagnolia-vaadin-widgetset
info.magnolia.widgetset.MagnoliaProWidgetSetDefault Magnolia widgetset for DX Core bundlesmagnolia-vaadin-widgetset-pro

In contrast to MagnoliaWidgetSet , MagnoliaProWidgetSet contains the client widget code for personalization and content editor modules. If you do not rely on these modules, you can use MagnoliaWidgetSet .

Setting the widgetset property

The widgetset you intend to use has to be defined per webapp with the magnolia.ui.vaadin.widgetset  property. Change the following entry in
 {your-webapp}/src/main/webapp/WEB-INF/config/default/ :

For CE bundles:

For DX Core bundles:

Preconfigured Magnolia webapps and bundles typically already come with a proper widgetset configuration.

Using a custom widgetset

To add custom widgets or Vaadin addons to your Magnolia app, you need to provide a new widgetset. This means that you need to compile the new widgetset and configure Magnolia to use it.

Your custom widgetset must inherit from a Magnolia's widgetset.

Once your widgetset has been compiled, tell Magnolia to use it by setting the  magnolia.ui.vaadin.widgetset property accordingly. The expected value is a widgetset-qualified name in the format that Vaadin expects, without the .gwt.xml extension, for example some.vaadin.package.SomeWidgetset .

A recommended setup

  1. The default Magnolia Vaadin widgetset is extracted out of the Magnolia UI project to its own module. 
  2. This module is brought in as a dependency of the bundle. 

There are two key reasons for doing that:

  • Any of our Magnolia modules may bring its own client-side code or additional Vaadin add-ons.
  • We isolate the resource-intensive GWT compilation to a dedicated maven module, hence no longer affecting build time and stability of the Java code base.
    • The resulting module only consists of two files: the widgetset.gwt.xml file and the maven pom — with appropriate settings for the vaadin-maven-plugin.

What this means for your project is that you can leverage the exact same approach to integrate Magnolia's default widgetset with your custom client-side widgets or Vaadin add-ons. This helps keep your dependencies and client-side code in the modules where they belong, while giving you more flexibility to integrate third-party modules along the way.

  • No labels