Vc — визуальные компонеты

Материал из AOW

Перейти к: навигация, поиск

vc — визуальные компонеты

vc представляет из себя набор классов, необходимых для быстрой разработки визуальных элементов, xhtml таблиц, форм и других элементов.

Подключение vc осуществляется стандартным методом.

class

Содержит несколько файлов с наборами классов:

  • base.class.php – набор классов стандартных компонент используемых в xhtml, элементов, таблиц, форм;
  • advanced.class.php – набор классов расширенных компонент не имеющих прообразов в xhtml: линии прогресса, переключатели и др.


base.class.php диаграмма классов:

File:Sxema23.PNG

Использование c_vis_table

...


Использование c_vis_form (Статья устарела к выходу 1.5.06)

Экранные формы используются для отправки данных методом post. При создании экранной формы, ей присваивается уникальный id и name, которые всегда совпадают и имеют вид vc_fid. Если fid не задан пользователем, тогда система автоматически присваивает последовательный номер, начиная с 999000(как это делается и для системных групп пользователей). Например, при создании формы без параметров, она будет иметь следующие атрибуты и xhtml код: <form name="vc_999000" id="vc_999000" method="post" ></form> Каждому элементу формы присваивается свой уникальный eid .


Различают несколько видов элементов ввода:

  • одиночные: input text | input submit | input checkbox | textarea
  • групповые: select | input radio

Одиночные элементы после создания имеют id и name vc_fid_eid. Если eid не задан при создании элемента он берется по порядку, начиная с 0 для каждой формы. Групповые элементы имеют аналогичную систему индексации элементов, только с дополнительным ярусом вложенности для индексации субэлементов vc_fid_eid[sid]. Такая система назначения id позволяет, при необходимости, легко и удобно работать с формой используя JavaScript. С точки зрения PHP скриптов доступ к элементам происходит: $c_vis_form_object->elements[eid] для одиночного элемента или $c_vis_form_object->elements[eid][sid] для субэлемента группового элемента.

 Будем называть fid а не id, что бы небыло путаницы, далее нам понадобится назначать id на элементы и субэлементы.
 По тем же причинам, вместо id используем eid.


Например, создадим простую форму и проследим за отображением id:

$form = new c_vis_form(); //Создание пустой формы
$form->add_element(); //Добавление элемента
$form->add_element(); //Добавление элемента
$form->add_element(); //Добавление элемента
$form->add_groupelement();//Добавление группового элемента
$form->show();//Отображение элемента
unset($form); //Уничтожение формы


Получим следующий xhtml код:

<form name="vc_999000" id="vc_999000" method="post" >
<input name="vc_999000_0" id="vc_999000_0" value="" type="text"  />
<input name="vc_999000_1" id="vc_999000_1" value="" type="text"  />
<input name="vc_999000_2" id="vc_999000_2" value="" type="text"  />
</form>

Как вы успели заметить, групповой элемент не отображается, это происходит потому что не задан массив субэлементов. Изменим код на следующий:

$form = new c_vis_form(); //Создание пустой формы
$form->add_element(); //Добавление элемента
$form->add_element(); //Добавление элемента
$form->add_element(); //Добавление элемента
$arr=array('a'=>array('1','1a'), 'b'=>array('2','2b'), 'c'=>array('3','3c'));
$form->add_groupelement("","","radio",$arr);//Добавление группового элемента
$form->add_groupelement("","","select",$arr);//Добавление группового элемента
$form->show();//Отображение элемента
unset($form); //Уничтожение формы

В данном случае приведена демонстрация создания radio и select на базе одного массива субэлементов, xhtml код:

<form name="vc_999000" id="vc_999000" method="post" >
<input name="vc_999000_0" id="vc_999000_0" value="" type="text"  />
<input name="vc_999000_1" id="vc_999000_1" value="" type="text"  />
<input name="vc_999000_2" id="vc_999000_2" value="" type="text"  />
<input name="vc_999000_3" id="vc_999000_3_a" value="1" type="radio" checked  />1a
<input name="vc_999000_3" id="vc_999000_3_b" value="2" type="radio"  />2b
<input name="vc_999000_3" id="vc_999000_3_c" value="3" type="radio"  />3c
<select name="vc_999000_4" id="vc_999000_4" >
<option id="vc_999000_4[a]" value="1" selected >1a</option>
<option id="vc_999000_4[b]" value="2" >2b</option>
<option id="vc_999000_4[c]" value="3" >3c</option>
</select>
</form>

