README

TYPO3 CMS快速表单

这是一个TYPO3 CMS扩展，允许快速在前端构建与TCA描述的数据类型相对应的表单。

表单可以与Extbase一起使用，但不是必须的。

安装

在扩展管理器中以“正常”方式安装。

配置

设置通过TypoScript在EXT:quick_form/Configuration/TypoScript/setup.txt中完成。

• key "partialExtension": - 表示找到部分的位置。在启动新项目时，建议将/EXT:quick_form中的部分复制/粘贴到自己的扩展中，并调整那里的HTML标记。确保遵守路径约定。- 默认 "quick_form"
• key "validate" - 由TypoScript进行表单验证的配置。- 默认为空

视图助手

编辑表单

有一个视图助手会读取TCA配置，并在前端生成表单

<qf:tca.form type="1" arguments="{_all}" dataType="fe_users"/>

注意，视图助手不会生成表单标签，以提供最大的灵活性和操作与控制器。- 也就是说，VH必须由f:form标签包裹，如示例所示

# Regular Extbase Form
<f:form action="update" controller="User" name="user" object="{user}" additionalAttributes="{role: 'form'}">

        <qf:tca.form type="1" arguments="{_all}" dataType="fe_users" validation="tca"/>

</f:form>

显示表单（预览）

对于预览需求，可以使用tca.show。它将显示可编辑的字段的可视化（只读）而不是编辑。

<f:form action="create" controller="User" name="user" object="{user}" additionalAttributes="{role: 'form'}">

        # tca.show != tca.form
        <qf:tca.show type="1" arguments="{_all}" dataType="fe_users"/>

</f:form>

灵活验证

快速表单会在前端显示有关字段是否包含验证的信息。目前限制为：是否为必填项？提交后是否有错误？

它被配置为添加一个众所周知的多边形符号“*”以显示该字段是必填项。

要获取验证信息，快速表单有三个可能的数据源，可以通过“validation”属性进行配置。如果没有进行配置，快速表单将使用TCA作为后备，这具有保持后端和前端同步的优势。

• tca: 检查与TCA的验证，默认
• typoscript: Extbase使验证具有不同类型的模型相当复杂。为了解决这个问题，可以使用typoscript验证。必须在plugin.tx_quickform.validate中提供配置。
• object: 使用上下文提供的对象，并使用反射来告诉哪些字段是必需的。
• MyExtension\Domain\Model\Foo: 对象不总是在上下文中可用。可以提供模型名称。

@todo添加更多验证输出，例如字符串长度、电子邮件...

TCA配置

在文件EXT:sample/Configuration/TCA/tx_sample_domain_model_foo中，确保有一个类似的部分

