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

Тема: поняття елемента управління, події, пов’язані з елементами управління, обробники цих подій мовою C++ з використанням бібліотеки wxWigets.

Мета:

По завершенню вивчення учень

має уявлення про:
описує поняття: подає приклади: називає:

Обладнання: комп’ютери зі встановленими ОС та середовищем CodeBlocks для програмування мовою С++ разом з бібліотекою wxWigets.

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

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

Хід уроку

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

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

Користуючись описом змінних:

wxString s,t;
double a;
int j;

пояснити зміст таких вказівок:

s = TextCtrl1 -> GetValue();
    TextCtrl1 -> ChangeValue(s);
t = s.substr(j);
s.ToDouble(&a);
s0 << a;
s = wxString::Format(wxT("%0.4f"),a);
if (floor(a)==a) s=_T("abc");

і порівняти з очікуваним:

s = TextCtrl1 -> GetValue(); — надати s значення вмісту тeкстового поля TextCtrl1.

TextCtrl1 -> ChangeValue(s); — змінити вміст тeкстового поля TextCtrl1 на значення s.

t = s.substr(j); — надати t значення частини s, починаючи з позиції j.

s.ToDouble(&a); — надати a значення, записаного у рядок s.

s0 << a; — надати s значення, що є записом цілого числа j.

s = wxString::Format(wxT("%0.4f"),a); — надати рядку s значення, що є записом десяткового дробу a з 4 знаками після десяткової крапки.

if (floor(a)==a) s=_T("abc"); — якщо a набуває цілого значення, надати рядку s значення, записаного у лапках.

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

Елемент керування це графічний об'єкт, розташований на формі для показу або введення даних, виконання дій або полегшення читання форми.

До елементів керування належать текстові поля, списки, перемикачі, кнопки тощо. Вони дають користувачеві змогу запускати відповідні частини програми. Елементи керування можуть бути зв'язані, вільні або обчислювані.

Зв'язаний елемент керування запозичує і відображає змінювані дані з поля таблиці (бази даних) або запиту: текст, дату, число, значення «Так / Ні», зображення або діаграми тощо.

Вільний елемент керування не має змінюваного джерела даних. Наприклад, надпис з назвою форми — це вільний елемент керування.

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

Обробник подійце частина програми, що виконує певні дії у відповідь на дії користувача.

Перелічимо класи бібліотеки wxWigets, згрупувавши їх за вкладеннями, що містять відповідні кнопки виклику. Для використання цих класів потрібно ознайомитися з детальнішим описом — на офіційному сайті (анлійською мовою) чи з іншого джерела. Мета поданого далі переліку — лише ознайомити з можливостями бібліотеки. На розсуд учителя таке ознайомлення можна полишити без обговорення як завдання для самостійної роботи (дома).