File:Sxema24.PNG

Для того, что бы полностью разобраться рассмотрим работу форм на простом примере:

Необходимо создать форму, получающую и обрабатывающую регистрационные данные 
о пользователе на сайте службы знакомств: e-mail, имя, возраст, семейное 
положение, вредные привычки, немного о себе.

Решение подобных задач начинают с написания xhtml кода формы, прима данных, выделения данных именно от этой формы, проверки на корректность и т.п. С использованием этого класса всё намного проще нам необходимо создать форму и описать шаблоны проверки данных, всё.

Исходник [1]

В результате на экране будет показана следующая форма:

File:Sxema25.PNG

Однако, только отображения формы недостаточно. Есть два способа получения данных формы:

  • метод receive — требует объект формы, осуществляет проверку корректности и возвращает данные в массив $c_vis_form_object->values, а так же результат операции: 1 данные корректны, 0 в данных есть ошибка, -1 данные не были получены;
  • статический метод receive_data, возвращает полученные данные относящиеся к данной форме во внешний массив и результат операции: 1 данные получены, -1 данные не были получены.

Каждый из методов возвращает: 1 если данные получены и корректны


Примеры работы методов:

//Применим после кода создания формы
dbg($_POST);
dbg($form->values,"values");
$data=array();
c_vis_form::receive_data($_POST, $data, 999000);
dbg($data);

POST array

  • [ string[15] "vc_999000_email" ] = string[12] "vasia@ttt.ru"
  • [ string[14] "vc_999000_name" ] = string[3] "Имя"
  • [ string[13] "vc_999000_old" ] = string[1] "4"
  • [ string[16] "vc_999000_dating" ] = string[4] "free"
  • [ string[12] "vc_999000_c2" ] = string[6] "check2"
  • [ string[14] "vc_999000_text" ] = string[5] "Я ..."
  • [ string[11] "vc_999000_0" ] = string[9] "Сохранить"

receive Variable name :"values" array

  • [ string[5] "email" ] = string[12] "vasia@ttt.ru"
  • [ string[4] "name" ] = string[3] "Имя"
  • [ string[3] "old" ] = string[1] "4"
  • [ string[6] "dating" ] = string[4] "free"
  • [ string[2] "c1" ] = boolFalse
  • [ string[2] "c2" ] = string[6] "check2"
  • [ string[2] "c3" ] = boolFalse
  • [ string[4] "text" ] = string[5] "Я ..."
  • [ integer 0 ] = string[9] "Сохранить"

receive_data array

  • [ string[5] "email" ] = string[12] "vasia@ttt.ru"
  • [ string[4] "name" ] = string[3] "Имя"
  • [ string[3] "old" ] = string[1] "4"
  • [ string[6] "dating" ] = string[4] "free"
  • [ string[2] "c2" ] = string[6] "check2"
  • [ string[4] "text" ] = string[5] "Я ..."
  • [ integer 0 ] = string[9] "Сохранить"

В довершение нашего примера. Можно было бы реализовать проверку результата операции получения данных receive, в случае если он выдал результат 1, проводить сохранении данных, в противном отображение формы:

//Прием и сохранение данных формы
if($form->receive($_POST)==1){//Если данные корректны и существуют
// . . . сохранение корректных данных
echo "Данные пользователя благополучно сохранены";
}else{//Иначе отобразим форму
$form->show();
}

Но есть метод, предназначенный именно для получения данных, без отображения формы, в случае если данные корректны и существуют:

//Прием и сохранение данных формы
if($form->receive_show_errors_form($_POST)==1){ //Если данные корректны и существуют
// . . . сохранение корректных данных
echo "Данные пользователя благополучно сохранены";
}

