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

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

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

Таблица 16.1. Способы посылки сообщений виджетам

Прямое сообщение Механизм change/update

aPane update self changed: #handler:

aPane selector self changed: #handler:

with: #selector

aPane selector: parameter self changed: #handler:

with: #selector

with: parameter

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

вызвана окном приложения (self) посредством посылки сообщения

self paneNamed: ’aName’.

В самой системе Smalltalk Express все время используется смесь из двух

описанных выше механизмов, а обращения к виджетам по именам почти

нет: такая возможность — относительно недавнее добавление. Инструмен-

ты, такие как браузеры иерархии классов, браузеры дисков и отладчики,

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

механизм change/update.

16.4. Пример: телефонная книга

16.4.1. Постановка задачи

Чтобы сказанное ст ало понятнее, объясним все еще раз при построении

приложения PhoneBook (ТелефоннаяКнига)

. Постановка задачи следую-

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

создать приложение, которое

• будет отображать список имен людей;

• список имен будет сортироваться в алфавитном порядке;

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

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

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

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

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

Такой пример приводится в файле chapter.11, поставляемом вместе с си-

стемой Smalltalk Express. В нашем учебнике он изменен.

16.4. Пример: телефонная кни га 251

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

ет предъявляемым к приложению требованиям.

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

окно приложения. Нам кажется, что окно телефонной книги должно состо-

ять, во-первых, из списковой панели, отображающей список имен, в кото-

рой можно выбрать одно из них, можно добавить новое имя и можно уда-

лить имеющиеся. Во-вторых, нужна текстовая панель, в которой в ответ на

сделанный в первой панели выбор будет отображаться соответствующий

телефонный номер (е сли он есть), который можно здесь же отредактиро-

вать или ввести, если его еще нет. По этому «словесному эскизу» полезно

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

точкой для определения остальной части приложения. С каждой из пане-

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

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

вателем для того, чтобы посылать приложению необходимые сообщения.

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

Phone Book

Иванов

Петров

Сидоров



select

123-45-67

Рис. 16.3. Внешний

вид окна PhoneBook.

эскиз» того конкретного окна, которое надо будет

сформировать, и по этому «эскизу» создали рису-

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

Зная все, что нужно, о решаемой задаче и имея

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

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

ют приложение. Как мы уже говорили, для окна

приложения нужен новый подкласс класса ViewMa-

nager, назовем его PhoneBook (ТелефоннаяКнига),

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

циональными «телефонными книгами». Поскольку в вашем окне приложе-

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

сов Menu, ListPane и TextPane. После некоторых раздумий, можно прийти

к выводу, что словарь (экземпляр класс а Dictionary) более всего подходит в

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

между именами людей и номерами их телефонов. Сами имена и номера те-

лефонов будем представлять как строки (экземпляры класса String). Задача

очень простая и для ее решения другие классы не нужны.

Выбранные нами классы отражают е стественное представление о ре-

шении задачи. Но как быть, е сли выбор не столь очевиден? Важно cделать

некоторый выбор, даже если он и не самый лучший. Можно ошибиться,

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

можно очень быст ро создать позже. Любой прогресс в разработке прило-

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

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

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

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

В данном примере единственный новый класс — класс PhoneBook — явля-

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

словарем. Его экземпляр нуждается в переменных, содержащих конкретные

данные. Определим следующие переменные:

• phones — словарь, содержащий имена и их телефонные номера;

• selectedName — выбранное из списка имя.

Следовательно, определение нового класса может быть таким:

ViewManager subclass: #PhoneBook

instanceVariableNames: ’phones selectedName’

classVariableNames: ’ ’

poolDictionaries: ’ ’

Есть ли общие правила, позволяющие решить, какие переменные экзем-

пляра следует использовать? Самый лучший способ — обращение к интер-

фейсу объекта. Какие сообщения будут посылаться объекту? Каким будет

поведение объекта? Ответы на эти вопросы подскажут, какие переменные

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

ны реализовывать новые классы. Хорошая отправная точка для этого —

расширение «эскиза окна» посредством внесения в него тех сообщений,

которые будут использоваться каждой панелью. В нашей ситуации будут

нужны сообщения для: инициализации переменных; обращения к меню,

