Showcase App alterations
Currently there are three tabs in the showcase app:
- Form fields - Magnolia specific fields.
- Vaadin fields - Vaadin fields that can be used with Magnolia. - Rename as 'Controls' or Magnolia Controls or something similar.
- Unsupported fields - Not clear why we specify what Vaadin fields NOT to use. The list of controls is not extensive, implying either that there are many more controls that can be added (in which case the form field tab and Vaadin fields tab are incomplete) or that the list of banned controls is incomplete.
Problem
Need to include information on using each control. How? What kind of information?
Vaadin approach
See: http://demo.vaadin.com/sampler Note that when the information is viewed this way, you get essentially what I would argue for in the Showcase app - a three column approach with headings that correspond to Control, Image, Description. The difference is that in Mag 5 we don't want to have click, jab to see the info.
Proposal
Create a custom app:
- Increase real estate for the fields (i.e make the light grey area bigger - stretch it to the left and right).
- Only show Magnolia controls.
- Add three columns (headings optional)
- Control name tree similar to vaadin approach: http://demo.vaadin.com/sampler#
- Control (Shows a fully functional control)
- Description box with links.
- Left align everything in each column.
Ref 3c. - Question remains over what information to provide. The options are:
- Link to internal configuration within Magnolia for each control. This provide real life access to how a control is configured in Magnolia (i.e. in the repository/workspace.)
- Link to API / widget documentation. Note that at present Git also supplies information on controls that we do not want developers to change or reuse - such as the App launcher: https://git.magnolia-cms.com/gitweb/?p=magnolia_ui.git;a=tree;f=magnolia-ui-vaadin-common-widgets/src/main/java/info/magnolia/ui/vaadin;hb=HEAD
- Link to documentation example of config by code.
All three are possible.
Current look
Proposal mockup - version 1
Field | Description |
---|---|
Static text | |
Commit button in a form | |
Reset button in a form | |
Link | |
Text field | |
Text area | |
Password fields | |
Checkbox | |
Radio button group | |
Checkbox group | |
Select | |
Date field |