Розробка уроку

Тема: елементи мови подійно-орієнтованого програмування в cередовищі програмування Lazarus.

Мета:

Обладнання: ПК із встановленими ОС і середовищем програмування Lazarus.

Структура уроку

  1. Організаційний момент
  2. Актуалізація опорних знань
  3. Вивчення нового матеріалу
  4. Інструктаж з ТБ
  5. Набуття практичних навичок
  6. Підбиття підсумків уроку
  7. Домашнє завдання.

Хід уроку

1. Організаційний момент
Вітання з класом. Перевірка присутності і готовності учнів до уроку. Перевірка виконання домашнього завдання.

Мотивація навчання: буде розглянуто основні компоненти, які дозволяють створювати програми з графічним інтерфейсом.

2. Актуалізація опорних знань

  1. Назвіть основні вікна cередовища програмування Lazarus.
  2. Назвіть пункти меню головного вікна програми Lazarus.
  3. Де розташовано палітру компонентів?
  4. Які основні кнопки містить панель швидкого доступу?

3. Вивчення нового матеріалу

Середовище програмування Lazarus при розробці графічного інтерфейсу програми надає можливість використовувати велику бібліотеку візуальних компонентів: кнопок, полів, написів, прапорців, перемикачів, лічильників, списків, смуг прокручування тощо. Під час розташуування цих компонентів на формі автоматично створюється відповідний фрагмент програми мовою Object Pascal, що істотно спрощує і пришвидшує роботу щодо створення програм. Такий спосіб розробки програм називають наочним (візуальним) програмуванням.

Форма (Form) у середовищі Lazarus — це контейнер (платформа) для розташування всіх елементів керування (кнопок, перемикачів, прапорців, списків тощо) та інших об’єктів програми (написів, зображень, панелей тощо).

При виконанні проекта форма перетворюється на вікно програми.

Властивості форми визначають зовнішній вигляд вікна майбутньої програми: розмір, розташування на екрані, текст заголовка, вид рамки. Властивості форми можна переглянути та налаштувати в інспекторі об’єктів у вкладенні «Властивості». Серед властивостей форми розглянемо такі:

Значення властивостей можна змінювати при настанні події. Наприклад, при натисканні клавіші чи кнопки.

Подіязміна властивостей об'єкта, взаємодія між об'єктами, утворення нового об'єкта або знищення наявного об'єкта.

В Object Pascal кожній можливій події надано певну назву. Перелік назв усіх можливих подій для виділеного об'єкта можна прочитати на вкладенні Події вікна Інспектор об'єктів.

Основні події для форми:

Процедура опрацювання подіїчастина коду програми, у якій описано відповідь програми на настання події.

Наприклад, після вибору у вікні Інспектора об'єктів події OnMouseEnter — потрапляння вказівника миші на об'єкт (форму) — у вікні Редактора тексту буде внесено заготовку для відповідної процедури опрацювання подій.



Внесення такого коду:

Form1.Height:=Form1.Height+50;
Form1.Width :=Form1.Width +50;

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

Розглянемо інший приклад обробника подій: при закритті форми (подія OnClose) створити інформаційне вікно (вікно повідомлення) з текстом «Ви закрили вікно форми». Для цього потрібно вибрати подію OnClose на вкладенні Події у вікні Інспектора об’єктів. Після натискання на кнопку «…» у тілі процедури обробника подій викликати процедуру:

ShowMessage ('Ви закрили вікно форми');

Cередовище програмування Lazarus містить великe кількість вбудованих процедур і функцій. Деякі з них є методами об’єктів, за допомогою яких можна виконувати дії з об’єктами. Для різних об’єктів передбачені різні методи, їх кількість і призначення залежать від конкретного об’єкта.

Методце фрагмент програмного коду, вбудованого в об’єкт. Метод має назву й містить набір вказівок, які буде виконано, якщо викликати метод для об’єкта. Запис вказівки для виклику методу складається з назв об’єкта та методу, розділених крапкою:

Назва об’єкта.Назва методу;


Назву методу, як і назву властивості, можна ввести з клавіатури або обрати зі списку, який відкривається, якщо в коді програми записати назву об’єкта і поставити крапку. У такому списку буде відображено всі ті методи, які можна викликати для обраного об’єкта.