определяемому приложением; доступа к содержимому панелей в целях их

отображения; сохранения содержимого измененных панелей; выборки эле-

ментов из конкретного меню; открытия окна. Таким образом, надо будет

реализовать следующие сообщения:

setDictionary — инициализировать переменные экземпляра;

open — открыть окно телефонной книги;

add — добавить новое имя в телефонную книгу;

remove — удалить выбранное имя из телефонной книги;

list: aListPane — заполнить панель aListPane именами людей из словаря;

nameSelected: aListPane — отобразить номер телефона для имени, выбран-

ного в aListPane;

listMenu: aListPane — определить меню для aListPane;

text: aTextPane — установить содержимое панели aTextPane в виде номера

телефона для выбранного имени;

textFrom: aTextPane — получить содержимое текстовой панели в виде но-

мера телефона для выбранного имени и занести его в словарь.

16.4. Пример: телефонная кни га 253

Теперь наш проект полностью описан и единственное, что остается —

реализовать методы для перечисленных сообщений. Важнейший из них —

метод, открывающий окно (в нашем случае метод open). С него и нач-

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

прежде напишем единственный в нашем случае метод класса new, создаю-

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

экземпляра (setDictionary), инициализирующий переменные экземпляра.

! PhoneBook class methods !

new

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

^ super new setDictionary.

! PhoneBook methods !

setDictionary

"Инициализирует словарь."

phones := Dictionary new.

16.4.2. Метод open

Сначала полностью приведем текст метода экземпляра open нашего

приложения, а затем подробно опишем, что и почему метод делает:

open

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

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

self label: ’Phone Book’.

self addSubpane: (ListPane new owner: self;

when: #getContents perform: #list: ;

when: #select perform: #nameSelected:;

when: #getMenu perform: #listMenu:;

framingRatio: (0@0 rightBottom: 1 @ 0.8)).

self addSubpane: (TextPane new owner: self;

when: #getContents perform: #text:;

when: #save perform: #textFrom:;

framingRatio: (0 @ 0.8 rightBottom: 1 @ 0.2)).

self openWindow.

Псевдопеременная self, как всегда, ссылает ся на получателя сообщения

open, то есть на экземпляр класса PhoneBook. Первое, что происходит в

методе, — объекту сообщают, что надо установить метку окна равной стро-

ке ’Phone Book’. Затем в окно добавляются (addSubpane:) две панели: эк-

земпляры классов ListPane и TextPane. Последняя строка метода посылает

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

объекту сообщение openWindow, реализованное в классе ViewManager, что

приводит к созданию окна и его появлению на экране.

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

ListPane new framingRatio: (0@0 rightBottom: 1 @ 0.8).

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

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

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

frame: (100 @ 100 extent: 400 @ 200) (что, впрочем, не совсем корректно,

поскольку при этом никак не учитываются реальные размеры экрана). Но

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

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

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

гольника. Так, выражение с сообщением framingRatio: указывает, что со-

здаваемая панель должна занимать все окно в горизонтальном направлении

и 0,8 окна в вертикальном. В качестве альтернативы размещение панели

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

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

Например, выражение

ListPane new framingBlock: [:box |

Rectangle leftTop: box leftTop extent: box extent * (1 @ 0.8))]

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

box — прямоугольник окна).

Сообщение owner: self информирует панель о ее подконтрольности со-

держащему ее окну, или, другими словами, информирует панель о том, что

окно является ее владельцем. Это означает, что панель может посылать со-

общения «в» и получать сообщения «из» окна приложения.

Оставшиеся сообщения имеют одно и то же имя, но разные аргументы.

Его шаблон нам знаком — when: #eventSymbol perform: #eventHandlerSe-

lector:. Как мы знаем, такое сообщение информирует окно о том, что когда

в данной панели происходит событие, описываемое символом #eventSym-

bol, владельцу панели, в данном случае экземпляру класса PhoneBook, нуж-

но послать сообщение eventHandlerSelector: (обработчик события). Такое

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

изошло событие.

Рассмотрим каждое из таких сообщений и реализуем указываемые в

них методы. Начнем с сообщения when: #getContents perform: #list:, по-

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

