Форма

Комментарии ()

Form - один из самих больших моих класов. В чем собственно суть? Посколья я далеко не дизайнер, Bootstrap стал для меня как манна небесная в плане веб-строительства. Уже вышла третья версия, но я пока по прежнему на второй, так как треться еще сырая, да и вторая меня вполне устраивает.

Техническое задание

Разработать инструмент генерации основных елементов ввода формы, включить поддержку мультиязычности

Теоретические сведения

Меня утомило наберать

<div class="control-group control-group-alias ">
     <label class="control-label" for="alias">Алиас</label>
     <div class="controls">
          <input type="text" name="alias" id="alias" value="Forma" width="" placeholder=""/>
          <span class="help-inline help-inline-alias"/>
     </div>
</div>

Мне проще это делать так

#elementAlias
$array = array(
    'element_type' => 'text', 
    'element_name' => 'alias',
    'element_alias' => null,
    'element_label' => null,
    'element_readonly' => false,
    'element_disabled' => false,
    'element_style' => null,
    'element_width' => null,
    'element_placeholder' => null,
    'element_value' => $row
);
$tpl->setVariable('elementAlias', $form->getElement($array));

Теория

Наш класс может генерировать елементы для линейной и горизонтальной форм. Согласно документации Bootstrap линейная форма должна иметь класс .form-inline а горизональная класс .form-horizontal.

Пример шаблона елемента формы для линейно формы

<label  for="inputEmail">sadsd</label>
<input type="text" id="inputEmail" placeholder="Email" class="input-small">
<span class="help-block">Подсказка или доп. информация.</span>

Первая строка - метка для елеменат ввода
Вторая строка - сам елемент ввода
Треться строка - вспомогательный текст, он может быть блочным (класс  help-block) или строчный (класс help-inline)

Пример шаблона елемента формы для горизонтальной формы

В горизонтальной форме выше приведенные елементы необходимо обернуть дополнительными div'ми

<div class="control-group">
    <label class="control-label" for="inputEmail">Email</label>
    <div class="controls">
      <input type="text" id="inputEmail" placeholder="Email">
    </div>
	<span class="help-block">Подсказка или доп. информация.</span>
</div>

Практика

$form->getElement($array)

Выше приведенная строчка кода, возвращает HTML-разметку требуемого елемента ввода формы, параметры которого заданы через массив, в данном случае переменная $array

Базовая структура массива

$array=array( 'form'=>array(),
              'group'=>array()
              'attr'=>array(),
              'multilang'=>array(),
              'editor'=>array(),
              'alias'=>null,
              'html'=>''
            );

form - асоциативный массив, задает параметры формы

  • type - тип формы ( horizontal | inline )

group - асоциативный массив, задает параметры для группы елемента

  • flag - true|false включение/отключение группы для елемента
  • type - тип группы  (horizontal | inline). default: form->type
  • help - подсказка
  • help_type - тип блока подсказки (block | inline)
  • class - класс(ы) группы
  • label - метка для елемента ввода

attr - асоциативный массив, задает атрибуты елемента формы.

  • name
  • id
  • type
  • class - если массив, то переводится в строку через пробелы
  • style  - если массив, то переводится в строку через пробелы
  • placeholder
  • readonly - true | false
  • disabledtrue | false
  • data - асоциативны массив
  • value - если передан массив, необходимо взять элемент, key которого равняется alias. В случае мультиязічности (['multilang']['flag']==true) передавать ассоциативный массив, ключ елементов которого должен быть вида ['alias']+алиас языка. Например, для елеметна с name='test' value=array('test_ua'=>'значение ...','test_ru'=>'значення...','test_en'=>'value...',...)

multilang - асоциативный массив, задает параметры мультиязычности для елемента

  • flag - true | false 
  • style - стиль мультиязычности: one - показывать только елемент для текущего языка (другие мультиязычней елементы скрыты, и стают доступны при переключении языка в панеле переключения); all - отображать все мультиязычные елементы
  • lg - алиас языка, для которого в даный момент выводится елемент
  • num - порядковый номер вывода елемента между другими мультиязычными елементами

построение мультиязычных елементов осуществляется с помощью методов построения не мультиязычных. Например, в методе getElemenetInputMultilang в цикле задаем lg и num перед вызовом getElementInput.

editor - асоциативный массив, задает параметры wysiwign-редактора (используется для textarea)

  • flag - true | false
  • type - тип редактора (сейчас поддерживается только ckeditor)
  • toolbar - название тулбара, который нужно использовать (full,basic)
  • toolbar_html - html-код тулбара (значение формируется в процессе обработки данных)
  • disabled - если не задано явно, унаследуется от елемента

