Создание приложение с графическим интерфейсом

Создание приложение с графическим интерфейсом

Для Python существует множество библиотек для создания графического интерфейса пользователя (GUI). Здесь будет рассмотрена только одна — Tkinter. Это привязка Python к Tcl/Tk. Она поставляется вместе с Python. Для построения графических интерфейсов частенько используют построители (Builders), но мы рассмотрим "ручной" вариант GUI-программирования: он поможет лучше уяснить принципы работы графических приложений.

Почти все современные графические интерфейсы общего назначения строятся по модели WIMP — Window, Icon, Menu, Pointer (окно, иконка, меню, курсор [обычно мыши]). Внутри окон рисуются элементы графического интерфейса, именуемые "виджетами" (widget — штучка).

Вот лишь некоторые виджеты из Tcl/Tk:

Toplevel Окно верхнего уровня (корневой виджет) Button Кнопка. Простая кнопка для выполнения команды и других действий Canvas Рисунок. Может использоваться для вывода графических примитивов, например, для построения графиков Checkbutton Флажок. Кнопка, имеющая два состояния, при нажатии изменяет состояние на противоположное Entry Поле ввода текста Frame Рамка. Содержит в себе другие визуальные компоненты Label Этикетка. Показывает некоторый текст или графическое изображение Listbox Список. Показывает список, из которых пользователь может выделить один или несколько элементов Menu Меню. Служит для организации всплывающих (popup) и ниспадающих (pulldown) меню Menubutton Кнопка-меню. Используется для организации pulldown-меню Message Сообщение. Аналогично Label , но позволяет заворачивать длинные строки и легко меняет свой размер Radiobutton Переключатель. Представляет одно из альтернативных значений некоторой переменной. Обычно действует в группе. При нажатии на одну из кнопок, все остальные кнопки автоматически "отскакивают", совсем как кнопки выбора волны на радиоприемнике Scale Шкала. Позволяет задать числовое значение путем перемещения движка Scrollbar Полоса прокрутки. Может использоваться вместе с некоторыми другими компонентами для их прокрутки Text Форматированный текст. Позволяет показывать, редактировать и форматировать текст с использованием различных стилей, а также внедрять в текст рисунки и окна.

Примеры виджетов (порождены этой программой)

Рассмотрим подробнее следующую программу:

Результаты работы этой программы:

Заметьте в примере выше способ вызова функции для обработки собятия нажатие на кнопку: он задается именованным аргументом command . Аналогично кнопка exit_button выполняет закрытие окна (и всего приложения), так как ей задан метод destroy объекта root .

Окно графического приложения состоит из вложенных друг в друга виджетов. Для примера выше дерево виджетов выглядит так:

Расположением виджетов управляют менеджеры расположения. В Tkinter их три разновидности:

pack "Упаковывает" виджеты друг к другу так, чтобы они "тяготели" к определенным краям. Самый простой из менеджеров расположения, но достаточен для многих задач. grid Располагает виджеты в ячейках прямоугольной сетки (почти как в электронной таблице). place Располагает подчиненные виджеты относительно виджета-хозяина, в абсолютных или относительных координатах.

В основном GUI-приложения состоят из двух фаз: (I) фазы генерации интерфейса и (II) фазы цикла обработки событий. На фазе генерации интерфейса каждый виджет создается (при этом возможно задание некоторых аргументов); прикрепляется одним из указанных трех методов к своему хозяину. Виджеты появляются на экране только в результате прикрепления к уже прикрепленным виджетам. Для запуска фазы II используется метод mainloop() Toplevel-виджета. На второй фазе изменение свойств виджетов производится с помощью метода configure().

Каждый виджет может обрабатывать возникающие в нем события: движения курсора мыши, ввод с клавиатуры и т.п. Основные события в Tkinter:

KeyPress нажатие клавиши на клавиатуре KeyRelease отпускание клавиши на клавиатуре ButtonPress нажатие кнопки мыши ButtonRelease отпускание кнопки мыши Motion движение мыши (в рамках компетенции виджета) Enter вхождение курсора в пределы виджета Leave выход курсора за пределы виджета MouseWheel кручение колесика мыши Visibility изменение видимости окна FocusIn окно получает фокус FocusOut окно теряет фокус Reparent изменение родителя окна Destroy уничтожение окна Activate окно становится активным Deactivate окно становится неактивным