Standard (Стандартне)
Custom — користувацький віджет;
wxAnimationCtrl — відображення анімації;
wxBitmapButton — кнопка з растровим зображенням;
wxButton — кнопка з текстовим рядком;
wxCheckBox — прапорець, який або увімкнено (галочку видно), або вимкнено;
wxCheckListBox — схожий на wxListBox, але дозволяє елементам бути увікне­ними або вимкненими;
wxChoice — елемент вибору одного рядка з переліку;
wxChoicebook — схожий на wxNotebook, але використовує wxChoice для показу міток замість вкладень;
wxComboBox — комбінація елемента редагування і списку;
wxContextHelpButton — кнопка переходу в режим контекстної допомоги;
wxGauge — датчик — горизонтальна або вертикальна смуга, яка показує кіль­кість;
wxHyperlinkCtrl — статичний текстовий елемент з посиланням на URL-адресу;
wxListbook — схожий на wxNotebook, але використовує wxListCtrl для відобра­ження міток замість вкладень;
wxListBox — поле списків для вибору одного або кількох рядків зі списку;
wxListCtrl — елемент керування форматом подання списку: перегляд списку, перегляд звіту, перегляд значків чи піктограм;
wxListView — представляє інтерфейс для wxListCtrl;
wxNotebook — керування записником з кількома вікнами із пов’язаними вкладками;
wxPanel — панель — вікно для розташування елементів керування;
wxRadioBox — елемент для вибору одного з взаємовиключних варіантів, має вигляд вертикального стовпчика або горизонтального ряду мічених кнопок;
wxRadioButton — елемент перемикача для позначення одного з кількох взаємо­виключних варіантів. Має текстову мітку поруч із (зазвичай) круглою кнопкою. Можна створити групу таких елементів, вказавши wxRB_GROUP для першого у групі. Група закінчується, коли створено іншу групу кнопок або більше немає перемикачів;
wxRichTextCtrl — забезпечення керування текстом, здатного показувати кілька стилів та зображень;
wxRichTextStyleComboCtrl — комбінований елемент керування, який може відображати стилі у wxRichTextStyleSheet і застосовувати виділення до пов'язаного wxRichTextCtrl;
wxRichTextStyleListBox — поле списку, яке може відображати стилі в wxRichTextStyleSheet і застосовувати виділення до пов'язаного wxRichTextCtrl;
wxRichTextStyleListCtrl — клас включає в себе wxRichTextStyleListBox і контроль вибору, що дозволяє користувачеві вибрати категорію стилю для перегляду;
wxScrollBar — смуга прокрутки;
wxScrolledWindow — керування прокруткою для своєї клієнтської області, перетворюючи координати у відповідності зі станом смуги прокрутки і встановлюючи її стан і диапазони у відповідністю з видимою областю;
wxSearchCtrl — елемент керування пошуком, поєднаний з кнопкою пошуку, текстом і кнопкою скасування;
wxSimpleHtmlListBox — реализація wxHtmlListBox, що показує HTML-вміст у рядках списку;
wxSlider — повзунок — елемент керування, який можна перетягувати вперед і назад, щоб змінити значення певної змінної;
wxSpinButton — дві невеликі кнопки зі стрілками вгору та вниз (або вліво та вправо). Часто використовують поруч із текстовим полем для збільшення та зменшення значення. Не реалізовано для всіх платформ;
wxSpinCtrl — поєднує в одному елементі керування wxTextCtrl і wxSpinButton;
wxStaticBitmap — растрове зображення. На деяких платформах — лише для відображення невеликих піктограм у вікнах діалогу. Наприклад, під Windows 9x розмір растрових зображень обмежений 64×64 пікселями. Для великих зображень на портативному рівні використовують wxGenericStaticBitmap. Розмір елемента керування повинен бути таким самим, як розмір зображення в ньому. Саме так і відбувається як усталено, якщо розмір явно не змінено. В іншому випадку поведінка залежить від платформи;
wxStaticBox — прямокутник для позначення логічної групування елементів;
wxStaticLine — відрізок прямої лінії для розділення груп елементів керування;
wxStaticText — напис — статичний елемент для відображення один або кількох рядків тексту, досяжного лише для читання;
wxBitmapComboBox — відображає растрову карту перед елементами списку;
wxTextCtrl — поле для введення рядка, що дозволяє відображати та редагувати текст;
wxTogglleButton — кнопка, яка залишається натиснутою після натискання користувачем;
wxTreeBook — розширення wxNotebook, що дозволяє відображати структурований деревом набір сторінок;
wxTreeCtrl — керування деревом з поданням інформації у вигляді ієрархії з елементами, які можна розширити для відображення наступних елементів.


Advanced (розширення)
wxCalendarCtrl — керування календарем для вибору дати;
wxColorPickerCtrl — вибір кольору;
wxDataPickerCtrl — вибір дати. На відміну від wxCalendarCtrl реалізованo у вигляді невеликого вікна, що показує поточну обрану дату. Елемент керування можна редагувати за допомогою клавіатури. Він може відображати спливаюче вікно для зручнішого вибору дати залежно від використаних стилів і платформи;
wxDirPickerCtrl — вибір теки. Реалізовано кнопкою, яка викликає wxDirDialog при натисканні на неї;
wxFilePickerCtrl — вибір файлу. Реалізовано кнопкою, яка викликає wxFileDialog при натисканні на неї;
wxFontPickerCtrl — вибір шрифту. Реалізовано кнопкою, яка викликає wxFontDialog при натисканні на неї;
wxGenericDirCtrl — розміщення списку тек у довільному вікні. Містить вікно wxTreeCtrl, що подає ієрархію тек, і необов'язково вікно wxChoice, що містить список фільтрів;
wxGLCanvas — відображення графіки;
wxGrid — відображення та редагування табличних даних;
wxHtmWindow — відображення сторінок з багатим вмістом (або локальним файлом, або завантаженим через протокол HTTP) у вікні на основі підмножини стандарту HTML.


Aui (advanced user interface —
розширення користувацького інтерфейсу)
wxAuiManager — керування панелями для певного wxFrame;
wxAuiNotebook — керування записником. Дозволяє користувачу переставляти порядок вкладень перетягуванням, розділяти вікно вкладення, перемикатися на різні теми для налаштування зовнішнього вигляду керування;
wxAuiToolBar — доклейна (достикована) панель інструментів;
wxAuiToolBarItem — елемент панелі інструментів;
wxAuiToolBarSeparator — роздільник панелі інструментів;
wxAuiToolBarLabel — напис на панелі інструментів;
wxAuiToolBarSpacer — роздільник на панелі інструментів;

