Програмування на мові Delphi. Глава 1. Основи візуального програмування, Різне, Програмування, статті

попередня стаття серії


Зміст



Перед тим, як відправитися в дальню дорогу, мудрий подорожній намічає мету подорожі, розраховує свої сили, прикидає маршрут і готує спорядження. Після цього він здійснює маленький тренувальний похід, щоб перевірити надійність спорядження і отримати необхідний навик. Давайте станемо схожими мудреця і, починаючи віртуальну подорож в країну Delphi, зробимо те ж саме: поставимо перед собою мету навчитися писати програми в середовищі Delphi і переконаємося в тому, що вона нам під силу. Після цього підготуємо “спорядження” – встановимо на комп’ютер Delphi, і пройдемо курс “молодого бійця” – напишемо просту, але корисну і цілком працездатну програму.

Наріжні камені візуального програмування


В основі створення графічних програм лежать кілька дуже простих понять. Це ті наріжні камені, які закладені архітектором в фундамент системи Delphi. Розібравшись з ними, ви швидко зрозумієте суть візуального програмування.

Починаючи роботу з середовищем Delphi, ви повинні:


  1. Усвідомити завдання, яку збираєтеся вирішувати на комп’ютері;
  2. Намалювати на папері все те, що припускаєте побачити на екрані в процесі вирішення. Це може бути один або кілька малюнків. Якщо завдання складне, її слід розбити на етапи і для кожного етапу зробити окремий малюнок;
  3. Написати сценарій роботи майбутньої програми. Місцем розгортання дії є екран, а глядач не просто дивиться, але і бере участь в “спектаклі”. У сценарії повинне бути враховано все: що виводиться на екран спочатку, що робиться потім, як програма завершується, т.д. Декораціями “спектаклю” служать зроблені в пункті 2 малюнки.

Не гаючи дорогоцінного часу, реалізуємо всі ці пункти для якої-небудь простий і корисною завдання. Наприклад, думаючи про своє здоров’я, давайте створимо програму обчислення оптимальної ваги людини. Алгоритм рішення виберемо самий простий:

Оптимальна вага (кг) = Зріст (см) – 100 – 10 (не надто жорстоко?)

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

Тепер виконаємо пункт 2 – намалюємо те, що ми хочемо бачити на екрані в процесі виконання завдання (рисунок 1): два редагованих поля – для введення зростання (Specify your height) і виведення ваги (Your ideal weight); дві кнопки – для запуску обчислень (Compute) і виходу з програми (Close); текстові написи.

Рисунок 1. Форма і компоненти

Пора дати назву тому, що ми тут намалювали. Малюнок в цілому називається формою, А поля введення, виведення, кнопки і все інше, що розташовується на формі – компонентами. Неважко помітити, що компоненти на нашому малюнку – різні: редаговані поля, кнопки, написи. Вони можуть мати різні розміри, їх текст може відрізнятися висотою, шрифтом, кольором. Коротше кажучи, кожен компонент характеризується рядом ознак, які називаються властивостями.

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

Збройні теорією і малюнками, виконаємо пункт 3 – напишемо сценарій роботи нашої майбутньої програми. Відразу після старту програми на екрані з’являється форма. Користувач починає обчислення: активізує редаговане поле з написом Specify your height і вводить значення зростання, потім натискає кнопку Compute. Програма реагує на цю подію: обчислює ідеальний вагу і виводить результат у полі з написом Your ideal weight. Коли користувач визначить ідеальна вага всіх своїх знайомих (і повідомить їм про це по телефону), він натисне кнопку Close. У відповідь на цю подію програма прибере з екрану свою форму і закінчить роботу.

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

Тепер вирішимо вкрай важливе питання: що в цьому сценарії буде робити середу Delphi, а що ви. Справа, загалом, йде так:


Такий розподіл роботи програмістам подобається, завжди б так! До речі, воно відображено вже в структурі самої програми, яка складається з декількох частин. Найважливіші з них: файл вихідного коду мовою Delphi (підготовлена ​​середовищем основа + ваші деталі) і файл форми (його теж створює середу). Ці файли та ряд інших файлів, які також потрібні для виконання завдання, складають проект. Для кожної окремої завдання створюється свій проект. Зараз важливо просто про нього знати, всі подробиці ви дізнаєтесь в розділі 7.