Описание события задается строкой (часть элементов может быть опущена):

Например,

  • " " или " " — нажатие правой кнопки мыши
  • " " — двойной щелчок левой кнопки мыши
  • " " — двойной щелчок левой кнопки мыши при нажатой клавише Shift
  • " " — нажатие клавиши Пробел
  • "k" — нажатие клавиши с символом "k"

Пример программы, в которой текстовое поле перехватывает движения мыши и пишет атрибуты события (event):

Читайте также:  Браузеры для ноутбука windows 7

Конечно, кажды виджет имеет большое количество всевозможных параметров, которые можно задавать и затем изменять. (Например, так мы изменяли текст в этикетке: square_label.configure(text=square) .

Для удобства связи между виджетами применяются специальные переменные (они бывают четырех типов: BooleanVar , StringVar , FloatVar , IntegerVar — по представляемым ими типам.

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

Следующая программа dclock.py иллюстрирует работу переменной, в результате чего мы получаем "электронные часы":

Напоследок важное замечание: не гонитесь за использованием как можно большего числа различных штучек, так как удобство интерфейса зависит не от этого.

В этой теме рассмотрено Средство GUI Builder в среде IDE NetBeans, и приведено пошаговое описание процесса создания графического интерфейса пользователя для приложения с именем MyApplication с помощью конструктора графического интерфейса пользователя IDE NetBeans.

Данная тема обучает следующему:

  • Работать с интерфейсом средства GUI Builder
  • Создавать GUI Container (контейнер GUI)
  • Добавлять компоненты
  • Выравнивать их положение
  • Изменять размер
  • Настраивать привязку компонентов
  • Управлять поведением при автоматическом изменении размера
  • Редактировать свойства компонентов.

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

Визуальные средства поддержки в конструкторе GUI

Направляющие линии

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

Таблица 1. Направляющие линии.

Действие Изображение Описание
Отступ Отступы – это предпочтительные расстояния между элементами и контейнерами, в которых расположены эти элементы. Отступы обозначаются горизонтальными и вертикальными штриховыми линиями.
Смещение Смещения – это предпочтительный интервал между смежными элементами. Предлагаемые смещения обозначаются горизонтальными и вертикальными штриховыми линиями.
Базовая линия Выравнивание по базовой линии отражает предпочтительное соотношение между смежными элементами, содержащими отображаемый текст. Базовая линия обозначается штриховой горизонтальной линией.
Граница Границы (верхняя, нижняя, левая и правая) определяют возможные соотношения по выравниванию смежных элементов. Предлагаемые границы обозначаются штриховыми горизонтальными и вертикальными линиями.
Сдвиг Сдвиг определяет, на сколько один элемент смещен относительно другого в направлении вниз и вправо. Предлагаемый сдвиг обозначается двумя вертикальными штриховыми линиями.
Предпочтительное расстояние Предпочтительные расстояния (маленькое, среднее и большое) представляют собой размеры промежутков между смежными компонентами. Предпочтительные расстояния предлагаются в виде горизонтальных или вертикальных штриховых направляющих.

Точки привязки

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

Таблица 2. Точки привязки.

Действие Изображение Описание
Контейнер Привязки, соединяющие отдельные элементы c контейнерами, внутри которых они расположены, представлены в виде небольших полукруглых индикаторов со штриховыми линиями, идущими от границы контейнера непосредственно к элементу.
Элемент Привязки, соединяющие отдельные элементы со смежным элементами, представлены в виде небольших полукруглых индикаторов со штриховыми линиями, идущими от одного элемента до другого.

Установка размеров индикаторов

Таблица 3. Установка размеров индикаторов.

Действие Изображение Описание
Одинаковый размер Если ряд элементов (не обязательно смежных) имеет одинаковую высоту или ширину, говорят, что они имеют одинаковый размер. Эта ситуация обозначается наличием небольших прямоугольников на верхней границе каждого элемента, имеющего это свойство.
Автоматическое изменение размера Автоматическое изменение размера – это динамическое изменение ширины или высоты элемента во время выполнения. Автоматическое изменение размера обозначается состоянием кнопок изменения размера в горизонтальном и вертикальном направлениях (переменность ширины и высоты соответственно) на панели инструментов Конструктора GUI. Для включения функции автоматического изменения размера выберите изменять размерв списке "Другие свойства" окна "Свойства".

Выделение и ручки изменения размера

Таблица 4. Выделение и ручки изменения размера.

Действие Изображение Описание
Выделение Выделение оранжевым цветом обозначает место, в которое будет перемещен выбранный компонент.
Ручки изменения размера Маленькие квадратные ручки изменения размера отображаются по периметру выбранного компонента. Для изменения размера компонента необходимо нажать ручку и, удерживая, перетащить ее в нужную позицию.
Читайте также:  Как создать игру на java

Создание приложения с графическим интерфейсом

Видеоурок:

Текстовая версия видеоурока

Создание приложения

  1. Запустите IDE NetBeans.
  2. В меню IDE выберите ‘Файл > Создать проект’, как показано на рисунке (см. рис. 1).


Рис. 1. Создание нового проекта

В мастере создания проекта разверните категорию "Java" и выберите "Приложение Java". Затем нажмите кнопку "Дальше"(рис. 2).


Рис. 2. Выбор приложения Java

  • На странице мастера "Новый Приложение Java" выполните следующие действия (рис. 3):
    • Введите MyApplication в поле "Имя проекта";
    • Не устанавливайте флажок "Использовать отдельную папку для хранения библиотек";
    • !Снимите флажок "Создать главный класс".
    • Нажмите кнопку "Готово".

    • Рис. 3. Настройка мастера

      Проект будет создан и открыт в среде IDE (рис. 4).


      Рис. 4. Проект MyApplication в среде IDE

      Создание формы приложения

      В примере создана форма JFrame, и в нее добавлена метка JLabel.

      Создание формы JFrame:

      1. В окне ‘Проекты’ разверните узел ImageDisplayApp.
      2. Щелкните правой кнопкой узел "Исходные файлы" и выберите форму "Создать" > "JFrame"(рис. 5)


      Рис. 5. Выбор формы JFrame.

      В качестве имени класса введите MyJFrame. Для этого Введите MyJFrame в поле "Имя класса" (рис. 6)


      Рис. 6. Редактирование формы JFrame в мастере.

      В результате будет создана пустая форма и откроется окно Палитра, если оно было закрыто(рис. 7).


      Рис. 7. Пустая формы JFrame.

        В разделе "Палитра" выберите компонент "Метка" и перетащите его в форму(рис. 8).


      Рис. 8. Выбор и перенос метки на форму.

    • В разделе "Палитра" выберите компонент "Кнопка" и перетащите его в форму.
    • Создание обработчика события кнопки:

      • Двойным нажатием по кнопке, будет создан обработчик события нажатия кнопки.

      Создадим обработчик события нажатия кнопки, для кнопки "jButton1". В нашей программе появится код:

      Пусть по нажатию кнопки, у нас изменится текст метки "jLabel1". Для этого добавим код в обработчик события нажатия кнопки "jButton1":

      Изменение текста кнопки

      Изменим текст кнопки на "HelloWorld"

      Текст кнопки можно изменить несколькими способами. Например:(рис. 9)

      • Через контекстное меню, вызванное правой кнопкой мыши, когда курсор находится в области кнопки
      • Через окно "Свойства" в строке значения с именем "text"


      Рис. 9. Изменение текста кнопки.

      Запустим проект. Выйдет окно(рис. 10):


      Рис. 10. Выбор главного класса проекта.

      Основы Tk

      Основная черта любой программы с графическим интерфейсом — интерактивность. Программа не просто что-то считает (в пакетном режиме) от начала своего запуска до конца: ее действия зависят от вмешательства пользователя. Фактически, графическое приложение выполняет бесконечный цикл обработки событий. Программа , реализующая графический интерфейс , событийно-ориентирована. Она ждет от интерфейса событий, которые и обрабатывает сообразно своему внутреннему состоянию.

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

      Расположением виджетов (внутри других виджетов) ведают так называемые менеджеры расположения. Виджет устанавливается на место по правилам менеджера расположения. Эти правила могут определять не только координаты виджета, но и его размеры. В Tk имеются три типа менеджеров расположения: простой упаковщик (pack), сетка ( grid ) и произвольное расположение (place).

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

      Классы виджетов

      Для построения графического интерфейса в библиотеке Tk отобраны следующие классы виджетов (в алфавитном порядке):

      • Button (Кнопка) Простая кнопка для вызова некоторых действий (выполнения определенной команды).
      • Canvas (Рисунок) Основа для вывода графических примитивов.
      • Checkbutton (Флажок) Кнопка, которая умеет переключаться между двумя состояниями при нажатии на нее.
      • Entry (Поле ввода) Горизонтальное поле, в которое можно ввести строку текста.
      • Frame (Рамка) Виджет, который содержит в себе другие визуальные компоненты.
      • Label (Надпись) Виджет может показывать текст или графическое изображение.
      • Listbox (Список) Прямоугольная рамка со списком, из которого пользователь может выделить один или несколько элементов.
      • Menu (Меню) Элемент, с помощью которого можно создавать всплывающие (popup) и ниспадающие (pulldown) меню.
      • Menubutton (Кнопка-меню) Кнопка с ниспадающим меню.
      • Message (Сообщение) Аналогично надписи, но позволяет заворачивать длинные строки и менять размер по требованию менеджера расположения.
      • Radiobutton (Селекторная кнопка) Кнопка для представления одного из альтернативных значений. Такие кнопки, как правило, действует в группе. При нажатии на одну из них кнопка группы, выбранная ранее, "отскакивает".
      • Scale (Шкала) Служит для задания числового значения путем перемещения движка в определенном диапазоне.
      • Scrollbar (Полоса прокрутки) Полоса прокрутки служит для отображения величины прокрутки в других виджетах. Может быть как вертикальной, так и горизонтальной.
      • Text (Форматированный текст) Этот прямоугольный виджет позволяет редактировать и форматировать текст с использованием различных стилей, внедрять в текст рисунки и даже окна.
      • Toplevel (Окно верхнего уровня) Показывается как отдельное окно и содержит внутри другие виджеты.
      Читайте также:  Функция фильтр в excel

      Все эти классы не имеют отношений наследования друг с другом — они равноправны. Этот набор достаточен для построения интерфейса в большинстве случаев.

      События

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

      Тип события Содержание события
      Activate Активизация окна
      ButtonPress Нажатие кнопки мыши
      ButtonRelease Отжатие кнопки мыши
      Deactivate Деактивация окна
      Destroy Закрытие окна
      Enter Вхождение курсора в пределы виджета
      FocusIn Получение фокуса окном
      FocusOut Потеря фокуса окном
      KeyPress Нажатие клавиши на клавиатуре
      KeyRelease Отжатие клавиши на клавиатуре
      Leave Выход курсора за пределы виджета
      Motion Движение мыши в пределах виджета
      MouseWheel Прокрутка колесика мыши
      Reparent Изменение родителя окна
      Visibility Изменение видимости окна

      Примеры описаний событий строками и некоторые названия клавиш приведены ниже:

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

      Просто символ обозначает событие — нажатие клавиши. Например, "k" — тоже, что " KeyPress -k>" . Для неалфавитно-цифровых клавиш есть специальные названия:

      Здесь обозначает пробел, а — знак меньше. , , , — стрелки. Prior > , — это PageUp и PageDown. Остальные клавиши более или менее соответствуют надписям на стандартной клавиатуре.

      Следует заметить, что Shift_L , в отличие от Shift , нельзя использовать как модификатор.

      В конкретной среде комбинации, означающие что-то особенное в системе, могут не дойти до графического приложения. Например, известный всем Ctrl-Alt-Del.

      Следующая программа позволяет печатать направляемые виджету события, в частности — keysym, а также анализировать, как различные клавиши можно представить в шаблоне события:

      При нажатии клавиши Esc в окне можно увидеть примерно следующее:

      Следует объяснить некоторые из этих атрибутов:

      • char Нажатый символ (для некоторых событий — ??)
      • height, width Высота и ширина.
      • focus Был ли в момент события фокус у окна?
      • keycode Код символа (скан-код клавиатуры).
      • keysym Символическое имя клавиши.
      • serial Серийный номер события. Увеличивается по мере возникновения событий.
      • time Время возникновения события. Все время увеличивается.
      • widget Виджет, в котором возникло событие.
      • x, y Координаты указателя в виджете во время события.
      • x_root, y_root Координаты указателя на экране во время события.

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

      Ссылка на основную публикацию
      Adblock detector