This documentation is still in progress. We are working hard to update all our screenshots to the new Magnolia 6 style. Please bear with us.

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

DEVELOPER PREVIEW

This page informs about the changes in version 6.0 of the Magnolia UI project released with Magnolia 6.0.

The Magnolia UI 6.0 project is currently available as a Developer Preview. The full version is still under development.

To provide backward compatibility, it contains all previously existing classes. It also delivers refactored frameworks and new functions. Please try it out and feel free to send us your feedback and suggestions based on your experience.

We are working to finalize the module as soon as possible.


Summary

Magnolia UI 6.0 comes with a completely resurfaced user interface (UI) featuring the new Find Bar in its core. In addition this we have also rewritten selected parts of the UI framework, particularly the content-app framework. We generally adhere to the same concepts as before but we have developed better implementations of the concepts by utilizing the power and the improvements of Vaadin 8.

The new implementations simplify app mechanics and configuration, use less custom Vaadin code, thus enabling cleaner and faster customization.

Version 6.0 of the Magnolia UI contains both the "old" implementations known from Magnolia 5.7 and the new implementations. You can:

  • Use the old components as well as your custom components and modules that rely on the previous Magnolia UI. We provide backward compatibility both at runtime and compile time levels.
  • Utilize the new implementations.

All UI components from both implementations are rendered with the new resurfaced theme design.

Why we have changed things?

Here are the main reasons for rewriting some of the UI components:

  • Replacing Vaadin 7 (deprecated) with newer Vaadin 8 classes and frameworks.
  • The new implementations are more component-driven and hence making the reusability of components easier.
  • Decreasing the amount of custom front-end (GWT) code and instead utilizing the new stock Vaadin.
  • Simplifying apps' mechanics and configuration.

The resulting implementations are easier to maintain for us and cleaner and faster to customize for you.

What is preserved

In version 6.0 we preserve the functions and frameworks known from version 5.7 and earlier. By keeping class names and Magnolia module names we keep runtime backward compatibility of custom modules with custom classes extending Magnolia classes. 

Class names

Class and package names of the classes existing in Magnolia 5.7 have not changed and are also available in 6.0. You can still use these classes or extend them in your custom code.

Magnolia module names

A Magnolia module defines dependencies to other Magnolia modules and many other tasks. A Magnolia module can be defined with one file, with the Module descriptor. The Magnolia module descriptors of the UI project reside in Maven modules.

In version 6.0 we have not removed any Magnolia module. The names of the Magnolia modules have been preserved.

All previously known Magnolia modules still exist with the same name and are providing the same functions. However, the Module descriptor files defining those Magnolia modules may have been relocated due to the changes in the composition of the Maven modules.

The magnolia-ui-framework-compatibility Maven module contains the module descriptors for the ui-framework, ui-contentapp and ui-mediaeditor Magnolia modules. The magnolia-ui-framework Maven module defines the new ui-framework-core Magnolia module.

What has changed

Look and feel

The whole UI has been resurfaced to provide a modern, state-of-the-art user experience. In its core the UI features the new Find Bar. All components of the UI from both the old and the new implementations are rendered using the new resurfaced theme design.

Magnolia 5 legacy UI

How to use the legacy Magnolia 5 UI in 6.0

If you want to access Magnolia 6.0 with the legacy 5.x look and feel, add a -m5 suffix to your instance URL after the word admincentral. For example:

http://localhost:8080/magnoliaAuthor/.magnolia/admincentral-m5

This is a useful workaround if you have display issues with custom apps for example.

(warning) Note that this legacy UI mode is not fully functional and will not be supported indefinitely. Please make sure you let us know how we can improve the 6.0 UI so that we can fix any issues properly.

Maven modules

Compared to 5.7 and earlier versions we have removed five Maven modules. The classes of these modules are not lost but relocated to the new magnolia-ui-framework-compatibility module or to the still existing  magnolia-ui-framework module. New implementations have been added to the new module magnolia-ui-framework-jcr.

Maven modules removed

  • magnolia-ui-actionbar
  • magnolia-ui-contentapp
  • magnolia-ui-dialog
  • magnolia-ui-form
  • magnolia-ui-imageprovider
  • magnolia-ui-mediaeditor
  • magnolia-ui-workbench

(info) We have created Maven relocations for these modules. This ensures backward compatibility for compile-time dependencies.

