В EPLAN существует два типа форм, отличающихся по свойству форм Работа с формой :

• Статические формы: В данных формах возможная имеющаяся графика одинакова на каждой странице отчета, и высота строк проанализированных данных постоянна.
• Динамические формы: В данных формах графики, если они имеются, построены динамично, и существует возможность добавки так называемых "динамических областей". Высоту строчек можно сделать переменной с помощью свойства форм Динамически подобрать высоту строчки , и можно объединить отчеты нескольких функций на странице отчетов.

В следующих разделах даются пояснения по отдельным динамическим областям, которые можно добавить в динамическую форму (через пункты меню Вставить > Динамическая область > ... в редакторе форм).
Действительно для всех областей: Заданная в редакторе форм ширина области не учитывается, анализируется только высота. Кроме того, необходимо принимать во внимание, что отчет начинается с позиции, на которой находится первая точка вставки; если, например, удалить верхний колонтитул из формы , не перемещая области данных, то начинается отчет с позиции точки вставки области данных.

Через свойства формы Число строк и Высота строки определите максимальную величину области отчета на странице: оба значения перемножаются, и таким образом находится значение (в "мм") для (невидимой) границы области отчета, за которой он прерывается. Линия границы рассчитывается с учетом конца верхнего колонтитула. Если число строк = 20 и высота строки = 10 мм , отчет обрывается на высоте 20 x 10 мм = 200 мм .

Замечание:

Каждая динамическая область может существовать в форме только один раз , в противном случае выводится сообщение и вторая область игнорируется.

Верхний колонтитул

Верхний колонтитул в отчете повторяется для каждого устройства . Если установлен флажок Объединить (в диалоговом окне Настройки: Вывод в страницах ), то отчеты нескольких функций объединяются на странице отчета и верхний колонтитул повторяется на каждом начале страницы и перед следующей анализируемой функцией.

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

Если свойство формы Повторить верхний колонтитул нового столбца установлено, верхний колонтитул повторяется в каждом новом столбце. Если это свойство не установлено, верхний колонтитул отображается только в первом столбце. Тогда в следующих столбцах отобразится больше строк данных, чем указано в свойстве Число строк .

Заголовок

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

Существует возможность определения в форме нескольких заголовков, если, например, места установки, на которых находятся клеммники, необходимо отобразить в спецификации клеммника. Для этого выберите свойство формы Создать заголовки для первых х свойств сортировки и задайте требуемую настройку для поля Настройка сортировки в диалоговом окне Отчеты - (через соответствующее свойство на вкладке Шаблоны ).

Через свойство Без перехода на след. строку для заголовка можно, помимо этого, управлять позицией заголовка в форме: Если это свойство активировано, то заголовок выдается вместе со следующей строкой данных. Если это свойство деактивировано, то для заголовка генерируется отдельная строка.

Замечание:

Если необходимо вывести заголовок для каждой установки, необходимо отсортировать отчет по установкам. Только так можно гарантировать, что каждый заголовок установки выводится только раз.

Область данных

В данной области анализируются данные. Если у формы несколько столбцов (Свойство формы Число столбцов ) и установлен флажок Объединить (диалоговое окно Настройки: Вывод в страницах ), через свойство Каждое устройство начинать в новом столбце можно указать, необходимо ли для каждой анализируемой функции начинать новый столбец, или анализировать данные компактно друг под другом.

Нижний колонтитул области данных

Данная область является "обратным эквивалентом" для заголовка, т. е., он отображается в области данных и перед следующей анализируемой функцией. Здесь можно, например, определить линию, которая визуально отображает, что отчет функции завершен.

Нижний колонтитул

Нижний колонтитул анализируется один раз на страницу, т. е. не для каждой функции. В формах с несколькими столбцами он располагается за последним столбцом.

Замечание:

Графические элементы и заполнитель в динамических формах также размещается вне динамических областей. Как в статических формах, они выводятся один раз на каждой странице отчета, при этом заполнитель анализируется с данными первого объекта заголовка (например, первый клеммник на странице).

Цель Урока

В этом уроке мы научимся создавать в Adobe Illustrator абстрактный современный фон, который состоит из стандартных векторных форм. Затем мы преобразуем стандартные формы в динамические, что позволит нам беспрепятственно управлять их параметрами и даже трансформировать их в другие объекты, получая новые векторные работы в считанные секунды. Все это стало возможным, благодаря новому релизу VectorScribe v2 .

