Magnolia widgetsets

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:

Identifier Description Provided by the module

info.magnolia.widgetset.MagnoliaWidgetSet

Default Magnolia widgetset for CE bundles

magnolia-vaadin-widgetset

info.magnolia.widgetset.MagnoliaProWidgetSet

Default Magnolia widgetset for DX Core bundles

magnolia-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/magnolia.properties :

For CE bundles:

magnolia.properties

magnolia.ui.vaadin.widgetset=info.magnolia.widgetset.MagnoliaWidgetSet

For DX Core bundles:

magnolia.properties

magnolia.ui.vaadin.widgetset=info.magnolia.widgetset.MagnoliaProWidgetSet

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.

  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.

Feedback