talan/dynamic-form

动态表单组件包

安装: 19

依赖者: 0

建议者: 0

安全性: 0

星星: 8

关注者: 6

分支: 4

开放问题: 0

类型:symfony-bundle

dev-master 2015-10-07 21:12 UTC

This package is not auto-updated.

Last update: 2024-09-24 04:30:22 UTC


README

Build Status Code Climate

使用 kelp404/angular-form-builder 的 Symfony2 动态表单构建器。

##框架

  1. AngularJS 1.2
  2. jQuery
  3. Bootstrap 3
  4. Angular-validator
  5. jQuery Datatable
  6. Angular Datatable
  7. Angular Form Builder

安装

获取组件包

在您的 composer.json 中添加以下行

// composer.json
{
    "require": {
        "talan/dynamic-form" : "dev-master"
    }
}

初始化组件包

要开始使用组件包,请在您的应用程序的内核类中注册该组件包

// app/AppKernel.php
public function registerBundles()
{
    $bundles = array(
        // ...
        new Talan\Bundle\DynamicFormBundle\TalanDynamicFormBundle(),
    );
)

创建组件包的表

在项目主目录下执行以下命令

$ php app/console doctrine:schema:update --force
$ php app/console doctrine:fixture:load --fixtures=vendor/talan/dynamic-form/Talan/Bundle/DynamicFormBundle/DataFixtures/ORM --append

这将创建8个以 "talan_" 前缀的表,位于您的数据库模式中

  • talan_form:存储由后台办公室创建的表单。
  • talan_field_type:包含组件包支持的不同的字段类型。
  • talan_field:存储与每个创建的表单关联的字段。
  • talan_value:存储与表单用户插入的值相关的通用信息。
  • talan_string_value:存储输入文本字段的值。
  • talan_text_value:存储文本区域字段的值。
  • talan_integer_value:存储选择和单选字段的价值。
  • talan_array_value:存储复选框字段的值。

导入 TalanDynamicFormBundle 路由文件

TalanDynamicFormBundle 随带默认控制器和视图,使用开发的服务提供后台和前台功能。要激活所需页面,只需导入组件包的路由文件即可

# app/config/routing.yml
talan_dynamic_form:
    resource: "@TalanDynamicFormBundle/Resources/config/routing.yml"
    prefix:   /

当然,您可以添加自己的前缀。

如果您想向控制器添加特定行为或更改显示的页面,只需扩展此组件包,并自己实现控制器或组件包的 twigs 即可。

重写默认的 layout.html.twig

此组件包的布局文件从各种链接中导入 JavaScript 依赖项。因此,我们强烈建议您下载上面提到的所需框架,重写布局文件,并使用资产包含下载的框架。

重写组件包模板的最简单方法是在您的 app/Resources 文件夹中放置一个新的模板。要重写位于 TalanDynamicFormBundle 目录中的 Resources/views/layout.html.twig 的布局模板,您应将新的布局模板放置在 app/Resources/TalanDynamicFormBundle/views/layout.html.twig。

以下 Twig 模板文件是可能用于重写的布局文件的示例。

{% extends 'AcmeDemoBundle::layout.html.twig' %}

{% block title %}Acme Demo Application{% endblock %}

{% block content %}
    {% block talan_dynamic_form_content %}{% endblock %}
{% endblock %}

在此模板中需要注意的主要事项是名为 talan_dynamic_form_content 的块。这是从每个不同组件包的操作中显示内容的地方,因此您必须确保在要使用的布局文件中包含此块。

添加值所有者提供者

当应用程序的用户提交由该组件包创建的特定表单的值时,这些值应以某种方式与该特定用户相关联。然而,提交值与用户之间的这种联系取决于应用程序的性质。因此,应由开发人员和后台办公室指定将这些元素关联的方式。

本包通过引入ValueOwnerProviderInterface和抽象实现AbstractOwnerProvider,提供了上述功能。

ValueOwnerProviderInterface需要实现3个方法,分别是getValueOwner()getOwnerListTemplate()getValueOwnerList($formId)。我们添加了AbstractOwnerProvider类来提供默认的拥有者模板。

因此,通过实现接口或扩展抽象类,然后通过所需标签注入服务,开发者应该能够指定提交的值和用户如何相互关联。

TalanDynamicFormBundle附带两个预实现的ValueOwnerProviderInterface类。它们是AbstractUserValueProviderSessionValueProvider,后者已声明为服务。