# Adequate for "flat" structure.
return array(
        'quick_form' => array(
                '1' => 'first_name, last_name, ...',
        ),

TCA配置可以更复杂，接受嵌套结构

# Adequate for "nested" structure which contains field-set and other containers.
return array(
        'quick_form' => array(
                '1' => array(
                        'partial' => 'Form/FieldSet',
                        'items' => array(
                                'first_name',
                                'last_name',
                                array(
                                        'partial' => 'Form/Submit',
                                ),
                        ),
                ),
        ),

快速表单还接受一种比数组更简洁的对象语法，这在与IDE一起使用时很方便，因为IDE可以自动完成参数。

# Usage of a Quick Form Component
return array(
        'quick_form' => array(
                '1' => array(
                        'partial' => 'Form/FieldSet',
                        'items' => array(
                                'first_name',
                                'last_name',
                                new \Vanilla\QuickForm\Component\SubmitComponent()
                        ),
                ),
        ),

使用“外部”部分

EXT:quick_start中的部分被视为默认值。然而，可以使用位于另一个扩展中的“外部”部分。

new \Vanilla\QuickForm\Component\GenericComponent('Form/Foo', array('property' => 'propertyName', 'label' => 'fieldName'), 'foo'),

• 第一个参数对应于部分名称
• 第二个参数对应于参数
• 第三个是包含部分的扩展

覆盖标签

如果前端标签必须与BE中的不同，请使用表单组件参数中的alternative_label选项

array(
        'alternative_label' => 'LLL:EXT:bobst_forms/Resources/Private/Language/locallang.xlf:privacy_satement_label',
)

快速表单组件

快速表单中可以显示的所有组件列表。其中一些设置较为复杂，因为它们需要良好的TCA配置以及正确的Extbase代码。对于这些组件，以下给出了代码示例。

• 复选框
• 复选框组（示例）
• 日期选择器（示例）
• 字段集
• 文件上传（示例）
• 隐藏字段
• 多选（示例）
• 多选框
• 导航
• 导航首页
• 导航末页
• 数字字段
• 单选按钮
• 选择框
• 分隔符
• 提交
• 标签面板
• 文本
• 多行文本框
• 文本框
• 待办事项（用于在前端显示临时消息的组件）

复选框组

array(
        'partial' => 'Form/CheckboxGroup',
        'arguments' => array('label' => 'wheels_or_tracks'),
        'items' => array(
                'operational_data_wheels',
                'operational_data_tracks',
        ),
),

复选框

如果复选框需要特别配置

new \Vanilla\QuickForm\Component\CheckboxComponent(
        'hasNewsletterSubscription',
        'has_newsletter_subscription',
        array('group_label' => 'Newsletter')
),

TCA配置

'operational_data_wheels' => array(
        'exclude' => 0,
        'label' => 'LLL:EXT:ext/Resources/Private/Language/locallang_db.xml:tx_foo_domain_model_foo.operational_data_wheels',
        'config' => array(
                'type' => 'check',
                'default' => '0'
        ),
),
'operational_data_tracks' => array(
        'exclude' => 0,
        'label' => 'LLL:EXT:ext/Resources/Private/Language/locallang_db.xml:tx_foo_domain_model_foo.operational_data_tracks',
        'config' => array(
                'type' => 'check',
                'default' => '0'
        ),
),

Extbase代码

/**
 * @var int
 * @validate Integer
 */
protected $operationalDataWheels = 0;

/**
 * @var int
 * @validate Integer
 */
protected $operationalDataTracks = 0;

日期选择器

这里需要一些额外的JavaScript。在撰写本文时，可以在“bs3”分支中找到这个仓库中的Bootstrap jQuery插件：https://github.com/eternicode/bootstrap-datepicker/tree/bs3

蜜罐

在TCA中

new \Vanilla\QuickForm\Component\HoneyPotComponent(),

在Extbase控制器中

/**
 * @return void
 * @validate $request \Vanilla\QuickForm\Validator\HoneyPotValidator
 * @param \Vendor\Extension\Domain\Model\Foo $foo
 */
public function createAction(Foo $foo = NULL) {


}

TCA配置

'available_on_market_from' => array(
        'exclude' => 0,
        'label' => 'LLL:EXT:ext/Resources/Private/Language/locallang_db.xml:tx_foo_domain_model_foo.available_on_market_from',
        'config' => array(
                'type' => 'input',
                'size' => 12,
                'max' => 20,
                'eval' => 'date',
                'default' => '0'
        )
),

Extbase代码

/**
 * @var \DateTime
 */
protected $availableOnMarketFrom;

多选

new \Vanilla\QuickForm\Component\MultiChoicesComponent('protectionLevel'),

TCA配置

'some_field' => array(
        'exclude' => 0,
        'label' => 'LLL:EXT:ext/Resources/Private/Language/locallang_db.xml:tx_foo_domain_model_foo.some_field',
        'config' => array(
                'type' => 'select',
                'items' => array(
                        array('', ''),
                        array('LLL:EXT:ext/Resources/Private/Language/locallang_db.xml:tx_foo_domain_model_foo.some_field.label_1', '1'),
                        array('LLL:EXT:ext/Resources/Private/Language/locallang_db.xml:tx_foo_domain_model_foo.some_field.label_2', '2'),
                ),
                'size' => 4,
                'maxitems' => 10,
                'eval' => ''
        ),
),

Extbase代码

属性

/**
 * @var string
 */
protected $someField;

请注意，在控制器中必须定义一个特殊的数组到字符串转换器，以便将多选转换为CSV链

/**
 * Initialize object
 */
public function initializeAction() {

        // Configure property mapping.
        if ($this->arguments->hasArgument('objectName')) {

                /** @var \Vanilla\QuickForm\TypeConverter\ArrayToStringConverter $typeConverter */
                $typeConverter = $this->objectManager->get('Vanilla\QuickForm\TypeConverter\ArrayToStringConverter');

                $this->arguments->getArgument('request')
                        ->getPropertyMappingConfiguration()
                        ->forProperty('someField')
                        ->setTypeConverter($typeConverter);
        }
}

文件上传

建议使用EXT:media_upload，在您的Extbase控制器中使用文件上传API。

new \Vanilla\QuickForm\Component\FileUploadComponent('logo'),

媒体上传

需要EXT:media_upload，它提供了一个HTML5文件上传小部件。

new \Vanilla\QuickForm\Component\MediaUploadComponent('logo'),

TCA配置

'logo' => array(
        'exclude' => 0,
        'label' => 'LLL:EXT:ext/Resources/Private/Language/locallang_db.xml:tx_ext_domain_model_organisation.logo',
        'config' => \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::getFileFieldTCAConfig(
                        'logo',
                        array(
                                'appearance' => array(
                                        'createNewRelationLinkTitle' => 'LLL:EXT:cms/locallang_ttc.xlf:images.addFileReference'
                                ),
                                'minitems' => 0,
                                'maxitems' => 1,
                        ),
                        $GLOBALS['TYPO3_CONF_VARS']['GFX']['imagefile_ext']
        ),
),

Extbase代码

属性

/**
 * @var \TYPO3\CMS\Extbase\Persistence\ObjectStorage<\TYPO3\CMS\Extbase\Domain\Model\FileReference>
 */
protected $logo;

访问器

/**
 * @return \TYPO3\CMS\Extbase\Persistence\ObjectStorage<\TYPO3\CMS\Extbase\Domain\Model\FileReference>
 */
public function getLogo() {
        return $this->logo;
}

/**
 * @param \TYPO3\CMS\Extbase\Persistence\ObjectStorage<\TYPO3\CMS\Extbase\Domain\Model\FileReference> $logo
 */
public function setLogo($logo) {
        $this->logo = $logo;
}

/**
 * @param \TYPO3\CMS\Extbase\Persistence\ObjectStorage $logo
 * @return void
 */
public function addLogo(ObjectStorage $logo) {
        $this->logo->attach($logo);
}

/**
 * @param \TYPO3\CMS\Extbase\Persistence\ObjectStorage $logo
 * @return void
 */
public function removeLogo(ObjectStorage $logo) {
        $this->logo->detach($logo);
}