10 (АП) Урок№2(27)
Урок 2 (27). Створення програми з кнопками та
написами. КОМПОНЕНТ TIMAGE
Цілі:
навчальна: сформувати практичні навички створення і практичного
використання різних видів кнопок і написів; формувати навички,
самостійної роботи;
розвивальна: розвивати вміння використовувати отримані знання в
різних ситуаціях під час роботи за комп'ютером;
виховна: виховувати інформаційну культуру, дбайливе ставлення до
комп’ютерної техніки.
Тип уроку: застосування знань, умінь та навичок.
Обладнання та наочність: дошка, комп’ютери з підключенням до мережі
Інтернет, підручник, навчальна презентація.
Програмне забезпечення:Середовище програмування Lazarus, браузер.
Хід уроку
І. Організаційний етап
привітання
перевірка присутніх
перевірка готовності учнів до уроку
ІІ. Перевірка домашнього завдання
Тестування у програмі MyTestX
ІІІ. Мотивацій навчальної діяльності
— Ви, напевне, вже хочете спробувати застосувати здобуті знання на
практиці. Але для цього потрібно пригадати основні терміни й поняття.
IV. Формування вмінь та навичок
На цьому уроці Ви познайомитеся з призначенням і основними властивостями компонента Lazarus Image, створите два проекти з його використанням. Компонент Зображення (TImage) призначений для виведення на форму графічного малюнка. Він підтримує численні формати графічних файлів, включаючи .bmp, .ico, .jpg і т.д.
Для ознайомлення з описом компонента і його властивостями перейдіть за посиланням - TImage (Зображення).Ви можете присвоїти будь-який малюнок компоненту зображення як при розробці в середовищі Lazarus, так і під час виконання. На цьому уроці ми розглянемо обидва випадки. Для завантаження малюнка в поле зображення на етапі розробки інтерфейсу додатку потрібно надати властивості Picture файл, який містить малюнок. Для надання зображення файлу з малюнком під час виконання програми використовується метод LoadFromFile (), що належить об'єкту Picture. Наприклад, для виведення в зображення imgExample файлу малюнка myPicture.jpg під час виконання використовується наступний оператор: imgExample.Picture.LoadFromFile('myPicture.jpg’).
Робота за комп’ютером
1) Повторення правил безпечної поведінки за комп’ютером.
2) Інструктаж учителя.
Завдання. 1.Метелик.
У середовищі програмування Lazarus створіть проект, форма якого містить малюнок, що збережений у файлі Метелик.jpg. При натисненні кнопки Збільшити розміри малюнка збільшуються (імітується ефект наближення).
Об’єкт | Властивість | Значення |
Form1 | Caption | Ефект збільшення |
Button1 | Caption | Збільшити |
Font | Bookman Old Style, жирний, 16 | |
Image1 | Picture | Metelyk.jpg |
Strech | True |
У редакторі коду введіть команди для переміщення малюнка та збільшення його:
Image1.Top := Image1.Top + 5;
Imagel.Left := Imagel.Left+10;
Imagel. Height := Imagel.Height + 50;
Imagel.Width := Imagel.Width + 50;
Завдання 2
Створіть додаток «Вставка малюнка з файлу», в результаті роботи якого лівий малюнок буде відображатися на формі після її завантаження, а правий - по кліку на кнопці Вивести малюнок.
Малюнки для виконання завдання:
Збережіть їх як файли на вашому комп’ютері.
Хід виконання
1. Створіть новий додаток «Вставка малюнка з файлу».Додайте на форму два зображення Image (вкладка Additional), два написи (Label) і дві кнопки (Button). Зробіть відповідні підписи елементів так як на малюнку.
Значення властивості AutoSize для зображення встановити true, щоб розміри поля зображення автоматично змінювалися, підбудовувалися під розміри малюнка.
2. Скопіюйте графічні файли з малюнками в папку проекту, інакше доведеться вказувати повний шлях до файлу.
3. Перший малюнок завантажте в Image1 на етапі проектування інтерфейсу при налаштуванні властивості Зображення об'єкта Image1 в інспектора об'єктів.
Для цього:
Другий малюнок завантажити в Іmage2 під час виконання програми за допомогою методу LoadFromFile об'єкта Image2 після клацання на кнопці Button2 (Показати малюнок).
Для цього:
procedure TForm1.Button2Click(Sender: TObject);
begin
image2.Picture.LoadFromFile('3.gif');
end;
5. Перевірте роботу програми. Перша картинка повинна відобразитися в полі Image1 відразу після завантаження програми, друга картинка - після клацання на кнопці Показати малюнок.
6.Для роботи кнопки Button1(Завершити) створіть обробник події OnClick
procedure TForm1.Button1Click(Sender: TObject);
begin
Close;
end;
Завдання високого рівня
7. Додайте до попереднього проекту кнопку Сховати малюнок (Button3). Накладіть її на кнопку Button2. Зробіть невидимою на момент завантаження програми, для цього змініть властивість Visible на значення False.
8. Змініть програмний код процедури обробки клацання на кнопці Button2 (Показати малюнок). Програмний код виконує наступні дії:
• Робить видимою кнопку Button3;
• Завантажити малюнок в поле Image2;
• Робить невидимою кнопку Button2;
• На її місці робить видимою кнопку Button3.
Програмний код процедури:
procedure TForm1.Button2Click(Sender: TObject);
begin
image2.Visible:=true;
image2.Picture.LoadFromFile('3.gif');
button2.Visible:=false;
button3.Visible:=true;
end;
Для управління видимістю кнопок використовуйте властивість Visible.
9. Напишіть програмний код процедури обробки клацання на кнопці Button3, який:
• видаляє картинку з Image2;
• робить невидимою кнопку Button2 (Показати малюнок)
Оригінальний текст процедури:
procedure TForm1.Button3Click(Sender: TObject);
begin
button3.Visible:=false;
button2.Visible:=true;
image2.Visible:=false;
end;
10. Перевірте роботу кнопок. Після клацання на кнопці Показати малюнок картина відобразиться в полі Image2, а після клацання на кнопці Сховати малюнок - видаляється з поля.
11. Збережіть проект.
Завдання 3
Створіть додаток, який над малюнком, розташованим в центрі форми, виконує дії, зазначені на кнопках.
Хід виконання
1. Створіть новий додаток, збережіть його в папці Переміщення картинки.
2. Встановіть на формі 9 кнопок (кнопка) і поле Image (зображення) як показано у зразку.
3. Змініть властивість Ім'я (Name) кнопок відповідно до написами на них: - Vverh_Vlivo, vverch і т.д.
4. Написати програмний код процедур обробки клацань по кнопках.
Нагадаю. Для того щоб створити процедуру обробник події, за замовчуванням, потрібно виконати подвійне клацання на елементі управління.
Приблизний текст процедур обробників для кнопок Вгору-вліво, Вгору-вправо і В центр наводиться нижче:
procedure TForm1.btnVverh_VlivoClick(Sender: TObject);
begin
image1.top:=10;
image1.left:=10;
end;
procedure TForm1.btnVverh_VpravoClick(Sender: TObject);
begin
image1.top:=10;
image1.left:=form1.width-image1.width -10;
end;
procedure TForm1.btnCentrClick(Sender: TObject);
begin
image1.top:=(form1.height-image1.height) div 2;
image1.left:=(form1.width-image1.width) div 2;
end;
5. Програмний код для інших кнопок написати самостійно.
6. Перевірити роботу програми.
3) Практична робота за комп’ютерами.
4) Вправи для очей.
VIІ. Підсумки уроку
VІІI. Домашнє завдання
Завдання.1
а) у верхній частині форми з графічних примітивів буде зображено сонце;
б) у нижній частині форми буде розміщено зображення з файлу практична .jpg;
в) з фігур буде створено зображення будинку.
ІХ Оцінювання роботи учнів