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

Create a new app that is basically a list of UI elements available to users.

App label = "UI Showcase".

App configured name = "showcase"


In order of importance

  1. Show app developers what UI elements they have available to them when creating an App.
  2. To have a single place where Magnolia developers can see all of the controls
    1. In order to create a magnolia CSS theme. (And test that CSS changes have not harmed UI element styling)
    2. In order to test the functionality of UI elements
  3. Show app developers how they can instantiate UI elements
    1. By configuration (by which i mean adding all of the elements to a form/dialog)
    2. By code (by which I mean simply adding Vaadin elements to a container)


App Description


The app will have three unclosable tabs (probably a tabsheet)

The app will display as a "SmallApp", a centered area with no actionbar.

Each tab (detailed below) will basically show a vertical list of UI elements. For the Vaadin elements we typically just want to show one version of each control. The Magnolia 5 user interface should always appear consistant across apps - so we dont want people to use many styles of buttons, for instance. They can still do so - but we have one button look that we will show here as a recommendation. Therefore the Vaadin sampler app is not a good foundation for what this app should do.

1) Form Fields

Caption: "The fields available in a Magnolia Form or Dialog. Configurable by repository or code."

Next appears a button "View in Dialog", which shows all of the same fields, but displayed in a dialog.

Next appears all of the fields in a vertical list.

  • Label / StaticField
  • Button (Inside Form)
  • Button (Buttons at the bottom of a dialog (ButtonsForMainActions))
  • Link
  • TextField
  • TextArea
  • Password
  • Checkbox
  • Radiobutton
  • Select
  • Radiobutton Group
  • Checkbox Group
  • Datefield
  • UploadField

2) Vaadin Fields

Caption: "The UI elements available in the Vaadin framework that are recommended for use with Magnolia. These fields can be easily added to your app and support Vaadin interaction. Many of these elements are also available within Magnolia Forms/Dialogs."

  • Labels (Vaadin)
  • Error / Warning / Info
  • Icons
  • Badges
  • Progress Bar
  • Progress Spinner
  • Button
  • Link
  • TextField
  • TextArea
  • Password
  • Checkbox
  • Radiobutton
  • Select
  • MagnoliaTabSheet
  • MagnoliaTable
  • MagnoliaTreeTable
  • Tree
  • Slider
  • Panel
  • SplitPanel
  • Popup view

3) Unsupported Vaadin Fields

Caption: "The UI elements in the Vaadin framework that are not recommended for use with Magnolia. These elements may not perform well on touch devices, and the look and feel may not match the Magnolia interface. Use of these elements is not supported by Magnolia."

  • Accordian
  • Menu
  • Windows
  • Segment
  • Sidebar Menu
  • Toolbar
  • TreeTable
  • Table


  • No labels