Различия
Здесь показаны различия между двумя версиями данной страницы.
Предыдущая версия справа и слева Предыдущая версия Следующая версия | Предыдущая версия | ||
fullcircle:31:python_ч_5 [2010/06/12 10:16] |
fullcircle:31:python_ч_5 [2011/02/20 16:25] (текущий) |
||
---|---|---|---|
Строка 3: | Строка 3: | ||
//Автор — Грэг Валтерс (Greg Walters)// | //Автор — Грэг Валтерс (Greg Walters)// | ||
</style> | </style> | ||
+ | |||
- [[..:27:python_ч_1|Программа на Python — часть 1]] | - [[..:27:python_ч_1|Программа на Python — часть 1]] | ||
Строка 12: | Строка 13: | ||
- [[..:33:python_ч_7|Программа на Python — часть 7]] | - [[..:33:python_ч_7|Программа на Python — часть 7]] | ||
- [[..:34:python_ч_8|Программа на Python — часть 8]] | - [[..:34:python_ч_8|Программа на Python — часть 8]] | ||
- | - [[..:35:python_ч_9|Программа на Python — часть 9]] - | + | - [[..:35:python_ч_9|Программа на Python — часть 9]] |
+ | - [[..:36:python_ч_10|Программа на Python — часть 10]] | ||
+ | - [[..:37:python_ч_11|Программа на Python — часть 11]] | ||
+ | - [[..:38:python_ч_12|Программа на Python — часть 12]] | ||
+ | - [[..:39:python_ч_13|Программа на Python — часть 13]] | ||
+ | - [[..:40:python_ч_14|Программа на Python — часть 14]] | ||
Если вы похожи на меня, вам не понравится первая часть статьи. Мне не нравится, когда автор говорит, что я должен тщательно прочитать каждое слово в книге (или главе, или статье), потому что я знаю: это скучно — даже когда понимаю, что всё равно буду перечитывать ради моего же блага. | Если вы похожи на меня, вам не понравится первая часть статьи. Мне не нравится, когда автор говорит, что я должен тщательно прочитать каждое слово в книге (или главе, или статье), потому что я знаю: это скучно — даже когда понимаю, что всё равно буду перечитывать ради моего же блага. | ||
Строка 20: | Строка 26: | ||
СНАЧАЛА необходимо установить Boa Constructor и wxPython. С помощью Synaptic выберите Boa Constructor и wxPython. После установки Boa будет находиться в Приложения|Программирование\Boa Constructor. Запустите его. С его помощью программировать будет проще. После запуска приложения вы увидите три окна (или фрейма): одно сверху и два снизу. Возможно, необходимо будет переместить их или изменить размеры, но приведите эти окна к виду, похожему на рисунок ниже: | СНАЧАЛА необходимо установить Boa Constructor и wxPython. С помощью Synaptic выберите Boa Constructor и wxPython. После установки Boa будет находиться в Приложения|Программирование\Boa Constructor. Запустите его. С его помощью программировать будет проще. После запуска приложения вы увидите три окна (или фрейма): одно сверху и два снизу. Возможно, необходимо будет переместить их или изменить размеры, но приведите эти окна к виду, похожему на рисунок ниже: | ||
- | {{ :fullcircle:31:screenshot_001.png?350 }} | + | {{ :fullcircle:31:screenshot_001.png?450 }} |
Верхний фрейм называется панелью инструментов. Нижний фрейм слева — окно инспектора, нижний фрейм справа — окно редактора. | Верхний фрейм называется панелью инструментов. Нижний фрейм слева — окно инспектора, нижний фрейм справа — окно редактора. | ||
Строка 37: | Строка 43: | ||
Теперь рассмотрим несколько кнопок на панели Редактор. Сейчас самыми важными являются Сохранить (пятая слева) и Запустить (седьмая слева, жёлтая стрелка). Если вы находитесь на вкладке с окном (например, Frame1), на панели будут видны ещё несколько кнопок, о которых вам нужно знать. Это кнопка режима разработки: | Теперь рассмотрим несколько кнопок на панели Редактор. Сейчас самыми важными являются Сохранить (пятая слева) и Запустить (седьмая слева, жёлтая стрелка). Если вы находитесь на вкладке с окном (например, Frame1), на панели будут видны ещё несколько кнопок, о которых вам нужно знать. Это кнопка режима разработки: | ||
+ | |||
+ | {{ :fullcircle:31:screenshot_004.png?150 }} | ||
Она очень важна. Она помогает разработать внешний вид приложения — то, чем мы сейчас займёмся. Если нажать на неё, вы увидите пустое окно. | Она очень важна. Она помогает разработать внешний вид приложения — то, чем мы сейчас займёмся. Если нажать на неё, вы увидите пустое окно. | ||
+ | |||
+ | {{ :fullcircle:31:screenshot_005.png?450 }} | ||
Это пустое поле для размещения любых инструментов управления (в пределах разумного). Сначала мы разместим wx.panel. Почти вся литература, которую я читал, не рекомендует размещать элементы управления (кроме wx.panel) непосредственно на окне. На панели инструментов на вкладке «Контейнеры/Разметка» щёлкните кнопку wx.Panel. Затем переместитесь на окно, над которым мы сейчас работаем, и щёлкните посередине окна. Если всё работает, вы увидите что-то вроде этого: | Это пустое поле для размещения любых инструментов управления (в пределах разумного). Сначала мы разместим wx.panel. Почти вся литература, которую я читал, не рекомендует размещать элементы управления (кроме wx.panel) непосредственно на окне. На панели инструментов на вкладке «Контейнеры/Разметка» щёлкните кнопку wx.Panel. Затем переместитесь на окно, над которым мы сейчас работаем, и щёлкните посередине окна. Если всё работает, вы увидите что-то вроде этого: | ||
+ | |||
+ | {{ :fullcircle:31:screenshot_007.png?450 }} | ||
+ | |||
Помните, что я вам говорил об ошибках. Это одна из них. Не волнуйтесь. Видите 8 маленьких чёрных квадратов? Это границы панели. Если вы хотите, щёлкните и перетащите один из них, чтобы изменить размеры панели, но для этого мы хотим, чтобы панель закрывала всё окно. Сейчас просто измените размер ОКНА. Теперь у нас есть панель, на которой мы разместим все остальные элементы управления. Переместите окно, над которым вы работаете, до тех пор, пока не увидите панель инструментов окна Редактор. Вы увидите там две новые кнопки: галочку и крестик. Кнопка-крестик отменит все внесённые изменения. | Помните, что я вам говорил об ошибках. Это одна из них. Не волнуйтесь. Видите 8 маленьких чёрных квадратов? Это границы панели. Если вы хотите, щёлкните и перетащите один из них, чтобы изменить размеры панели, но для этого мы хотим, чтобы панель закрывала всё окно. Сейчас просто измените размер ОКНА. Теперь у нас есть панель, на которой мы разместим все остальные элементы управления. Переместите окно, над которым вы работаете, до тех пор, пока не увидите панель инструментов окна Редактор. Вы увидите там две новые кнопки: галочку и крестик. Кнопка-крестик отменит все внесённые изменения. | ||
Кнопка-галочка: | Кнопка-галочка: | ||
+ | |||
+ | {{ :fullcircle:31:screenshot_008.png?150 }} | ||
называется кнопкой «Опубликовать». При нажатии на неё все изменения будут записаны в файл окна. Вам всё равно надо сохранить файл окна, но эта кнопка запишет изменения в файл. Нажмите её. В окне инспектора тоже есть кнопка «Опубликовать», но мы поговорим о ней позже. Теперь сохраните файл. | называется кнопкой «Опубликовать». При нажатии на неё все изменения будут записаны в файл окна. Вам всё равно надо сохранить файл окна, но эта кнопка запишет изменения в файл. Нажмите её. В окне инспектора тоже есть кнопка «Опубликовать», но мы поговорим о ней позже. Теперь сохраните файл. | ||
Вернитесь в режим разработки. Щёлкните вкладку «Кнопки» на панели инструментов и щёлкните первую кнопку слева, wx.Button. Добавьте её ближе к центру окна. Вы увидите что-то наподобие этого: | Вернитесь в режим разработки. Щёлкните вкладку «Кнопки» на панели инструментов и щёлкните первую кнопку слева, wx.Button. Добавьте её ближе к центру окна. Вы увидите что-то наподобие этого: | ||
+ | |||
+ | {{ :fullcircle:31:screenshot_013.png?450 }} | ||
Обратите внимание, что вокруг кнопки есть 8 маленьких чёрных квадратиков, как вокруг панели. Это — элементы управление размерами, которые также показывают какой элемент выделен в настоящее время. Чтобы переместить кнопку ближе к центру окна, нажмите клавишу Ctrl и, удерживая её, перемещайте с помощью клавиш-стрелок туда, куда вы хотите. Теперь взглянем на окно инспектора. В нём имеются четыре вкладки. Щёлкните на вкладке «Конструктор». Здесь мы можем изменить ярлык, имя, положение, размер и стиль объектов. Давайте изменим имя кнопки на «btnShowDialog» и её свойство Ярлык на «Щёлкни меня». | Обратите внимание, что вокруг кнопки есть 8 маленьких чёрных квадратиков, как вокруг панели. Это — элементы управление размерами, которые также показывают какой элемент выделен в настоящее время. Чтобы переместить кнопку ближе к центру окна, нажмите клавишу Ctrl и, удерживая её, перемещайте с помощью клавиш-стрелок туда, куда вы хотите. Теперь взглянем на окно инспектора. В нём имеются четыре вкладки. Щёлкните на вкладке «Конструктор». Здесь мы можем изменить ярлык, имя, положение, размер и стиль объектов. Давайте изменим имя кнопки на «btnShowDialog» и её свойство Ярлык на «Щёлкни меня». | ||
+ | |||
+ | {{ :fullcircle:31:screenshot_014.png?450 }} | ||
Теперь мы пропустим остальные элементы в этой вкладке и перейдём к вкладке «Объекты», на которой отображены все объекты и их отношения. Как вы видите, кнопка является потомком panel1, который является потомком Frame1. | Теперь мы пропустим остальные элементы в этой вкладке и перейдём к вкладке «Объекты», на которой отображены все объекты и их отношения. Как вы видите, кнопка является потомком panel1, который является потомком Frame1. | ||
+ | |||
+ | {{ :fullcircle:31:screenshot_015.png?450 }} | ||
Внесите (щёлкнув на кнопке-галочке) и сохраните изменения. Опять вернитесь в режим разработки и увидите (если у вас выделена вкладка «Объекты» в окне инспектора), что теперь выделен Frame1. Это то, что мы хотели. Перейдите обратно на вкладку «Конструктор», измените название «Frame1» на «Our First GUI». Внесите изменения и сохраните их ещё раз. Теперь запустим приложение. В окне Редактора щёлкните жёлтую кнопку Запустить. | Внесите (щёлкнув на кнопке-галочке) и сохраните изменения. Опять вернитесь в режим разработки и увидите (если у вас выделена вкладка «Объекты» в окне инспектора), что теперь выделен Frame1. Это то, что мы хотели. Перейдите обратно на вкладку «Конструктор», измените название «Frame1» на «Our First GUI». Внесите изменения и сохраните их ещё раз. Теперь запустим приложение. В окне Редактора щёлкните жёлтую кнопку Запустить. | ||
+ | |||
+ | {{ :fullcircle:31:screenshot_016.png?450 }} | ||
Щёлкните на кнопке, но ничего не произойдёт. Почему? Мы не сказали кнопке, что надо делать. Для этого необходимо установить событие, которое будет вызываться при нажатии на кнопку. Щёлкните крестик в правом верхнем углу для остановки. Вернитесь в режим разработки, выделите кнопку, перейдите на вкладку «События» окна Инспектора. Щёлкните на ButtonEvent и затем два раза на появившемся тексте wx.EVT_BUTTON, и вы увидите, что в окне ниже появится событие кнопки под названием «OnBtnShowDialogButton». Внесите изменения и сохраните файл. | Щёлкните на кнопке, но ничего не произойдёт. Почему? Мы не сказали кнопке, что надо делать. Для этого необходимо установить событие, которое будет вызываться при нажатии на кнопку. Щёлкните крестик в правом верхнем углу для остановки. Вернитесь в режим разработки, выделите кнопку, перейдите на вкладку «События» окна Инспектора. Щёлкните на ButtonEvent и затем два раза на появившемся тексте wx.EVT_BUTTON, и вы увидите, что в окне ниже появится событие кнопки под названием «OnBtnShowDialogButton». Внесите изменения и сохраните файл. | ||
- | Прежде чем мы пойдём дальше, давайте рассмотрим получившийся код (стр. 11). | + | {{ :fullcircle:31:screenshot_017.png?450 }} |
+ | |||
+ | Прежде чем мы пойдём дальше, давайте рассмотрим получившийся код. | ||
+ | <code> | ||
+ | #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() | ||
+ | </code> | ||
В первой строке содержится комментарий, который сообщает Boa Constructor о том, что это — файл boa. Он игнорируется компилятором Python, но не Boa. В следующей строке импортируется wxPython. Теперь рассмотрим определение класса ниже. | В первой строке содержится комментарий, который сообщает Boa Constructor о том, что это — файл boa. Он игнорируется компилятором Python, но не Boa. В следующей строке импортируется wxPython. Теперь рассмотрим определение класса ниже. | ||
Строка 70: | Строка 129: | ||
Сохраните и нажмите кнопку Пуск (жёлтая стрелка). Вы должны увидеть что-то вроде этого: | Сохраните и нажмите кнопку Пуск (жёлтая стрелка). Вы должны увидеть что-то вроде этого: | ||
+ | |||
+ | {{ :fullcircle:31:screenshot_018.png?450 }} | ||
А при нажатии на кнопку вы должны увидеть что-то вроде этого: | А при нажатии на кнопку вы должны увидеть что-то вроде этого: | ||
+ | |||
+ | {{ :fullcircle:31:screenshot_019.png?450 }} | ||
Поймите: это самый простой способ вызвать команду отображения окна сообщения. Вы можете также передать больше параметров. | Поймите: это самый простой способ вызвать команду отображения окна сообщения. Вы можете также передать больше параметров. | ||
Строка 87: | Строка 150: | ||
Вот так отображается окно сообщения с этой иконкой | Вот так отображается окно сообщения с этой иконкой | ||
- | + | <code>wx.MessageBox('You Clicked the button', 'Info', wx.ICON_INFORMATION)</code> | |
- | wx.MessageBox('You Clicked the button', 'Info', wx.ICON_INFORMATION) | + | |
или любой другой иконкой, которая подходит к ситуации. Также имеются различные переменные порядка кнопок. Но о них мы поговорим в следующий раз. | или любой другой иконкой, которая подходит к ситуации. Также имеются различные переменные порядка кнопок. Но о них мы поговорим в следующий раз. | ||