| This page covers the changes in Magnolia 6 UI as accumulated over Magnolia releases 6.0, 6.1.x and 6.2.x. |
Summary
Magnolia UI 6.x comes with a completely resurfaced UI featuring the newFind Bar at its core. We have also rewrittenselect parts of the UI framework, particularly the content appframework. We generally adhere to the same concepts as before, but wehave developed better implementations by usingVaadin 8.
The new implementations simplify app mechanics and configuration and useless custom Vaadin code, thus enabling cleaner and faster customization.
Magnolia UI 6.x contains both the UI framework used in Magnolia 5.7(referred to as Magnolia 5 UI) and the Magnolia 6 UI framework. Youcan use:
Magnolia 5 UI components as well as your custom components andmodules that rely on the previous Magnolia UI. We providebackward compatibility at both runtimeand compile-time levels.
New Magnolia 6 UI implementations.
All UI components from both implementations are rendered with the newresurfaced theme design.
| A large number of classes have been replaced or deleted, with manydefinition converters introduced for easier migration. Seechanges-in-magnolia-6-ui.csv for a full list of changes. |
Apps configured in the new App Launcher layout will cause entries to appear in the log. To keep the log tidy, we recommend adjusting your App Launcher layout configuration and removing any apps you don’t use. |
Why we have changed things
The main reasons for rewriting some of the UI components include:
Replacing the deprecated Vaadin 7 with Vaadin 8 (classes andframeworks)
Developing new implementations that are more component-driven so thatthe components are easier to reuse
Decreasing the amount of custom front-end (GWT) code and instead usingthe new stock Vaadin
Simplifying app mechanics and configuration
The resulting implementations are easier to maintain for us and cleanerand faster to customize for you.
What is preserved
In Magnolia UI 6.2, the functions and frameworks known from version 5.7and earlier remain. By preserving class names and Magnolia module names,we keep runtime backward compatibility ofcustom modules with custom classes extending Magnolia classes.
Class names
Class and package names of the classes existing in Magnolia 5.7 have notchanged and are still available in Magnolia UI 6.2. You can use theseclasses or extend them in your custom code.
Magnolia module names
A Magnolia module defines dependencies toother Magnolia modules and many other tasks. A Magnolia module can bedefined with one file (i.e.a moduledescriptor). The Magnolia module descriptors of the UI project residein Maven modules.
In Magnolia UI 6.2, no Magnolia module has been removed. The names ofthe Magnolia modules are still the same.
All previously known Magnolia modules still exist with the same name andprovide the same functions. However, the module descriptor filesdefining those Magnolia modules may have been relocated due tochanges in the composition of the Maven modules.
The magnolia-ui-framework-compatibility Maven module contains themodule descriptors for the ui-contentapp and ui-framework Magnoliamodules. The magnolia-ui-framework Maven module defines the newui-framework-core Magnolia module.
What has changed
Look and feel
With Magnolia 6.x, the whole UI has been resurfaced to provide a modern,state-of-the-art user experience. At its core, the UI features the newFind Bar. All components ofMagnolia 5 UI and Magnolia 6 UI are renderedusing the new resurfaced theme design.
Maven modules
From Magnolia 5.7 and earlier, seven Maven modules have been removed.The classes of these modules are not lost. Instead, they have beenrelocated to the new magnolia-ui-framework-compatibility module or tothe still existing magnolia-ui-framework module. New implementationshave been added to the new magnolia-ui-framework-jcr module.
Removed Maven modules
magnolia-ui-actionbarmagnolia-ui-contentappmagnolia-ui-dialogmagnolia-ui-formmagnolia-ui-imageprovidermagnolia-ui-vaadin-integrationmagnolia-ui-workbench
| We have createdMavenrelocations for these modules. This ensures backward compatibility forcompile-time dependencies. |
Added Maven modules
magnolia-ui-framework-jcr<dependency> <groupId>info.magnolia.ui</groupId> <artifactId>magnolia-ui-framework-jcr</artifactId></dependency>
magnolia-ui-framework-compatibility<dependency> <groupId>info.magnolia.ui</groupId> <artifactId>magnolia-ui-framework-compatibility</artifactId></dependency>
Features
Magnolia UI 6.2 brings, among others, the following new features:
Resurfaced design of the admin interface
Integrated Find Bar
Simplified app definition
Improved back-end data binding
datasourcereplacingcontentConnectorfor apps and subappsFlexible and versatile provisioning of data source components(
DataProvider,PropertySet, etc.)Clear and reusable data source observation mechanism
DataProviderreplacingContainerWorks with domain objects (for example, JCR nodes) instead of items
PropertySetreplacingItemDescribes how to interact with domain objects to access/modify theirproperties via lambda functions
Flexible form definition
Simplified field API
Ability to define complex fields using form definitions
Separation of binding and logic
Custom layout support for forms
Generic field definition
Better compatibility with the new, more type-safe Vaadin data-bindingAPIs
What are the Magnolia 6 and Magnolia 5 UI frameworks
The Magnolia UI project version 6.x contains both the UI framework usedin Magnolia 5.7 (referred to as Magnolia 5 UI) and the Magnolia 6 UIframework. You can use either framework.
Magnolia 5 UI
In Magnolia 6, Magnolia 5 UI has been relocated to themagnolia-ui-framework-compatibility module. Many Magnolia apps stillrely on this old framework. The fully qualified class names have notchanged, which ensures runtime compatibility for older custom componentsbased on the classes from the Magnolia 5 UI framework.
Magnolia 6 UI
In the Magnolia 6 UI framework, the core components of the UI arelocated in the magnolia-ui-framework module inherited from Magnolia5.7. The new magnolia-ui-framework-jcr module is also part ofMagnolia 6 UI.
UI modules
For more information on the Magnolia 6 UI modules, refer toUI module.
Backward compatibility
The API changes are marginal. We provide backward compatibility at bothruntime and compile-time levels.
Runtime compatibility
All classes from Magnolia UI 5.7 are also available in Magnolia UI 6.2.They have kept their fully qualified class names, which provides binarycompatibility. Compiled custom modules (JAR files) built with Magnolia5.7 also work in Magnolia 6.2 with the 6.2 UI.
Magnolia Maven module names are still the same. You do not have tochangeMagnoliamodule dependencies.
The binary compatibility together with the same-named Magnolia modulesensures runtime backward compatibility.
Compile-time compatibility
Module and submodule structures have been reorganized (seemodule changes). We have createdMavenrelocations for the removed modules. This ensures that you do not haveto update the Maven module dependencies within the custom modules thatdepend on Magnolia UI modules.
How to upgrade
Make sure you upgrade your entire Magnolia bundle, not just the UImodules.
For general information on upgrading your Magnolia projects, readUpgrading to Magnolia 6.2.
With Maven
Make sure to set the version for the Magnolia UI project to 6.2.
In your bundle(s)
If you have a custom bundle based on a preconfigured Magnolia bundle,set the magnoliaBundleVersion property to 6.2. The Magnolia bundlewill manage the UI version accordingly. For an example, seeUpgrading Maven-managed webapps.
In custom modules
The composition of the submodules of the UI project has changed. Somemodules have been removed, and their classes have been relocated to themagnolia-ui-framework-compatibility module. See Maven modules.
| Since we have createdMavenrelocations for the removed modules, you do not have to change thedependencies to them within your custom modules. |
However, to reflect the actual dependencies and to improve thereadability of your POM files, you may want to replace the dependenciesto the removed modules with the new compatibility module:
Remove all dependencies from these Maven modules:
magnolia-ui-actionbarmagnolia-ui-contentappmagnolia-ui-dialogmagnolia-ui-formmagnolia-ui-imageprovidermagnolia-ui-vaadin-integrationmagnolia-ui-workbench
Instead, add a dependency to
magnolia-ui-framework-compatibility.
Manually
If you choose to do this manually, make sure you upgrade the entirebundle and not just the UI modules. Please follow the instructions inUpgrading manually.
Status
The following apps make use of the improved implementations(compatibility modules exist for their old implementations):
Assets
Definitions
Notifications
Pages
Personas
Preview
Resource Files
Segments
Tags
Tasks
Note that most of the other apps still rely on the old implementations.We will adapt them soon.
Magnolia 6.2 UI modules
Here is a list of all modules in version 6.2 of the Magnolia UI project. The list includes both the Maven modules and the Magnolia modules.
| The Magnolia module column refers to the Magnolia module that belongs to the given Maven submodule. |
Maven
| Function | Magnolia module | ||
| Parent reactor | n/a | ||
| The primary module/SDK for Magnolia app development
|
| ||
| This defines some core components for the UI such as:
| n/a | ||
| JCR implementation of the Magnolia 6 UI framework |
| ||
| Magnolia 6 Vaadin theme based on Valo. | |||
| Magnolia custom Vaadin/GWT components and extensions
| n/a | ||
| Magnolia 6 UI Media Editor |
| ||
Magnolia stock apps | ||||
| JCR browser app |
| ||
| Sample app |
| ||
Magnolia 5 compatibility | ||||
| This module brings support for running Magnolia 5 content apps inMagnolia 6. In particular, it contains former Magnolia 5 content-app components suchas the workbench, forms and dialogs or image provider. It also providesJCR implementations of the deprecated Vaadin 7 Data API (for example,
|
| ||
| Magnolia 5 Vaadin theme. | n/a |
Related topics
Releases
Upgrading to Magnolia 6.2
Migratingan app to Magnolia 6 UI
UI module
