prepod

Путь к Файлу: /РОССИЙСКИЙ НОВЫЙ УНИВЕРСИТЕТ / Smalltalk / Руководство II.doc

Ознакомиться или скачать весь учебный материал данного пользователя
Скачиваний:   3
Пользователь:   prepod
Добавлен:   04.05.2015
Размер:   544.5 КБ
СКАЧАТЬ

 Начало формы

Конец формы

 

Руководство II

Руководство II Руководство II

Руководство II

 

Урок 3. Ввод пакета UIPainter

Руководство II

В данном уроке мы не будем касаться регистрации статистики на веб-сервере или других приложений. Мы рассмотрим пакет UIPainter 101, так как он знакомит нас с инструментарием для создания графического интерфейса пользователя в среде VisualWorks. Мы познакомимся с инструментами и типами диалоговых окон, с которыми мы будем иметь дело в остальной части руководства.  

Руководство II

В данном уроке мы научимся загружать пакет UIPainter. Тем, кто еще незнаком с пакетами, может обратиться к букварю II. Загрузив UIPainter, мы создадим простое окно с кнопкой. При щелчке по кнопке в качестве сообщения появится окно с надписью 'Hello World'. Замысел урока состоит в том, чтобы на основе практики свободно ориентироваться в возможностях пакета UIPainter.

 

Руководство II

К окончанию руководства мы получим возможность:

·  Загружать пакет UIPainter

·  Размещать кнопки виджета на холсте

·  Задавать свойства кнопок виджета и холста (окна). 

·  Устанавливать метод для кнопок виджета

 

Руководство II

1. Запускаем VisualWorks. В некоммерческой версии 7.2 пакет UIPainter поставляется предварительно загруженным. Мы можем определить, что пакет загружен по наличию на линейке инструментов двух активированных иконок "холст".

Руководство II

Рисунок 3-1. Иконки пакета UIPainter на панели инструментов окна запуска

2. Если этих иконок нет на панели, проделаем следующие операции. В окне запуска выберем опцию меню Tools >> Load Parcel Named...

Руководство II

Рисунок 3-1. Опция Load Parcel Named...

3. В следующем диалоговом окне со звездочкой * щелкнем OK. Раскроется окно со списком пакетов.

Руководство II

Рисунок 3-2. Окно по умолчанию Load Parcel

4. Прокручиваем до UIPainter 7.2 и щелкаем OK.

Руководство II

Рисунок 3-3. Выбор пакета UIPainter

 

 

 

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

Руководство II

 

Рисунок 3-4. Окно запуска с двумя новыми иконками на панели инструментов.

Левая кнопка (с холстом на мольберте) называется New Canvas (новый холст), кнопка справа (с холстом на мольберте и биноклем) называется Edit Resource (выдача ресурсов), или Resource Finder (поиск ресурсов). Назначение кнопки New Canvas ясно само по себе, хотя она используется и для создания нового образа, и для создания меню. Каждый раз, когда мы хотим создать новое окно (холст), меню или образ, щелкнем по этой кнопке. Кнопка Edit Resource, или Resource Finder используется, когда мы хотим вызвать уже существующие окно (холст), меню или образ. Можно обращаться к этим кнопкам просто как к кнопкам New и Edit.

 

 

 

 

 

 

 

 

Руководство II

Рисунок 3-5. Пояснение к кнопке New Canvas

6. Щелкаем кнопку New (canvas).

По умолчанию появляются три окна. Левое носит название окно GUI Painter Tool (инструмент для рисования ГИП), или Properties (свойства). Крайнее правое называется Palette (палитра). Нижнее правое окно – это Blank Canvas (чистый холст) – ему соответствует на иконке кнопки в главном окне запуска чистый холст.

Руководство II 

Figure 3-6. Три главных окна пакета UIPainter

7. Щелкнем по панели заголовка в окне Palette, чтобы его активировать.

