Написание пакета для PFSense: Элементы управления

в 19:25, , рубрики: pfsense

image

В предыдущей статье был рассмотрен процесс создания простого GUI пакета для pfSense. Пакет содержал одно единственное поле с элементом управления типа checkbox, описанное в разделе fields XML файла пакета.

Перед продолжением необходимо дать некоторые пояснения по структуре раздела fields. В этом разделе содержится описание полей формы текущей страницы GUI. Каждое поле описывается в узле field и содержит элементы:

  • fielddescr — название поля, выводится в левой части формы перед элементом управления;
  • fieldname — имя поля, под которым оно будет доступно в системе при обработке введенных данных;
  • description — комментарий, описывающий данное поле, выводится под элементом управления;
  • type — тип элемента управления, используемого в данном поле.


На рисунке ниже показано соответствие элементов XML структуры пакета и элементов графического интерфейса.

image

Элементы управления

Рассмотрим простые элементы управления графического интерфейса пакетов pfSense:

  • сheckbox
  • input
  • password
  • textarea
  • select
  • interfaces_selection

Элемент CHECKBOX
Представляет собой обычный «флажок», позволяющий пользователю возможность сделать выбор да/нет.

                <field>
                        <fielddescr>Enable</fielddescr>
                        <fieldname>enable</fieldname>
                        <description>Check this for enable package.</description>
                        <type>checkbox</type>
                </field>

Элемент INPUT
Представляет собой простое текстовое поле для ввода однострочной текстовой информации. Параметр size позволяет задать ширину окна этого элемента.

                <field>
                        <fielddescr>Login</fielddescr>
                        <fieldname>pkglogin</fieldname>
                        <description>Enter package login.</description>
                        <type>input</type>
                        <size>30</size>
                </field>

Элемент PASSWORD
Является разновидностью элемента input и служит для ввода пароля в WEB форме пакета. Но введенные данные здесь отображаются в виде звёздочек.

                <field>
                        <fielddescr>Password</fielddescr>
                        <fieldname>pkgpass</fieldname>
                        <description>Enter package password.</description>
                        <type>password</type>
                        <size>30</size>
                </field>

Элемент TEXTAREA
Представляет собой многострочное текстовое поле. Кроме стандартных опций XML стуктуры поля содержит в описании параметры cols и rows, задающие размеры элемента в колоноках и строках соответственно. Имеется также параметр encoding, указывающий в какой кодировке сохранять введенные пользователем данные. Обычно это кодировка Base64.

                <field>
                        <fielddescr>Comments</fielddescr>
                        <fieldname>pkgcomments</fieldname>
                        <description>
                           Enter you coments here.
                        </description>
                        <type>textarea</type>
                        <cols>60</cols>
                        <rows>3</rows>
                        <encoding>base64</encoding>
                </field>

Элемент SELECT
Представляет собой выпадающий список значений в виде combo box, задаваемых в секции options. Модификатор multiple превращает обычный combo box в элемент list box, позволяющий выбирать несколько значений одновременно (нажатием Control + Лев. клик). Параметр default_value задает значение по умолчанию из списка в секции options.

                <field>
                        <fielddescr>Age</fielddescr>
                        <fieldname>pkgage</fieldname>
                        <description>Choose your age.</description>
                        <type>select</type>
                        <default_value>adl</default_value>
                        <options>
                                 <option><value>chd</value><name>children</name></option>
                                 <option><value>tng</value><name>teenager</name></option>
                                 <option><value>adl</value><name>adult</name></option>
                        </options>
                        <multiple/>
                </field>

Элемент INTERFACES_SELECTION
Является специальной разновидностью элемента select. В этот список выводятся все основные сетевые интерфейсы pfSense. Также как и в элементе select здесь доступны дополнительные опции multiple и default_value.

                <field>
                        <fielddescr>Interface</fielddescr>
                        <fieldname>pkginterface</fieldname>
                        <description>
                            Select interface(s) for using in the package. Use 'Ctrl' + L_click for multiple selection.
                        </description>
                        <type>interfaces_selection</type>
                        <default_value>lan</default_value>
                        <multiple/>
                </field>

Собрав приведенные выше описания элементов управления в один XML файл получим следующую форму Web интерфейса:
image

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

Исходный код XML файла к статье.
<?xml version="1.0" encoding="utf-8" ?>
<packagegui>
        <name>mypkg</name>
        <title>My First Package</title>
        <category>Test</category>
        <version>0.1</version>
        <include_file>/usr/local/pkg/mypkg.inc</include_file>
        <tabs>
                <tab>
                        <text>My Package</text>
                        <url>/pkg_edit.php?xml=mypkg.xml</url>
                        <active/>		
                </tab>
        </tabs>
        <fields>
                <field>
                        <fielddescr>Enable</fielddescr>
                        <fieldname>enable</fieldname>
                        <description>Check this for enable package.</description>
                        <type>checkbox</type>
                </field>
                <field>
                        <fielddescr>Interface</fielddescr>
                        <fieldname>pkginterface</fieldname>
                        <description>Select interface(s) for using in the package. Use 'Ctrl' + L_click for multiple selection.</description>
                        <type>interfaces_selection</type>
                        <default_value>lan</default_value>
                        <required/>
                        <multiple/>
                </field>
                <field>
                        <fielddescr>Login</fielddescr>
                        <fieldname>pkglogin</fieldname>
                        <description>Enter package login.</description>
                        <type>input</type>
                        <size>30</size>
                </field>
                <field>
                        <fielddescr>Password</fielddescr>
                        <fieldname>pkgpass</fieldname>
                        <description>Enter package password.</description>
                        <type>password</type>
                        <size>30</size>
                </field>
                <field>
                        <fielddescr>Comments</fielddescr>
                        <fieldname>pkgcomments</fieldname>
                        <description>
                           Enter you coments here.
                        </description>
                        <type>textarea</type>
                        <cols>60</cols>
                        <rows>3</rows>
                        <encoding>base64</encoding>
                </field>
                <field>
                        <fielddescr>Age</fielddescr>
                        <fieldname>pkgage</fieldname>
                        <description>Choose your age.</description>
                        <type>select</type>
                        <default_value>adl</default_value>
                        <options>
                                 <option><value>chd</value><name>children</name></option>
                                 <option><value>tng</value><name>teenager</name></option>
                                 <option><value>adl</value><name>adult</name></option>
                        </options>
                </field>
        </fields>
        <custom_php_command_before_form/>
        <custom_php_validation_command/>
        <custom_php_resync_config_command/>
        <custom_php_install_command/>
        <custom_php_deinstall_command/>
</packagegui>

PS: Прошу прощения у коллег за такое дробление материала, но не хочется делать длинные статьи.

Автор: dvserg

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js