Contrib
(доповнення, вимагають долучення заголовних файлів)
wxCharCtrl;
wxSpeedButton;
wxCustomButton;
wxFlatNotebook;
wxImageButton;
wxImagePanel;
wxTreeListCtrl;
Dialogs (діалоги)
wxColourDialog — діалог вибору кольору;
wxDirDialog — діалог вибору теки;
wxFileDialog — діалог вибору файлу;
wxFinfReplaceDialog — діалог пошуку й заміни;
wxFontDialog — діалог вибору шрифту;
wxMessageDialog — вікно повідомлення;
wxMultiChoiceDialog — вікно діалогу, що показує список рядків і надає можливість вибрати один або кілька з них;
wxPageSetupDialog — вікно діалогу для налаштування сторінки. Містить елементи керування розміром паперу, орієнтацією і (наразі лише під Windows) елементи керування розмірами полів;
wxPasswordEntryDialog — вікно діалогу для введення однорядкового пароля;
wxPrintDialog — загальне вікно діалогу для налаштування друку;
wxProgressDialog — відображення поступу процесу (якщо підтримано платформою);
wxRichTextFormattingDialog — вікно діалогу для редагування стилю символу та/або стилю абзацу;
wxRichTextStyleOrganiserDialog — показ таблиці стилів, редагування, додавання й вилучення стилів;
wxSingleChoiceDialog — вікно діалогу, що показує список рядків і надає можливість вибрати один з них;
wxSymbolPickerDialog — вибір шрифтів і гратку доступних символів.;
wxTextEntryDialog — вікно діалогу для введення одного рядка тексту.



KWIC
(графічні засоби для відображення числових значень)
kwxAngularMeter — вимірювач кута;
kwxAngularRegulator — регулятор кута;
kwxBmpCheckBox — множинний вибір растрових зображень;
kwxBmpSwitcher — перемикач растрових зображень;
kwxLCDClock — рідиннокристалічний годинник;
kwxLCDDisplay — рідиннокристалічний дисплей;
kwxLinearMeter — вимірювач довжини;
kwxLinearRegulator — регулятор довжини.

Led (світлодіоди)
wxLEDNumberCtrl — відображення тексту як світлодіодами;
wxLCDWindow — вікно відображення тексту як на рідинно-кристалічному дисплеї;
wxStateLed — світлодіод;;
wxLed — світлодіод;
wxLedPanel — панель зі світлодіодами.


MathPlot (математичні графіки)
mpWindow — вікно;
mpAxis — осі;
mpVector — стрілка;
mpMarker — маркер;
mpText — текст.


Tools (засоби)
wxDialUpManager — перевірка стану підключення до мережі та встановлення цього з'єднання, якщо це можливо/потрібно;
wxHtmEasyPrinting — друк документів html;
wxImage — інкапсулює зображення, незалежне від платформи. Таке зображення можна створити з даних або за допомогою wxBitmap::ConvertToImage. wxImage (наразі) не може бути намальований безпосередньо до wxDC. Натомість для нього необхідно створити специфічний для платформи об’єкт wxBitmap за допомогою конструктора wxBitmap::wxBitmap (wxImage, int depth). Згодом цю растрову карту можна намалювати в контексті пристрою, використовуючи wxDC::DrawBitmap. Таким чином, wxImage — це лише буфер RGB-байтів з додатковим буфером для альфа-байтів;
wxImageList — перелік зображень;
wxMenu — спливаючий або випадний список елементів, один з яких можна обрати до того, як меню зникне. Натискання в іншому місці відхиляє меню;
wxMenuBar — рядок меню;
wxSingleInstanceChecker — перевіряє, чи працює лише один екземпляр програми;
wxStarusBar — рядок стану;
wxStopWatch — дозволяє вимірювати проміжки часу;
wxTimer — дозволяє виконувати код через задані проміжки часу. Точність залежить від платформи, але загалом не буде кращою за 1 мс і не гірше за 1 с;
wxToolBar — панель інструментів — це панель кнопок та/або інших елементів керування, що зазвичай розміщуються під панеллю меню у wxFrame.

