Автор — Грэг Валтерс (Greg Walters)
Если вы похожи на меня, вам не понравится первая часть статьи. Мне не нравится, когда автор говорит, что я должен тщательно прочитать каждое слово в книге (или главе, или статье), потому что я знаю: это скучно — даже когда понимаю, что всё равно буду перечитывать ради моего же блага.
Я вас предупредил. Пожалуйста, внимательно прочитайте эту скучную часть. Скоро мы доберёмся до интересного, но нам надо завершить подготовку прежде, чем мы сможем говорить о программировании.
СНАЧАЛА необходимо установить Boa Constructor и wxPython. С помощью Synaptic выберите Boa Constructor и wxPython. После установки Boa будет находиться в Приложения|Программирование\Boa Constructor. Запустите его. С его помощью программировать будет проще. После запуска приложения вы увидите три окна (или фрейма): одно сверху и два снизу. Возможно, необходимо будет переместить их или изменить размеры, но приведите эти окна к виду, похожему на рисунок ниже:
Верхний фрейм называется панелью инструментов. Нижний фрейм слева — окно инспектора, нижний фрейм справа — окно редактора. На панели инструментов находятся вкладки («Создать», «Контейнеры/Разметка» и т.д.), с помощью которых можно начать новые проекты, добавлять новые окна в существующие проекты и новые инструменты управления в существующие в проекте окна. Окно инспектора будет очень важным при добавлении инструментов управления в проект. В окне редактора можно редактировать код, сохранять проекты и т.д.
Теперь вернёмся к панели инструментов и рассмотрим каждую вкладку. Начнём с вкладки «Создать». На ней имеется много кнопок, но мы рассмотрим только две — 5 и 6 кнопки слева, wx.App и wx.Frame. Wx.App помогает полностью создать приложение, начав с двух файлов, созданных автоматически: файла окна и файла приложения. Этот метод я предпочитаю использовать. Wx.Frame используется для добавления окон в приложение и создания самостоятельного приложения из файла с кодом. Мы поговорим об этом позже.
Теперь рассмотрим вкладку «Контейнеры/Разметка». На ней тоже много интересного. Самыми часто используемыми являются wx.Panel (первая кнопка слева) и растяжки (2, 3, 4, 5 и 6 кнопки справа). На вкладке «Основные инструменты» расположены текстовая строка, поля для ввода текста, кнопки-флажки, кнопки-переключатели и многое другое. На вкладке «Кнопки» расположены различные кнопки. На вкладке «Инструменты списков» — таблицы данных и другие списки. Перейдём к вкладке «Служебные», где размещены таймеры и элементы меню.
Так как мы готовимся создать первое приложение, нужно помнить о следующих вещах. В версии для Linux присутствуют несколько ошибок. Например, некоторые элементы управления невозможно перемещать в режиме разработки. Ещё одну ошибку вы обнаружите, когда будете читать учебник по Boa Constructor — при размещении панели её трудно увидеть. Ищите маленькие квадратики, о которых я вскоре расскажу. Также можно использовать вкладку «Объекты» в окне инспектора и выделить панель там.
Приступим. На вкладке «Создать панели инструментов» выберите wx.App (пятая кнопка слева). В окне редактора появятся две вкладки: одна с названием «*(App1)*», а другая с названием «*(Frame1)*». Верьте или нет — но первое, что мы сделаем, — сохраним эти два файла, начав с Frame1. Кнопка Сохранить — пятая слева в окне редактора. Откроется диалог «Сохранить как», в котором надо указать, где и под каким именем вы хотите сохранить файл. В домашнем каталоге создайте папку GuiTests и сохраните файл под названием «Frame1.py». Обратите внимание, что вкладка «*(Frame1)*» поменялась на «Frame1». (Символы “*(“ показывают на то, что нужно сохранить файл.) Теперь сделайте то же самое на вкладке «App1».
Теперь рассмотрим несколько кнопок на панели Редактор. Сейчас самыми важными являются Сохранить (пятая слева) и Запустить (седьмая слева, жёлтая стрелка). Если вы находитесь на вкладке с окном (например, Frame1), на панели будут видны ещё несколько кнопок, о которых вам нужно знать. Это кнопка режима разработки:
Она очень важна. Она помогает разработать внешний вид приложения — то, чем мы сейчас займёмся. Если нажать на неё, вы увидите пустое окно.
Это пустое поле для размещения любых инструментов управления (в пределах разумного). Сначала мы разместим wx.panel. Почти вся литература, которую я читал, не рекомендует размещать элементы управления (кроме wx.panel) непосредственно на окне. На панели инструментов на вкладке «Контейнеры/Разметка» щёлкните кнопку wx.Panel. Затем переместитесь на окно, над которым мы сейчас работаем, и щёлкните посередине окна. Если всё работает, вы увидите что-то вроде этого:
Помните, что я вам говорил об ошибках. Это одна из них. Не волнуйтесь. Видите 8 маленьких чёрных квадратов? Это границы панели. Если вы хотите, щёлкните и перетащите один из них, чтобы изменить размеры панели, но для этого мы хотим, чтобы панель закрывала всё окно. Сейчас просто измените размер ОКНА. Теперь у нас есть панель, на которой мы разместим все остальные элементы управления. Переместите окно, над которым вы работаете, до тех пор, пока не увидите панель инструментов окна Редактор. Вы увидите там две новые кнопки: галочку и крестик. Кнопка-крестик отменит все внесённые изменения.
Кнопка-галочка:
называется кнопкой «Опубликовать». При нажатии на неё все изменения будут записаны в файл окна. Вам всё равно надо сохранить файл окна, но эта кнопка запишет изменения в файл. Нажмите её. В окне инспектора тоже есть кнопка «Опубликовать», но мы поговорим о ней позже. Теперь сохраните файл.
Вернитесь в режим разработки. Щёлкните вкладку «Кнопки» на панели инструментов и щёлкните первую кнопку слева, wx.Button. Добавьте её ближе к центру окна. Вы увидите что-то наподобие этого:
Обратите внимание, что вокруг кнопки есть 8 маленьких чёрных квадратиков, как вокруг панели. Это — элементы управление размерами, которые также показывают какой элемент выделен в настоящее время. Чтобы переместить кнопку ближе к центру окна, нажмите клавишу Ctrl и, удерживая её, перемещайте с помощью клавиш-стрелок туда, куда вы хотите. Теперь взглянем на окно инспектора. В нём имеются четыре вкладки. Щёлкните на вкладке «Конструктор». Здесь мы можем изменить ярлык, имя, положение, размер и стиль объектов. Давайте изменим имя кнопки на «btnShowDialog» и её свойство Ярлык на «Щёлкни меня».
Теперь мы пропустим остальные элементы в этой вкладке и перейдём к вкладке «Объекты», на которой отображены все объекты и их отношения. Как вы видите, кнопка является потомком panel1, который является потомком Frame1.
Внесите (щёлкнув на кнопке-галочке) и сохраните изменения. Опять вернитесь в режим разработки и увидите (если у вас выделена вкладка «Объекты» в окне инспектора), что теперь выделен Frame1. Это то, что мы хотели. Перейдите обратно на вкладку «Конструктор», измените название «Frame1» на «Our First GUI». Внесите изменения и сохраните их ещё раз. Теперь запустим приложение. В окне Редактора щёлкните жёлтую кнопку Запустить.
Щёлкните на кнопке, но ничего не произойдёт. Почему? Мы не сказали кнопке, что надо делать. Для этого необходимо установить событие, которое будет вызываться при нажатии на кнопку. Щёлкните крестик в правом верхнем углу для остановки. Вернитесь в режим разработки, выделите кнопку, перейдите на вкладку «События» окна Инспектора. Щёлкните на ButtonEvent и затем два раза на появившемся тексте wx.EVT_BUTTON, и вы увидите, что в окне ниже появится событие кнопки под названием «OnBtnShowDialogButton». Внесите изменения и сохраните файл.
Прежде чем мы пойдём дальше, давайте рассмотрим получившийся код.
#Boa:Frame:Frame1
import wx
def create(parent):
return Frame1(parent)
[wxID_FRAME1, wxID_FRAME1BUTTON1, wxID_FRAME1PANEL1,
] = [wx.NewId() for _init_ctrls in range(3)]
class Frame1(wx.Frame):
def _init_ctrls(self, prnt):
# generated method, don't edit
wx.Frame.__init__(self, id=wxID_FRAME1, name='', parent=prnt,
pos=wx.Point(324, 286), size=wx.Size(768, 509),
style=wx.DEFAULT_FRAME_STYLE, title=u'My First GUI')
self.SetClientSize(wx.Size(768, 509))
self.panel1 = wx.Panel(id=wxID_FRAME1PANEL1, name='panel1', parent=self,
pos=wx.Point(0, 0), size=wx.Size(768, 509),
style=wx.TAB_TRAVERSAL)
self.button1 = wx.Button(id=wxID_FRAME1BUTTON1, label=u'ClickMe',
name='button1', parent=self.panel1, pos=wx.Point(312, 208),
size=wx.Size(85, 29), style=0)
self.button1.Bind(wx.EVT_BUTTON, self.OnButton1Button,
id=wxID_FRAME1BUTTON1)
def __init__(self, parent):
self._init_ctrls(parent)
def OnButton1Button(self, event):
event.Skip()
В первой строке содержится комментарий, который сообщает Boa Constructor о том, что это — файл boa. Он игнорируется компилятором Python, но не Boa. В следующей строке импортируется wxPython. Теперь рассмотрим определение класса ниже.
Сверху располагается метод init_ctrls. Обратите внимание на строку комментария под строкой определения. Не редактируйте код в этом методе. Если вы отредактируете его, программа перестанет работать. Вы можете спокойно редактировать любой код НИЖЕ этого модуля. В нём располагаются определения всех элементов управления фрейма. Рассмотрим далее процедуру init__. Здесь можно вызывать любой код инициализации. Наконец, процедура OnBtnShowDialogButton, в которой располагается код, вызываемый при нажатии на кнопку. Обратите внимание, что там сейчас есть только функция event.Skip(), которая, проще говоря, пропускает обработку данного события.
Теперь мы собираемся вызвать окно сообщения с текстом. Программисты обычно делают так, чтобы пользователи узнали о чём-то: об ошибке или о том, что процесс завершился. В данном случае мы вызовем встроенную процедуру wx.MessageBox. У неё два параметра. Первый — текст, отображаемый в окне сообщения, а второй — заголовок окна сообщений. Закомментируйте строку event.Skip() и вставьте следующую строку.
wx.MessageBox('You Clicked the button', 'Info')
Сохраните и нажмите кнопку Пуск (жёлтая стрелка). Вы должны увидеть что-то вроде этого:
А при нажатии на кнопку вы должны увидеть что-то вроде этого:
Поймите: это самый простой способ вызвать команду отображения окна сообщения. Вы можете также передать больше параметров.
Далее приводится краткое описание того, как изменить отображаемую в окне сообщения иконку (в следующий раз мы узнаем больше об этом).
wx.ICON_QUESTION — показывает иконку вопроса
wx.ICON_EXCLAMATION — Отображает иконку предупреждения
wx.ICON_ERROR — Отображает иконку ошибки
wx.ICON_INFORMATION — Отображает иконку информации
Вот так отображается окно сообщения с этой иконкой
wx.MessageBox('You Clicked the button', 'Info', wx.ICON_INFORMATION)
или любой другой иконкой, которая подходит к ситуации. Также имеются различные переменные порядка кнопок. Но о них мы поговорим в следующий раз.
До следующего номера играйтесь с различными элементами управления, их расположением и т.д. Не скучайте!