Создание абстрактного фона из стандартных форм Шаг 1

В начале этого урока давайте вкратце рассмотрим, как создать абстрактный фон, используя стандартные формы в Adobe Illustrator. Создаем прямоугольник при помощи Rectangle Tool (M), величина которого соответствует рабочей области и зальем его линейным градиентом, передающим распределение света на нашей сцене.

При помощи Ellipse Tool (L) создадим две окружности, центры которых совпадают.

Шаг 2

Выделяем обе окружности, затем нажимаем на Minus Front в панели Pathfinder.

Заливаем полученный составной путь линейным градиентом от белого к светло-серому цвету.

Добавим новую заливку к форме, нажав на соответствующую кнопку в панели Appearance.

Выделяем нижнюю заливку в панели, затем переходим Effect > Distort & Transform > Transform … и устанавливаем значения для опции Scale.

Изменим направление градиента нижней заливки на противоположное.

Шаг 3

Теперь создадим падающие тени от созданного абстрактного объекта. Нарисуем новую окружность, которую расположим ниже Compound path. Заливаем ее радиальным градиентом, который содержит белый цвет и два оттенка серого цвета.

Нарисуем окружность белого цвета и расположим ее так, как показано на рисунке ниже.

Выделяем окружности, созданные в этом шаге, затем переходим Object > Blend > Make. После чего переходим Object > Blend > Blend Options… и устанавливаем требуемое число шагов.

Таким образом, мы создали тень внутри кольца.

Шаг 4

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

Создадим из этих окружностей бленд объект, способом, указанным в предыдущем шаге.

Этот бленд объект очень скоро станет внешней тенью от кольца.

Шаг 5

Группируем оба бленд объекта.

Установим для созданной группы режим смешивания Multiplyв панели Transparency. Теперь падающие тени стали полупрозрачными.

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

Преобразование стандартных форм в динамические формы Шаг 6

Преобразование стандартных форм в динамические теперь возможно при помощи новой версии плагина VectorScribe v2 . Он имеет функцию узнавания фигур, которая осуществляет такое преобразование. Давайте возьмем Dynamic Shape Tool и наведем указатель на путь одной из стандартных форм.

Как вы можете видеть, появилась аннотация, говорящая о том, что плагин узнал форму. Если мы кликнем по форме, то она немедленно преобразуется в динамическую. Это означает, что мы можем управлять ее параметрами в панели Dynamic Shapes и даже преобразовать ее в другую форму.

Шаг 7

Мы также можем преобразовать все имеющиеся формы в динамические, если, конечно, они имеют правильную форму. Для этого открываем выпадающее меню панели Dynamic Shapes и выбираем Convert to Dynamic Shape.

Плагин сообщает нам, что 61 путь был конвертирован, нажимаем OK.

Шаг 8

Давайте попробуем изменить форму всех существующих объектов. Выбираем Dynamic Polygon и устанавливаем количество сторон.

Как вы можете видеть, все преобразования прошли успешно, не смотря на то, что для создания фона я использовал объекты, обладающие разными свойствами (объекты с несколькими заливками и бленд объекты). В считанные секунды мы получаем другой фон, состоящий из округленных прямоугольников.

Похоже на фокус, но это реально работает!

Шаг 9

В заключении я хочу сказать, что VectorScribe v2 умеет также узнавать округленные углы и трансформировать их в динамические. Создадим скругленный прямоугольник при помощи Rounded Rectangle Tool.

Берем Dynamic Corners Tool и подводим указатель к одному из скругленных углов. Как вы можете видеть, появилась аннотация, указывающая на то, что распознавание осуществлено.

После клика по пути формы, угол будет конвертирован в динамический и его радиусом можно управлять перетаскиванием маркера или в панели Dynamic Corners.

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

Сегодня формы - это один из важнейших инструментов взаимодействия пользователей с веб-приложениями. Формы позволяют организовать эффективное управление информацией на сайте, состоянием самого сайта, оказывать услуги клиентам, передавать информацию другим пользователям, предоставлять доступ к закрытому разделу и многое-многое другое... Поэтому существует вполне естественное желание сделать формы более удобными и адаптированными под конкретные нюансы работы.

