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. При натисненні кнопки Збільшити розміри малюнка збільшуються (імітується ефект наближення).

1. Відкрийте середовище Lazarus, створіть новий проект. Змініть значення властивостей об'єкта Form1, розмістіть на формі об'єкти та надайте значень їх властивостям.

2. Створіть процедуру опрацювання події натиснення кнопки Збільшити (OnClic).

У редакторі коду введіть команди для переміщення малюнка та збільшення його:

Image1.Top   := Image1.Top + 5;

Imagel.Left     := Imagel.Left+10;

Imagel.   Height     := Imagel.Height  + 50;

Imagel.Width     := Imagel.Width + 50;

3. Запустіть проект на виконання.
4. Проаналізуйте отриманий результат.

Завдання 2

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

 Малюнки для виконання завдання:

 Збережіть їх як файли на вашому комп’ютері.

Хід виконання

1. Створіть новий додаток «Вставка малюнка з файлу».Додайте на форму два зображення Image (вкладка Additional), два написи (Label) і дві кнопки (Button). Зробіть відповідні підписи елементів так як на малюнку.

Значення властивості AutoSize для зображення встановити true, щоб розміри поля зображення автоматично змінювалися, підбудовувалися під розміри малюнка.

 2. Скопіюйте графічні файли з малюнками в папку проекту, інакше доведеться вказувати повний шлях до файлу.

3. Перший малюнок завантажте в Image1 на етапі проектування інтерфейсу при налаштуванні властивості Зображення об'єкта Image1 в інспектора об'єктів.

Для цього:

•  Виділіть елемент Image1 на формі, в вікні Інспектор об'єктів.

• У рядку Зображення (Picture) натисніть кнопку із трьома крапками. Відкриється вікно Діалог завантаження зображення.
• У діалоговому вікні натисніть на кнопку Завантажити, вкажіть файл, який містить малюнок.

 Другий малюнок завантажити в Іmage2 під час виконання програми за допомогою методу LoadFromFile об'єкта Image2 після клацання на кнопці Button2 (Показати малюнок).

Для цього:

• Відкрийте редактор коду подвійним клацанням на елементі Button2(Показати малюнок). У програмний код додатися порожня процедура TForm1.Button2Click.
• Напишіть програмний код для  TForm1.Button2Click.

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 

1. Відкрийте вікно Lazarus.
2. Створіть проект, після запуску якого на виконання:
3. Для побудови малюнка використайте елемент Shape вкладки  Additional, для зміни форми, кльору та способу заливки фігур використайте відповідно зміну властивостей: Shape (для задання форми круга, квадрата, еліпса та ін) Brush (Color, Style)  (для задання способу та кольору заливки фігури), а також Pen для оформлення границь фігур.

а) у верхній частині форми з графічних примітивів буде зображено сонце;

б) у нижній частині форми буде розміщено зображення з файлу практична .jpg;

в) з фігур буде створено зображення будинку.

4. Збережіть проект у папці з іменем Практична 13, створеній у вашій папці.
5. Запустіть проект на виконання.
6. Проаналізуйте отриманий результат.
7. Повідомте вчителя про завершення роботи.

ІХ Оцінювання роботи учнів