Для форми найчастіше використовують такі методи:

Деякі методи можна викликати для різних об’єктів, а інші — лише для об’єктів певного типу. Наприклад, методи Show і Hide можна викликати для форми, напису, кнопки та інших об’єктів, а метод Close — лише для форми.

Кнопка Button на вкладенні Standart — важливий елемент інтерфейсу з широкими функціональними можливостями.

Властивості Caption, Color, Height і Width цього компонента — аналогічні властивостям форми з такими самими назвами. Але є ще інші властивості:

Кнопку найчастіше використовують для того, щоб під час виконання програми після натискання на неї виконати деяку послідовність вказівок. Тому з кнопкою найчастіше пов’язують подію OnClick і створють обробник саме цієї події.

Кнопка із зображенням BitBtn на вкладенні Additional — аналог Button. Цей компонент має свої особливі властивості:

Текстове поле введення чи виведення даних Edit зі вкладення Standard має такі основні властивості:

Основні події Edit:

Всі інші властивості та події аналогічні властивостям форми. При опрацюванні даних, введених у поле Edit, потрібно враховувати, що вони мають рядковий тип String.

Поле Label з вкладення Standard призначено для розміщення на формі текстового напису рядкового типу String.

Основні властивості Label:

Всі події аналогічні компоненту Edit.

Підписане поле введення LabeledEdit з вкладення Additional має такі самі властивості, що й поле Edit.

Компонент Memo з вкладення Standard призначено для введення багаторядкового тексту.

Деякі його властивості подібні до властивостей поля Edit. Але є і відмінні:

Крім перелічених вище властивостей, Memo має свої методи:

Списки вибору ListBox і ComboBox з вкладення Standard використовують для вибору користувачем одного або декількох рядків.

ListBox — це список, схожий на Memo,

а ComboBox — список, що розгортається.

Специфічні властивості ListBox:

Специфічні властивості ComboBox:

Мітка CheckBox (Прапорець) з вкладення Standard призначена для того, щоб користувач міг вказати своє рішення типу так / ні або так / ні / не впевнений.

Це рішення впливає на значення властивості State. Платформа може містити кілька таких компонентів. Стан кожного з них ніяк не залежить від стану інших.

Деякі прапорці можуть перебувати у частково встановленому стані. Така можливість потрібна, коли потрібно повідомити користувачеві про неповну відповідність. Для активування такої можливості використовують властивість AllowGrayed. Якщо для властивості AllowGrayed встановлено значення True, то прапорець при послідовних клацання на ньому буде по черзі перебувати у таких станах:
     скинутий;
     встановлений частково;
     встановлений.

Стан компонента визначається відповідним значенням властивості State:
     cbUnchecked;
     cbGrayed;
     cbChecked.

Значення властивості State можна змінювати як під час проектування за допомогою інспектора об’єктів, так і в програмі. Щоб реагувати на зміну стану прапорця, треба створити обробник події OnClick.

Група перемикачів RadioGroup з вкладення Standardце панель з радіокнопками, з яких може бути включена тільки одна. Інакше кажучи, при включенні якоїсь кнопки всі інші вимикаються.

Основні властивості група перемикачів RadioGroup:

Зображення Image з вкладення Additional відображає на формі зображення і забезпечує роботу з ним.

Основні властивості зображення Image:

4. Інструктаж з ТБ
5. Набуття практичних навичок


Повідомляти вчителя після виконання кожного із завдань 1, 2, 3.

Завдання 1. Створити у середовищі Lazarus інтерфейс вікна програми перевірки знань з хімії.

