1. Які властивості кнопки ви знаєте? Як змінити значення її властивостей до початку виконання проекту й під час його виконання?

2. Які події можуть відбуватися з кнопкою? У чому полягає кожна з них?

3. Які відмінності властивостей кнопки й форми ви знаєте?

4. Які відмінності у створенні обробника події для вікна та для кнопки?

Властивості напису

Ще одним компонентом (елементом керування), який можна використати в проекті, є напис. Напис - це компонент, який використовується для виведення текстових повідомлень.

Аля тих, хто вивчає Pascal

Щоб розмістити напис на формі, потрібно підвести вказівник до кнопки TLabel

(англ. label - напис, етикетка, позначка) на вкладці Standard вікна середовища Lazarus і двічі клацнути ліву кнопку миші. Після цього напис з’явиться у верхній лівій частині форми (мал. 6.29), а його ім’я додасться до списку компонентів проекту в полі Компоненти вікна Інспектор об’єктів. За потреби напис можна перетягнути в будь-яке інше місце форми.

Виділити напис можна, вибравши його на формі або вибравши його ім’я в полі Компоненти вікна Інспектор об’єктів. При виділеному написі на вкладці Властивості цього вікна відображається список властивостей напису та їх значень. Значення властивостей напису можна змінювати. Для деяких властивостей їх значення потрібно вводити у відповідні поля, для деяких - можна вибирати зі списку, для деяких - можна змінювати перетягуванням напису по формі.

Властивості напису Top, Left, Name, Enabled, Visible аналогічні до відповідних властивостей кнопки. Значення властивості Color напису визначає колір його фону. Значення цих властивостей можна змінювати на вкладці Властивості перед запуском проекту на виконання або командами присвоювання під час виконання проекту, наприклад,

За замовчуванням значення властивостей Height і Width для напису, на відміну від форми і кнопки, не можна змінити на вкладці Властивості або перетягуванням. Ширина й висота напису визначаються текстом, розміщеним у цьому написі. Якщо змінити текст у полі значення властивості Caption або виконати команду

присвоювання, наприклад LabeM.Caption := ‘Я навчаюсь у 8 класі’, то відповідно до його довжини зміниться ширина напису. Але якщо встановити значення False властивості AutoSize (англ. Automatic Size - автоматичний розмір) напису, то його ширину й висоту можна змінювати незалежно від наявного в ньому тексту До запуску проекту на виконання текст напису можна вводити і редагувати як у полі Caption, так і у вікні Редактор рядків (мап. 6.30). Щоб відкрити це вікно,

потрібно зробити поле Caption поточним і вибрати кнопку

у його правій частині.

У цьому вікні можна задавати також і багаторядкові тексти в написі.

Для встановлення і змінювання значень властивостей символів, якими виводити-меться текст у написі, потрібно використати властивість Font (англ. font - шрифт). На відміну від усіх попередніх властивостей, ця властивість є комплексною. Комплексною вона називається тому, що складається з кількох властивостей символів: Color, Height, Name, Size (англ. size -розмір) та ін. Значення кожної з них можна

змінити, якщо відкрити їх список вибором кнопки

ліворуч від назви властивості Font або у вікні Шрифт (мал. 6.31), яке відкривається вибором кнопки

у правій крайній частині рядка Font.

Вибираючи шрифт, потрібно звертати увагу на список Сценарій. Якщо в цьому списку відсутній елемент Кирилиця, то текст напису не буде коректно відображатися українською.

Під час виконання проекту змінити значення складових цієї комплексної властивості можна, використовуючи команду присвоювання. Так, колір символів можна змінити, наприклад, командою: Labeli.

Для тих, хто вивчає Python

У вікні проекту, створеного мовою Python, можна також розміщувати написи. Для цього потрібно в тексті проекту:

1. Увести команду створення напису.

2. Установити значення його властивостей.

3. Розмістити напис у вікні.

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

(англ. label- етикетка, позначка). Наприклад, для створення напису з іменем label і текстом Я навчаюсь у 8 класі потрібно виконати команду:

