Кирютенко Ю.А., Савельев В.А. Объектно-ориентированное программирование. Язык Smalltalk

Подождите немного. Документ загружается.

260 Глава 16. Интерфейс пользователя

! LanguageTranslator class methods !

new

"Создает новый экземпляр."

^ super new setDictionary.

! LanguageTranslator methods !

setDictionary

"Частный. Инициализирует переменную экземпляра."

translation := Dictionary new.

16.5.2. Метод open

Теперь реализуем все указанные методы, начиная с метода open, ко-

торый похож на метод open предыдущего приложения. Различие состоит в

том, что здесь он значительно больше, поскольку в окно встраивается боль-

ше виджетов (вместо меню используются кнопки), а перед каждой спис-

ковой панелью располагается метка, которая является экземпляром класса

StaticText. Кроме того, некоторые из панелей окна при определении полу-

чают имена.

Надо сказать, что в системе Smalltalk Express и во многих других си-

стемах «рисунок» интерфейса пользователя и тесно связанный с ним метод

open не создаются вручную. Для их построения используется специаль-

ный инструмент. В системе Smalltalk Express этот инструмент называется

WindowBuilder Pro. О том, как им пользоваться, мы поговорим в следую-

щей главе. А пока, не очень заботясь о «красоте» создаваемого окна, сосре-

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

open

"Создает окно переводчика, определяет размеры

панелей окна и их поведение. Открывает окно."

self labelWithoutPrefix: ’Language Translator’;

noSmalltalkMenuBar. "без стандартной строки меню"

self addSubpane: (StaticText new owner: self;

framingRatio:((1/20)@(1/20) corner: (9/20)@(3/20));

contents: ’English:’;

leftJustified); "выровнять влево"

addSubpane: (StaticText new owner: self;

framingRatio:((11/20)@(1/20) corner: (19/20)@(3/20));

contents: ’Russian’:;

leftJustified);

16.5. Пример: переводчик 261