Вказівки до виконання

  1. Завантажити середовище Lazarus і дочекатися появи порожньої форми.

  2. У вікні Інспектор об’єктів змінити властивості форми:

    • BorderSTyle — bsSingle — заборона змінювати розміри вікна розтягуванням;
    • Caption — Перевірка знань;


    • Font — Cambria 16pt звичайний;

    • Height — 525 — висота у пікселях;
    • Position — poDeskTopCenter — вікно програми в центрі екрана;
    • Width — 550 — ширина у пікселях.
  3. Вибрати компонент PageControl з вкладення Common Controls

    та розтягнути його на формі.

  4. Властивості Align компонента PageControl надати значення alClient, що дозволить розгорнути отримані вкладки на всю величину форми.

  5. За допомогою контекстного меню створеного об'єкта додати послідовно дві нові сторінки-вкаладення.

  6. Назви (властивість Caption) щойно створених вкладень TabShet1 та TabShet2 змінити на Тренування і Тестування.

  7. На вкладенні з назвою Тренування розмістити текстовий напис за допомогою поля Label з вкладення Standard. Змінити напис (значення властивості Caption) на такий:

    «1. Кислотні оксиди реагують:».

    Властивості WordWrap надати значення True, щоб напис можна було розташувати у кілька рядків.

  8. Вибрати компонент CheckBox з вкладення Standard і розмістити 4 таких перемикача (датчики варіантів відповіді на питання) під написом Label. У всіх варіантах відповіді властивості Checked надати значення False, щоб на початку роботи програми ці компоненти не містили виставлених міток (прапорців).

    Примітка. Cтан (вибраний чи не вибраний) компонента CheckBox не залежить від стану інших компонентів. Тому саме цей компонент доцільно вибрати для питання множинного вибору (декілька правильних відповідей).

  9. Змінити підписи (значення властивості Caption) щойно створених компонентів на такі: «Реагують з лугами», «Реагують з кислотами», «Не реагують з лугами», «Не реагують з кислотами».

  10. Cтворити текст другого питання за допомогою компонента  Label з вкладення Standard і надати його властивості Caption таке значення:
    «2. Маса нітритної кислоти 94 г відповідає такій кількості речовини».

  11. Для створення варіантів відповіді використати компоненти RadioButton з вкладення Standard.

  12. Змінити підписи (значення властивості Caption) щойно створених трьох коппонент на «100 моль», «20 моль», «2 моль» і перевірити, що значення властивості Checked дорівнює False.

  13. Cтворити текст наступного питання за допомогою компонента  Label з вкладення Standard і надати його властивості Caption таке значення:
    «3. 3,5 моль оксиду карбону (IV) за нормальних умов займають:».

  14. Для запису відповіді створити поле для вводу даних, вибравши Edit зі вкладення Standard. У властивості Text надати значення порожнього рядка, щоб при відкритті програми це поле було порожнім.

  15. За допомогою компонента  Label з вкладення Standard створити праворуч від створеного поля введення підпис одиниць вимірювання: «літрів».

  16. Cтворити текст наступного питання за допомогою компонента  Label з вкладення Standard і надати його властивості Caption таке значення:
    «4. На малюнку зображена молекула кислоти:».

  17. Використатии групу перемикачів RadioGroup з вкладення Standard.

  18. Властивості Caption групу перемикачів надати значення порожнього рядка. Для створення варіантів відповіді вибрати властивість Items. У вікні діалогу ввести варіанти відповіді: сульфатна, сульфідна, сульфітна.

  19. Для відображення малюнка на формі розмістити компонент Image з вкладення Additional.

  20. Для завантаження зображення молекули

    використати властивість Picture.

    Вибрати значення True або False для властивостей Proportional, Stretch, Center залежно від того, як відображається графічний файл в об’єкті Image.

  21. Розмістити поле для багаторядкового тексту Memo з вкладення Standard для виведення результату виконання завдань тесту. У властивості Lines видалити текст Memo1.

    Властивості Visible встановленого компонента Memo значення False, щоб на момент запуску програми компонент не було відображено у вікні програми.

  22. Додати кнопку Button з вкладення Standart. Надати її властивості Caption таке значення: «Перевірити».

  23. Відправити проект на виконання натиснувши кнопку. Пересвідчитися, що поле Memo не відображено при запуску програми.

Зовнішній вигляд першого вкладення готовий. Правильно виконане завдання виглядає таким чином:

Завдання 2. Запрограмувати кнопку з написом: «Перевірити».