New Maven modules added

  • magnolia-ui-framework-jcr

     Maven dependency snippet

    <dependency>
      <groupId>info.magnolia.ui</groupId>
      <artifactId>magnolia-ui-framework-jcr</artifactId>
    </dependency>
    

  • magnolia-ui-framework-compatibility

     Maven dependency snippet

    <dependency>
      <groupId>info.magnolia.ui</groupId>
      <artifactId>magnolia-ui-framework-compatibility</artifactId>
    </dependency>
    

Features

What are some of the new features the 6.0 UI brings?

  • Resurfaced design of the admin interface.
  • Integrated Find Bar.
  • Improved back-end data binding:
    • dataSource replacing the contentConnector for subapps.
  • Forms:
    • Simplified field API.
    • Separation of binding and logic.
    • Non-JCR data source friendliness.
    • Custom layout support for forms.
  • And more.

New and "old" ui framework

Version 6.0 of the Magnolia UI contains both the "old" implementations known from Magnolia 5.7 and the new implementations. You can use them both.

The old UI framework

The UI framework Implementation classes known from Magnolia 5.7 (and earlier) have been relocated to the new  magnolia-ui-framework-compatibility Maven module and can still be used. Many Magnolia apps still rely on them.

The new UI framework

Version 5.7 of the UI already contained the module named magnolia-ui-framework, which is available also in version 6.0. In its current version it contains the framework foundation.

magnolia-ui-framework

The primary module/SDK for Magnolia app development.

Among others it contains the content app framework, IoC support for UI components & scopes, Vaadin 8 data-binding facilities and UI view/state management.

magnolia-ui-framework-jcr

JCR implementation of the new UI framework (Developer preview)

Backward compatibility

The API changes are marginal. We provide backward compatibility at both the runtime and the compile time levels.

Runtime compatibility

All classes which existed in version 5.7 of the Magnolia UI are also present in version 6.0, and they have kept their fully qualified class names. This provides binary compatibility. Compiled custom modules (.jar files) built with Magnolia 5.7 also work on Magnolia 6.0 with the 6.0 UI. 

Magnolia Maven module names have been preserved. You do not have to change the Magnolia module dependencies.

The binary compatibility together with the preservation of the Magnolia module names ensures runtime backward compatibility.

Compile-time compatibility

Module and submodule structures have been reorganized, see module changesWe have created  Maven relocations for the removed modules. This makes sure that you do not have to update the Maven module dependencies within your custom modules that depend on Magnolia UI modules.

How to update

Upgrade your complete Magnolia bundle, not just the UI.

For general information about updating your Magnolia projects please read Upgrading to Magnolia 6.0.x .

With Maven

Make sure to set the version for the Magnolia UI project to 6.0.

In your bundle(s)

If you have a custom bundle based on a preconfigured Magnolia bundle, set the magnoliaBundleVersion property to 6.0. The Magnolia bundle will manage the UI version accordingly. Also, read Upgrading to Magnolia 6.0.x - Maven managed webapps, which provides an example.

In custom modules

The composition of submodules of the UI project has changed. Some modules have been removed and their classes relocated to the magnolia-ui-framework-compatibility module. See What has changed - Maven modules.

(info) Since we have created Maven relocations for the removed modules, you do not have to change the dependencies to them within your custom modules.

However, to reflect the real dependency situation and to improve the readability of your pom files, you may want to replace the dependencies to the removed modules with the new compatibility module:

  1. Remove all dependencies to these Maven modules:
    • magnolia-ui-actionbar
    • magnolia-ui-contentapp
    • magnolia-ui-dialog
    • magnolia-ui-form
    • magnolia-ui-imageprovider
    • magnolia-ui-mediaeditor
    • magnolia-ui-workbench


  2. Instead, add a dependency to magnolia-ui-framework-compatibility.
    <dependency>
      <groupId>info.magnolia.ui</groupId>
      <artifactId>magnolia-ui-framework-compatibility</artifactId>
    </dependency>
    

Manually

If updating manually, make sure you upgrade the complete bundle and not only the UI modules. Please follow the instructions on Upgrading to Magnolia 6.0.x - Updating manually.

Status

  • A few of our apps make use of the improved implementations:
    • Messages app
    • Tasks
  • Most of the other apps still rely on the old implementations. We will adapt them soon.

