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:

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.ui.vaadin.widgetset=info.magnolia.widgetset.MagnoliaWidgetSet

For EE bundles:

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 .

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.