8. В окне Palette содержатся разные иконки. Они представляют "виджеты", то есть компоненты типового приложения ГИП, используемого повседневно. Большинство общих виджетов, таких как кнопки, поля ввода и окна с наборами, можно найти в этом окне.

9. Щелкнем иконку Action Button (вверху слева с надписью OK на ней). Заметим, что когда мы наводим курсор на иконку в окне Palette, под этим окном появляется название виджета. Теперь щелкнем где-нибудь по пустому холсту.  На нем появится кнопка с надписью Action.

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

 

 

Руководство II

Рисунок 3-7. Размещение кнопки Action Button на чистом холсте

10. При активированных уголках кнопки Action активируем окно GUI Painter Tool, или  Properties. Появятся свойства для кнопки Action.

Руководство II

Рисунок 3-8. Диалог Properties для кнопки Action

a. В поле String: заменим слово Action на Привет миру! (или Say Hello to the World). b. В поле Action: запишем прМир (sayHi). c. Щелкнем по кнопке Apply.

Текст, введенный нами в поле Action: станет именем метода. Этот метод еще не существует: мы создадим его позднее. Однако для UIPainter не имеет значения, существует метод или не существует. Он не фиксирует существования метода, а просто меняет его на символ (#прМир или #sayHi), который позволяет проводить компиляцию. Это нормально. Когда окно активировано и кто-то щелкнет по кнопке, система воспримет этот символ и использует его для поиска метода с тем же именем (то есть она принимает имя метода к исполнению).

Кнопки Apply и Cancel внизу окна всегда готовы к действию (то есть активируются) как только мы вводим любые изменения в любое поле в окне Properties.

Если мы замечаем, что слова "Привет миру!" ("Say Hello to the World") не помещаются на кнопке, то щелкнем мышкой (и удержим ее) по любому из черных квадратных "уголков" нижнего виджета и  подвинем кнопку в сторону, делая ее шире, пока вся фраза не поместится в ней.

11. Четыре левых кнопки в окне GUI Painter Tool  размещены в определенном порядке.

Руководство II

Рисунок 3-9. порядок действий в окне GUI Painter Tool

Чтобы создать в VisualWorks  основную структуру данного холста, необходимо провести ряд операций. Они представлены слева направо рядом кнопок на панели инструментов.

12. Щелкнем по кнопке Install...

VisualWorks в ответ запросит, к какому классу принадлежит данное окно. Если это существующий класс, мы должны щелкнуть по иконке с биноклем, которое выдает для выбора список существующих классов. Так как мы пока просто обучаемся, то создадим новый класс. В верхнем поле (под INSTALL on Class:), вводим Обучение (или JustPlaying) и щелкаем OK.

Руководство II

Рисунок 3-10. Окно диалога Install...

13. Теперь VisualWorks должен спросить, к какому полю имен принадлежит вновь созданный класс. С этого момента принимаем все действия по умолчанию, просто щелкаем OK. Позднее мы узнаем о полях, которые необходимо изменять. Руководство II

Рисунок 3-11. Диалоговое окно Class Finder

14. VisualWorks может нам указать, в каком пакете это найти. В данном случае выбираем none и снова щелкаем ОК.

Руководство II

Рисунок 3-11a. Окно диалога Package Selector (выбор пакета)

Заметим, что в окне GUI Painter Tool левые кнопки (Define, Browse и Open) стали активированными.

15. В окне INSTALL on class  снова щелкнем ОК. (по чистому холсту, правда, холст уже нельзя назвать чистым, так как на нем расположена активная кнопка. Поэтому щелкнем где-нибудь на чистом поле холста.) Затем щелкнем по кнопке Define в окне Painter Tool.

a. В следующем окне диалога появятся фиксирующие отметки при методе прМир (sayHi) и в ячейке Add initialization.

Руководство II

Рисунок 3-12. Диалог Define Model

b. Щелкаем OK.

Теперь UIPainter (в данном случае это выполняет UIDefiner) автоматически создает метод "stub" для метода  прМир (sayHi). Это очень экономит время.

16. Щелкнем по чистому холсту (активируем его) и убедимся, что виджет (уголки) не активировался. Затем щелкнем по кнопке Browse в GUI Painter Tool.

Руководство II

Рисунок 3-13. Отображение метода прМир браузером системы

a. Появится браузер системы, который позволяет рассмотреть класс Привет миру! (JustPlaying).

b. По умолчанию мы увидим метод (код), созданный классом UIDefiner.

17. Изменим код прМир на следующий:

прМир Dialog warn: 'Привет миру!'.

a. Щелкнем <Operate-Click> и выберем Accept.

b. Закроем браузер иерархии.

18. Щелкнем кнопку Open в GUI Painter Tool.

Наша программа заработала. Щелкнем кнопку. Если не будет опечаток в методе прMир (sayHi),

мы увидим окно сообщений со словами ‘Привет миру!’ ('Hello World').

19. Поздравим себя. Мы успешно создали в VisualWorks свое первое приложение ГИП.

 

Резюме

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

графический интерфейс пользователя, или ГИП в среде VisualWorks. Теперь мы можем:

Руководство II Загружать пакет UIPainter

Руководство II Размещать на холсте виджет (кнопку)

Руководство II Вводить свойства через виджет на холсте

Руководство II Задавать метод кнопке

 

 

Урок 4. Как ГИП работает в VisualWorks

Руководство II

В предыдущем уроке мы ознакомились с пакетом UIPainter и создали простое приложение, позволяющее сказать миру 'Hello'. Однако, нужно выполнять значительно больше, чем вежливо приветствовать кого-либо. Но для этого требуется более глубокое понимание того, как работают другие виджеты пакета UIPainter. Данный урок, как и предыдущий, не касается регистрации статистики на веб-сервере и других подобных приложений. Здесь мы должны разобраться в двух очень важных вещах: как виджеты ГИП обмениваются информацией между собой перед тем, как пробиться к внешнему интерфейсу регистрационной статистики веб-сервера. Мы обратимся к пакету UIPainter 102, который продолжает материал предыдущего урока.

Руководство II

В данном уроке мы разместим на чистом холсте дополнительные виджеты и обеспечим им общение между собой. Это делается с помощью хранилищ значений (Value Holders) и адаптеров свойств (Aspect Adaptors). Овладев заложенными в них идеями, мы будем готовы начать работу с регистрационным приложением веб-сервера.

Руководство II

К концу данного урока полученное нами приложение позволит нам:

·  вводить свое сообщение,

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

·  использовать кнопки для задания вывода информации.

Руководство II

Хранилища значений (Value Holders)

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

2. В главном окне (Launcher) щелкнем по кнопке New Canvas.

3. На чистом холсте расположим следующие виджеты:

·  2 кнопки действий

·  2 вводных поля

·  2 радио-кнопки (radio buttons)

Для ускорения работы мы сначала поместим все виджеты на холсте, а затем зададим их возможности. После задания возможностей каждого виджета щелкнем по кнопке Apply и перейдем к следующему виджету на холсте. Заметим, что окно GUI Painter Tool изменяется каждый раз при переходе к новому виджету.

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

Руководство II

Рисунок 4-1. Начальное размещение виджетов

4. Введем свойства, как показано в следующей таблице:

Предмет

 Название строки

Запись

Canvas

String

GUI 102

Action Button1

String

Say it

Action Button1

Action

#sayMessage

Action Button2

String

Clear

Action Button2

Action

#clearMessages

Radio Button 1

String

Message Box

Radio Button 1

Aspect

#outputChoice

Radio Button 1

Select

#messageBox

Radio Button 2

String

Screen

Radio Button 2

Aspect

#outputChoice

Radio Button 2

Select

#screen

Input Field 1

Aspect

#messageInput

Input Field 2

Aspect

#messageOutput

Input Field 2

Background

yellow (Color Tab)

Убедимся в том, что в GUI Painter Tool задано свойство только чтение (read-only) для входа Поля 2 при закладке Details, и Вы можете установить цвет фона для виджета Input Field 2 по закладке Color. Если закладка Color не видна, надо просто расширить окно GUI Painter.

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

Руководство II

Рисунок 4-2. Холст после задания свойств   

5. В окне GUI Painter Tool выделяем верхний объект на левой панели (главное окно) и щелкаем по кнопке Install.

После этого VisualWorks спрашивает нас, к какому классу принадлежит это окно. Если такой класс существует, мы щелкаем по иконке «бинокль» в окне запуска, которая раскрывает для выбора список существующих классов. Так как мы сейчас имитируем ситуацию, то создадим новый класс. В верхнем поле (под INSTALL on Class:) выбираем GUI102 и щелкаем  OK.

Появляется окно диалога Class Finder, щелкаем OK,  то есть принимаем все значения по умолчанию.

Появляется окно диалога Choose a Package, выделяем none и щелкаем OK.

Снова появляется окно диалога GUI102, щелкаем OK.

6. В инструментарии GUI Painter убеждаемся, что строка Main Window : GUI 102  остается выбранной в левой панели и щелкаем по кнопке Define (определить).

В раскрывшемся окне диалога появятся метки при всех свойствах (Aspects), которые мы задали виджетам. Кроме того, будет поставлена метка при Add initialization.

Если мы не видим всех пяти виджетов, помещенных на Рисунке 4-3, то это означает, что нами не выбрано главное окно холста, а вместо этого выбраны разные виджеты из  инструментария GUI Painter. Если нами пропущено размещение всех необходимых свойств всех виджетов, то появится окно диалога, объявляющее, что у некоторых компонентов отсутствуют свойства, необходимые для определения моделей. В этом случае определим, какой виджет нами пропущен, и зададим эти свойства.

Руководство II

Рисунок 4-3. Холст после задания свойств

Щелкаем OK.

UIPainter (в данном случае UIDefiner) автоматически создает код "корешков" для этих методов. Так  экономится много времени, поскольку нам не нужно создавать их вручную. Очень скоро мы введем изменения .

7. В главном окне GUI Painter Tool, которое остается выбранным, щелкаем по кнопке Browse.

– 8. Когда появляется браузер GUI 102 системы System Browser, щелкаем по закладке Class над протоколом, выбираем протокол interface specs и, наконец, выбираем метод windowSpec. На экране появится следующее:

Руководство II

Рисунок 4-4. Метод windowSpec в браузере системы (System Browser)

Этот метод создается или корректируется каждый раз, когда мы щелкаем по кнопке Install из инструментария GUI Painter Tool. Так обычно в VisualWorks формируется экран. Мы создаем его на свой вкус, а VisualWorks видит его совершенно иначе.

9. В браузере системы (System Browser), который теперь называется GUI 102 >> windowSpec, щелкаем над протоколом по закладке Instance, выбираем протокол actions и, наконец, выделяем метод clearMessage.

10. Заменяем код метода на следующий:

clearMessage messageInput value: 'Enter your new message'. messageOutput value: ''.

Поля ввода, обозначенные как "аспекты"  messageInput и messageOutput (ввод сообщения и вывод сообщения), названы в VisualWorks хранилищами значений (value holders). Действительно, поле ввода должно содержать (hold) некоторое значение (value). Если это так, то способ, с помощью которого мы задаем значения входного поля, состоит в применении метода value:. В следующем методе, который мы тоже будем изменять,  способ, с помощью которого мы определяем содержание (или значение) во входном поле состоит именно в использовании метода value:.

11. Щелкаем <Operate-Click> по нижней панели и выбираем Accept.

12. Выделяем метод sayMessage и меняем код на следующий:

sayMessage outputChoice value = #screen ifTrue: [ messageOutput value: messageInput value] ifFalse: [ Dialog warn: messageInput value].

13. Снова щелкаем <Operate-Click> по нижней панели и выбираем Accept.  Затем закрываем System Browser.

14. В главном окне (которое должно быть активированным) в GUI Painter Tool, щелкнем кнопку Open.

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

Руководство II

Поздравим себя. Мы успешно создали в VisualWorks Приложение ГИП, которое выделяет и распределяет значения по полям ввода. Это касается концепции Value Holders, или хранилищ значений. Существует намного больше применений этих хранилищ, чем мы увидели, однако для веб приложений этого вполне достаточно.

 

 

 

 

 

19. Обратимся снова к Просмотрщику (System Browser) и выберем из меню Browser >> Category. На панели категорий (Category pane) щелкнем в списке категорию none. Справа от категорий появится список классов. Над панелью протоколов выбираем закладку Class.  На нижней панели (панели методов) отобразится шаблон для определения нового класса.

20. Вместо этого шаблона вводим:

Smalltalk defineClass: #GUI102

            superclass: #{ UI.ApplicationModel }

            indexedType: #none

            private: false

            instanceVariableNames: 'm1 m2 '

         classInstanceVariableNames: ''

         imports: ''

            category: 'none'

После этого щелкнем <Operate-Click> и выберем Accept.

21. На панели протоколов щелкнем <Operate-Click> и выберем New...

Появится диалоговое окно с просьбой ввести новое имя протокола. Введем class initialization и щелкнем OK.

22. Заменим текст на нижней панели на следующий:

new ^super new initialize

23. Теперь на нижней панели щелкнем <Operate-Click> и выберем Accept. В результате будет "компилирован" только что введенный нами код или обнаружены ошибки. На панели методов появится новый метод (new method).

24.  Щелкнем закладку экземпляров (Instance tab) над панелью протоколов.

Заметим, что снова появится текст с определением класса.

25. Теперь в панели протоколов наберем <Operate-Click> и выберем New... Появится таблица диалога с просьбой ввести имя нового протокола. Наберем initialize-release и щелкнем OK.

Руководство II

Рисунок 4-5. Класс AA

26. Теперь при выделенном initialize-release введем метод initialize.

initialize "initialize the m1 variable." m1 := 'Hello World'.

На нижней панели щелкнем <Operate-Click> и выберем Accept

Когда класс создан, содержание переменной m1 помещено в банальную фразу 'Hello World'. Важно заметить, что данный класс представляет собой просто место для размещения нашего начального значения. Этим обстоятельством сейчас и воспользуемся.

27. Затем рассмотрим методы m1: и m2:. Сначала при выделенном initialize-release введем m1:

m1: anM1 m1 := anM1.

Затем таким же образом введем m2:

m2: anM2 m2 := anM2.

28. Закроем System Browser и вернемся к холсту. Щелкнем по свободному месту на холсте и таким образом выберем его. Убедимся, что никакие виджеты не активированы. В окне GUI Painter Tool щелкнем по кнопке Browse.

29. Когда появляется браузер системы, мы видим на нижней панели в #GUI102 метод defineClass (определение класса). Добавим еще одну переменную экземпляра. Назовем ее anGUI102. Новый метод defineClass примет следующий вид:

    Smalltalk defineClass: #GUI102

      superclass: #{UI.ApplicationModel}

      indexedType: #none

      private: false

      instanceVariableNames: 'anGUI102 messageInput messageOutput outputChoice'

      classInstanceVariableNames: ''

      imports: ''

      category: 'UI.ApplicationModel '

30. Теперь в нижней панели щелкнем <Operate-Click> и выберем Accept.

31. Щелкнем по протоколу actions и введем следующий метод:

initialize

      anGUI102 := GUI102 new.

      messageInput  := (AspectAdaptor subject: anGUI102 sendsUpdates: true)

                       forAspect: #m1.

      messageOutput := (AspectAdaptor subject: anGUI102 sendsUpdates: true)

                       forAspect: #m2.

initialize

      anGUI102 := GUI102 new.

      messageInput  := (AspectAdaptor subject: anAA sendsUpdates: true)

                       forAspect: #m1.

      messageOutput := (AspectAdaptor subject: anAA sendsUpdates: true)

                       forAspect: #m2.

32. Снова щелкнем в нижней панели <Operate-Click> и выберем Accept.

Здесь мы ввели класс AspectAdaptor. Первая строка создает экземпляр класса AA. Следующие две строки преобразуют наши поля ввода из хранилищ ввода в адаптеры состояния. Эти строки оповещают систему, что наши два поля ввода должны ввести изменения переменных m1 и m2 класса AA. Как только будут введены изменения m1 и m2, это будут вход и выход сообщений (messageInput и messageOutput).

33. Щелкнем по методу sayMessage и введем следующий код:

     sayMessage

       anGUI102 m1: 'Hi'.    

       anGUI102 m2: 'This is powerful stuff'.    

    

34. Щелкнем <Operate-Click> в нижней панели и выберем Accept.

35. Щелкнем по методу clearMessage и введем следующий код:

     clearMessage

       anGUI102 m1: 'Goodbye'.    

       anGUI102 m2: 'All too cool'.

36. Щелкнем по нижней панели <Operate-Click> и выберем Accept.

31. Закроем браузер системы и вернемся к GUI Painter Tool. Щелкнем здесь по кнопке Open.

32. Прежде всего заметим, что первое поле ввода уже содержит фразу 'Hello World'. Вспомним, что было проведено в классе AA  методом initialize. Щелкнем две кнопки. Эти кнопки косвенным образом меняют содержимое полей ввода, изменяя значения переменных класса AA. Важно заметить, что, возможно, значения переменных класса АА могут так же измениться в связи с изменениями в другом классе. Однако ГИП должен всегда отражать эти изменения. Важность этого свойства, не совсем очевидная сейчас, станет более ясной по мере того, как мы создадим новые и новые ГИП.

Мы можем себя поздравить. Мы успешно модифицировали наше приложение ГИП, в котором выделяются значения и с применением адаптеров выражений распределяются по полям ввода. Подобно хранилищам значений (Value Holders), в нашем распоряжении имеется значительно больше адаптеров выражений (Aspect Adaptors), чем мы здесь рассмотрели. Тем не менее этого достаточно для приложений к регистрационным веб-файлам.

Руководство II

Резюме

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

Тепеь мы умеем:

Руководство II Размещать виджеты (кнопки, радио кнопки и поля ввода) на холсте

Руководство II Устанавливать свойства виджетов и холста (окна)

Руководство II Придавать методы виджетам-кнопкам

Руководство II Выделять значение поля ввода, используя метод value:

Руководство II Задавать значение поля ввода, используя метод value:

Руководство II Преобразовывать поле ввода в адаптер выражений

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

 

 

Наверх страницы

Внимание! Не забудьте ознакомиться с остальными документами данного пользователя!

Соседние файлы в текущем каталоге:

На сайте уже 21970 файлов общим размером 9.9 ГБ.

Наш сайт представляет собой Сервис, где студенты самых различных специальностей могут делиться своей учебой. Для удобства организован онлайн просмотр содержимого самых разных форматов файлов с возможностью их скачивания. У нас можно найти курсовые и лабораторные работы, дипломные работы и диссертации, лекции и шпаргалки, учебники, чертежи, инструкции, пособия и методички - можно найти любые учебные материалы. Наш полезный сервис предназначен прежде всего для помощи студентам в учёбе, ведь разобраться с любым предметом всегда быстрее когда можно посмотреть примеры, ознакомится более углубленно по той или иной теме. Все материалы на сайте представлены для ознакомления и загружены самими пользователями. Учитесь с нами, учитесь на пятерки и становитесь самыми грамотными специалистами своей профессии.

Не нашли нужный документ? Воспользуйтесь поиском по содержимому всех файлов сайта:



Каждый день, проснувшись по утру, заходи на obmendoc.ru

Товарищ, не ленись - делись файлами и новому учись!

Яндекс.Метрика