Complete list of submodules

Here is a list of all modules in version 6.0 of the Magnolia UI project. The list includes both the Maven modules and the Magnolia modules. 

Maven

groupId

artifactID

FunctionMagnolia module name(s)1

info.magnolia.ui

magnolia-ui-project

Parent reactor

info.magnolia.ui

magnolia-ui-framework

The primary module/SDK for Magnolia app development.

It provides – among others – the content app framework, IoC support for UI components & scopes, as well as Vaadin 8 data-binding facilities and UI view/state management.

It also offers convenience builders for selected Magnolia UI components, for example alerts and dialogs.

(info) With Magnolia 6.0, the Vaadin 8 integration & data-bindings are provided as a Developer Preview.

ui-framework-core

info.magnolia.ui

magnolia-ui-api

Defines some core components for the UI such as Action, App, SubApp, Message and others.

info.magnolia.ui

magnolia-ui-framework-jcr

JCR implementation of the new UI framework (Developer Preview).ui-framework-jcr

info.magnolia.admincentral

magnolia-admincentral

Magnolia 6 Admincentral, an OS-like Web application running Magnolia apps. This is where authors enter, preview, publish content and where administrators configure Magnolia.

(warning) This module is considered private API and may evolve rapidly, without any guarantee of backward/binary compatibility. Developers are encouraged to use what the UI framework offers instead.

admincentral

info.magnolia.ui

magnolia-resurface-theme

Magnolia 6 Vaadin theme, based on Valo.

info.magnolia.ui

magnolia-ui-vaadin-common-widgets

Magnolia's custom Vaadin/GWT components and extensions.

Currently this contains mainly former Magnolia 5 widget implementations. For Magnolia 6, most of the components have been re-implemented with plain Vaadin. Consequently, this module may be split and partially deprecated in any future version.

Magnolia stock apps

info.magnolia.about

magnolia-about-app

About Magnolia app

about-app

info.magnolia.jcrbrowser

magnolia-jcr-browser-app

JCR Browser app

jcr-browser-app

info.magnolia.messages

magnolia-messages-app

Messages appmessages-app

info.magnolia.sample

magnolia-sample-app

Sample appsample-app

info.magnolia.security

magnolia-security-app

Security appsecurity-app

info.magnolia.task

magnolia-tasks-app

Task management apptasks-app
Magnolia 5 compatibility

info.magnolia.ui

magnolia-ui-admincentral

Magnolia 5 Admincentral

Accessible via /.magnolia/admincentral-m5 for compatibility and migration purposes.

(info) As of Magnolia 6.0, it still provides – among other things – the app launcher configuration, login form and user preferences dialog. These may be replaced or relocated to the new magnolia-admincentral module in any future version.

ui-admincentral

info.magnolia.ui

magnolia-ui-framework-compatibility

This module brings support for running Magnolia 5 content apps in Magnolia 6.

In particular it contains former Magnolia 5 content-app components, such as the workbench, forms and dialogs or image provider. It also provides JCR implementations of the deprecated Vaadin 7 Data API, for example JcrNodeAdapter and HierarchicalJcrContainer.

(info) The following Magnolia 5 Maven modules have been relocated to this module:

  • magnolia-ui-actionbar
  • magnolia-ui-contentapp
  • magnolia-ui-dialog
  • magnolia-ui-form
  • magnolia-ui-imageprovider
  • magnolia-ui-mediaeditor
  • magnolia-ui-workbench
  • The Media Editor may be re-instated as part of the ui-framework in any future version.

ui-contentapp

ui-framework

ui-mediaeditor


info.magnolia.ui

magnolia-ui-vaadin-theme

Magnolia 5 Vaadin theme

1) The list of Magnolia modules which belong to the given Maven submodule.

  • No labels

2 Comments

  1. I find the chart at the bottom a little confusing. The third column kind of makes it look like that artifiactId is changing. It might be less confusing if you combined column 1 and column 3.

    1. Thanks for the feedback.

      The whole change is a bit confusing at 1st sight, at least it was for me.
      However, it is also clever and ensures backwards compatibility.

      It is the first time (if I'm not wrong) - having such a table which list both the Maven modules and Magnolia modules. In this context it makes sense imho. And I think it does not make sense to combine col1 and col3.