以下是ServiceValueProvider

class SessionValueProvider extends AbstractValueOwnerProvider
{
    protected $session;
    protected $em;
    
    public function __construct(EntityManager $em,Session $session)
    {
        $this->session = $session;
        $this->em = $em;
    }

    /**
     * (non-PHPdoc)
     * @see \Talan\Bundle\DynamicFormBundle\Service\ValueOwnerProviderInterface::getValueOwner()
     */
    public function getValueOwner()
    {
        return $this->session->getId();
    }
}

如你所见,唯一需要实现的方法是getValueOwner(),我们注入了session变量以获取用户的会话ID。

要激活会话值提供者,您需要将以下配置添加到您的services.yml中。

# src/Demo/Bundle/DemoBundle/Resources/config/services.yml
parameters:
    talan_dynamic_form.session_provider.class: Talan\Bundle\DynamicFormBundle\Service\Impl\SessionValueProvider
    
services:
    talan_dynamic_form.session_value_provider:
        class: "%talan_dynamic_form.session_provider.class%"
        arguments: ["@doctrine.orm.entity_manager","@session"]
        tags:
            - {name: talan_dynamic_form.value_owner_provider, alias: "Session Provider"}

注意,我们将@doctrine.orm.entity_manager@security作为SessionValueProvider的参数注入,并使用talan_dynamic_form.value_owner_provider标签标记了服务。标记此服务非常重要,因为它允许包将此类识别为ValueOwnerProvider。至于别名,它是创建表单时在后台办公室中显示的标签。

以下是AbstractUserValueProvider

abstract class AbstractUserValueProvider extends AbstractValueOwnerProvider
{
	protected $security;
	protected $em;

	public function __construct(EntityManager $em,SecurityContext $security)
	{
		$this->security = $security;
		$this->em = $em;
	}

	/**
	 * (non-PHPdoc)
	 * @see \Talan\Bundle\DynamicFormBundle\Service\ValueOwnerProviderInterface::getValueOwner()
	 */
	public function getValueOwner()
	{
		if (!$this->security) {
			throw new \LogicException('The SecurityBundle is not registered in your application.');
		}

		if (null === $token = $this->security->getToken()) {
			return;
		}

		if (!is_object($user = $token->getUser())) {
			return;
		}

		return $user;
	}
	
}

此类被声明为抽象的,以便每个用户都可以定义自己的两个方法getValueOwnerList()getOwnerListTemplate()的实现。以下是一个示例实现

class UserValueProvider extends AbstractUserValueProvider
{
	protected $security;
	protected $em;
	
	public function __construct(EntityManager $em, SecurityContext $security)
	{
		$this->security = $security;
		$this->em = $em;
	}
	
	public function getOwnerListTemplate()
	{
		return 'TalanUserBundle::connectedUser.html.twig';
	}
	
	public function getValueOwnerList($formId){
		return $this->em->getRepository('TalanUserBundle:User')->findUsersByForm($formId);
	}
}

以下是相应的拥有者列表模板connectedUser.html.twig

{% extends 'TalanDynamicFormBundle:OwnerList:default.html.twig' %}
{% block talan_dynamic_form_owner_table %}
<table datatable class="table table-striped table-bordered" id="ownerList">
    <thead>
    <tr>
        <th>{{ 'dynamicForm.owner.id' | trans }}</th>
        <th>{{ 'dynamicForm.owner.fullName' | trans }}</th>
        <th>{{ 'dynamicForm.owner.email' | trans }}</th>
        <th>{{ 'dynamicForm.owner.phone' | trans }}</th>
        <th>{{ 'dynamicForm.bo.actions' | trans }}</th>
    </tr>
    </thead>
    <tbody>
    {% for owner in ownerList %}
    <tr>
        <td>{{ owner.id }}</td>
        <td>{{ owner.firstName }} {{ owner.lastName }}</td>
        <td>{{ owner.email }}</td>
        <td>{{ owner.phone }}</td>
        <td>
            <a target="_self" title="{{ 'dynamicForm.btn.view' | trans }}" ng-click="setValueOwner('{{ owner.id  }}', '{{form.id}}')" href="#">
                <i class="glyphicon glyphicon-search" style="color: dodgerblue;"></i>
            </a>
        </td>
    </tr>
    {% endfor %}
    </tbody>
</table>
{% endblock talan_dynamic_form_owner_table %}