В LibreOffice некоторые графические элементы интерфейса, такие как диалоги и элементы управления в них (кнопки, чекбоксы, выпадающие списки, радиокнопки и так далее) описаны в файлах с расширением .ui. Внутри это XML файлы, которые в принципе можно править и создавать в любом текстовом редакторе. Однако всегда удобнее видеть готовый результат сразу и управлять размещением графических элементов в специальном редакторе. Таким редактором для LibreOffice является Glade - редактор интерфейса из проекта Gnome.
Примечание: аналогичные файлы с расширением .ui создает ещё один аналогичный редактор графических интерфейсов Qt Designer из проекта KDE. Файлы .ui, созданные в Glade не совместимы с файлам .ui, созданными в Qt Designer, и, соответственно, для редактирования .ui файлов из LibreOffice программа Qt Designer не подходит (а жаль)!
К сожалению, современные версии Glade не доступны для ОС Windows, поэтому для работы нужно будет использовать любой удобный вам дистрибутив Linux (можно Linux установить в виртуальной машине типа VirtualBox). Будем считать, что с установкой Glade вы разобрались и он у вас запускается. Перейдём непосредственно к Glade.
Запускаем Glade и видим такое окно (версия Glade 3.22):
Для полноценной работы с диалогами именно для LibreOffice в Glade нужно указать каталог в LibreOffice с описанием элементов управления из состава самого LibreOffice. Это нужно в случае, если вы захотите изменить существующий диалог LibreOffice или создать новый диалог, в котором придется использовать предварительно уже настроенный сложный элемент из LibreOffice. Делается это так: открываете параметры Glade, нажав на клавишу-бутерброд в правом верхнем углу
и добавляете в раздел "Дополнительные пути к каталогу" следующий путь <ваш_каталог_установки_LibreOffice>/share/glade. Сохраните настройку и перезапустите Glade.
В этой статье мы будем создавать новый диалог для пакетного конвертирования документов из формата в формат из LibreOffice.
Первое, с чего нужно начать создание любого графического интерфейса - это прототипирование, то есть нужно придумать и показать миру внешний вид интерфейса, картинку, как это будет выглядеть. Для этого можно использовать просто лист бумаги и карандаш, а можно специальные программы. Я использую для такой задачи программу Pencil.
Итак, используя Pencil, я создал вот такой прототип диалога (который по факту работы в Glade получилось немного упростить):
Для начала в Glade нужно создать новый проект, нажав на соответствующий значок в виде пустого листа в левом верхнем углу. Окно Glade примет вот такой вид с тремя рабочими областями:
Затем добавить в проект окно диалога (GtkDialog) из меню "Окна" в верхней части экрана (перевод интерфейса самого Glade 3.22 на русский язык выполнен как-то частично, но уж как есть):
Теперь нужно задать диалогу ID, по которому он будет вызываться в исходном коде программы. Это делается в правой части Glade, на боковой панели, на вкладке "Основные" в самой первой строке. У меня это будет Document_converter.
А вот дальше нужно сначала подумать, прежде, чем что-то делать. Дело в том, что Glade не позволяет просто размещать управляющие элементы (виджеты) в окне нашего диалога, как угодно. Вернее позволяет, но по-умолчанию это только один виджет размером во всё окно! Поэтому сначала нужно разбить внутреннюю область диалога на несколько частей, добавив на диалог один или несколько контейнеров.
Контейнер - это специальный элемент в GTK, который позволяет создавать разметку области. Каждый контейнер имеет свои параметры. На контейнерах можно размещать, как дополнительные контейнеры, так и виджеты. Этих контейнеров в Glade достаточно много разных видов, и, комбинируя их, а также их параметры и взаимное расположение, а ещё и варьируя параметры самих виджетов, можно будет настроить общий внешний вид диалога.
Небольшая ремарка: на мой взгляд - это более, чем странная концепция, которая достаточно не легко мной воспринимается. Однако, скорее всего, именно такой механизм размещения виджетов реализован не просто так, а имеет какие-то причины.
А вот дальше нужно сначала подумать, прежде, чем что-то делать. Дело в том, что Glade не позволяет просто размещать управляющие элементы (виджеты) в окне нашего диалога, как угодно. Вернее позволяет, но по-умолчанию это только один виджет размером во всё окно! Поэтому сначала нужно разбить внутреннюю область диалога на несколько частей, добавив на диалог один или несколько контейнеров.
Контейнер - это специальный элемент в GTK, который позволяет создавать разметку области. Каждый контейнер имеет свои параметры. На контейнерах можно размещать, как дополнительные контейнеры, так и виджеты. Этих контейнеров в Glade достаточно много разных видов, и, комбинируя их, а также их параметры и взаимное расположение, а ещё и варьируя параметры самих виджетов, можно будет настроить общий внешний вид диалога.
Небольшая ремарка: на мой взгляд - это более, чем странная концепция, которая достаточно не легко мной воспринимается. Однако, скорее всего, именно такой механизм размещения виджетов реализован не просто так, а имеет какие-то причины.
Итак, глядя на наш макет диалога, исходя из парадигмы, что каждый виджет требует под себя отдельное посадочное место, то нужно разделить наш диалог на сетку из тринадцати строк и трёх столбцов. Приступим.
С левой стороны в Glade есть древовидное иерархическое представление всех объектов в нашем диалоге. Каждый графический элемент верхнего уровня (окно, любой диалог) уже содержит в себе предварительно настроенный какой-либо контейнер.
В нашем диалоге также по-умолчанию уже имеется контейнер - графически выделенный, как тёмная область. Тип этого контейнера - GtkBox (внутренний). Для работы с ним нужно в левой части экрана, в дереве элементов, раскрыть строку с именем нашего диалога (самую верхнюю) и выделить строку GtkBox (внутренний)).
Примечание: для работы с любым элементом в Glade элемент сначала нужно выделить. Делать это можно либо прямо в центральной области, где показан результат работы, либо в дереве в левой части Glade.
Для создания той самой сетки 13х3 ячеек в нашем диалоге нужно использовать контейнер типа GtkGrid. Выбираем такой контейнер из одноимённого меню "Контейнеры" в верхней части окна Glade и щёлкаем мышью на темной области в нашем диалоге. Мы помним, что нам надо тринадцать строк с учётом кнопок управления диалогом (Help, Cancel, Convert), поэтому для контейнера GtkGrid (убедитесь, что в дереве слева выделен именно он) в правой части Glade на боковой панели увеличиваем значение параметра Count (количество) для "Строки" до двенадцати (под кнопки управления диалогом уже зарезервирована отдельная область). Количество столбцов оставляем равным трём.
Примечание: Все настройки контейнеров, включая размеры, можно изменять и после того, как на контейнере будут размещены виджеты. Однако это приведёт к дополнительной работе по перемещению уже существующих виджетов в новое положение. Лучше продумывать размещение виджетов и разметку заранее.
Вот, что мы получили в итоге:
Теперь следующий этап - это размещение виджетов в контейнере.
Выбираем виджеты из меню "Control" и "Display", и щёлкаем мышью на соответствующих им местах в нашей разметке. Нам будут нужны (указаны меню - тип виджета - мой комментарий):
Display - GtkLabel - текстовая надпись-метка, подсказка
Control - GtkFileChooserButton - кнопка для выбора файла/каталога
Control - GtkEntry - поле для ввода текста
Control - GtkButton - кнопка
Control - GtkChekButton - чекбокс (галочка)
Control - GtkRadioButton - радиокнопка
Control - GtkComboBoxText - выпадающий список
Display - GtkProgressBar - прогресс бар
Не пугайтесь, что при размещении виджетов на диалоге он будет сжиматься и виджеты будут жаться друг к другу. Дистанцию между виджетами и прочий лоск мы будем наводить позднее.
Обратите внимание, что при размещении виджетов в ячейках сетки их можно растягивать по-горизонтали и по-вертикали на соседние ячейки сетки. Делается это для любого выделенного виджета на правой боковой панели на вкладке "Упаковка", параметры "Ширина" и "Высота" соответственно, значение которых означает количество занимаемых ячеек в контейнере. Отсчёт занимаемых ячеек начинается с верхней левой ячейки. Это нужно учитывать, если вы виджет хотите сделать большой.
Каждому виджету обязательно нужно присвоить ID на правой боковой панели в соответствующем поле на вкладке "Основные". Это идентификатор виджета, по которому с ним будет работать код программы. ID должен быть уникальным для данного диалога/окна и крайне желательно, чтобы из ID было понятно, что это за тип виджета и что он делает.
Примечание (важное!): ID нужно прописывать не только самим виджетам типа кнопок, чекбоксов, меток и выпадающих списков, но и вложенным в виджеты элементам (если такие есть конечно)! Например каждый элемент в выпадающем списке может иметь свой ID. И они должны каждый иметь свой уникальный ID. Хоть это и не обязательно, но в дальнейшем, в коде, это обязательно пригодится!
Если вы ошибочно установили виджет не на то место, какое планировали изначально, то виджет можно либо удалить, нажав на клавишу Delete на клавиатуре, либо переместить на нужное место в контейнере используя параметры виджета "Прибавление слева" и "Прибавление сверху" на вкладке "Упаковка" на правой боковой панели. Номера строк и столбцов в контейнерах начинаются с нуля. То есть левая верхняя ячейка нашего контейнера будет иметь адрес 0,0.
Вот итоговый вид нашего диалога (пока итоговый) в Glade:
А вот, как диалог будет выглядеть в KDE:
С левой стороны в Glade есть древовидное иерархическое представление всех объектов в нашем диалоге. Каждый графический элемент верхнего уровня (окно, любой диалог) уже содержит в себе предварительно настроенный какой-либо контейнер.
В нашем диалоге также по-умолчанию уже имеется контейнер - графически выделенный, как тёмная область. Тип этого контейнера - GtkBox (внутренний). Для работы с ним нужно в левой части экрана, в дереве элементов, раскрыть строку с именем нашего диалога (самую верхнюю) и выделить строку GtkBox (внутренний)).
Примечание: для работы с любым элементом в Glade элемент сначала нужно выделить. Делать это можно либо прямо в центральной области, где показан результат работы, либо в дереве в левой части Glade.
Для создания той самой сетки 13х3 ячеек в нашем диалоге нужно использовать контейнер типа GtkGrid. Выбираем такой контейнер из одноимённого меню "Контейнеры" в верхней части окна Glade и щёлкаем мышью на темной области в нашем диалоге. Мы помним, что нам надо тринадцать строк с учётом кнопок управления диалогом (Help, Cancel, Convert), поэтому для контейнера GtkGrid (убедитесь, что в дереве слева выделен именно он) в правой части Glade на боковой панели увеличиваем значение параметра Count (количество) для "Строки" до двенадцати (под кнопки управления диалогом уже зарезервирована отдельная область). Количество столбцов оставляем равным трём.
Примечание: Все настройки контейнеров, включая размеры, можно изменять и после того, как на контейнере будут размещены виджеты. Однако это приведёт к дополнительной работе по перемещению уже существующих виджетов в новое положение. Лучше продумывать размещение виджетов и разметку заранее.
Вот, что мы получили в итоге:
Выбираем виджеты из меню "Control" и "Display", и щёлкаем мышью на соответствующих им местах в нашей разметке. Нам будут нужны (указаны меню - тип виджета - мой комментарий):
Display - GtkLabel - текстовая надпись-метка, подсказка
Control - GtkFileChooserButton - кнопка для выбора файла/каталога
Control - GtkEntry - поле для ввода текста
Control - GtkButton - кнопка
Control - GtkChekButton - чекбокс (галочка)
Control - GtkRadioButton - радиокнопка
Control - GtkComboBoxText - выпадающий список
Display - GtkProgressBar - прогресс бар
Не пугайтесь, что при размещении виджетов на диалоге он будет сжиматься и виджеты будут жаться друг к другу. Дистанцию между виджетами и прочий лоск мы будем наводить позднее.
Обратите внимание, что при размещении виджетов в ячейках сетки их можно растягивать по-горизонтали и по-вертикали на соседние ячейки сетки. Делается это для любого выделенного виджета на правой боковой панели на вкладке "Упаковка", параметры "Ширина" и "Высота" соответственно, значение которых означает количество занимаемых ячеек в контейнере. Отсчёт занимаемых ячеек начинается с верхней левой ячейки. Это нужно учитывать, если вы виджет хотите сделать большой.
Каждому виджету обязательно нужно присвоить ID на правой боковой панели в соответствующем поле на вкладке "Основные". Это идентификатор виджета, по которому с ним будет работать код программы. ID должен быть уникальным для данного диалога/окна и крайне желательно, чтобы из ID было понятно, что это за тип виджета и что он делает.
Примечание (важное!): ID нужно прописывать не только самим виджетам типа кнопок, чекбоксов, меток и выпадающих списков, но и вложенным в виджеты элементам (если такие есть конечно)! Например каждый элемент в выпадающем списке может иметь свой ID. И они должны каждый иметь свой уникальный ID. Хоть это и не обязательно, но в дальнейшем, в коде, это обязательно пригодится!
Если вы ошибочно установили виджет не на то место, какое планировали изначально, то виджет можно либо удалить, нажав на клавишу Delete на клавиатуре, либо переместить на нужное место в контейнере используя параметры виджета "Прибавление слева" и "Прибавление сверху" на вкладке "Упаковка" на правой боковой панели. Номера строк и столбцов в контейнерах начинаются с нуля. То есть левая верхняя ячейка нашего контейнера будет иметь адрес 0,0.
Вот итоговый вид нашего диалога (пока итоговый) в Glade:
Комментариев нет:
Отправить комментарий
Внимание! Сообщения проходят премодерацию!