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.MagnoliaWidgetSetor 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 |
|---|---|---|
|
Default Magnolia widgetset for CE bundles |
|
|
Default Magnolia widgetset for DX Core bundles |
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.MagnoliaWidgetSetFor DX Core bundles:
magnolia.properties
magnolia.ui.vaadin.widgetset=info.magnolia.widgetset.MagnoliaProWidgetSetPreconfigured 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
-
The default Magnolia Vaadin widgetset is extracted out of the Magnolia UI project to its own module.
-
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.