#getContents, необходимо получить новое содержимое панели и отобра-

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

сообщение list: aPane, в ответ на которое и будет выполнена указанная

16.4. Пример: телефонная кни га 255

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

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

события должен выглядеть так:

list: aListPane

"Отображает в списковой панели aListPane

имена людей из телефонной книги."

aListPane contents: phones keys asSortedCollection.

Аналогичное сообщение when: #getContents perform: #text: посыла-

ется текстовой панели. Метод text: должен отображать в текстовой панели

номер телефона лица, выбранного в списковой панели, и ничего не отобра-

жать, если выбор не был сделан.

text: aTextPane

"Определяет содержимое текстовой панели как номер

телефона человека, выбранного в списковой панели."

aTextPane contents: (phones at: selectedName

ifAbsent: [String new]).

Реализация обработчика события #save текстовой панели должна со-

хранить новое содержимое текстовой панели в словаре phones в качестве

значения для выбранного в списковой панели ключа (лица) и сообщить

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

панели имеют переменную modified).

textFrom: aTextPane

"Сохраняет в словаре phones содержимое aTextPane как

номер телефона выбранного в списковой панели имени."

selectedName isNil ifTrue: [^ true].

phones at: selectedName put: aTextPane contents.

aTextPane modified: false.

Обработчик события #select списковой панели должен отображать в

текстовой панели номер телефона выбранного лица. Следовательно, между

этими двумя панелями должна быть установлена связь. Для этого исполь-

зуется механизм поиска панели по обработчику события #getContents, то

есть используется сообщение changed: #text:, которое отыщет в окне про-

смотра панель с методом #text: в качестве обработчика события #getCon-

tents и заставит владельца панели выполнить этот метод.

nameSelected: aListPane

"Отображает в текстовой панели номер телефона

в соответствии с выбором в списковой панели."

selectedName := aListPane selectedItem.

self changed: #text:.

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

Теперь напишем метод, создающий и включающий в окно специальное

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

этого меню. Начнем с метода для построения меню.

listMenu: aListPane

"Определяет всплывающее меню для панели aListPane."

aListPane setMenu: ((Menu

labels: ’∼Add\ ∼Remove’ withCrs

lines: Array new

selectors: #(add remove))

title: ’∼Phones’).

Текст метода listMenu: требует пояснений, так как построение меню еще

не рассматривалось. Прежде всего заметим, что меню в этом методе со-

здается посылкой классу Menu сообщения labels:lines:selectors:. Элементы

меню определяются строкой-аргументом ключевого слова labels: и отде-

ляются друг от друга символом \, который заменяется символом возврата

каретки (благодаря сообщению withCrs, посылаемому строке). Символ ∼

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

определяет его как горячую клавишу. Массив-аргумент ключевого слова

lines: — либо пустой массив, либо содержит номера строк меню, после

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

Селекторы, перечисленные в массиве после ключевого слова selectors:, —

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

пункта меню. Сообщение labels:lines:selectors: всегда посылает ся владель-

цу меню — экземпляру класса PhoneBook.

Сообщение title: со строкой в качестве аргумента посылается уже со-

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

навливается в строку меню владельца панели. Тем самым доступ к меню

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

бытие #getMenu, возникающее при нажатии в списковой панели правой

кнопки мыши. Если в подобном методе заголовок меню не определяется,

Smalltalk Express создаст его сам в виде ’Untitled’ и добавит меню с таким

именем к строке меню, напоминая программисту, что необходимо обеспе-

чить более описательный заголовок.

Наконец, чтобы сделать такое меню работающим, реализуем в классе

PhoneBook следующие два метода:

add

"Добавляет новое имя в телефонную книгу."

| key |

self textModified ifTrue: [^ self].

key := Prompter prompt: ’Enter new name:’ default: String new.

16.4. Пример: телефонная кни га 257

(key isNil or: [phones includesKey: key]) or: [key = ”]) ifTrue: [^ self].

selectedName := key.

phones at: key put: nil.

self changed: #list:;

changed: #list: with: #selection: with: key;

changed: #text:.

remove

"Удаляет выделенно е имя из телефонной книги."

phones removeKey: selectedName ifAbsent: [ ].