addSubpane: (ListPane new owner: self;

paneName: ’englishPane’; "внутреннее имя панели"

framingRatio:((1/20)@(4/20) corner: (9/20)@(15/20));

when: #getContents perform: #updateEnglishList:;

when: #select perform: #selectEnglishItem:);

addSubpane: (ListPane new owner: self;

framingRatio:((11/20)@(4/20) corner: (19/20)@(15/20));

paneName: ’russianPane’;

when: #getContents perform: #updateRussianList:;

when: #select perform: #selectRussianItem:);

addSubpane: (Button new owner: self;

framingRatio:((1/20)@(16/20) corner: (4/20)@(19/20));

paneName: ’addWordButton’;

when: #clicked perform: #clickedAddWord:;

contents: ’Add Word’);

addSubpane: (Button new owner: self;

framingRatio:((6/20)@(16/20) corner: (9/20)@(19/20));

paneName: ’deleteWordButton’;

when: #clicked perform: #clickedDeleteWord:;

contents: ’Delete Word’);

addSubpane: (Button new owner: self;

framingRatio:((11/20)@(16/20) corner: (19/20)@(19/20));

paneName: ’editTranslationButton’;

when: #clicked perform: #clickedEditTranslation:;

contents: ’Edit Translation’).

self openWindow.

16.5.3. Методы обработки событий

В этом приложении обработчики событий будут активно использовать

внутренние имена панелей, определенные в методе open строкой-аргумен-

том ключевого слова paneName:, а также модифицирующее сообщение up-

date. Напомним, что посылка сообщения update (оно ре ализовано в классе

SubPane) любой панели вызовет в ней событие #getContents, а это повле-

чет за собой выполнение владельцем панели обработчика данного события.

Но, описывая функциональность окна, мы говорили об операциях, кото-

рые затрагивают сразу обе списковые панели. Поэтому, чтобы не повторять

несколько раз посылку одной и той же последовательности сообщений, ре-

ализуем в самом классе LanguageTranslator метод экземпляра update, кото-

рый будет производить модификацию сразу двух списковых панелей.

262 Глава 16. Интерфейс пользователя

update

"Модифицирует приложение, для чего модифицирует панели русских

и английских слов, посылая им сообщение update. Посылка панелям

модифицирующего сообщения порождает в них событие getContents,

которое вызывает обработчик, определенный для него в панели."

(self paneNamed: ’englishPane’) update.

(self paneNamed: ’russianPane’) update.

Реализуем сами обработчики событий, упомянутые в методе open, снаб-

жая каждый из них развернутым комментарием.

Обработчики событий панели ’englishPane’

updateEnglishList: aPane

"Обработчик события #getContents. Отображает в панели

текущий список английских слов, выбирает слово из списка,

соответствующее значению переменной englishSelection."

aPane contents: translation keys asSortedCollection;

selection: englishSelection.

selectEnglishItem: aPane

"Обработчик события #select. Выбранное английское слово

запоминается в переменной englishSelection. Русской панели

посылается модифицирующее сообщение, чтобы определить

перевод и выбирать его."

englishSelection := aPane selectedItem.

(self paneNamed: ’russianPane’) update.

Обработчики событий панели ’russianPane’

updateRussianList: aPane

"Обработчик события #getContents. Отображает в панели

список русских слов, выбирает слово, соответствующее

значению переменной englishSelection."

aPane contents: translation values asSortedCollection;

selection: (translation at: englishSelection ifAbsent: [nil]).

selectRussianItem: aPane

"Обработчик события #select. Когда выбирается русское слово,

соответствующее английское слово запоминается в переменной

englishSelection и панель английских слов модифицируется."

englishSelection := translation

keyAtValue: aPane selectedItem ifAbsent: [nil].

(self paneNamed: ’englishPane’) update.

16.5. Пример: переводчик 263

Обработчик события #clicked кнопки AddWord

clickedAddWord: aPane

"Вызывает диалоговое окно для ввода нового английского слова.

Если новое слово является допустимым, добавляет его в словарь

translation и выбирает его, модифицирует обе панели."

| response |

response := Prompter prompt: ’New Word:’ default: ”.

response isNil | (response = ”) "nil — отказ от ввода"

ifTrue: [^ self].

translation at: response put: (translation at: response

ifAbsent: [response,’translation’]).

englishSelection := response.

self update.

Обработчик события #clicked кнопки DeleteWord

clickedDeleteWord: aPane

"После подтверждения удаляет выбранный элемент и его

перевод из словаря и модифицирует списковые панели."

englishSelection isNil

ifTrue: [MessageBox message:

’You must select the English word to be deleted.’]

ifFalse: [(MessageBox confirm:

’Are you sure you want to delete’, englishSelection,’?’)

ifTrue: [translation removeKey: englishSelection.

englishSelection := nil. self update]].

Обработчик события #clicked кнопки EditTranslator

clickedEditTranslation: aPane

"Если выбор сделан, открывает диалоговое окно

для редактирования существующего перевода."

| newTranslation |

englishSelection isNil ifTrue: [^ MessageBox message:

’You must select the translation to be edited.’].

(newTranslation := Prompter prompt: ’Edit the translation:’

default:(translation at: englishSelection)) isNil

ifTrue: [^ self].

translation at: englishSelection put: newTranslation.

(self paneNamed:’russianPane’) update.

Чтобы иметь возможность открыть приложение на словаре, который

был создан ранее, добавим следующий метод экземпляра:

264 Глава 16. Интерфейс пользователя

openOn: aDictionary

"Открывает окно на словаре aDictionary."

translation := aDictionary.

self open.

Заключительный штрих: чтобы иметь возможность достаточно про сто

проверить работу созданного приложения, напишем метод класса, который

позволит открыть окно приложения и поэкспериментировать с ним.

example1

"Метод те стирования окна LanguageTranslator."

self new openOn: (Dictionary new

at: ’red’ put: ’красный’;

at: ’green’ put: ’зеленый’;

at: ’blue’ put: ’синий’;

yourself).

Теперь для запуска приложения достаточно выполнить выражение

LanguageTranslator example1.

16.6. О цикле разработки приложений

Если проанализировать все, что было сделано при построении классов

PhoneBook и LanguageTranslator, можно выделить несколько характерных

этапов их разработки.

1) Формулировка задачи.

2) Создание эскиза приложения и его окон.

3) Описание используемых классов.

4) Описание состояний используемых объектов.

5) Описание интерфейса используемых объектов.

6) Реализация необходимых методов.

Все перечисленные этапы тесно связаны друг с другом и чаще всего

реализуются параллельно или по следовательно (особенно этапы 3–5), по-

вторяясь несколько раз. Разрабатывая новый проект, сначала мы получаем

только «первый срез» в решении задачи. Полученный опыт разработки и

эксплуатации приложения приведет к более глубокому пониманию пробле-

мы, позволит увидеть новые подходы к ее решению. И, проходя уже более

быстро те же шесть эт апов, можно получить лучшее решение.

Смолтоковская система поддерживает (и даже провоцирует) эволюцион-

ный подход к разработке программного продукта, поскольку предоставляет

разработчику множество возможностей. На практике разработка классов и

16.6. О цикле разработки приложений 265

приложений может оказаться очень увлекательным занятием. Всегда мож-

но придумать и добавить несколько строк кода, которые сделают интерфейс

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

важно помнить о первоначально поставленных задачах. Если созданный

прототип удовлетворяет заданным критериям, стоит ост ановиться, приоб-

рести опыт работы с программным продуктом и только затем переходить к

