Тема: поняття елемента керування, події, пов’язані з елементами керування, обробники цих подій мовою Rubу.
Мета:
розглянути способи розробки графічних інтерфейсів користувача засобами Ruby, Glade і GTK+;
навчити створювати і виконувати найпростішу подійно-орієнтовану програму.
По завершенню вивчення учень
Обладнання: ПК із встановленими ОС, текстовий редактор (бажано з підсвіткою службових слів, наприклад, Sublime Text 3), інтерпретатор мови програмування Ruby, інструмент GTK+, середовище для візуального проектування інтерфейсів Glade, (дана) інструкція.
Структура уроку
Хід уроку
1. Організаційний момент
Вітання з класом. Перевірка присутності і готовності учнів до уроку. Перевірка виконання домашнього завдання.
2. Актуалізація опорних знань
Завдання. Назвати поняття, виділені жирним шрифтом, і порівняти з поданим описом у тексті щодо подійно-орієнтованого програмування.
3. Вивчення нового матеріалу
Найпоширеніші сучасні операційні системи мають графічний інтерфейс для взаємодії з користувачем. Відповідно більшість прикладних програм, які розробляють програмісти, також мають графічний інтерфейс користувача.
Зазвичай дію прикладної програми відображено в окремому вікні — вікні інтерфейсу, в якому розташовують елементи інтерфейсу. Користувач взаємодіє з програмою натискаючи кнопки на клавіатурі, рухаючи вказівник миші, натискаючи кнопки миші, торкаючись екрана тощо. У відповідь на дії користувача в операційній системі виникає певна подія. Якщо створити в програмі обробник такої події, то у відповідь програма виконає послідовність вказівок, вказану в цьому обробнику.
Крім подій, створюваних користувачем, програма також може реагувати на системні події. Наприклад, операційна система подає сигнал про завершення роботи і програма має можливість виконати певні дії — зберегти файли, передати інформацію тощо.
Створення програми можна поділити на два напрямки — створення інтерфейсу й опис логіки програми.
GTK+ (The GIMP ToolKit) — багатоплатформний набір інструментів для створення графічних інтерфейсів користувача.
GTK+ розвивають у межах проекту GNU, це вільне програмне забезпечення. Код GTK+ розповсюджують під ліцензією LGPL. Це дозволяє використовувати GTK+ не лише для розробки вільного ПЗ, а й для створення власницьких програм, не вимагаючи від виробників закритих програм виплат або купівлі спеціальної ліцензії.
До складу GTK+ входить повний набір програмних засобів (віджетів), що надає можливість використовувати GTK+ для проектів різного рівня і розміру. GTK+ в поєднанні з використанням візуального будівника інтерфейсу Glade дозволяє істотно спростити розробку і скоротити час написання графічних інтерфейсів.
Glade — середовище для візуального проектування інтерфейсу на базі GTK+.
Створений у Glade інтерфейс зберігають у форматі XML, який можна потім динамічно завантажити у GTK-застосунок за допомогою об'єкта GtkBuilder.
Вигляд вікна програми Glade
для ОС Linux Mint 18.1 Serena Mate
(всі наступні буде подано для ОС Windows 10)
Опис встановлення:
при ОС MS Windows 10
встановити середовище візуального проектування інтерфейсів Glade, завантаживши програму встановлення зі сторінки glade.gnome.org і виконавши її вказівки;
встановити Ruby, завантаживши програму встановлення за посиланням rubyinstaller.org і виконавши її вказівки при встановленні;
встановити інструмент GTK+ за допомогою вказівки командного рядка:
gem install gtk3.
Контроль встановлення: запустити на виконання програму test.rb:
ruby test.rb
і побачити таке вікно.
клацнути по кнопці Перевірити і спостерігати у вікні термінала появу тексту:
Вітаємо! Встановлення успішне!
4. Інструктаж з ТБ
5. Вироблення практичних навичок
Завдання 1. Створити програму-калькулятор на чотири дії. Калькулятор відображати в окремому вікні. Передбачити введення перше числа, вибір арифметичної дії, введення другого числа й обчислення результату. Інтерфейс програми має бути таким.
Вказівки до виконання (при ОС Windows 10)
Створити теку для збереження проекту (за вказівкою вчителя).
Завантажити середовище дизайнера інтерфейсів Glade (Пуск / уведіть Glade / виберіть Glade Interface Designer).
Вікно. Відстежити:
Примітка В GTK+ найвищим рівнем — коренем ієрархічного дерева віджетів — є об'єкт GtkWindow. Таке вікно GtkWindow може мати лише один дочірній віджет. Для створення рівнів вкладень віджетів використовують контейнери.
У новоствореному вікні розташувати вертикальний контейнер:
у палітрі віджетів клацнути кнопку 
Вертикальний контейнер групи Контейнери (Containers);
помітити зміну вигляду вказівника миші зі стрілки на зображення комбінації символу "+" із вертикальним контейнером;
клацнути лівою кнопкою миші у вікні window1;
у вікні діалогу ввести кількість елементів (4) і натиснути кнопку Створити;
помітити появу вертикального контейнера у вікні, а в Інспекторі об'єктів — появу об'єкта vbox1 GtkVBox.
У першому рядку вертикального контейнера вставити поле для введення тексту:
у палітрі віджетів групи Керування й відображення (Control and Display) клацнути кнопку 
Поле вводу тексту;
помітити зміну вигляду вказівника миші зі стрілки на зображення комбінації символу "+" і зображення поля;
клацнути лівою кнопкою миші по першому рядку вертикального контейнера;
помітити появу у першому рядку зображення поля, а в Інспекторі об'єктів — елемента entry1 GtkEntry.
У другому рядку вертикального контейнера вставити горизонтальний контейнер:
у палітрі віджетів групи Контейнери (Containers) клацнути кнопку 
Горизонтальний блок;
помітити зміну вигляду вказівника миші зі стрілки на зображення комбінацію символу "+" і зображення горизонтального контейнера;
клацнути лівою кнопкою миші у другому рядку вертикального контейнера;
у вікні діалогу ввести кількість елементів (2);
помітити появу у другому рядку вертикального контейнера зображення горизонтального поля, а в Інспекторі об'єктів — елемента hbox1 GtkHBox.
У третьому рядку вставити горизонтальний контейнер (діяти аналогічно попередньому пункту) і помітити в Інспекторі об'єктів появу елемента hbox2 GtkHBox.
Горизонтальні контейнери у другому й третьому рядках вертикального контейнера заповнити кнопками:
у палітрі віджетів групи Керування й відображення (Containers and Display) клацнути кнопку 
Кнопка;
помітити зміну вигляду вказівника миші зі стрілки на зображення комбінації символу "+" і зображення кнопки;
клацнути лівою кнопкою миші у другому рядку першого стовпчика;
помітити появу в Інспекторі об'єктів елемента button1 GtkButton;
Повторити ці дії для кнопок button2, button3 i button4.
Додати кнопку у четвертому рядку вертикального контейнера (діяти аналогічно попередньому пункту до появи елемента button5 GtkButton
Змінити назви кнопок на зручніші для подальшого кодування, а тексти написів на кнопках — на інформативніші, виконавши (для кожної з 5 створених кнопок) такі дії:
у повній відповідності з таким малюнком.
require "gtk3" # підключити бібліотеку gtk+
builder = Gtk::Builder.new(:file => "calc.ui") # створити об'єкт Gtk::Builder і завантажити файл xml створеного інтерфейсу
window = builder.get_object("window1") # створити вікно на основі опису з файлу calc.ui
window.signal_connect("destroy"){Gtk.main_quit}# сторити обробник події закриття вікна функція Gtk.main_quit для коректного завершення роботи програми
window.show() # відобразити об'єкт window на екрані
Gtk.main # запустити програму
Створити обробник події, що забезпечить таке: після введення числа і натискання кнопки з написом "+" число запам'ятати, поле очисти. Для цього після рядка:
window.show()
додати такий код:
entry = builder.get_object("entry1")
buffer = 0
oper = ''
button_plus = builder.get_object("btn_plus")
button_plus.signal_connect("clicked")
{ buffer = entry.text.to_f
oper = '+'
entry.text = ''
entry.grab_focus()
}
button_equals = builder.get_object("btn_equals")
button_equals.signal_connect("clicked")
{ if oper == '+'
entry.text = (buffer + entry.text.to_f).to_s
else
entry.text = 'Помилка!'
end
}і зберегти код. Пояснення:
entry — змінна до якої зберігаємо об'єкт типу Текстове поле;
buffer — змінна в яку записуємо перше число, яке отримуємо з текстового поля перетворенням за допомогою методу entry.text.to_f;
oper — змінна до якої зберігаємо знак операції, яку обрав користувач;
signal_connect("clicked") — обробник події, його буде виконано, коли користувач клацнув по кнопці.
Програма працює таким чином: користувач уводить число в текстове поле, натискає кнопку з написом "+", після чого обробник події button_plus.signal_connect("clicked") запише це число в buffer, запам'ятає який оператор обрав користувач, очистить поле і встановить фокус знову на текстове поле для введення другого числа. Користувач вводить друге число і натискає кнопку "=", тепер спрацьовує обробник події button_equals.signal_connect("clicked") в якому відбувається додавання двох чисел, якщо було натиснено кнопку "+", в іншому випадку виводиться повідомлення про помилку.
Перша перевірка проекту. Відкрити вікно Start Command Prompt with Ruby (Пуск / ruby / Start Command Prompt with Ruby). Перейти до теки з проектом. Запустити на виконання програму:
ruby calc.rb
і перевірити роботу програми.
Створити обробники подій для решти кнопок, діючи за аналогією. Для кнопки з написом "=" раніше для перевірки того, який оператор обрав користувач, використано оператор галуження if. Потрібно додати перевірку й для арифметичних операцій, відмінних від додавання. Таку перевірку можна виконати за допомогою вкладених if, але є красивіше рішення з використанням конструкції вибору. Після внесення вказаних змін, текст програми має виглядати таким чином:
require "gtk3"
builder = Gtk::Builder.new(:file => "calc.ui")
window = builder.get_object("window1")
window.signal_connect("destroy") { Gtk.main_quit }
window.show()
entry = builder.get_object("entry1")
buffer = 0
oper = ''
button_plus = builder.get_object("btn_plus")
button_plus.signal_connect("clicked")
{ buffer = entry.text.to_f
oper = '+'
entry.text = ''
entry.grab_focus()
}
button_minus = builder.get_object("btn_minus")
button_minus.signal_connect("clicked")
{ buffer = entry.text.to_f
oper = '-'
entry.text = ''
entry.grab_focus()
}
button_multiply = builder.get_object("btn_multiply")
button_multiply.signal_connect("clicked")
{ buffer = entry.text.to_f
oper = '*'
entry.text = ''
entry.grab_focus()
}
button_divide = builder.get_object("btn_divide")
button_divide.signal_connect("clicked")
{ buffer = entry.text.to_f
oper = '/'
entry.text = ''
entry.grab_focus()
}
button_equals = builder.get_object("btn_equals")
button_equals.signal_connect("clicked")
{ case oper
when '+'
entry.text = (buffer + entry.text.to_f).to_s
when '-'
entry.text = (buffer - entry.text.to_f).to_s
when '*'
entry.text = (buffer * entry.text.to_f).to_s
when '/'
entry.text = (buffer / entry.text.to_f).to_s
end
}
Gtk.mainЗапустити програму на виконання і здійснити перевірку роботи програми.
Повідомити вчителя про завершення роботи.
Завдання 2 (поглиблений рівень). Розширити функціонал калькулятора:
6. Підбиття підсумків уроку
Виставлення оцінок.
7. Домашнє завдання
У середовищі Glade створити інтерфейс і написати код мовою Ruby для переведення значення температури, поданої у градусах Цельсія, у градуси Фаренгейта.
Текст упорядкував Киричков Ярослав Васильович, учитель інформатики Технічного ліцею НТУУ «КПІ» Солом'янського району міста Києва, під час виконання випускної роботи на курсах підвищення кваліфікації з 26.03.2018 по 30.03.2018.