Выпуск 04: Компоненты

 
     

Архив рассылки

Прежде всего хочу поздравить всех учителей с днём учителя и пожелать вам много много терьпения в школе! :)

А теперь для тех, кто недавно присоединились, повторяю: Сначала прочтите предыдущие выпуски, если не хотите путаться в коде :)

Надеюсь вы выучили тему прошлого выпуска. :) Если да, то можно продолжать, а если нет - всё перечитайте, сделайте все задания! Убедитесь, что всё правильно работает.

Честно говоря мне сейчас лень что нибуть писать. :) Получил программку, FL Studio XXL называется, и сейчас хочу ею занятся...но, посколько я там ещё очень путаюсь, допишу этот выпуск. :)

Чтобы не было скучно в программировании, сегодня вернёмся к визуальному программированию, исследуем несколько компонентов и принцип работы с ними.

Включите Дельфи.

Стандартные компоненты

Вы уже знаете, где находятся все компоненты и как их ставить на форму, так что повторятся не буду.

На палитре компонентов самая первая вкладка хранит стандартные, чаще всего используемые компоненты. В этом выпуске мы познакомимся с тремя из них.

Кнопка

Один из этих трёх компонентов - обычная кнопка. Найдите на палитре компонентов кнопку. Она так и называется - Button. Как её найти вы тоже знаете. Поставьте кнопку на форму.

В инспекторе объектов (для этой кнопки) найдите свойство Caption. Это свойство отвечает за надпись на кнопке (заголовок кнопки). Сначала он является "Button1". Измените название на "Результат". Обратите внимание на то, что здесь уже можно писать русскими буквами. Заголовок кнопки хранится в переменной строкового типа, хотя мы её и не видим. После ввода нажмите ENTER, чтобы увидеть результат. Если всё зделали правильно, то теперь кнопка воглядит так:

http://spider3d.narod.ru/img/04/01.gif

Посмотрим ещё на некоторые свойства. Height - высота кнопки (в пикселях), Width - ширина, Left - расстояние кнопки от левой границы формы, Top - расстояние кнопки от верхней границы формы. Для точного значения можно вставить свои цифры, а также можно кнопку просто двигать, чтобы изменить расстояние от верхнего и левого краёв формы, и изменять её размеры "дёргая" за чёрные квадратики. Каждый компонент имеет своё уникальное имя, по которому можно к нему обращатся в редакторе кода. Имя по умолчанию совпадает с заголовком компонента. Мы изменили заголовок кнопки, но её имя осталось "Button1". Само имя можно указать в свойстве Name, но пока его не меняйте.

Ещё пара свойств: Cursor - курсор, который будет появлятся при наведении его на кнопку. Font - шрифт заголовка кнопки. Нажмите на строчку "Font" и потом на кнопочку с тремя точками. Перед вами должно появится знакомое окно. Там всё и меняется. Hint - подсказка, которая будет появлятся при наведении курсора на кнопку. Но, чтобы подсказка работала надо значение свойства ShowHint ("показывать подсказку") поставить на True ("Да"). Это значение хранится в переменной типа Boolean. Вот и всё, что вам нужно знать про кнопку.

Метка

Метка - компонент, который преднозначен для вывода информации. Этот компонент имеет всё тоже самое, что и кнопка, но для нас самое главное свойство - заголовок (Caption). Основная работа для этого компонента происходит именно с этим свойством. Метка на палитре компонентов имеет картинку с большой "А" буквой и называется Label.

Поле ввода

Этот компонент называется Edit и преднозначен как для вывода информации, так и для её ввода. Основное свойство этого компонента - Text (текст). Сейчас текст: "Edit1", но нам он не нужен, так что сотрите (не перепутайте с именем!).

Вот и всё, что вам надо знать о компонентах. Теперь научимся работать с ними.

Работаем с компонентами

Приведите вашу прграмму в такой вид:

