UI module

DEVELOPER PREVIEW

The Magnolia UI module is responsible for the user interface of the Magnolia AdminCentral back end. It provides various UI frameworks for other parts of Magnolia such as content apps.

The Magnolia UI project version 6.0 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.

Installing

There is usually no need to install the Magnolia UI project. Every preconfigured Magnolia bundle already contains the required UI submodules. The Magnolia BOM file manages the versions for dependent UI modules.

If you have a custom webapp that is completely independent from any preconfigured Magnolia webapp, here is how you should add the UI project submodules to it:

In your parent pom, import dependency management from the UI project.

your-custom-project/pom.xml (snippet)

<!-- ... -->  
  <properties>
    <magnoliaUiVersion>6.0</magnoliaUiVersion>
    <javaVersion>1.8</javaVersion>
  </properties>

  <dependencyManagement>
    <dependencies>
      <dependency>
        <groupId>info.magnolia.ui</groupId>
        <artifactId>magnolia-ui-project</artifactId>
        <version>${magnoliaUiVersion}</version>
        <type>pom</type>
        <scope>import</scope>
      </dependency>
    </dependencies>
  </dependencyManagement>
<!-- ... -->

In the pom of your webapp, add the UI submodules you rely on. The following is a typical configuration (from the magnolia-empty-webapp):

your-custom-project/my-custom-webapp/pom.xml (snippet)

<!-- ... -->  
<dependencies>
  <dependency>
    <groupId>info.magnolia.ui</groupId>
    <artifactId>magnolia-ui-admincentral</artifactId>
  </dependency>
  <dependency>
    <groupId>info.magnolia.admincentral</groupId>
    <artifactId>magnolia-admincentral</artifactId>
  </dependency>
  <dependency>
    <groupId>info.magnolia.ui</groupId>
    <artifactId>magnolia-resurface-theme</artifactId>
  </dependency>
  <dependency>
    <groupId>info.magnolia.widgetset</groupId>
    <artifactId>magnolia-vaadin-widgetset</artifactId>
  </dependency>
  <dependency>
    <groupId>info.magnolia.security</groupId>
    <artifactId>magnolia-security-app</artifactId>
  </dependency>
  <dependency>
    <groupId>info.magnolia.task</groupId>
    <artifactId>magnolia-tasks-app</artifactId>
  </dependency>
  <dependency>
    <groupId>info.magnolia.about</groupId>
    <artifactId>magnolia-about-app</artifactId>
  </dependency>
  <dependency>
    <groupId>info.magnolia.jcrbrowser</groupId>
    <artifactId>magnolia-jcr-browser-app</artifactId>
  </dependency>
</dependencies>
<!-- ... -->

Module structure

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`	Function	Magnolia module name(s)¹
`info.magnolia.ui` `magnolia-ui-project`	Parent reactor	—
`info.magnolia.ui` `magnolia-ui-framework`	The primary module/SDK for Magnolia app development This provides (among others) the content app framework, IoC support for UI components and scopes, 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). With Magnolia 6.0, Vaadin 8 integration and data binding are provided as a developer preview.	`ui-framework-core`
`info.magnolia.ui` `magnolia-ui-api`	This 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 Magnolia 6 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, and publish content and where administrators configure Magnolia. This module is considered a 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 This module 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 app	`messages-app`
`info.magnolia.sample` `magnolia-sample-app`	Sample app	`sample-app`
`info.magnolia.security` `magnolia-security-app`	Security app	`security-app`
`info.magnolia.task` `magnolia-tasks-app`	Task management app	`tasks-app`
Magnolia 5 compatibility
`info.magnolia.ui` `magnolia-ui-admincentral`	Magnolia 5 AdminCentral Accessible via `/.magnolia/admincentral-m5` for compatibility and migration purposes As of Magnolia 6.0, this module still provides (among others) 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`). 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-vaadin-integration` `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	—

¹⁾ Magnolia modules that belong to the given Maven submodule

Switching to the 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 "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.

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.

Page tree

UI module

Installing

Module structure

Switching to the Magnolia 5 legacy UI