Т.е. последние два примера кода абсолютно эквивалентны. Таким образом, код целиком, за исключением комментариев параметров методов выглядел следующим образом [2]

Использование c_vis_link

Ссылки используются для отправки данных методом get. Аналогично как и c_vis_form данные извлекаются из массива с индексами визуальных компонент.

File:Sxema26.PNG

Как было показано в примере выше — для получения данных используются конструкции receive_data.

Например, при нажатии на последнюю ссылку второго примера, мы получим следующий результат:

//Получение данных ссылки
$result = array();
c_link_element::receive_data($_GET,$result,$lnk->id);
dbg($result);
array
• [ integer 0 ] = string[5] "data2"

Обратите внимание на то, что теперь изменились все ссылки, использующие ткущее положение браузера (установленные командой set без второго параметра, или get с параметром $_SERVER['QUERY_STRING']), например, последняя ссылка 1го примера.

До: ?vc_999000_0=data1
После: ?vc_999001_0=data2&vc_999000_0=data1
Т.к. текущее положение стало: ?vc_999001_0=data2

Это касается ссылок с разными id, т.к. с одинаковыми id при пересечении параметров старые параметры будут заменены и изменения ссылок «до» и «после» могут быть незаметны.

Важно понимать, что данные ссылок образованные от элементов с разными id не будут пересекаться, например если мы зайдем по ссылке:
?vc_999001_0=data2&vc_999001_abc=data3&vc_999000_0=data1

//Получение данных ссылки
$result = array();
c_link_element::receive_data($_GET,$result,'999000');
dbg($result);
//Получение данных ссылки
$result = array();
c_link_element::receive_data($_GET,$result,'999001');
dbg($result);
• [ integer 0 ] = string[5] "data2"
• [ string[3] "abc" ] = string[5] "data3"
array
• [ integer 0 ] = string[5] "data1"
array

Этот пример наглядно иллюстрирует что в одной ссылке могут пересекаться данные, принадлежащие к различным объектам c_link_element. При необходимости в одну ссылку добавлять данные, относящиеся к различным объектам можно воспользоваться явным указанием принадлежности данных к объекту.

//Создание пустой ссылки 
$lnk = new c_link_element(array(),null,"ссылка");
$lnk->add_data_in_link(array("data4","data5"));
$lnk->add_data_in_link(array("data1","data2"),'999000');
$lnk->show();

В результате получим следующую ссылку: ?vc_999002_0=data4&vc_999002_1=data5&vc_999000_0=data1&vc_999000_1=data2


Использование c_vis_links

Массивы ссылок, построенные на базе c_vis_link. Аналогично, как и c_vis_form данные извлекаются из массива с индексами визуальных компонент. Для начала рассмотрим простейший пример — создание ссылок на номера страниц, с учетом того, что на странице находится по 10 записей а ссылки должны передавать смещение в записях.


$lnks = new c_vis_links();
//Добавление данных в ссылки
$lnks-> add_flat_data(array()," ","<br />",array(10,20,30,40,50),array(1,2,3,4,5));
//При необходимости на места элементов можно ставить массивы
$lnks-> add_flat_data(array()," ","<br />",  
array(array(1,10),array(2,20),array(3,30,'some')),array(1,2,3));
$lnks->show();
$result = array();
c_link_element::receive_data($_GET, $result,$lnks->id);
dbg($result);

Получили 2 меню. Нажав, например, на последнюю ссылку меню получили данные:

array
• [ integer 0 ] = string[1] "3"
• [ integer 1 ] = string[2] "30"
• [ integer 2 ] = string[4] "some"

Обратите внимание, что ссылки строятся, не затирая значения которые уже заданы и указаны в строке браузера, а изменяя лишь те, с которыми пересекаются их области определения переменных. Например, сейчас нажмем на 1ю ссылку.

array
• [ integer 0 ] = string[2] "10"
• [ integer 1 ] = string[2] "30"
• [ integer 2 ] = string[4] "some"
Личные инструменты

Разработка веб-сайтов, автоматизация.
По всем вопросам обращайтесь по телефонам:

+7 495 640 29 90
http://artofweb.ru