selectedName := nil.

self changed: #list:; changed: #text:.

Здесь есть новые моменты. Прежде всего, обратим внимание на выра-

жение self textModified ifTrue: [^ self] из метода add, которое проверяет,

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

хранено. Самое интересное для нас в методе add — второе из сообщений

с ключевым словом changed:. Благодаря ему по #list: будет найдена па-

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

послано сообщение selection: key, выделяющее в списке введенное имя.

В методе remove нет ничего для нас нового. Обратим внимание только

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

имя не задается (selectedName := nil).

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

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

SubPane. И хотя каждый виджет имеет уникальные характеристики, обра-

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

все они обладают следующими общими свойствами:

• Имеют владельца, обычно подкласс класса ViewManager.

• Сообщения framingBlock: (или framingRatio:) определяют область, зани-

маемую панелью в окне.

• Имеют набор событий, о которых сообщают владельцу; связь между

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

сообщения when:perform:.

• Устанавливают свое содержимое, сообщая владельцу о событии #get-

Contents; имя обработчика события #getContents определяет панель

при посылке владельцу changed:-сообщений.

• Могут устанавливать меню, сообщая владельцу о событии #getMenu.

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

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

Smalltalk at: #MyPhoneBook put: PhoneBook new, а затем открыть эту кни-

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

гу для работы, вычисляя выражение MyPhoneBook open. Чтобы сохранить

всю введенную в телефонную книгу информацию, необходимо сохранить

образ системы при выходе из нее.

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

16.5.1. Постановка задачи

Чтобы рассмотреть новые моменты в построении приложения, приве-

дем пример, в котором реализуем простое окно для «перевода» слов с ан-

глийского языка на русский

. Постановка задачи почти очевидна: постро-

ить приложение, которое позволяет выбирать в любой из двух панелей —

панели английских слов и панели русских слов — существующее слово и

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

Language Translator

English: Russian:

table

red

идти

таблица

красный

Add Word Delete Word Edit Translation

Рис. 16.4. Внешний вид окна переводчика

При реализации этого приложения, в отличие от предыдущего, мы бу-

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

панели и три кнопки. Выше каждой панели расположим метку. Левая спис-

ковая панель с меткой English: — панель английских слов (ключей словаря),

в то время как правая панель с меткой Russian: — панель русских слов (зна-

чений словаря). Слова будем представлять экземплярами класса String. А

моделью предметной области вновь определим экземпляр класса Dictionary.

Внешний вид окна переводчика, соответствующий этому описанию, приве-

ден на рис. 16.4.

Пример представляет собой переработку примера из [12, гл. 5]

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

Полное состояние приложения поддерживается переменными экземпля-

ра. Нам потребуются всего две переменные:

translation — словарь с английскими словами в качестве ключей и их рус-

ским переводом в качестве значений;

englishSelection — выбранное в панели английское слово, или nil, если вы-

бор не был сделан.

Опишем функциональные возможности приложения. В окне, если вы-

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

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

гут добавляться и удаляться из английской панели с помощью кнопок ’Add

Word’ и ’Delete Word’ соответственно. Перевод английского слова может

быть отредактирован при нажатии на кнопку ’Edit Translation’. Если в при-

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

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

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

окно приложения в соответствии с происшедшими изменениями будет об-

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

с именами обработчиков событий.

Таблица 16.2. События окна LanguageTranslator

Элемент интерфейса Событие Имя обработчика

Окно LanguageTranslator #opened open

Панель englishPane #getContents updateEnglishList:

#select selectEnglishItem:

Панель russianPane #getContents updateRussianList:

#select selectRussianItem:

Кнопка addWordButton #clicked clickedAd dWord:

Кнопка delWordButton #clicked clickedDeleteWord:

Кнопка editTranslationButton #clicked clickedEditTranslation:

По созданному эскизу очевидно, как определить новый класс. Назовем

его LanguageTranslator и приведем определение класса вместе с методом

класса new и частным методом экземпляра setDictionary, которые необхо-

димы для создания нового экземпляра.

ViewManager subclass: #LanguageTranslator

instanceVariableNames: ’translation englishSelection’

classVariableNames: ’ ’

poolDictionaries: ’ ’