Layout (макет)
Spacer — абстрактний базовий клас для розташування підвікон у вікні. Його не використовують безпосередньо, а використовують один із похідних класів wxBoxSizer, wxStaticBoxSizer, wxGridSizer, wxFlexGridSizer, wxWrapSizer, wxGridBagSizer;
wxBoxSizer — розташування елементів вертикально або горизонтально залежно від того, який прапор використано в його конструкторі;
wxGridBagSizer — надає можливість безпосередньо розташувати елементи при заданих розташуваннях і розмірах;
wxFlexGridSizer — це розташування елементів двовимірній таблиці, у якій всі комірки таблиці в одному ряду мають однакову висоту, а всі поля в одному стовпчику мають однакову ширину, але всі рядки або всі стовпці необов'язково однакової висоти або ширини, як у wxGridSizer;
wxGridSizer — розташування елементів у двовимірній таблиці, усі комірки якої мають однакові розміри;
wxSashLayoutWindow — відповідає на події OnCalculateLayout, породжені wxLayoutAlgorithm (що реалізує макет підвікон і надсилає події wxCalculateLayoutEvent нащадкам, запитуючи їх дані про їхній розмір). Це дозволяє застосунку використовувати прості аксесуари, щоб вказати, як має бути викладено вікно, а не реагувати на події. Клас походить від wxSashWindow, що дозволяє використовувати пояс для зміни розміру вікна;
wxSashWindow — дозволяє довільному краю мати пояс, який перетягують для зміни розміру вікна. Насправді використовують нащадків цього класу. Вікно (або предок) буде сповіщено про перетягування повідомленням wxSashEvent;
wxSpliterWindow — керування двома вікнами;
wxStaticBoxSizer — те саме, що і wxBoxSizer, але оточений статичним вікном;
wxStdDialogButtonSizer — створює макети кнопок, які відповідають стандартному інтервалу та впорядкуванню кнопок, визначеному інструкціями щодо користувальницького інтерфейсу платформи чи інструментарію (якщо такі існують). Наразі він відповідає настановам щодо інтерфейсу для Windows, GTK+ та Mac OS X. Якщо для певної платформи чи інструментарію не визначено настанов щодо інтерфейсу, wxStdDialogButtonSizer звертається до реалізації Windows;

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


