Вход:  Пароль:  
FreeSource: AltLinux/Sisyphus/Alterator/module/interface ...
Free Source | Каталог | Изменения | НовыеКомментарии | Пользователи | Регистрация |
Эта страница была перенесена на altlinux.org. Текст на freesource.info заморожен.

Интерфейс

Основу интерфейса модуля составляют формы – графическое отображение параметров того или иного объекта системы. При создании интерфейсов следует придерживаться определённых правил, чтобы интерфейс был единообразен и понятен для пользователя. На данный момент интерфейс имеет отдельное описание для qt и отдельное описание для html. В обоих случаях описание носит декларативный характер и состоит из описания местоположения виджетов и привязки интерфейса к соответствующему бакенду.

Простейший интерфейс для qt


Интерфейс описывается на подмножестве языка scheme. Заголовок включает все необходимые определения из стандартной библиотеки, далее следует описание элементов интерфейса. Взаимодействие с бакендом осуществляется путём вызова функций woo-*.

Простейший интерфейс для html


В alterator принято использовать запись в стиле xhtml. Описание статическое и декларативное, вся динамика и привязка к бакенду скрыта в workflow, указанным в теге html в атрибуте wf. По умолчанию адрес бакенда совпадает с адресом описания интерфейса.

Формы

Форма — это графическое представление интерфейса некоторого объекта системы. При создании дизайна формы следует руководствоваться простым правилом — названия полей не должны быть «оторваны» от самих полей.


Пример правильного описания для qt:

Обратите внимание на “0” для колонки с метками – это необходимо, чтобы колонка заняла в ширину ровно столько сколько необходимо для самой длинной метки.


Пример правильного описания для html:

CSS-класс “form-table” не будет корректно работать для старых браузеров (Internet Explorer 6.0), для них необходимо во всех td, содержащих метки использовать CSS-класс “form-table-label”.

Группировка элементов формы

Иногда интерфейс становится столь большим, что приходится группировать отдельные его части.


Группировка при помощи пустых строк


Пример для html:


Пример для qt:


Группировка при помощи горизонтальной черты
Пример для html:


Пример для qt:


В этом способе группировки возможно задание названия группы. Название группы делается полужирным шрифтом и выравнено по левому краю формы.
Пример для html:


Пример для qt:

Простейшее форматирование текста

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

текст полужирным шрифтом

Пример для qt:


Пример для html:

текст маленьким шрифтом

Пример для qt:


Пример для html:

Элементы формы

Форма состоит из различных элементов. При размещении элементов стоит руководствоваться следующими правилами:

общие атрибуты

Если элемент формы надо скрыть, то в html для этого есть параметры CSS, а в qt — атрибут visibility.


Пример для qt:


Пример для html:

сheckbox

Данный элемент предназначен для представления атрибута логического типа.
Метка к checkbox должна идти после галочки и начинаться с заглавной буквы.
Пример для qt:

Для получения/изменения значения пользуйтесь атрибутом value.


Пример для html:

Обратите внимание на написание тега в стиле xml, а не html.


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

Функция write_bool_param принимает два параметра – имя и значение. В качестве значения допустимы любые варианты: y, yes, on, true (в любом регистре). Функция test_bool применяется для «считывания» значения параметра, независимым от представления в протоколе виде.

button

Данный элемент предназначен для представления активных действий с формой.

Пример для qt:

Пример для html:

Обратите внимание на использование класса btn и на написание тега в стиле xml, а не html.

combobox/listbox/select

В самом простом случае данные элементы представляют атрибут типа перечисление (enum), то есть обеспечивают выбор одного варианта
из числа возможных. Сombobox – более компактное представление чем Listbox, но одновременно выдно только один вариант, чтобы просмотреть остальные – надо вызвать выпадающий список.
Список вариантов предоставляет бакенд (вызываемый с action list). Параметр enumref – адрес к которому надо обращаться к бакенду за списком.


Пример для qt:

Текущий выбранный вариант – параметр value.


Пример для html:

Размер списка в строках – параметр size. Обратите внимание на написание тега в стиле xml, а не html.


Пример бакенда на shell:

Функция write_enum_item принимает два параметра:

Если функция вызвана без параметра, то она начинает со стандартного ввода строки с одним или более значениями, разделённых стандартным разделителем (переменная IFS). Первое и второе значение интерпретируются также: вариант и его название.

checklistbox

Также как и listbox представляет атрибут перечислимого типа, но уже с возможностью множественного выбора. Для заполнения списка используется тот же параметр enumref. Для «массового» выделения бакенд должен выводить список имён, в бакенд результат возвращается также в виде списка. Список представляется в виде строки с разделителем “;", например “a;b;c;d”.


Пример для qt:

Текущий набор выделенных элементов – параметр value.


Пример для html:

edit

Представляет атрибут строкового типа.


Пример для qt:

Для изменения и получения значения служит атрибут value.


Пример для html:


Пример бакенда на shell:

Функция write_string_param принимает два атрибута: имя и значение.


Для ввода пароля есть специальный вариант edit.


Пример для qt:


Пример для html:

dateedit

Специализированный виджет в виде календаря и текстового поля для работы с датой — строкой формата ГГГГ-ММ-ДД.


Пример для qt:

Для получения и изменения значения используйте атрибут value.


Пример для html:

Календарь будет работать только в браузерах с включенной поддержкой Javascript.

timeedit

Специализированный виджет в виде аналоговых часов и текстового поля для работы со временем — строкой формата ЧЧ:ММ:CC.


Пример для qt:

Для получения и изменения значения используйте атрибут value.


Пример для html:

Часы будут работать только в браузерах с включенной поддержкой Javascript.


 
Файлов нет. [Показать файлы/форму]
Комментарии [Скрыть комментарии/форму]