Одночасно зі створенням напису можна також установити значення деяких його властивостей, наприклад, bg - колір фону напису, fg - колір символів, font -вид шрифту, розмір символів і накреслення (bold - напівжирне, italic - курсивне, underline - підкреслене), height - висота напису, width - ширина напису та ін. Для цього в команді створення напису в круглих дужках потрібно ввести через кому пари

Наприклад, після виконання команди:

буде створено напис зеленими літерами на жовтому фоні із текстом Я навчаюсь у 8 класі, шрифт символів АгіаІ, розмір символів 14.

Значення властивостей також можна задавати окремими командами виду:

Наприклад, установити для напису з іменем label ширину 25 символів можна командою label[‘width’] = 25, установити шрифт Times New Roman з висотою символів 28 - командою label[‘font’] = (‘Times New Roman’, 28), задати синій колір символів - командою label[‘fg’] = ‘blue’. Такого виду команди можна використовувати і для змінення значень властивостей напису під час виконання проекту.

Для розміщення напису у вікні проекту використовуються вже відомі вам методи раск() і place(). Наприклад, для розміщення у вікні напису з іменем label з відступом 20 пікселів від рядка заголовка вікна можна використати команду label.pack(pady = 20).

На малюнку 6.32 наведено вигляд вікна проекту зі створеним написом.

Обробники подій для напису

Хоча написи призначені переважно для виведення текстів, але з ними, як і з вікнами і кнопками, можна пов’язувати обробники різних подій.

Аля тих, хто вивчає Pascal

Якщо виділити напис, то на вкладці Події вікна Інспектор об’єктів можна, як і для форми та кнопки, вибрати подію і створити заготовку процедури - обробника цієї події (мап. 6.33). Як і для форми та кнопки, можна ввести до цієї процедури команди змінення значень властивостей напису, а також команди змінення властивостей форми і кнопки, команди для виконання обчислень та ін.

Наведена на малюнку 6.33 процедура - обробник події Click для напису -містить команди:

• збільшення на 20 пікселів відступу верхньої межі напису від верхньої межі вікна;

• установлення жовтого фону напису;

• установлення розміру 14 для символів тексту в написі;

• установлення червоного кольору символів тексту в написі;

• виведення в напис наведеного тексту.

Аля тих, хто хоче знати більше