Тільки що вивчені вами поняття є ключем до розуміння використовуваної в середовищі Delphi технології візуального програмування. Маючи настільки грунтовну теоретичну підготовку, можна спокійно готувати “Похідний інвентар” – встановлювати на свій комп’ютер систему Delphi – і приступати до тренувального “походу” – писати першу програму.

Підготовка до роботи


Система програмування Delphi продається в кількох редакціях:


Всі редакції мають однакову основу – інтегровану середу Delphi, але відрізняються один від одного додатковими інструментальними засобами і ліцензіями на їх поширення разом з вашими програмами. При написанні книги автори орієнтувалися на володарів редакції Delphi Enterprise. Тим не менш, книгою в рівній мірі зможуть скористатися власники менш потужних редакцій.

Будемо вважати, що ви успішно розібралися в своїх завданнях і купили саме ту редакцію, яка потрібна. Тепер саме час відкрити коробку. Ви виявите в ній компакт-диски з усім необхідним програмним забезпеченням і багатотомне керівництво користувача. Відкладемо книги в сторону і приступимо до приємного ритуалу: переносу системи Delphi з компакт-диска на жорсткий диск вашого комп’ютера.

Вставте перший компакт-диск у CD-ROM – заставка настановної програми запуститься автоматично. Якщо цього не сталося, запустіть Windows Explorer, відкрийте компакт-диск і запустіть програму Install. Слідкуйте за вказівками настановна програма буде час від часу виводити для вас на екран. (Новачкам радимо уважно прочитати файл Readme.txt, який містить докладні інструкції по установці і знаходиться на компакт-диску в кореневому каталозі.) Настановна програма сама поспілкується з операційною системою, організовує в стартовому меню Start / Programs папку Borland Delphi 7 і помістить в неї ярлики відповідних програм (малюнок 2):

Рисунок 2. Папка Borland Delphi 7 у стартовому меню

Давайте швидким поглядом подивимося, що ж ми встановили:

Рисунок 3. Довідники середовища Delphi

Ось тепер ми готові почати роботу.

Перший запуск середовища Delphi


Запустіть середовище розробки, вибравши відповідний ярлик з головного меню операційної системи. Мир Delphi – перед вами (малюнок 4):

Рисунок 4. Вид середовища Delphi при першому запуску

Що ж ви бачите? Вікна, кнопки, списки … Загалом – хаос. Давайте спробуємо навести порядок, і подивимося на середу Delphi здалеку. Ба! Та це ж назавжди закарбовані у пам’яті читача наріжні камені: форма, компоненти і властивості (Рисунок 5).

Рисунок 5. Головні частини середовища Delphi

Ура! Невідоме виявилося добре відомим! Хаос зник, і кмітливий читач вже все зрозумів: з області “палітра компонентів” треба c допомогою миші вибрати компонент (кнопку, напис, редактор тексту і т.д.), помістити на “форму” і задати значення його властивостей в області “властивості”. Середа Delphi проаналізує вміст форми, створить відповідний програмний код, а програмісту залишиться тільки внести в нього деталі виконання завдання – відгуки на події. Загалом, призначення інтегрованого середовища зрозуміло, тепер можна спуститися з небес і зайнятися деталями.

Досліджуємо середовище розробки програм


Знову подивимося на інтегроване середовище розробки (малюнок 6) і дамо назву кожної її частини:

Малюнок 6. Середа Delphi в деталях

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

Малюнок 7. Форма

Зверніть увагу, що форма має всі ознаки “головного вікна” традиційних графічних додатків: значок, заголовок, кнопки “згорнути”, “розгорнути”, “Закрити”, розмірну рамку і, звичайно, управляється мишею. Навчений досвідом читач-програміст подумає: скільки треба попотіти, щоб зробити все це самому, а тут основа інтерфейсу практично готова …

Під формою захований редактор коду (малюнок 8):

Рисунок 8. Редактор коду

Саме там розміщується програмний код на мові Delphi, відповідний змісту форми. Активізація редактора коду здійснюється клацанням миші на частині вікна, яка визирає з-під форми, або з допомогою клавіші F12 на клавіатурі. В редакторі коду ви виконуєте свою частину роботи – дописуєте деталі виконання завдання. Для повернення до форми достатньо натиснути на клавіатурі клавішу F12 ще раз.