Завдання. Створити програмний проект мовою С++ з використанням елементів керування бібліотеки wxWigets — імітацію найпростішого калькулятора для виконання арифметичних дій з десятковими дробами.

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

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

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

  2. Змінити властивості форми
    Title (Заголовок) = calendar,
    Width (Ширина) = 280,
    Height (Висота)= 200, знявши прапорець Default size (Розмір як усталено).

  3. Видалити зайві об'єкти: MenuBar1 і StatusBar1, виділивши їхні зображення (клацнувши на них лівою кнопкою миші) над зображенням форми і натиснувши клавішу Delete.

  4. Отримати такий вигляд вікна середовища програмування.

  5. Встановити розташування елементів по вертикалі:

    • на панелі об'єктів перейти на вкладення Layot (Макет), обрати інструмент wxBoxSizer і розташувати його на екранній формі, клацнувши на ній лівою клавішею миші;

    • на панелі інспектора об'єктів змінити значення властивості Orientation встановленого контейнера wxBoxSizer на wxVERTICAL.


  6. Розташувати всередині контейнера wxBoxSizer такі об'єкти:
    • wxTextCtrl — поле зі вкладення Standard;
    • wxGridSizer — контейнер з вкладення Layout,
    перелічені згори донизу.
  7. Змінити для контейнера wxGridSizer значення властивостей — кількостей стовпчиків і рядків на відповідно такі:
    Cols = 4;
    Rows = 5.

  8. Наповнити контейнер wxGridSizer двадцятьма кнопками wxButton зі вкладення Standard у такому порядку:

     1   2   3   4
     5   6   7   8
     9  10  11  12
    13  14  15  16   
    17  18  19  20

    змінюючи значення властивості Width (ширина) усіх цих кнопок на 65, знявши прапорець Default size (розмір як усталено).

  9. Змінити значення властивості Label (напис) вставлених кнопок з метою отримати такий вигляд вікна середовища програмування.

  10. Змінити значення властивостей поля wxTextCtrl на такі:
    Text — порожній рядок;
    Width = 270;
    Height = 60.

  11. Пересвідчитися у готовності дизайну інтерфейсу без обробників подій — запустити проект на виконання, натиснувши на панелі інструментів кнопку Build and run (Побудувати та виконати), і отримати вікно такого вигляду.

  12. Запровадити глобальні змінні для опрацювання подій натискання на кнопки:

    • тип wxString з порожніми початковими значеннями:
      • s0 — символ операції;
      • s1 — перше введене число;
      • s2 — друге введене число;
      • s — всі набрані символи;

    • тип double з нульовими початковими значеннями:
      • a1 — перше введене число;
      • a2 — друге введене число;
      • a — результат виконання арифметичної дії;

    Для цього завантажити у середовище CodeBlocks код calculatorMain.cpp і вставити одразу після оголошення заголовних файлів такий код:

    wxString s0=wxT(""), s1=wxT(""), s2=wxT(""), s=wxT("");
    double a1=0, a2=0, a=0;

  13. Створити обробник події натискання кнопки з цифрою 1:

    • перейти у середовищі редактора на вкладення calculatorfarame.wxs;
    • виділити кнопку з написом 1, клацнувши на ній лівою кнопкою миші;
    • на панелі інспектора об'єктів перейти на вкладення {} Events (Події);
    • вибрати значення OnButton13Click для EVT_BUTTON;

    • на вкладенні calculatorMain.cpp внести такий код опрацювання події натискання на клавішу з написом 1.

      void calculatorFrame::OnButton13Click(wxCommandEvent& event)
      { s = TextCtrl1 -> GetValue();
            TextCtrl1 -> ChangeValue(s+_T("1"));
      }

  14. Створити обробники подій натискання кнопок з усіма цифрами і десятковою крапкою, діючи так само, як на поперед­ньому кроці (відмінність лише у дописуваному символі і назві об'єкта). Пересвідчитися у коректному відображенні послідовності натискання клавіш. У разі потреби змінити код.

  15. Створити обробник події натискання кнопки з написом С, що повертає початкові значенння таким глобальним змінним: s0, s1, s2, s, a1, a2, a і властивості Text поля TextCtrl1. Обробник події має такий вигляд:

    void calculatorFrame::OnButton4Click(wxCommandEvent& event)
    { s0=wxT("");  s1=wxT("");  s2=wxT("");  s=wxT("");
      a1=0;  a2=0;  a=0;
      TextCtrl1 -> ChangeValue(_T(""));
    }
  16. Створити обробники подій натискання кнопки з позначеннями арифметичних дій, що мають аналогічну структуру й відрізняються лише значенням, яке натають змінній s0. Для дії ділення код обробника може мати такий вигляд:

    void calculatorFrame::OnButton8Click(wxCommandEvent& event)
    { s = TextCtrl1 -> GetValue();
      s1= s;
      s0=_T("/");
      TextCtrl1 -> ChangeValue(s+s0);
    }
  17. Створити обробник події натискання кнопки з позначеннями знака рівності, що призводить до виконання дії і виведення результату. Код обробника може мати такий вигляд:

    void calculatorFrame::OnButton19Click(wxCommandEvent& event)
    { s = TextCtrl1 -> GetValue();
      s2=s.substr(s1.Length()+1);
      s1.ToDouble(&a1); a1=a1;
      s2.ToDouble(&a2); a2=a2;
      if (s0==_T("/")) a=a1/a2; else
      if (s0==_T("*")) a=a1*a2; else
      if (s0==_T("-")) a=a1-a2; else
      if (s0==_T("+")) a=a1+a2;
      s0=_T("");
           if (floor(a)==a)     s0 << a;
      else if (floor(a*10)==a*10) s0 = wxString::Format(wxT("%0.1f"),a);
      else if (floor(a*100)==a*100) s0 = wxString::Format(wxT("%0.2f"),a);
      else if (floor(a*1000)==a*1000) s0 = wxString::Format(wxT("%0.3f"),a);
      else if (floor(a*10000)==a*10000) s0 = wxString::Format(wxT("%0.4f"),a);
      else if (floor(a*100000)==a*100000) s0 = wxString::Format(wxT("%0.5f"),a);
      else                                  s0 = wxString::Format(wxT("%0.6f"),a);
      TextCtrl1 -> ChangeValue(s+_T("=")+s0);
    }
  18. Перевірити коректну роботу для виконання арифметичних дій з двома числами.

  19. Зберегти проект:

    • або використати вказівку меню File / Save all files (Файл / Зберегти усі файли);
    • або натиснути клавіші Ctrl + Shift + S;
    • або натиснути кнопку Save all files

    і повідомити учителя про завершення роботи.

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

7. Домашнє завдання

Повторити матеріал уроку. У разі потреби доробити завдання. Удосконалити створений проект, заборонивши некоректні дії користувача. Інакше кажучи, заборонити введення:

змінивши обробники подій натискання кнопок з відповідними написами.

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


Текст упорядкував Олександр Рудик.