Щоб у команді виведення тексту в напис текст у потрібному місці переносився на новий рядок, потрібно в ній використати символ переходу на новий рядок (#13). Наприклад, якщо в наведеному на малюнку 6.33 проекті команду виведення тексту в напис змінити на таку:

Labell.Caption ‘Я учень 8 класу школи № Г + #13 + ‘міста Кременчук’, результат виконання цього проекту виглядатиме так, як на малюнку 6.34.

Можна також задати перенесення тексту на наступний рядок, установивши значення True властивості Wordwrap (англ. word wrap - перенесення слів), значення False властивості AutoSize і задавши потрібні розміри напису. Текст буде переноситися на новий рядок, як у текстовому процесорі.

Аля тих, хто вивчає Python

З написом, як і з вікном проекту або кнопкою, можна пов’язати процедуру - обробник деякої події, використовуючи метод bind():

Окремо потрібно ввести текст процедури - обробника події із зазначеним іменем.

Послідовність дій може бути такою:

1. Створити напис та установити значення його властивостей.

2. Пов’язати напис з обробником події, указавши подію та ім’я процедури.

3. Створити процедуру - обробник події, надавши їй вказане ім’я.

4. Увести в процедуру команди для встановлення потрібних значень властивостей об’єктів.

Наприклад, потрібно, щоб після настання події Click з написом з іменем label колір фону напису ставав жовтим, колір символів - червоним, розмір символів -14, у напис виводився заданий текст. На малюнку 6.35 наведено текст відповідного проекту та результат виконання процедури - обробника події Click для напису.

Аля тих, хто хоче знати більше

Текст у написі можна вивести в кілька рядків. Для цього на місці, де повинен розпочинатися новий рядок, потрібно ввести символ \п. Наприклад, у написі, створеному командою label = Label(text = ‘Я навчаюсь \п у 8 класі’), у першому рядку буде відображатися текст Я навчаюсь, а у другому - у 8 класі. Результат виконання цієї команди наведено на малюнку 6.36.

Працюємо з комп'ютером

Виконайте тренувальні завдання за посиланням

https://cutt.ly/mhdraDg

або QR-кодом.

Найважливіше в цьому пункті

Напис - це компонент (елемент керування), який використовується для виведення текстових повідомлень.

Аля тих, хто вивчає Pascal

Щоб розмістити напис на формі, потрібно підвести вказівник до кнопки TLabel

на вкладці Standard вікна середовища Lazarus і двічі клацнути ліву кнопку

миші.

Властивості напису Top, Left, Name, Enabled, Visible аналогічні до відповідних властивостей кнопки. Значення властивості Color напису визначає колір його фону. Значення цих властивостей можна змінювати на вкладці Властивості вікна Інспектор об’єктів перед запуском проекту на виконання або командами присвоювання під час виконання проекту, наприклад

За замовчуванням значення властивостей Height і Width для напису, на відміну від форми і кнопки, не можна змінити на вкладці Властивості або перетягуванням. Ширина й висота напису визначаються текстом, який розміщено в цьому написі. Якщо змінити текст у полі значення властивості Caption або виконати команду присвоювання, наприклад LabeM.Caption := ‘Я навчаюсь у 8 класі’, то відповідно до його довжини зміниться ширина напису. Але якщо встановити значення False властивості AutoSize (англ. Automatic Size - автоматичний розмір) напису, то його ширину й висоту можна змінювати незалежно від наявного в ньому тексту.

Текст напису можна вводити і редагувати як у полі Caption, так і у вікні Редактор рядків.

Властивість Font визначає значення властивостей символів, якими буде виводитися текст у написі. Ця властивість є комплексною, оскільки складається з кількох властивостей символів: Color, Height, Name, Size та ін. Під час виконання проекту значення цих властивостей можна змінити командою присвоювання, наприклад командою:

Виділити напис можна, вибравши його на формі або вибравши його ім’я в полі Компоненти вікна Інспектор об’єктів.

Якщо виділити напис, то на вкладці Події вікна Інспектор об’єктів можна вибрати подію і для неї у вікні Редактор тексту створити обробник цієї події, виконання якого може змінити значення властивостей як напису, так і вікна, кнопки та інших компонентів.

Для тих, хто вивчає Python

Команда створення напису мовою Python має вигляд:

Одночасно зі створенням напису можна також установити значення деяких властивостей, наприклад bg - колір фону напису, fg - колір символів, font - вид шрифту, розмір символів і накреслення (bold - напівжирне, italic - курсивне, underline - підкреслене), height - висота напису, width - ширина напису та ін. Для цього в команді створення напису в круглих дужках потрібно ввести через кому пари властивість = значення.

Значення властивостей також можна задавати та змінювати окремими командами виду:

Для розміщення напису у вікні проекту використовують методи раск() і place().

З написом можна пов’язати процедуру - обробник деякої події, використовуючи метод bind():

Окремо потрібно ввести код процедури - обробника події із зазначеним іменем.

Лайте вілповілі на запитання

1°. Для чого використовується напис?

Для тих, хто вивчає Pascal

2°. Як розмістити напис на формі?

З*. Що визначають значення властивостей Top, Left, Name для напису? 4^е. Що визначають значення властивостей Enabled і Visible для напису? 5*. Що визначають значення комплексної властивості Font для напису? 6^е. Чим відрізняється властивість Color для напису і для кнопки?

7*. Чим відрізняються властивості Тор і Left для напису і для форми?

8^е. Чим відрізняються властивості Height і Width для напису і для кнопки? 9*. Як можна змінити текст у написі?

10*. Як створити обробник події для напису?

Для тих, хто вивчає Python

2*. Як створити напис?

З*. Якими способами можна встановити значення властивостей напису? 4^е. Які властивості напису ви знаєте? Поясніть їх.

5°. Як розмістити напис у вікні?

6*. Як пов’язати з написом процедуру - обробник події?

7*. Чим відрізняються властивості напису і вікна?

8^е. Чим відрізняються властивості напису і кнопки?

Виконайте завлання

1°. Створіть проект, у якому в результаті настання події Click для напису буде встановлено:

• відступ його верхньої межі від верхньої межі вікна 120 пікселів і текст у написі зміниться на назву вулиці, на якій розміщено ваш заклад освіти;

• ширину напису ЗО символів і текст у написі зміниться на назву вулиці, на якій розміщено ваш заклад освіти.

Збережіть проект у папці з іменем Завдання 6.4.1, створеній у вашій папці. 2°. Створіть проект, у якому в результаті настання події DbICIick для напису буде встановлено:

• відступ його лівої межі від лівої межі вікна 80 пікселів і текст у написі зміниться на ваше ім’я;

• висоту напису 5 символів і текст у написі зміниться на ваше ім’я. Збережіть проект у папці з іменем Завдання 6.4.2, створеній у вашій папці.

З*. Створіть проект, у якому в результаті настання події MouseMove для напису буде встановлено:

• новий текст на ньому, червоний колір тексту і збільшиться відступ напису від верхньої межі вікна на 20 пікселів;

• новий текст на ньому, червоний колір тексту і збільшиться ширина напису на 5 символів.

Збережіть проект у папці з іменем Завдання 6.4.3, створеній у вашій папці. 4*. Створіть проект, у якому в результаті настання події Click для напису буде встановлено:

• зменшення його відступу від лівої межі вікна на 20 пікселів, розмір символів 12, колір символів синій і виведеться в напис назва вашого закладу освіти;

• зменшення ширини напису на 2 символи, розмір символів 12, колір символів синій і виведеться в напис назва вашого закладу освіти.

Збережіть проект у папці з іменем Завдання 6.4.4, створеній у вашій папці. 5*. Створіть проект, у якому в результаті настання події Click для напису буде встановлено коричневий колір фону і текст у написі зміниться на Мій проект, а в результаті настання події MouseMove для напису:

• він переміститься на ЗО пікселів управо і на 40 пікселів униз;

• збільшиться ширина та висота напису на 3 символи.

Збережіть проект у папці з іменем Завдання 6.4.5, створеній у вашій папці. 6*. Створіть проект, у якому в результаті настання події Click для кнопки:

• кнопка переміститься на 60 пікселів управо і на 10 пікселів уверх, а в напис буде виведено ваше прізвище та ім’я зеленим кольором на сірому фоні;

• ширина напису зменшиться на 2 символи, висота напису збільшиться на З символи, у напис буде виведено ваше прізвище та ім’я зеленим кольором на сірому фоні.

Збережіть проект у папці з іменем Завдання 6.4.6, створеній у вашій папці. 7*. Створіть проект, у якому в результаті настання події Click для кнопки вікно проекту переміститься на 60 пікселів уліво і на 80 пікселів униз і в напис виведеться назва вашого закладу освіти синім кольором на жовтому фоні. Збережіть проект у папці з іменем Завдання 6.4.7, створеній у вашій папці. 8*. Створіть проект, у якому розташуйте у вікні два написи Моя країна та Україна. Установіть заголовок вікна - Україна. Після настання події Click з першим написом колір фону першого напису повинен стати синім, другого напису - жовтим. Після настання події Click з другим написом колір

символів першого напису повинен стати жовтим, другого напису - синім, шрифт символів в обох написах - АгіаІ, 14, напівжирний. Вигляд вікна проекту наведено на малюнку 6.37. Збережіть проект у папці з іменем Завдання 6.4.8, створеній у вашій папці.

Мал. 6.37. Вигляд вікна проекту: а) після запуску; б) після настання події Click для першого напису; в) після настання події Click для другого напису