Для каждого типа редактора задаем отдельную конфигурацию. Например: 

 

'ckeditor' => array('toolbar' => array('full' => $this->ckeditor_toolbars_full,
                    'basic' => $this->ckeditor_toolbars_basic))

alias - когда в ['attr']['value'] передано массив, нужно выбрать только один елемент массива в качестве значения елемента. Выборку делаем по ключу, в качестве которого используем этот alias. Изначально  ключом выступал ['attr']['name'], но бывают ситуации, когда нужно искать по другому значению. Для этих ситуаций был введен атрибут alias.

html - сюда помещается html-код самого елемента, который используется при формировании групы елемента

Элемент Input

Пример использования

#elementInputText
$element = array(
    'attr' => array(
        'name' => null,
        'type' => 'text',
        'alias' => null,
        'value' => false,
        'disabled' => false,
        'placeholder' => null,
        'value' => null
    ),
    'group' => array(
        'help' => null,
        'help_type' => 'block',
        'label' => null
    )
);
$tpl->setVariable('elementName', $form->getElement($element));

Элемент Input (DateTime)

Спецефические атрибуты

format_input - задать формат даты для datetimepicker. По умолчанию "yyyy-MM-dd hh:mm:ss"

format_date - задаем формат для value. Хоть мы и задаем format_input, но при загрузке страницы value будет отображаться в формате format_date (это формат для date). По умолчанию "Y-m-d H:i:s"

Пример использования

#elementDatetime
$element = array(
    'attr' => array(
        'name' => 'date',
        'type' => 'datetime',
        'alias' => null,
        'disabled' => false,
        'value' => date('Y-m-d H:i:s'),
    ),
    'group' => array(
        'help' => null,
        'help_type' => 'block',
        'label' => 'date_'
    ),
);
$tpl->setVariable('elementDatetime', $form->getElement($element));

Элемент Input (Ckeckbox)

Спецефические атрибуты

checkbox_inline true | false - задать линейное расположение чекбоксов. В случае true, нужно задать ['group']['type']='inline'

attr

  • checked - true | false. Также может принимать числовое значение, если оно больше чем ноль, то елемент будет отмечен. В случае мультиязычности содержит массив с алиасами язяков и значением true | false

Пример использования

#elementInputCheckbox
$element = array(
    'attr' => array(
        'name' => 'test',
        'type' => 'checkbox',
        'value' => null,
        'checked' => null
    ),
    'group' => array(
        'help' => null,
        'label' => '',
        'type' => 'horizontal' 
    ),
    'checkbox_inline' => false

);

$tpl->setVariable('elementCheckbox', $form->getElement($array));

Элемент Input ( Radio )

Спецефические атрибуты

attr

  • checked - true | false. Также может принимать числовое значение, если оно больше чем ноль, то елемент будет отмечен. В случае мультиязычности содержит массив с алиасами язяков и значением true | false

Пример использования

#element Radio
$element = array(
    'attr' => array(
        'name' => '',
        'id' => '',
        'type' => 'radio',
        'value' => null,
        'checked' => false
    ),
    'group' => array(
        'help' => null,
        'label' => null
    ),
);

$tpl_main->setVariable('elementRadio', $form->getElement($element));

Элемент Select

Спецефические атрибуты

attr

  • values - Ассоциативный масив, который используется для задания даных select. Выбран будет елемент масива, значение которого равно атрибутут value
  • multiple - ( true | false ) задает  множественный выбор из списка.

Пример использования

#element Select
$element = array(
    'attr' => array(
        'name' => null,
        'id'=>null,
        'type' => 'select',
        'value' => null,
        'values'=>array()
    ),
    'group' => array(
        'help' => null,
        'label' => null
    )
);

$tpl_main->setVariable('elementSelect', $form->getElement($element));

Элемент Textarea

Спецефические атрибуты

attr

  • editor - Ассоциативный масив, который используется для задания параметров wysiwign редактора

Пример использования

/* element textarea */
$element = array(
    'attr' => array(
        'name' => null,
        'type' => 'textarea',
        'value' => null
    ),
    'editor' => array(
        'flag' => true,
        'editor' => 'ckeditor',
        'disable' => false,
        'toolbar'=>'basic'
    ),
    'group' => array(
        'help' => null,
        'label' => null
    )
);

$tpl_main->setVariable('elementTextarea', $form->getElement($element));

 


Webit.in.ua 2013