З формою все ясно, займемося компонентами, які будемо на ній розміщувати. Вони знаходяться в області головного вікна інтегрованого середовища, яка називається палітрою компонентів (Рисунок 9).

Малюнок 9. Палітра компонентів

Розробники середовища Delphi помістили в палітру компонентів те, що вважають оптимальним набором “будівельних цеглинок”, достатнім для створення будь-яких додатків. Серед компонентів ви знайдете меню, кнопки, написи, стандартні діалогові вікна та ін

Як видно на малюнку 9, все безліч компонентів розділене на групи. Кожна група розміщена в палітрі компонентів на своїй вкладці: Standard – стандартні компоненти для користувача інтерфейсу, Additional – Додаткові компоненти для користувача інтерфейсу, Common Controls – загальноприйняті для Windows компоненти для користувача інтерфейсу і т.д. Опис кожної вкладки палітри компонентів наведено у додатку А.

Вибрати потрібний компонент з палітри і помістити його на форму дуже просто:

Малюнок 10. Компонент Button на формі

Компонент – на формі, пора поставити його властивості. Для цього звернемося до вікна з заголовком Object Inspector – вікна властивостей (Рисунок 11). Воно розташоване ліворуч знизу від форми і активізується з клавіатури натисненням клавіші F11.

Малюнок 11. Вікно властивостей

Як тільки компонент виявляється на формі, у вікні Object Inspector відображається список його властивостей. Ваша задача – привласнити властивостями потрібні значення. Наприклад, щоб написати на кнопці слово Compute, Достатньо змінити значення властивості Caption, Яке спочатку містить текст Button1. У міру набору рядка кожна буква буде автоматично з’являтися на кнопці.

Неважко помітити, що вікно Object Inspector складається з двох вкладок: вкладки властивостей – Properties і вкладки подій – Events. На вкладці Properties встановлюються властивості компонента. Коли значення властивостей визначені, потрібно активізувати вкладку Events. Ви тут же побачите список подій, на які даний компонент може реагувати. Як приклад наведемо список подій, на які може реагувати кнопка (малюнок 12):

Малюнок 12. Список подій компонента Button

У представленому списку нас може цікавити подія OnClick – Натискання кнопки.

Деякі компоненти подібно формі вміють містити інші компоненти. Наприклад, панель (компонент Panel) Може містити кнопки, написи, інші панелі і т.д. За зовнішнім виглядом форми не завжди можна визначити, які компоненти містить Вас зацікавив компонент або на якому компоненті він міститься. Для відповіді на ці питання, зверніться до вікна Object TreeView – вікна компонентів форми (Рисунок 13). Воно розташоване зліва вгорі від форми і активізується натисканням комбінації клавіш Shift + Alt + F11. У вікні Object TreeView компоненти представлені у вигляді дерева, що відображає вкладеність компонентів на формі. Зараз на формі перебуває лише одна єдина кнопка, тому дерево компонентів має дуже простий вигляд: кореневої елемент Form1 і один вкладений елемент Button1.

Малюнок 13. Вікно компонентів форми

Сподіваємося, що найважливіші елементи інтегрованого середовища – форма, редактор коду, палітра компонентів, вікно компонентів форми, вікно властивостей – назавжди закарбувалися у вашій пам’яті, і переходимо до інших її частинах.

Для управління процесом створення додатку в цілому служить головне меню. Воно розташоване в головному вікні середовища Delphi і виконує безліч службових функцій. Меню, в общем-то, стандартно і зрозуміло кожному, хто мав справу з комп’ютером. Тому ми гранично коротко опишемо призначення найважливіших розділів головного меню:


Для прискорення доступу до деяких команд служить панель кнопок (Рисунок 14).

Малюнок 14. Панель кнопок середовища Delphi

На ній ви виявите шістнадцять кнопок-аналогів основних команд меню. Цей список можна розширити, додавши кнопки доступу до своїх улюблених команд. Для цього достатньо навести курсор миші на панель кнопок, викликати допоміжне меню клацанням правої кнопки миші і вибрати команду Customize.

Праворуч від головного меню є невелика панель (рисунок 15) для збереження і відновлення зовнішнього вигляду середовища Delphi. Розташуйте вікна на екрані на свій смак, підберіть найбільш зручні для себе кнопки. Потім, натиснувши кнопку з підказкою Save current desktop, Збережіть зовнішній вигляд середовища Delphi. У наступному сеансі роботи ви зможете миттєво відновити його зі списку.