Вказівки до виконання

  1. Виділити кнопку. На вкладенні Події вікна Інспектора об’єктів створити подію OnClick.

  2. У редакторі коду запрограмувати реакцію на подію: при натисненні на кнопку відображення компонента Memo на формі і збільшення розмірів форми. Це дозволить вивести 4 рядки з інформацією про правильність вибраних варіантів і перекриє можливість повторного тестування.

    Form1.Height:=600;
    Memo1.visible:=true;
    Memo1.Height:=Memo1.Height+50;

  3. Додати реакцію на вибір компонентів CheckBox. Відповідь зараховувати як правильну лише при вибраних CheckBox1 та CheckBox4 і невибраних решті. При цій умові в Memo додати рядок з текстом про правильну відповідь:

    If (checkBox1.State=cbChecked) and (checkBox4.State=cbChecked)
    and (checkBox2.State=cbUnChecked) and (checkBox3.State=cbUnChecked)
    Then Memo1.lines.Add('Завдання 1: Правильно')
    Else Memo1.lines.Add('Завдання 1: Henравильно');

  4. Внести вказівку визначення, чи вибрано правильний варіант RadioButton3 для питання 2:

    If RadioButton3.Checked=True
    Then Memo1.lines.Add('Завдання 2: Правильно')
    Else Memo1.lines.Add('Завдання 2: Henравильно');

  5. Внести вказівку визначення, чи введено правильний варіант 78.4 для питання 3:

    If Edit1.Text='78.4'
    Then Memo1.lines.Add('Завдання 3: Правильно')
    Else Memo1.lines.Add('Завдання 3: Henравильно');

  6. Внести вказівку визначення, чи вибрано правильний варіант відповіді для питання 4:

    If RadioGroup1.ItemIndex=0
    Then Memo1.lines.Add('Завдання 4: Правильно')
    Else Memo1.lines.Add('Завдання 4: Henравильно');

Завдання 3. Створити інтерфейс вкладення Тестування.