Одним из направлений такого улучшения может быть реализация возможности интерактивно, без перезагрузки страницы, управлять количеством полей для ввода данных, как в сторону увеличения, так и в сторону уменьшения. Это может быть очень удобно если необходимо добавить в базу данных приложения не одну, а сразу несколько записей; или если заранее не известно количество однотипных данных, каждое из которых требует отдельного поля для ввода (например, несколько телефонов или кредитных карт пользователя). В этой статье разберем одну из простых реализаций такой возможности через использование javascript библиотеки jQuery.

В самом низу, вы можете скачать архив с примерами, которые разбираются в этой статье.

Добавление нового поля в форму.

Создавать новое поле формы будем с помощью метода.append():

$("селектор" ) .append ("строка" ) ;

который добавляет “строку” во внутрь элемента с указанным “селектором”, при этом добавляемая строка следует за уже существующим содержимым.

Если рассматривать конкретный пример, то это может быть примерно так:

Поле №1 "/> Добавить новое поле

Сама функция addField() может быть реализована следующим образом:

< script type= "text/javascript" > function addField () { var telnum = parseInt($("#add_field_area" ) .find ("div.add:last" ) .attr ("id" ) .slice (3 ) ) 1 ; $("div#add_field_area" ) .append (" Поле №" telnum "" ) ; }

Сначала, как обычно, подключаем библиотеку jQuery и далее объявляем функцию addField(). Функция сначала вычисляет номер, который необходимо вставить в добавляемый элемент - по этому номеру, мы в последствии будем удалять ненужные поля. Затем addField() добавляет в div#add_field_area код блока div#add№ с полем формы внутри, код которого полностью аналогичен коду “Поле №1”, указанному чуть выше. Теперь при нажатии на кнопку “Добавить”, мы можем видеть как мгновенно появляется новое поле.

Удаление конкретного поля формы.

Для удаления элементов DOM-дерева можно пользоваться методом remove():

$("селектор" ) .remove () ;

который применяется к элементу с указанным “селектором”. Будем считать, что по умолчанию одно поле всегда должно оставаться, все дополнительные можно удалять. Для этого в функции addField(), в строке параметра метода.append() мы добавим код кнопки удаления поля, при нажатии на которую будет идти обращение к функции deleteField (id), при этом в функцию будет передаваться номер поля, которое нужно удалить.

function addField () { var telnum = parseInt($("#add_field_area" ) .find ("div.add:last" ) .attr ("id" ) .slice (3 ) ) 1 ; $("div#add_field_area" ) .append (" Поле №" telnum " " ) ; }

Сама функция deleteField() может быть устроена предельно просто:

function deleteField (id) { $("div#add" id) .remove () ; }

Собственно все. Теперь при нажатии на кнопку (красный крестик) напротив выбранного поля - оно исчезнет, а вместе с ним и та информация, которая была записана в нем.

Обработка данных на сервере (php).

Когда форма содержит множественные поля, с однотипными данными, то естественно встает вопрос обработки данных, например перед отправкой в базу данных. В примере выше, этот вопрос решается указанием у поля формы атрибута name с параметром val. Это означает, что после отправки данных этой формы методом POST, значения этих полей будут помещены в массив $_POST[‘val’], элементы которого можно перебрать в цикле foreach (...) {...}, например:

foreach ($_POST [ "val" ] as $value ) { // ваш код.... }

Или, если необходимо, все данные этих однотипных полей “склеить” в одну строку с помощью функции implode():

$str = implode ("|" , $_POST [ "val" ] ) ;

Тогда все значения полей с name=”val” - будут объединены в строку с разделителем “вертикальная черта”.

Но, это обработка на стороне сервера, которая кстати говоря - более предпочтительна по соображениям безопасности. Но, могут возникнуть обстоятельства вынуждающие вас выполнять обработку таких полей на клиентской стороне: например у вас нет доступа к скриптам сервера (используется какой-то удаленный обработчик формы), или вы не можете по каким-то причинам изменить работу обработчика формы на вашем сервере. В таком случае можно так же пользоваться средствами языка javascript, а так как мы уже работаем с библиотекой jQuery - то и продолжим работать в ней.

Обработка данных на клиентской стороне.

Допустим наша задача, все данные этого множественного поля, объединить в строку с разделителем вертикальная черта “|”. На самом деле реализуется это достаточно просто.

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