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);
}

fab / quick-form

维护者

详细信息

README

TYPO3 CMS快速表单

安装

配置

视图助手

编辑表单

显示表单（预览）

灵活验证

TCA配置

使用“外部”部分

覆盖标签

快速表单组件

复选框组

复选框

TCA配置

Extbase代码

日期选择器

蜜罐

TCA配置

Extbase代码

多选

TCA配置

Extbase代码

文件上传

媒体上传

TCA配置

Extbase代码