его усовершенствованию.

Возвращаясь к классу PhoneBook, заметим, что в нашем проекте есть

небольшой дефект. Включая в словарь новое имя, можно ошибиться. Если

ошибку заметили во время набора, до включения в словарь, ее легко ис-

править. Если же ошибочный ключ уже внесен в словарь, то сейчас един-

ственный способ исправить его — удалить старую запись и ввести новую,

но при этом потеряется правильный номер телефона.

Те же рассуждения справедливы и в отношении панели английских слов

приложения LanguageTranslator. Но здесь есть и более значительный де-

фект. Дело в том, что значения в словаре, в отличие от ключей, не являются

уникальными (по крайней мере, словари при их заполнении не проверя-

ют уникальность значений). Для нашего приложения это может привести

к его некорректной работе, если у двух разных английских слов окажутся

одинаковые переводы.

Устранение отмеченных недостатков мы оставляем в качестве упраж-

нения для читателей. Как варианты решений можем предложить следую-

щее. В классе PhoneBook изменить метод listMenu, добавив в меню пункт

Correct, и написать связанный с ним метод correct, позволяющий испра-

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

можно, например, создать новый подкласс в иерархии класса Dictionary, ко-

торый будет обеспечивать уникальность не только ключей, но и значений,

а в переменной translation хранить экземпляр созданного класса. Но это не

лучшее решение. Лучше поискать для значения переменной translation дру-

гой набор, лучше отвечающий новыму требованию к приложению. Внести

изменения будет совсем не сложно.

Теперь мы знаем основные принципы построения интерфейса пользо-

вателя в системе Smalltalk Express. Но «вручную» приятно строить только

достаточно простые приложения, в то время как у реальных приложений

интерфейс может быть очень сложным. Поэтому нам нужны инструменты,

которые помогут автоматизировать и значительно ускорить процесс постро-

ения интерфейса пользователя.

ГЛАВА 17

WINDOWBUILDER PRO

Смолтоковские системы давно рассматриваются как одни из лучших для

построения приложений со сложным интерфейсом пользователя, и каждая

реализация содержит необходимые для этого инструменты. Все они служат

одной цели: освободить программиста от утомительной работы по проек-

тированию графических интерфейсов. Чтобы объяснить и проиллюстриро-

вать технологию визуального построения интерфейса, подробно рассмот-

рим инструмент WindowBuilder Pro

(WBP). Сначала в процессе разработки

простого приложения, мы познакомимся с инструментом WBP, его возмож-

ностями и особенностями, а затем с его помощью построим более сложное

приложение.

17.1. Построение простого счетчика

Построим приложение, представляющее окно с именем CounterDemo,

с двумя большими кнопками “Increment” и “Decrement” в левой половине

окна и с текстовым полем в правой половине окна, которое после откры-

тия окна содержит значение “0”. Работа счетчика очень проста: при на-

жатии кнопки “Increment” значение счетчика, отображаемое в текстовом

поле, увеличивается на 1, а при нажатии кнопки “Decrement” — уменьша-

ется на 1. Операции, связанные с кнопками, продублируем в виде пунктов

меню Actions, а само меню разместим в панели меню под строкой заголов-

ка окна. После завершения построения окно счетчика должно иметь вид,

представленный на рис. 17.1.

Создание приложения с помощью WBP состоит из трех процессов, ко-

торые мы подробно рассмотрим, объясняя каждый шаг:

1) создание желаемого интерфейса пользователя,

2) создание необходимых меню окна и панелей,

3) написание методов, обеспечивающих функциональность приложения.

Описание инструмента WBP, приведенное в этой главе, опирается на [17]. Пе-

ревод этого учебника на русский язык, как часть дипломной работы, был выпол-

нен студенткой механико-математического факультета Ростовского государственно-

го университета А.С. Потапенко.

17.1. Построение простого счетчика 267

Рис. 17.1. Внешний вид окна Counter Demo

17.1.1. Создание интерфейса

Итак, надо создать приложение, все объекты которого уже созданы и

хранятся так, что их легко найти. В этом случае все наше внимание будет

сконцентрировано на главном: на проблемах проектирования интерфейса

пользователя, что при наличии «умного» инструмента не столь сложно, как

кажется на первый взгляд.

Процесс создания интерфейса заключается в «наполнении» окна при-

ложения посредством выбора из палитры нужных виджетов, их размеще-

ния в окне и последующей настройки в соответствии с предъявляемыми

к интерфейсу требованиями. Но прежде вс его следует запустить сам ин-

струмент WBP (рис. 17.2). Для этого можно воспользоваться специа льным

меню WindowBuilderPro, расположенным в меню окна Transcript. Для по-

строения нового окна из предлагаемых этим меню пунктов надо выбрать

или New Window, или New Dialog.