http://spider3d.narod.ru/img/04/02.gif

Если вы поняли, о чём я так долго говорил, то вам это не составит труда :) Посмотрите на то, как выглядит редактор кода (кнопка F12) :) Куча "чего-то" :) На самом деле этот код тоже можно сократить, но этого делать совсем не обязательно, даже не надо! Бессмысленная работа :) Вернитесь к дизайнеру (F12). Каждый компонент имеет не только своё свойство, но и событие, при котором будет соответственно действовать. Например, "нажатие на кнопку" является событием. Можно написать код, который будет работать, когда исполнится это событие, т.е. пользователь нажмёт кнопку, или другое, например пользователь наведёт курсор на метку, или напечатает что нибудь в поле ввода. События можно тоже найти в инспекторе объектов, только во вкладке (которая находится вверху, рядом с Properties) Events:

http://spider3d.narod.ru/img/04/03.gif

Там находится список некоторых (но не всех!) событий. Также каждый компонент имеет своё "свойство по умолчанию". Для кнопки это "нажатие", для поля ввода - "ввод текста" и т.д., т.е. чаще всего используемые события. Вы врядли в программах когда нибудь меняете заголовки кнопок. Я уверен, что вы на них просто нажимаете :)

Мы будем работать с этими "свойствами по умолчанию". Как узнать, что это за свойство, чтобы его найти? А его искать и не надо! Оно само к вам придёт :) Два раза щёлкните по кнопке и вы перейдёте в редактор кода. Таким образом вы создали обработчик события нажатия кнопки:

http://spider3d.narod.ru/img/04/04.gif

Это значит, что мы будим обрабатывать событие, т.е. создадим код, который выполнится при исполнении этого события (когда пользователь нажмёт на кнопку).

Посмотрите на эту строчку:

TForm1.Button1Click

TForm1 - имя (не заголовок!) класса формы (о классах говорить будем ещё не скоро :), Button1 - имя кнопки, Click - "нажатие". Поскольку кнопка преднадлежит форме (потому что на ней находится), указывается такая строчка. Буква "T" в начале строки ничего особенного не значит. Каждый компонент начинается с этой буквы. Вроде она не нужна, но удалять её нельзя, из за причины, которую только что упомянул.

В этой программе мы будем искать площадь прямоугольника (или квадрата). Для этого нам нужны 3 переменные (две для двух сторон прямоугольника и одна для хранения результата) дробного типа. Создайте их, конечно, перед словом begin (назавите, как хотите :)

procedure TForm1.Button1Click(Sender: TObject);
var
  a, b, s: Real;
begin

end;

Стороны прямоугольника будут находится в полях ввода, т.е. пользователь сам их укажет. Но так просто нам не получить эти значения! Наши переменные - дробные числа, а тексты в полях ввода - строки. Значит, нам надо эти стоки превратить в дробные числа. Это совсем не сложно, но не сработает, если в поле ввода будут не только цифры (а ещё буквы, например). Тем не менее всегда можно превращать число в строку, потому что там без цыфер (и "запятой") ничего и нету :)

Чтобы узнать, что хранится в поле ввода, нам надо обратится к его свойству Text, потому что запись на самом деле хранится там. Логично? Чтобы обратится к любому свойству компонента, в редакторе кода сначала надо указать имя компонента и потом свойство, отделяя их точкой. Точка, так сказать, входит в глубь компонента или свойства (я уже говорил в выпуске 01 (кажется :), что некоторые свойства делятся ещё на несколько (в инспекторе объектов у таких свойств стоит плюсик)). Вот пример:

Edit1.Text;
Edit1.Font.Size;

Поняли? А Edit1 - имя первого поля ввода. Второе поле имеет имя Edit2 (Дельфи автоматически увеличивает число, так что если поставить ещё одну кнопку, она будет Button2). Конечно то, что я написал, работать не будет, потому что я не указал что делать с этим текстом.

