User interface frameworks - 5 UI

Deprecated

These user interface frameworks are based on the deprecated Vaadin 7, which has been replaced with Vaadin 8 since Magnolia 6.0. They are part of the Magnolia 5 UI framework.

The updated implementations are used as transitive dependencies of Vaadin 8. For Vaadin 8 data binding, see Data source definition and Item providers instead.

Magnolia uses a number of third party user interface frameworks. We use them in order to create a stable but flexible framework using recent innovations.

Google Web Toolkit

Google Web Toolkit (GWT) is a user interface framework for the Web that uses an object oriented approach by taking advantage of the Java programming language. The Java source is compiled to JavaScript and run in the browser. Not all specifications from GWT have been used in Magnolia. Instead, Magnolia uses variations of GWT implementations, in particular for providing bookmarking functionality.

Vaadin

Vaadin is a Java Web application framework for rich and interactive applications that run in the browser. Vaadin user interfaces are modeled with components and run on the server with a corresponding component graph displayed in the browser. The client side components are implemented in GWT and communicate with the server in response to user actions.

Do I need to know Vaadin?

You can get far without knowing anything about Vaadin. The Magnolia app framework allows you to configure an app, add the app to the launcher, define components and more. But once you have done that and your app launches, it needs to do something useful. You must fill the blank space in your app with Vaadin components.

Read the Book of Vaadin to get started.

Where is Vaadin used?

Vaadin elements are used by many Magnolia components directly. A number of Magnolia specific elements have also been implemented specifically for app development.

Simple fields such as Text are Vaadin fields. The factory class of the field creates a Vaadin TextField directly.
Tree and list views use Vaadin Table and TreeTable.
Thumbnail view uses a Vaadin data Container.
Dialogs use Vaadin Panels.
Image editor uses a Vaadin Image.
Context menu uses a Vaadin ContextMenu.
etc.

Sass

Syntactically Awesome Stylesheets (Sass) is a Cascading Style Sheets (CSS) metalanguage that is interpreted into CSS. SassScript is the scripting language itself. Sass uses block formatting similar to that of CSS. Braces are used to denote code blocks, while semicolons separate lines within a block. Magnolia uses the .scss syntax which is the more common one.

Feedback

DX Core