Класс для построения сложных форм
FORM2
child bonds:
В SKY-приложениях, класс `Form`, см. файл `main/w2/form.php`, используется для быстрого создания сложных форм. Подобные классы существуют во многих framework, они помогают значительно упростить рутинно-трудоемкий процесс создания больших и сложных форм. Абстрактная форма имеет очень много вариаций своего вида и поведения, и очень часто, в конкурирующих framework, используется достаточно сложный синтаксис для описания сложной формы. Мы не будем так делать, но следуя главному архитектурному принципу разработки в SKY, нам все-таки придется усложнить синтаксис, но грань сложного, мы все-же не перейдем, он останется прост.
Элементы формы рисуются на странице также как описано в примере сверху вниз. Страница условно поделена на две части - левую и правую. Названия элементов находятся слева а сами элементы справа.
Если в качестве элемента массива используется не строковый ключ (прототип тега `name`), значит тег name, будет отсутствовать в сгенерированом элементе, в примере выше смотрите кнопку 'submit'.
Если ключ целочисленный, а значение не массив, а строка или число, такой элемент будет добавлен в форму без преобразования. Например, см. выше отделение начала и конца формы тегом <hr>.
Последний вариант среди комбинаций в ключах и значения простых массивов, строк или других скаляров, это когда ключём является срока, а значением тоже строка или число, например 'hiddename' => 'hiddenvalue', является описание <input type="hidden" name="hiddename" value="hiddenvalue" >. Input типа hidden, можно описать как и все остальные элементы, например 'hiddename' => ['hiddenvalue', 'hidden', 'additional-properties'], однако форма выше позволяет упрощенно описывать Input теги типа `hidden`, ввиду того что комбинацию ключ - строка и значение строка или число (не массив) нужно приспособить к чему-то и это что-то, вероятно наилучшим образом подходит для таких описаний.
Горизонтально, элементы размещаются в правой части холста, а в левую часть может быть помещена строка, которая отобразится без преобразования. Резонно сделать левую часть меньше правой и равной 38% или близко, а правую 62% (золотое сечение). Кроме того, чтобы разместить, влево и вправо строку без преобразований, можно воспользоваться статическим методом Form::X. Повторное использование "массив в массиве" ниже в иерархии, вернет вертикальное расположение элементов.
Условная валидация настраивается так: описываем radio input в форме, например:
Выше `addr` - значение тега name radio input. `a2_zip`,`'a2_house` - значения тегов name области формы, для которой устанавливается условная валидация (начало и конец диапазона). Т.е. если часть формы скрыта с помощью style="display:none", часть формы не участвует ни в js ни в PHP валидации, если не скрыта - участвует.
Без валидации:
Кроме того имеются публичные методы класса:
string js(); # генерирует javascript код для js валидации
string tag($html); # генерирует тег <form>
string input($type, $val, $etc); # генерирует тег <input>
class xForm Form::X($cfg, $column1, ... more columns);
Метод Form::X позволяет делать на холсте (или его части) произвольное количество колонок для построения дизайна общей формы. Первый параметр, всегда - конфигурация, второй параметр (и возможно последующие) - колонка или колонки, описывающие часть формы, представленные в том же формате, что и основная форма. Можно считать, что в то место куда вставлен метод Form::X в основной форме (или под-форме) попадет сгенерированная строка, хотя на этапе описания формы, метод возвратит объект xForm. Если количество колонок больше двух, колонки всегда будут "обернуты" тегом <table>. Если 1-2 могут быть описаны стандартным шаблоном TPL_FORM (на основе тега <dl>). Если конфигурация не нужна, первым параметром необходимо вставить пустой массив - []. Конфигурация может быть:
Form::X позволяет вставлять под-формы в основную форму, при этом в конфигурации "под-формы" можно изменить значения ключей элементов или вставить более одного раза элементы с тегом name - массивом, например name="id[]". Ключи массивов PHP должны быть уникальны и не позволили бы это сделать без Form::X.
Пример использования класса можно посмотреть здесь. По остальным вопросам смотрите код класса.
Базовый синтаксис
Для описания форм, мы будем использовать иерархические возможности массивов PHP. Итак, общий подход: форма это массив, где ключами являются значения тега `name` HTML элементов ввода <input>, <select> и др. А значения массива - это массив с целочисленными индексами, где первым элементом есть название элемента формы, вторым элементом - тип элемента формы, назначение следующих за вторым элементом массива, зависят от типа элемента. Например:001
002
003
004
005
006
007
008
009
010
$form = [
'<hr>',
'name' => ['Nickname'], # Nickname <input type="text" name="name" value="">
'who' => ['Sex', 'radio', ['male', 'female']],
# Sex <label><input type="radio" name="who" value="0" checked> male</label>
# и второй </label><input type="radio" name="who" value="1"> female</label>
['send request', 'submit'], # <input type="submit" value="send request">
'<hr>',
];
Элементы формы рисуются на странице также как описано в примере сверху вниз. Страница условно поделена на две части - левую и правую. Названия элементов находятся слева а сами элементы справа.
Если в качестве элемента массива используется не строковый ключ (прототип тега `name`), значит тег name, будет отсутствовать в сгенерированом элементе, в примере выше смотрите кнопку 'submit'.
Если ключ целочисленный, а значение не массив, а строка или число, такой элемент будет добавлен в форму без преобразования. Например, см. выше отделение начала и конца формы тегом <hr>.
Последний вариант среди комбинаций в ключах и значения простых массивов, строк или других скаляров, это когда ключём является срока, а значением тоже строка или число, например 'hiddename' => 'hiddenvalue', является описание <input type="hidden" name="hiddename" value="hiddenvalue" >. Input типа hidden, можно описать как и все остальные элементы, например 'hiddename' => ['hiddenvalue', 'hidden', 'additional-properties'], однако форма выше позволяет упрощенно описывать Input теги типа `hidden`, ввиду того что комбинацию ключ - строка и значение строка или число (не массив) нужно приспособить к чему-то и это что-то, вероятно наилучшим образом подходит для таких описаний.
Горизонтальное размещение элементов
В примерах выше используется вертикальное размещение элементов формы, чтобы разместить элементы горизонтально, нужно использовать массив в массиве:001
002
003
004
005
006
007
008
[[
// ... elements
]],
// OR
['left direct string', [
// ... elements
]],
Горизонтально, элементы размещаются в правой части холста, а в левую часть может быть помещена строка, которая отобразится без преобразования. Резонно сделать левую часть меньше правой и равной 38% или близко, а правую 62% (золотое сечение). Кроме того, чтобы разместить, влево и вправо строку без преобразований, можно воспользоваться статическим методом Form::X. Повторное использование "массив в массиве" ниже в иерархии, вернет вертикальное расположение элементов.
Валидация элементов формы
В классе Form имеется возможность создавать валидацию для элементов формы, которая может работать и на javascript и на PHP. Например чтобы принудить заполнить поле, для поля name элемента добвьте префикс +. Например: '+fio' => ...element. Чтобы создать валидацию по произвольному регулярному выражению, используйте префикс `/`. Полное описание RegExp и сообщение об ошибке описывается в массиве входящим в основной с ключем равным -1. В нем можно также и подменить дефолтное сообщение об ошибке, например "field can't be empty" на английском языке, на произвольное или на другом языке.Условная валидация настраивается так: описываем radio input в форме, например:
001
002
003
004
005
006
007
008
<php
-1 => [
'addr' => ['a2_zip', 'a2_house']
]
# ... form desc
'addr' => ['Real address', 'radio', ['eq. to registered', 'neq.'], 0, 'onclick="return sky.f.slide(this,\'#sxd\')"'],
# ... form desc
Выше `addr` - значение тега name radio input. `a2_zip`,`'a2_house` - значения тегов name области формы, для которой устанавливается условная валидация (начало и конец диапазона). Т.е. если часть формы скрыта с помощью style="display:none", часть формы не участвует ни в js ни в PHP валидации, если не скрыта - участвует.
Использование класса
С валидацией (полнофункционально), использование по схеме (или подобной):001
002
003
004
005
006
007
008
009
010
011
012
function empty_a() {
$form = new Form($this->ary()); # прототип формы в конструктор
if ($_POST) {
$form->validate(); # если валидация на js прошла (есть запрос), делаем повторно на PHP
# insert / update ...
jump(true);
}
$this->_v = [
'form' => $form->def($_GET['id']),
];
}
Без валидации:
001
002
003
<?php
echo Form::A($row, $this->ary);
Кроме того имеются публичные методы класса:
string js(); # генерирует javascript код для js валидации
string tag($html); # генерирует тег <form>
string input($type, $val, $etc); # генерирует тег <input>
class xForm Form::X($cfg, $column1, ... more columns);
Метод Form::X позволяет делать на холсте (или его части) произвольное количество колонок для построения дизайна общей формы. Первый параметр, всегда - конфигурация, второй параметр (и возможно последующие) - колонка или колонки, описывающие часть формы, представленные в том же формате, что и основная форма. Можно считать, что в то место куда вставлен метод Form::X в основной форме (или под-форме) попадет сгенерированная строка, хотя на этапе описания формы, метод возвратит объект xForm. Если количество колонок больше двух, колонки всегда будут "обернуты" тегом <table>. Если 1-2 могут быть описаны стандартным шаблоном TPL_FORM (на основе тега <dl>). Если конфигурация не нужна, первым параметром необходимо вставить пустой массив - []. Конфигурация может быть:
001
002
003
004
005
006
007
<php
$cfg = [
'etc' => 'id="my-table"', # свойства для таблицы или <div>
'opt' => Form::OPT_TABLE | Form::OPT_DIV # обернуть все в <div> или в таблицу
'width="10%"' # установить для тега <td> таблицы ширину (можно любые свойства тега)
'style="background:red"' # для второй колонки установить красный фон (индекс массива $cfg == 1)
];
Form::X позволяет вставлять под-формы в основную форму, при этом в конфигурации "под-формы" можно изменить значения ключей элементов или вставить более одного раза элементы с тегом name - массивом, например name="id[]". Ключи массивов PHP должны быть уникальны и не позволили бы это сделать без Form::X.
Пример использования класса можно посмотреть здесь. По остальным вопросам смотрите код класса.
News
7 Jan 2013 GMT Project SKY. started
18 Oct 2018 GMT null-site MVC updated
11 Oct 2018 GMT App MED.CRM.SKY. published.
Articles
SKY. status
Current version: 1.001
Coresky records: 22
Local (DEV) records: 89
Web (all) records: 105
Download: dev.php
Coresky records: 22
Local (DEV) records: 89
Web (all) records: 105
Download: dev.php