Сейчас я заставлю работать эту прогу :) Мы изменим текст поля ввода (т.е. добавим, потому что мы его недавно убрали :)

procedure TForm1.Button1Click(Sender: TObject);
var
  a, b, s: Real;
begin
 Edit1.Text:= 'А как насчёт пива?';
end;

Поняли как этот код действует (должны, потому что об операторах приваивания и записи строк я уже говорил в прошлых выпусках)? Запустите программу и нажмите на кнопку. Изменилась надпись? Если нет, то где-то ошибка (ну, это уже и первоклашке ясно :) Убедитесь, что обработчик события зделан именно для кнопки!

Чтобы превратить текст в число, надо воспользоваться нужной функцией:

FloatToStr(); - из дробного числа в строку
StrToFloat(); - из строки в дробное число
IntToStr(); - из целого числа в строку
StrToInt(); - из строки в целое число

В скобках указывается строковая переменная, в которой и хранится текст. В этом случае надо делать так:

a:= StrToFloat ( Edit1.Text );

Я присвоил переменной "a" значение, которое находится в поле ввода. Как узнать, работает ли код? А это уж кто как хочет :) Можно, например, показать значение переменной на кнопке, или в другом поле ввода:

procedure TForm1.Button1Click(Sender: TObject);
var
  a, b, s: Real;
begin
 a:= StrToFloat ( Edit1.Text );
 Edit2.Text:= FloatToStr ( a );
end;

Запустите программу и проверьте её. Когда вводите дробное число, как запятую используйте уже настоящюю запятую! И без цифер больше ничего не вводите, а то появится в программе ошибка и выскачит до боли знакомый вид "красной таблички" :)

Ну как? Работает? Вот так вот! :)

Думаю, многие из вас с этими знаниями и сами смогут закончить программу :) Но для единиц я всётаки помогу. Программа выглядит так:

var
  a, b, s: Real;
begin
 a:= StrToFloat ( Edit1.Text );
 b:= StrToFloat ( Edit2.Text );
 s:= a*b;

А как отобразить результат?Для тех же самых единиц подсказка: поставьте на форму ещё одну метку :)

Конечно это очень хороший способ для вывода результата, но есть ещё один вариант (но менее удобный со стороны пользователя) - табличка. Приведу пример более простой таблички: ShowMessage(); Аргумент функции (в скобках) является строкового типа, так что эту функцию можно использовать, как и WriteLn().

ShowMessage(s);

Но, если делать табличку, то она должна ещё и объяснить, что в ней показано. Вот вся программа:

procedure TForm1.Button1Click(Sender: TObject);
var
  a, b, s: Real;
begin
 a:= StrToFloat( Edit1.Text );
 b:= StrToFloat( Edit2.Text );
 s:= a*b;
 ShowMessage('Площадь прямоугольника является ' + FloatToStr(s));
end;

Запустите программу. Введите в поля 15 и 64,5. Результат будет 967,5. Заголовок тблички равен названию проекта. Обратите внимание на то, как я соединяю текст с переменной. Использую "+" и указываю переменную, перед этим её превратив в строку (если она не является строковой). В консольном приложении так же:

Write('Plosiad'' priamougolnika javliaetsia ' + FloatToStr(s));

Не забудьте, что там русский шрифт не работает и убедитесь, что поставили все нужные скобки и не поставили ненужных :)

Задание #4. Сделайте программу, которая находит площадь трапеции ( ((a+b)/2)*h ) а потом 31% от этого числа. Показать надо оба ответа!

Хорошо разберитесь с этим материалом. Посмотрите, что делают другие свойства, другие компоненты.

На сегодня всё :)
 

2005-10-05

Автор, ведущий и дизайнер рассылки: Евгений Нарышкин (spider3d@yandex.ru)

OpenGL для начинающих (under construction): http://spider3d.narod.ru/

Хостинг от uCoz