9*. Створіть проект, у якому розташуйте у вікні два написи Ніч і День, задайте заголовок вікна - Світло. Після запуску проекту колір фону вікна - чорний, колір фону першого напису - світло-сірий, другий напис - не відображається. Після настання події Click з першим написом колір фону вікна стає білим, перший напис зникає, другий напис відображається на світло-сірому фоні. Після настання події Click з другим написом вікно проекту повертається до початкового стану. Вигляд вікна проекту наведено на малюнку 6.38. Збережіть проект у папці з іменем Завдання 6.4.9, створеній у вашій папці.

Мал. 6.38. Вікно проекту: а) початковий стан і після настання події Click для другого напису; б) після настання події Click для першого напису

ПРАКТИЧНА РОБОТА № 9 «Проекти з кнопками та написами»

Увага! Під час роботи з комп’ютером дотримуйтеся вимог безпеки життєдіяльності та санітарно-гігієнічних норм.

Аля тих, хто вивчає Pascal

1. Відкрийте середовище Lazarus.

2. Розмістіть на формі дві кнопки та напис.

3. Установіть перед початком виконання проекту такі значення властивостей першої кнопки:

• ширина - 60 пікселів;

• висота - 20 пікселів;

• відступ від лівої межі вікна - 120 пікселів;

