README

一个基于 Flow 表单框架的 Fusion 基于的表单渲染预设

Flow 表单框架默认使用 Fluid 来渲染表单元素。本包允许使用 Fusion 来替代渲染表单。

使用方法

使用 composer 安装此包

composer require neos/form-fusionrenderer

注意：此包需要版本 4.1 或更高版本的 neos/form 包

之后，可以使用新的表单预设 fusion。此预设扩展了 Flow 表单框架的 default 预设，并为每个 default 表单元素定义提供 Fusion 原型。

当与 Neos.NodeTypes.Form 包一起使用时，可以通过以下方式更改预设

prototype(Neos.NodeTypes.Form:Form) {
  presetName = 'fusion'
}

当从 Fluid 渲染表单时，可以在相应的 ViewHelper 中设置预设

{namespace form=Neos\Form\ViewHelpers}
 <form:render factoryClass="NameOfYourCustomFactoryClass" presetName="fusion" />

注意：建议扩展/创建自己的预设以调整以满足您的需求

有关预设的更多信息，请参阅表单框架文档

调整渲染

默认情况下，fusion 预设渲染的表单与 default 预设渲染的表单相似（如果 Fluid 模板未被修改），但有以下例外

图像上传（ImageUpload）和文件上传（FileUpload）字段不会渲染任何内联 JavaScript
日期选择器（DatePicker）字段不会使用基于 JS 的日期选择器，而是使用 HTML5 类型属性

渲染表单元素的 Fusion 原型预期将与相应的表单元素定义具有相同的名称，包括命名空间。例如，对于 Neos.Form:SingleLineText，存在具有相同名称的相应 Fusion 原型。

可以使用任何有效的 Fusion 对象，并且它们将能够访问以下上下文变量

formRuntime 当前 Neos\Form\Core\Runtime\FormRuntime 实例
element 代表当前表单元素的实际的 Neos\Form\Core\Model\FormElementInterface 实例
containerElement 当前表单元素的父 Neos\Form\Cor\Model\AbstractSection（例如，部分或页面）

所有提供的表单元素原型都扩展了 Neos.Form.FusionRenderer:FormElement，以便更容易调整所有元素的渲染。

提示：查看现有的表单元素 Fusion 原型，以了解它们的简单性

重要：当覆盖Fusion原型时，请确保设置了正确的包加载顺序（即自定义的包依赖于neos/form-fusionrenderer包），否则它们可能没有效果。

示例：将表单元素标签渲染为占位符

要将表单元素标签渲染为对应输入字段的占位符，以下Fusion代码片段可以实现

prototype(Neos.Form.FusionRenderer:FormElement) {
    # remove the whole label rendering
    label >

    # set the fields "placeholder" attribute to the Form Element Label
    fieldContainer.field.attributes.placeholder = ${element.label}
}

添加自定义表单元素类型

该包包含所有default预设的表单元素定义的Fusion原型。表单框架的真正优势在于自定义预设和表单元素。

示例：自定义电子邮件地址表单元素

与其使用带有EmailAddressValidator的SingleLineText元素，不如创建一个自定义的电子邮件地址字段。这使调整字段的样式和行为变得更容易，并且使用起来也更容易。

首先，需要在相应的表单预设（我们这里假设是fusion预设）中添加新的表单元素定义

Settings.yaml:

Neos:
  Form:
    presets:
      'fusion':
        formElementTypes:
          'Your.Package:EmailAddress':
            superTypes:
              'Neos.Form:FormElement': true
              'Neos.Form:TextMixin': true
            validators:
              -
                identifier: 'Neos.Flow:EmailAddress'

注意：在以下示例中，请随时将"Your.Package"替换为您自己的包密钥

现在，Your.Package:EmailAddress表单元素可以在任何通过fusion预设渲染的表单定义中使用。

但是，尝试渲染它会导致异常

The Fusion object `Your.Package:EmailAddress` is not completely defined (missing property `@class`). Most likely you didn't inherit from a basic object.

让我们修改一下。

首先配置FusionRenderer以包含您的自定义Fusion代码

Neos:
  Form:
    FusionRenderer:
      fusionAutoInclude:
        'Your.Package': true

然后在您的自定义fusion中定义渲染

EmailAddressFormElement.fusion:

prototype(Your.Package:EmailAddress) < prototype(Neos.Form.FusionRenderer:FormElement) {
    fieldContainer {
        field {
            tagName = 'input'
            attributes {
                type = 'email'
                name = ${elementName}
                value = ${elementValue}
            }
        }
    }
}

这就完成了。大部分渲染逻辑都在Neos.Form.FusionRenderer:FormElement对象中定义，只需要指定标签名和一些属性。

注意：在表单元素定义中我们附加了EmailAddressValidator，因此不需要手动添加。此外，我们将输入类型属性设置为email，这也添加了浏览器验证

示例：自定义复合表单元素

自定义表单元素的另一个非常好的用途是复合元素。这些是渲染多个输入的元素。Neos.Form:PasswordWithConfirmation表单元素是default预设的一个例子。

让我们添加一个自定义字段，一次渲染称谓、给定名称和姓氏字段。

首先，添加表单元素定义

Settings.yaml:

Neos:
  Form:
    presets:
      'fusion':
        formElementTypes:
          'Your.Package:NameAndTitle':
            superTypes:
              'Neos.Form:FormElement': true
            properties:
              # options for the honorific title
              options:
                'mr': 'Mr.'
                'mrs': 'Mrs.'
                'dr': 'Dr.'

然后添加相应的Fusion对象以渲染表单元素

NameAndTitleFormElement.fusion:

prototype(Your.Package:NameAndTitle) < prototype(Neos.Form.FusionRenderer:FormElement) {
    fieldContainer {
        field = Neos.Fusion:Array {
            title = Neos.Form.FusionRenderer:FormElementField {
                tagName = 'select'
                attributes {
                    name = ${elementName + '[title]'}
                }
                content = Neos.Form.FusionRenderer:SelectOptions {
                    itemRenderer = Neos.Fusion:Tag {
                        tagName = 'option'
                        attributes.value = ${optionValue}
                        attributes.selected = ${optionSelected}
                        content = ${optionLabel}
                    }
                }
            }
            givenName = Neos.Form.FusionRenderer:FormElementField {
                tagName = 'input'
                attributes {
                    type = 'text'
                    name = ${elementName + '[givenName]'}
                    value = ${elementValue.givenName}
                }
            }
            familyName = Neos.Form.FusionRenderer:FormElementField {
                tagName = 'input'
                attributes {
                    type = 'text'
                    name = ${elementName + '[familyName]'}
                    value = ${elementValue.familyName}
                }
            }
        }
    }
}

在这种情况下，我们将field替换为Neos.Fusion:Array。

注意：复合元素的元素类型将是array，您可以通过点语法引用单个值（例如，在ConfirmationFinisher消息中）（例如theElement.givenName）

neos / form-fusionrenderer

维护者

详细信息