Малюнок 15. Панель для збереження і відновлення зовнішнього вигляду середовища Delphi

Ось ви і вивчили основні елементи середовища візуального програмування! Ви познайомилися з середовищем Delphi тільки в найзагальніших рисах, але цього достатньо, щоб спробувати написати першу програму.

Перша програма


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

Ви, звичайно, вже запустили середу Delphi, і бачите перед собою порожню форму. Почнемо з кнопок. Наведіть вказівник миші на палітру компонентів і клацніть на значку з підказкою Button (Рисунок 16).

Малюнок 16. Значок компонента Button

Потім наведіть курсор миші на форму і клацніть ще раз. Заготівля кнопки з написом Button1 виявиться на формі (малюнок 17):

Малюнок 17. Заготівля кнопки на формі

Ваша справа – зробити з заготовки “цукерочку”! За допомогою миші підправте її місце розташування. Після цього перейдіть до вікна Object Inspector. Там ви побачите список властивостей компонента Button. В ньому нас цікавить властивість Caption, Так як саме воно визначає вміст напису. Замінимо у властивості Caption стандартне значення Button1 на Compute (Рисунок 18).

Малюнок 18. Кнопка Compute

Точно так же на форму поміщається друга кнопка з написом Close (Рисунок 19):

Малюнок 19. Кнопка Close

Тепер візьмемося за поля введення і виведення. Для цього покинемо на час вікно Object Inspector і перейдемо до палітри компонентів. Там ви знайдете компонент Edit (Рисунок 20), який найкраще відповідає нашим цілям.

Малюнок 20. Значок компонента Edit

Клацніть на ньому, потім наведіть вказівник миші в потрібне місце форми і клацніть ще раз. На формі з’явиться поле введення. Спочатку воно містить текст Edit1 (Рисунок 21):

Малюнок 21. Поле введення вихідних даних

Надайте компоненту потрібні розміри і відкоригуйте розташування. Готово? Тепер знову перейдіть до вікна Object Inspector. Нас цікавить властивість Text. Видаліть в ньому непотрібне значення Edit1 і вміст поля на формі відразу ж очиститься.

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

Малюнок 22. Поле виведення результату обчислень

Ба! Та ми забули дати назву нашій прекрасній формі і надписати поля для введення і виведення! Виправимо цей прикрий пропуск: привласнимо властивості Caption для форми в цілому значення Weight Calculator і воно з’явиться в заголовку форми. Тепер давайте озаглавим редаговані поля. Над вікном введення даних напишемо Specify your height, А над вікном виведення результату Your ideal weight. Ви пам’ятаєте, що рядок тексту на формі – такий же компонент, як, наприклад, кнопка. Тому зверніться до палітри компонентів, виберіть компонент Label (Рисунок 23)

Малюнок 23. Значок компонента Label

і помістіть його над полем введення. Відрегулюйте розташування компонента за допомогою миші і в значенні властивості Caption наберіть текст першого напису. Потім повторіть ті ж маніпуляції для поля виводу. В результаті вийшла дуже непогана основа для майбутньої програми (малюнок 24):

Малюнок 24. Форма для завдання обчислення оптимальної ваги людини

Все це добре, але чи працює на практиці? Давайте перевіримо: на панелі кнопок натисніть кнопку з підказкою Run (Запуск) або виберіть в меню команду Run / Run. Цим ви одночасно виконайте компіляцію і запустіть додаток. Понатискайте кнопки Compute і Close. Працюють? Так. Перейдіть в поле введення і понатискайте цифрові клавіші. Нормальний введення? Так. Однак обчислень ніяких немає. Чому? Тому що події (натискання кнопок) є, а ось відгуку на них немає – ми просто цим питанням ще не займалися.

Закривши додаток, приступимо до обробки подій. Почнемо з натискання кнопки Compute. Активізуйте кнопку, з якою будемо працювати, потім перейдіть до вікна Object Inspector і перейдіть на вкладку Events (Події). На ній ви виявите список всіх можливих подій для активного компонента (в даному випадку кнопки). Нас цікавить подія OnClick, Що виникає при натисканні кнопки. Щоб запрограмувати обробник цієї події, зробіть подвійне клацання миші в поле значення. З’явиться вікно редактора коду з заготівлею для нашого обробника (рисунок 25):

