Page History
...
Code Pro | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
# this is the 'main' form configuration
form:
fields:
title:
class: info.magnolia.ui.form.poc.definition.TextFieldDefinition
name:
class: info.magnolia.ui.form.poc.definition.TextFieldDefinition
# address is a form component (a subform of the main form) and specifies its own layout.
# It is declared under fields and we can refer to it as a field
# see below form/layout/tabs/more/fields/address
address:
class: info.magnolia.ui.form.poc.definition.FormDefinition
fields:
city:
class: info.magnolia.ui.form.poc.definition.TextFieldDefinition
country:
class: info.magnolia.ui.form.poc.definition.TextFieldDefinition
nested: # a form component can have sub-form components with their own layout
class: info.magnolia.ui.form.poc.definition.FormDefinition
fields:
qux:
class: info.magnolia.ui.form.poc.definition.TextFieldDefinition
layout:
class: info.magnolia.ui.form.poc.layout.MyLayout
fields:
qux:
layout: # this is the layout for address
class: info.magnolia.ui.form.poc.layout.DefaultLayoutDefinition
fields:
city:
country:
nested:
# this is the main form's layout configuration
# layout configurations could probably be omitted altogether and rely on a reasonable default
layout:
class: info.magnolia.ui.form.poc.layout.TabbedLayoutDefinition
tabs:
personal:
fields:
title:
name:
more:
fields:
# address is a form component (a subform of the main form)
# here it is referred to as if it were a plain Field
address:
|
LayoutDefinition
- has a list of field names composing the layout. Their names match those of the FieldDefinition(s)
- specifies
LayoutProducer
implementation class
LayoutProducer
- is instantiated from a LayoutDefinition
- createLayout(LayoutDefinition, Map<String, Component>) creates the actual layout (a Vaadin Component) from
- LayoutDefinition
- a mapping of field names and actual field components
Form
is a component, same as a field
- during its building process it stores
- a mapping of field names and resulting field components
- it its own LayoutDefinition
- exposes mappings + LayoutDefinition via functional interface e.g.
form.attachToLayout((layout, mappings) -> doLayout(layout, mapping))
attachToLayout
internally takes care of creating the main form layout and all subforms' layouts (if any)
FormViewFactory
- is currently the orchestrator of the whole form building process
- creates the final form view (a Vaadin Layout)
- instantiates a Form from a FormDefinition
- instantiates a LayoutProducer
- calls form.attachToLayout(..) and
- passes a lambda function which eventually delegates to the LayoutProducer
Code Pro | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
... /*** * @return a {@link View} as described by this {@link FormDefinition} including nested forms, if any. */ public View createFormView(D formDefinition) { CssLayout view = new CssLayout(); Form<T> form = createForm(formDefinition); Layout rootLayout = form.attachToLayout((layout, mappings) -> createLayout(layout, mappings)); view.addComponent(rootLayout); return view; } protected Form<T> createForm(D formDefinition) { //TODO how to instantiate the correct PropertySet? FormFactory<D, T> formFactory = componentProvider.newInstance(FormFactory.class, formDefinition, subAppContext, new JcrNodePropertySet(collectFormFieldDefinitions(formDefinition), null, null), componentFactoryFactory); return (Form<T>) formFactory.createComponent(); } protected Layout createLayout(LayoutDefinition definition, Map<String, Component> mappings) { LayoutProducer producer = componentProvider.newInstance(definition.getImplementationClass()); return producer.createLayout(definition, mappings); } |
...
Overview
Content Tools