Вказівки до виконання

  1. На вкладенні Тестування розташувати список вибору ListBox з вкладення Standard для вибору класів, які можуть проходити тестування. Використавши властивість Items, створити список 8-А та 8-Б.

  2. Для створеного списку вибору властивості Colums надати значення 2. Це дозволить розмістити список у два стовпчики.

  3. На вкладенні Тестування розташувати список вибору ComboBox з вкладення Standard для вибору прізвища учня.

  4. Властивостям AvtoComplete, AutoDropDown, Sorted створеного список вибору ComboBox надати значення True. Це дозволить розгортати список, попередньо розмістивши елементи в алфавітному порядку, та пропонувати варіант підстановки за першими літерами. Зауважимо: елементи списку (учнів класу) мають залежати від вибраного класу — елемента ListBox

  5. Для створеного списку вибору ListBox створити процедуру опрацювання події опOnClick.

    і ввести такі вказівки:

    comboBox1.Clear;
    if  ListBox1.itemindex=0 then
    begin
      comboBox1.items.Add ('Аваченко Т.');
      comboBox1.items.Add ('Буряк Н.');
      comboBox1.items.Add ('Воронько Л.');
      comboBox1.items.Add ('Нестеренко В.');
      comboBox1.items.Add ('Омельянов І.');
      comboBox1.items.Add ('Потапенко А.');
      comboBox1.items.Add ('Перебийніс Ю.');
    end;
    if  ListBox1.itemindex=1 then
    begin
      comboBox1.items.Add ('Бідкін П.');
      comboBox1.items.Add ('Сидорчук А.');
      comboBox1.items.Add ('Ткаченко С.');
      comboBox1.items.Add ('Ярина Л.');
      comboBox1.items.Add ('Литовчик М.');
      comboBox1.items.Add ('Настирний О.');
      comboBox1.items.Add ('Бойко А.');
    end;
  6. Розмістити 4 текстові написи Label з вкладення Standard для тексту завдань. За допомогою властивості Caption ввести тексти завдань.

  7. Розмістити на тому самому вкладенні 3 компоненти RadioButton з вкладення Standard для вибору варіанта відповіді на перше питання (RadioButton4, RadioButton5, RadioButton6) та 3 компоненти Image з вкладення Additional праворуч від них для подання формул хімічних сполук такими зображеннями: , , .

  8. Під формулюванням другого завдання розташувати групу перемикачів RadioGroup з вкладення Standard для варіантів відповідей. Властивість Caption залишити порожньою, а у властивості Items ввести варіанти відповідей:

    • калій оксид взаємодіє з амфотерними солями;
    • калій оксид взаємодіє з водою;
    • калій оксид взаємодіє з кислотою.

  9. Під формулюванням третього завдання розташувати:

    • поле Edit зі вкладення Standard для введення варіанта відповіді;
    • поле Label зі вкладення Standard з підписом одиниць вимірювання: «моль».

  10. Для четвертого завдання з упорядкування відповідей використати компоненти ListBox і Memo зі вкладення Standard.

  11. У вікні діалогу властивості Items щойно створеного компонента ListBox внести відповіді:

    • Оксид заліза;
    • Оксид кремнію;
    • Оксид міді;
    • Оксид калію.

  12. У вікні діалогу властивості властивості Lines щойно створеного компонента Memo видалити текст напису Memo2, полишивши поле порожнім.

  13. Між останніми двома створеними об'єктами розташувати дві невеликі кнопкки Button з вкладення Standard.

  14. Для (верхньої) кнопки, призначеної для переміщення у поле Memo відповіді:

    • властивості Caption надати значення «>»;
    • створити процедуру опрацювання події OnClick.

  15. Для (нижньої) кнопки, призначеної для очищення поля Memo:

    • властивості Caption надати значення «<<»;
    • створити процедуру опрацювання події OnClick.

  16. Для виведення результатів додати компонент Memo та кнопку Button з вкладення Standard.

  17. Для останньої створеної кнопки:

    • властивості Caption надати значення «Перевірити»;

    • створити обробник події onClick, в який внести опис двох локальних змінних з типом integer:

      • і — значення властивості ItemIndex компонента ComboBox;
      • rez — оцінка за виконання тесту.

    На випадок, якщо на момент натиснення кнопки не вибрано прізвище учня, вписати в обробник ще такі вказівки:

    i:=ComboBox1.ItemIndex;
    If (i>-1) Then
      Begin
      end
    else ShowMessage ('Не вибрано учня');

    Якщо учня вибрано зі списку, то рядок і зі списку Items заносять у компонент Memo, призначений для виведення результатів тестування:

    Memo3.Lines.Add(ComboBox1.Items[i]);

    Змінній rez потрібно надати початкове значення:

    rez:=1;

  18. Далі в обробник подій вписати вказівки оцінювання завдань 1, 2, 3 і 4.

    If RadioButton4.Checked=True Then rez:=rez+1;
    If RadioGroup1.ItemIndex=1   Тhen rez:=rez+2;
    If Edit2.Text='98'           Then rez:=rez+3;
    If    (Memo2.Lines[0]=('Оксид калію'))
      and (Memo2.Lines[1]=('Оксид міді'))
      and (Memo2.Lines[2]=('Оксид заліза'))
      and (Memo2.Lines[3]=('Оксид кремнію'))
    Then rez:=rez+4;

  19. Далі в обробник подій вписати вказівки запису отриманого результату у другий рядок компонента Memo3, збільшення висоти останнього та перетворення його на видимимого:

    Memo3.Visible:=True;         
    Memo3.Height:=Height+60;
    Memo3.Lines.Add('Ваша оцінка'+IntToStr(rez));
  20. Далі в обробник подій вписати вказівки збереження результату у текстовий файл D:\Test.txt:

    Memo3.Lines.SaveToFile('D:\Test.txt');

  21. Закустити проект на виконання та перевірити роботу кнопки з написом «Перевірити».

  22. Проект зберегти в теку з назвою Ваше прізвище у місці, вказаному вчителем.

6. Підбиття підсумків уроку
Виставлення оцінок.

7. Домашнє завдання
У разі потреби доробити завдання. Удосконалити проект, передбачивши можливість завантажувати списки класів та учнів у них з текстових файлів, та після кожного наступного проходження тестування результат дописувати до наявного файлу із закриттям його.


Текст упорядкувала Кисловська Тетяна Миколаївна, учитель середньої загально­освітньої школи № 182 Дніпровського району міста Києва, під час виконання випускної роботи на курсах підвищення кваліфікації з 29.10.2012 по 28.12.2012.