Малюнок 25. Заготівля в редакторі коду для обробки клацання кнопки Compute

Обчислення оптимальної ваги робиться в один рядок:




procedure TForm1.Button1Click(Sender: TObject);
begin

Edit2.Text := IntToStr(StrToInt(Edit1.Text) – 100 – 10);

end;

Тепер займемося кнопкою Close. Обробник події для неї встановлюється аналогічно: кнопка активізується на формі, у вікні Object Inspector вибирається вкладка Events і на значенні події OnClick робиться подвійне клацання миші. Текст цього обробника ще простіше, ніж текст попереднього:




procedure TForm1.Button2Click(Sender: TObject);
begin

Close;

end;

Процедура Close, що викликається при натисканні кнопки Close, Закриває форму і завершує програму.

Тепер давайте збережемо результат нашої роботи. Для цього виберіть команду меню File / Save All. Спочатку середу Delphi запропонує ввести ім’я для модуля форми, а потім – ім’я для всього проекту. Модуль назвемо Unit1.pas (рисунок 26),

Малюнок 26. Вікно, що видається при збереженні нового модуля

а проект – Project1.dpr (малюнок 27):

Малюнок 27. Вікно, що видається при збереженні нового проекту

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

Тепер давайте попрацюємо з програмою по-справжньому. Запустіть її (за допомогою команди меню Run / Run), Активізуйте поле з написом Specify your height і введіть значення зростання свого улюбленого дядечка Джо (170 см). Вихідний матеріал є, пора почати обчислення. Натисніть кнопку Compute. У вихідному полі з’явиться значення 60 (малюнок 28):

Малюнок 28. Працююча програма обчислення оптимальної ваги людини

Щось тут не те. Дядя Джо важить 90 кг … Може бути, наша програма неправильно вважає? Ні, справа тут не в програмі, просто дядечка потрібно трохи схуднути – кілограм на 30.

Очевидно, що програма працює. А як щодо відмовостійкості? Давайте перевіримо: запустимо програму і замість значення зростання введемо якусь рядок, наприклад, JOHN. Що трапилося? На екрані з’явилося повідомлення про помилку (рисунок 29) і програма тимчасово припинила роботу.

Малюнок 29. Повідомлення про помилку

Причина: при спробі обробити рядок замість числа, система потрапила в виняткову ситуацію. У нашому випадку програма запускалася з середовища Delphi, яка перехоплює виняткову ситуацію і показує вам наведене вище вікно Error. Натисніть OK і ви побачите те місце у програмі, де виникла виняткова ситуація. Програма припинена, продовжити її виконання можна, натиснувши в середовищі Delphi кнопку Run. Додаток видасть повідомлення про те, що JOHN – це невірне числове значення (малюнок 30):

Малюнок 30. Повідомлення про невірний числовому значенні

і після натискання OK відновиться. Це працюють автоматично вбудовані в додаток захисні механізми Delphi. В даному випадку програма впоралася з помилкою без сторонньої допомоги, але бувають виняткові ситуації, які в середовищі Delphi не обумовлені. Про обробку таких ситуацій повинен подбати програміст. Проте всьому свій час – обробляти виняткові ситуації ви навчитеся, прочитавши главу 4. Зараз досить знати, що вони бувають і що їх можна обробляти.

Підсумки


Пора підбити перші підсумки. Вони дуже навіть не погані: ви вивчили всі основні поняття візуального програмування; вмієте підійти до вирішення будь-якої задачі; уявляєте як свою роль, так і роль середовища Delphi в процесі рішення; познайомилися з проектом програми; створили і виконали свою першу програму, і навіть випробували її на міцність. Ейфорія від таких значних успіхів не повинна затьмарювати встала перед вами першу серйозну і абсолютно очевидну проблему: інтерфейс – форму з компонентами – ви знаєте, як зробити, а от як самому написати обробник подій кнопки або іншого компонента, – вам поки не відомо. А ця робота – ваша, і нікуди від неї не подітися. Щоб її виконати, потрібно знати не тільки середовище програмування, але і мова Delphi. Йому ми присвятимо наступні кілька глав.

наступна стаття серії


Посилання по темі



Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*