Page History
...
Table of Contents | ||
---|---|---|
|
Configuration
New config nodes
magnolia.properties
New entries in magnolia-empty-webapp/src/main/webapp/WEB-INF/config/default/magnolia.properties:
...
Code Block | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
# Change to point at your custom Vaadin widgetset and theme
# Your widgetset should always inherit magnolia's default widgetset ( | ||||||||
Advanced Tables - Table Plus | ||||||||
| ||||||||
Node name | Value | |||||||
modules | ||||||||
ui-admincentral | ||||||||
config | ||||||||
widgetset | ||||||||
Paragraph | ||||||||
theme | ||||||||
Paragraph | admincentral |
New definitions
) # Your theme should always include magnolia's default theme (admincentral) magnolia.ui. |
...
WidgetsetDefinition
ThemeDefinition
ConfiguredWidgetsetDefinition
ConfiguredThemeDefinition
New class
vaadin.widgetset=info.magnolia.ui. |
...
AdmincentralUIProvider
Widgetset structure
git repo | groupId | artifactId | Widgetset name (.gwt.xml) | gwt:compiled | comments | |
---|---|---|---|---|---|---|
EE | ee-bundle | info.magnolia.eebundle | magnolia-enterprise-bundle-widgetset | info.magnolia.eebundle.MagnoliaEnterpriseBundleWidgetSet | check for 5.1 EE | |
enterprise / content-dependencies | info.magnolia.dependencies | magnolia-content-dependencies-widgetset | info.magnolia.dependencies.ContentDependenciesWidgetSet | just here as a ee module example | ||
CE | ce-bundle | info.magnolia.bundle | magnolia-bundle-widgetset | info.magnolia.bundle.MagnoliaBundleWidgetSet | replaces MagnoliaWidgetSet (5.0) - integration and compiler options | |
modules / dam | info.magnolia.dam | magnolia-dam-widgetset | info.magnolia.dam.DamWidgetSet | just here as a ce module example | ||
magnolia_ui / pages | info.magnolia.pages | magnolia-pages-widgetset | info.magnolia.pages.PagesWidgetSet | replaces PageEditorWidgetSet (5.0) | ||
UI | magnolia_ui | info.magnolia.ui | magnolia-ui-widgetset | info.magnolia.ui.MagnoliaUiWidgetSet | replaces CommonWidgetSet (5.0) | |
magnolia_ui / magnolia-ui-widgetset | info.magnolia.ui.vaadin | magnolia-ui-vaadin-table | info.magnolia.ui.vaadin.TableWidgetSet | extracted from CommonWidgetSet (5.0) | ||
magnolia_ui / magnolia-ui-widgetset | info.magnolia.ui.vaadin | magnolia-ui-vaadin-contextmenu | info.magnolia.ui.vaadin.ContextMenuWidgetSet | extracted from CommonWidgetSet (5.0) | ||
magnolia_ui / magnolia-ui-actionbar | info.magnolia.ui.actionbar | magnolia-ui-actionbar-widgetset | info.magnolia.ui.actionbar.ActionBarWidgetSet | just here as examples for further ui modularization | ||
magnolia_ui / magnolia-ui-mediaeditor | info.magnolia.ui.mediaeditor | magnolia-ui-mediaeditor-widgetset | info.magnolia.ui.mediaeditor.MediaEditorWidgetSet | |||
RAW | magnolia-vaadin-widgetset | info.magnolia.vaadin.widgetset | magnolia-vaadin-widgetset | info.magnolia.vaadin.MagnoliaWidgetSet | M5-agnostic vaadin components - not for now |
Theme structure
-
Implementation details
- Changing widgetset/theme config currently requires a server restart
- most likely AdmincentralUIProvider injected instance in servlet is not refreshed when module configuration changes
- don't store definition references, only module reference and query dynamically for configured definitions
- Is configuration really where we want widgetset config to be?
- Since developers should now use their widgetset extending ours
- Currently they would startup, change widgetset name in config, then restart
- e.g. magnolia / project.properties, module descriptors?
- ee-bundle might need to configure default widgetset differently too
Review 2013.08.29
...
- Should we do it as a guideline?
- It's helpful for others
- or through an archetype?
...
- full-fledged gwt compilation in bundle build
- we split this out
- depends on ui, modules
- is depended upon by bundle
- we use profiles, or subset of the reactor
...
- it's better if it's one significant step, but it may well require too much time vs. 5.1 stories
- widgetset/theme in configuration is in master but was not released (except in 5.1-alpha1)
- We now want to use magnolia properties instead
- We now want to use magnolia properties instead
vaadin.gwt.MagnoliaWidgetSet
magnolia.ui.vaadin.theme=admincentral |
AdmincentralUIProvider
Package: info.magnolia.ui.admincentral
This is a custom Vaadin UIProvider. It gets the MagnoliaConfigurationProperties via injection, and checks for property values when queried for widgetset or theme. Vaadin's DefaultUIProvider can only resolve widgetsets and themes either from servlet parameters or via annotation.
Most magnolia property keys are defined as constants in the SystemProperty
deprecated class. For these new properties, we keep the keys where we use them, i.e. in the AdmincentralUIProvider.
Code Block | ||||
---|---|---|---|---|
| ||||
public static final String WIDGETSET_PROPERTY_KEY = "magnolia.ui.vaadin.widgetset";
public static final String THEME_PROPERTY_KEY = "magnolia.ui.vaadin.theme"; |
It also holds fallback default values in case widgetset and theme cannot be determined:
Code Block | ||||
---|---|---|---|---|
| ||||
public static final String DEFAULT_WIDGETSET = "info.magnolia.ui.vaadin.gwt.MagnoliaWidgetSet";
public static final String DEFAULT_THEME = "admincentral"; |
Custom widgetset
1. Widgetset fundaments
In order to add custom widgets or Vaadin addons to your Magnolia app, you need to provide a new Widgetset.
Like for any GWT application, there can be only one Widgetset, therefore it should inherit all the Widgetsets you intend to use; in particular it must always inherit Magnolia's default widgetset (identified as info.magnolia.ui.vaadin.gwt.MagnoliaWidgetSet).
Finally, a widgetset must always be GWT-compiled before you run your Web application, and it will have to be recompiled every time the client-side code changes, or when you add that fancy Vaadin addon.
For further information about Vaadin client-side development, or about ways to compile the Widgetset,GWT compilation, please refer to the Book of Vaadin, or the GWT project website.
2. Using a custom widgetset in Magnolia
Once your widgetset is compiled, you may now tell magnolia to use it by editing your webapp's magnolia properties, and setting the key magnolia.ui.vaadin.widgetset.
The expected value is a widgetset qualified name as Vaadin expects it, without the .gwt.xml extension, e.g. some.vaadin.package.SomeWidgetset.
Custom app styles
1. Vaadin themes
Module styles are provided as Vaadin themes, generally using Sass.
Like for any Vaadin application, there can be only one Vaadin theme per Vaadin UI (i.e. Magnolia's AdmincentralUI). Therefore it should include all the other themes you intend to use; in particular it must always include Magnolia's default admincentral theme.
Sass themes offer the advantage of being composed from several other Vaadin themes, through Sass mixins. They are ultimately compiled and served as one big chunk of CSS.
For more information on Vaadin themes or Sass, you may refer to the Book of Vaadin or the Sass website.
2. Using custom styles in your Magnolia app
You can already use custom styles in your Magnolia app, by adding a theme property to your app descriptor, see App theme. However in some cases, you need the styles to be loaded without starting the app (e.g. custom dialog, custom message view).
In that case, once you have your Sass theme ready (includes the admincentralmixin and your custom styles), you may now tell magnolia to use it by editing your webapp's magnolia properties, and setting the key magnolia.ui.vaadin.theme.
The expected value is a theme name as Vaadin expects it, i.e. the name of the theme folder under src/main/resources/VAADIN/themes.
...