• відступ від верхньої межі вікна - 100 пікселів;

• текст на кнопці - Вікно проекту.

4. Установіть перед початком виконання проекту такі значення властивостей другої кнопки:

• ширина - 100 пікселів]

• висота - ЗО пікселів;

• відступ від лівої межі форми - 300 пікселів;

• відступ від верхньої межі форми - 100 пікселів;

• текст на кнопці - Напис.

5. Установіть перед початком виконання проекту такі значення властивостей напису:

• відступ від лівої межі форми -150 пікселів;

• відступ від верхньої межі форми - 200 пікселів;

• текст у написі - назва вашого класу.

6. Збережіть проект у папці з іменем Практична 9, створеній у вашій папці.

7. Створіть обробник події Click для першої кнопки, виконання якого встановить ширину вікна проекту - 800 пікселів, висоту вікна проекту - 400 пікселів, колір фону вікна - зелений, ширину цієї кнопки - 200 пікселів, перемістить її на 50 пікселів уліво і на ЗО пікселів уверх, зробить її недоступною, збільшить ширину другої кнопки на 10 пікселів.

8. Створіть обробник події MouseMove для другої кнопки, виконання якого встановить жовтий колір фону напису, відступ напису від верхньої межі вікна 200 пікселів, зменшить відступ напису від лівої межі вікна на 50 пікселів, установить колір символів тексту напису червоний і виведе в напис текст Ми вивчаємо мову програмування Pascal!.

9. Збережіть нову версію проекту з тим самим іменем у тому самому місці.

Аля тих, хто вивчає Python

1. Створіть проект з вікном розміра 400 х 300 пікселів, у якому розмістіть дві кнопки та напис.

2. Установіть такі значення властивостей першої кнопки:

• ширина - 20 символів; • колір символів - жовтий;

• висота - 2 символи-, • текст на кнопці - Вікно проекту.

• колір фону - сірий\

3. Установіть такі значення властивостей другої кнопки:

• ширина - 10 символів] • колір символів - білий',

• висота - 3 символи-, • текст на кнопці - Напис.

• колір фону - синій',

4. Установіть такі значення властивостей напису:

• колір символів - синій', • шрифт символів - Агіа114.

• текст у написі - назва вашого класу;

5. Створіть обробник події Click для першої кнопки, виконання якого встановить ширину вікна проекту - 800 пікселів, висоту вікна проекту - 400 пікселів, колір фону вікна - зелений, ширину першої кнопки - ЗО символів, збільшить ширину другої кнопки на 5 символів, змінить колір першої кнопки на синій, а колір символів на ній - на білий, зробить першу кнопку недоступною.

6. Створіть обробник події MouseMove для другої кнопки, виконання якого встановить червоний колір фону напису, ширину напису - 40 символів, збільшить висоту напису на 5 символів, установить колір символів тексту напису жовтий і виведе у напис текст Ми вивчаємо мову програмування Python!.

7. Збережіть проект у вашій папці у файлі з іменем Практична 9.ру.

 

 

Це матеріал з підручника Інформатика 8 клас Ривкінд (2021)