Если необходимо продолжить работу с уже имеющимся окном прило-

жения, надо из меню WindowBuilderPro выбрать пункт Edit Window. . . По-

явится диалоговое окно, из которого можно выбрать нужный объект, после

чего окно редактора WBP откроется для дальнейшего редактирования этого

объекта. По умолчанию диалоговое окно содержит список только тех под-

классов ViewManager, которые «создал» инструмент WBP. Если требует-

ся отредактировать экземпляр какого-либо другого подкласса, надо нажать

на кнопку Non WB View. . . , после чего появится новое диалоговое окно,

содержащее все подклассы ViewManager, интерфейс экземпляров которых

содержит метод createView или open. Для классов, метод open которых не

создавался с помощью WBP, будет отображаться некоторая дополнительная

информация, касающаяся этих окон.

268 Глава 17. WindowBuilder Pro

Выбор и размещение компонентов

Итак, выберем пункт New Window из меню WindowBuilderPro окна

Transcript. На экране появится окно инструмента WBP (рис. 17.2), в ра-

бочей области которого будет располагаться окно с заголовком New Win-

dow — это тот фундамент, с которого начинается построение интерфейса

пользователя. С момента своего создания это окно уже функционально: оно

имеет заголовок, рамку, можно изменять его размеры; в него уже включены

кнопки для управления окнами, обычные в данной операционной системе

(минимизации/максимизации размеров, закрытия, системного меню).

В нижней части основного окна WBP расположена панель, которая ис-

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

Слева на ней расположены три поля ввода с метками Text:, Style:, Name:.

Справа имеются два поля ввода с метками When: и Perform:. Они пред-

назначены для изменения поведения. Первоначально в поле Text выделен

текст, представляющий имя окна. По умолчанию новому окну дается имя

’New Window’. Введите в поле ввода Text строку ’Counter Demo’ (без ка-

вычек). Обратите внимание, что при этом автоматически изменяется имя в

заголовке окна.

Чтобы изменить размеры окна, выберите окно, щелкнув левой кнопкой

мыши где-либо на свободном пространстве внут ри рамки окна. Захватите

курсором маркер (черный квадратик, находящийся в нижнем правом уг-

лу окна) и, удерживая нажатой левую кнопку мыши, перемещайте курсор,

определяя желаемый размер. Следите за изменениями чисел в правом из

двух прямоугольников, расположенных между рабочей областью инст ру-

мента и панелью изменения поведения объекта. Остановитесь, когда значе-

ния чисел будут примерно равны 300×240, и отпустите кнопку мыши.

Размеры окна можно изменить, задавая их явно. Для этого выберите

окно, найдите в нижней части окна WBP панель инструментов и в ней

самую правую панель, в которой изображен маленький прямоугольник со

стрелками вдоль сторон и числовыми размерами справа от прямоугольни-

ка. Нажмите на эту панель (или выберите команду меню Size BSet Window

Size. . . ). Появится диалоговое окно, в котором надо ввести точку, опреде-

ляющую новые размеры окна (ширину и высоту). Нажатие на кнопку OK

приведет к закрытию диалогового окна и изменению размера редактируе-

мого окна. Для того чтобы закрыть диалоговое окно, не изменяя размеры

редактируемого окна, необходимо нажать на кнопку Cancel.

В этом же меню Size есть пункт Set Window Position. . . , который поз-

воляет установить начальную позицию окна при его тестировании в WBP.

Выбор этого пункта вызовет послушный движению мыши прозрачный пря-

моугольник, размер которого совпадает с редактируемым окном. Когда пря-

17.1. Построение простого счетчика 269

Рис. 17.2. Инструмент WBP

моугольник будет находиться в нужной позиции, нажмите левую кнопку

мыши. После этого именно зде сь при тестировании будет располагаться

создаваемое окно. Можно установить разные позиции для разных окон, что

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

То же самое можно сделать, щелкая в нижней панели инструментов ок-

на WBP левой кнопкой мыши на панели, в которой изображен маленький

прямоугольник с перекрестием в верхнем углу и числовыми координатами

точки справа от прямоугольника. Если положение окна не уст анавливается

разработчиком, то при тестировании приложения его окно располагается в

центре экрана.

Итак, у нас есть окно, но внутри окна еще ничего нет. Для построе-

ния интерфейса — заполнения окна необходимыми виджетами (элементами

интерфейса) — предназначена панель с двумя вертикальными палитрами,

расположенная в левой части окна WBP. Палитры позволяют выбирать ви-

джеты, которые надо разместить в окне. Левая палитра отображает кате-

гории виджетов. В соответствии с выбранной категорией меняется правая

палитра, отображающая конкретные виды виджетов, которые можно добав-

лять в окно. Палитры виджетов продублированы содержимым меню Add.