Визуальные компоненты палитры Delphi – это настоящие строительные блоки будущего здания Вашего приложения. Их использование позволяет без особых усилий компоновать интерфейс Вашей программы. Палитра компонентов содержит большое количество таких блоков – до 1000 фирменных компонентов и бесчисленное множество пользовательских компонентов, разработанных программистами – пользователями Delphi, которые существенно дополняют базовое множество палитры и которые можно приобрести на рынке программного продукта. Авторы многих разработок часто предоставляют их бесплатно.

Рис.2.1. Панель компонентов Delphi на закладках Standard и Additional

Компоненты группы Standard и Additional

1. Конструирование главной формы

     Приступим к конструированию главной формы, которая уже находится на экране под именем Form1. Под конструированием формы будем понимать нанесение на нее необходимых визуальных компонентов и доведение их до желаемого вида.

     В завершение конструирования первой формы немного подправим саму форму. Для этого щелкните по форме в любом месте, где расположены мелкие точки, и исправьте значение свойства Name формы на fMain, Caption – на текст Мое второе приложение. Замените значение свойства Position на poDesktopCenter. 

     Сконструированная форма будет выполнять функцию меню разрабатываемого приложения. Основная работа будет выполняться на других формах, которые будет активизироваться нажатием кнопок с надписью Редактор или Расчёты главной форме. Поскольку форма fMain является основной, то нажатие кнопки с надписью Close приведет к закрытию этой формы и приложения в целом.

     Создадим вторую (подчиненную) форму редактора текстового файла. Для этого щелкните по кнопке File / New / VCL Form на панели Delphi. На экране появится новая форма. Замените имя формы на fEditor, а значение Caption – на текст Редактор текстового файла.

Панель Panel

     Положите на форму компонент Panel. Этот компонент находится на закладке Standard.

     Щелкните по компоненту с именем Panel1 на форме, сделав его активным в окне Object Inspector. Измените его свойство Align на alTop (найдите это свойство в Object Inspector, щелкните по его значению, затем – по вскрывшейся кпопке с треугольником, и в выпавшем списке значений – по свойству alTop). При этом панель займет вершину формы по всей ее ширине. Измените имя (свойство Name) панели на PaFile, а значение Caption уберите вообще (пустая строка).

Редактор Memo

     Теперь положите ниже панели компонент Memo (закладка Standard), который является готовым текстовым редактором, подобным известной программе Notepad (блокнот). По умолчанию ему будет назначено имя Memo1. Измените значение его свойства Align на alClient. При этом он накроет всю оставшуюся клиентскую часть формы. Увеличьте высоту шрифта (свойство Font компонента), изменив 8 на 12. Добавьте компоненту горизонтальную и вертикальную полосы прокрутки, установив свойство ScrollBars (полосы прокрутки) в ssBoth (обе).

Меню MainMenu

     Двойным щелчком по компоненту MainMenu откройте дизайнер меню (Menu Designer) – окно, с помощью которого будет конструироваться меню.

     Клавишей F9 запустите проект на компиляцию. После компиляции приложение будет запущено на выполнение. В этом можно убедиться непосредственно после появления на экране главной формы с кнопками. Нажмите левой клавишей мыши кнопки Редактор или Расчеты, затем – кнопку Выход (см. рис.2.2). Убедитесь, что нажатие верхних кнопок не дает никакого эффекта, а щелчок по нижней кнопке закрывает главную форму и возвращает управление в среду Delphi. Почему нажатие кнопки Редактор и кнопки Расчеты не дало никакого эффекта, а кнопка с надписью Close сработала? Потому что еще не создан обработчик события для щелчка на первых кнопках, а последняя кнопка настроена на автоматическое закрытие формы.

Доработка главной формы

     Создадим обработчик события для щелчка на кнопке с надписью Редактор. Дважды быстро щелкните по кнопке с надписью Редактор. В результате Delphi создаст заготовку процедуры обработчика события (нажатия на эту кнопку) и предложит в редакторе кода модуля Main.pas внести код обработчика. По нашему замыслу при нажатии кнопки на экране должна появляться подчиненная форма с нашим текстовым редактором Memo1. Внесите в пустую строку между словами begin и end следующий оператор

fEditor.ShowModal;

П р и м е ч а н и е. Модальным называется окно, которое делает недоступными для пользователя все другие окна приложения. Только закрыв это окно можно получить доступ к другим окнам приложения

     Создание обработчика будет закончено, когда модуль Main.pas станет "понимать" где находится форма fEditor. Для этого выполните команду File/Use Unit (использовать Unit). Далее в выпавшем окне щелкните по строке Editor, затем – по кнопке ОК. Теперь в модуле Main.pas в секции implementation появится строка uses Editor, которая означает, что модуль Main.pas может использовать данные модуля Editor.pas.

Доработка подчиненной формы окна Редактора

1. Событие – открытие файла. Щелкните по строке меню Файл, затем в выпавшем списке – по строке Открыть. Создайте обработчик, вставив операторы:
   

if FileExists('memo.txt') then
 begin
  Memo1.Lines.LoadFromFile('memo.txt');
  PaFile.Caption:='Открыта старая версия файла';
 end;

Этот код выполняяет следующие операции. Если файл memo.txt существует, то его содержимое загружается в текстовый редактор Memo1 и наименование верхней панели заменяется на надпись Открыта старая версия файла.
 

2. Событие – сохранение файла. Щелкните по меню Файл, затем в выпавшем списке – по строке Сохранить. Создайте обработчик, вставив операторы:

Memo1.Lines.SaveToFile('memo.txt');
PaFile.Caption:='Файл сохранен';

Этот код сохраняет новое содержимое Memo1 в файле memo.txt и наименование верхней панели заменяет на надпись Файл сохранен.

1. Событие – закрытие формы. Щелкните по строке меню Выход. Создайте обработчик, вставив оператор:

fEditor.Close;

Этот код закрывает форму fEditor и возвращает то состояние приложения, которое было до активизации этой формы: активной теперь будет форма fMain.

Запустите приложение и убедитесь, что запрограммированные функции меню формы Редактора текстового файла работают. Вид формы Редактора показан на рис. 2.4.

     Создадим третью (тоже подчиненную) форму. Она потребуется для выполнения математических расчетов и построения графика функции. Замените имя формы на fCalc, а значение свойства Caption – на текст Математические расчеты и график функции.

Часть I. Вычисление значения функции

     Положите на форму две метки Label и две строки ввода Edit (закладка Standard). Положите также кнопку. Вид формы показан на рис. 2.5.

Рис.2.5. Окно Расчёты

     Дайте строкам ввода имена eArg и eFunc, соответственно. Свойству Text первого из них дайте по умолчанию, например, значение 1,5. Кнопке дайте имя bCalc.

     Наличие этих компонентов позволит вычислять через аргумент eArg.Text значение функции и результат вычислений помещать в eFunc.Text.

     Рассмотрим пример вычисления функции

     Двойным щелчком на кнопке с надписью Вычислить создайте для нее событие OnClick.

Обратите внимание, что в секции implementation редактора кодов среда Delphi создала новую процедуру с заголовком и блоком begin ... end.

     В процедуру теперь надо вставить программный код, который позволит вычислить значение указанной функции y(x) при заданном компонентом аргумента значении переменной x.

     Программный код обработчика события от щелчка на кнопке имеет следующий вид:

procedure TfCalc.bClacClick(Sender: TObject);
 var x,y: Double;
begin
 eFunc.Text:= '';
 if TryStrToFloat(eArg.Text,x) then
  begin
   y:= Sqrt(2+x*x);
   eFunc.Text:= FloatToStr(y);
  end;
end;

      Дадим этому коду подробное объяснение.
 

     Теперь можно посмотреть работу программы по вычислению значения функции. Однако для этого надо еще получить доступ к окну вычислений из главного окна приложения, то есть нужно запрограммировать кнопку с надписью Расчёты главного окна приложения, при щелчке на которой откроется окно расчетов (форма fCalc). Запрограммируйте это событие самостоятельно. Оно подобно тому, как программировался доступ к окну Редактора при щелчке на кнопке с надписью Редактор.

      После такой доработки главной формы можно запустить приложение на выполнение, затем открыть форму расчетов кнопкой Расчеты и, щелкнув там на кнопке Вычислить, получить значение функции по заданному значению аргумента, как показано ниже на рис. 2.5 

Рис.2.5. Вид окна Расчёты, позволяющего вычислить значение функции

     Поменяв значение аргумента можно найти новое значение функции.

Часть II. Табуляция функции

Задание. Дана функция

Составить таблицу  её значений для x = 0; 0,1; 0,2; ...; 0,8; 0,9; 1.

     Добавьте новую кнопку с именем bTable и надписью "Табуляция". Ниже положите компонент StringGrid (закладка Additional). Этот компонент представляет собой прямоугольную сетку, в каждую ячейку которой можно помещать строковые константы.

     Измените имя сетки на Sg. Задайте для нее количество столбцов ColCount = 3, ширину столбцов DefaultColWidth =  64, высоту строк DefaultRowHeight = 17, количество строк RowCount = 12. В результате окно формы примет вид рис. 2.6.

Рис. 2.6. Вид формы с новой кнопкой и сеткой строк

Процедура вывода таблицы в сетку

     Создайте событие OnClick для кнопки bTable и внесите в него следующий код

procedure TForm1.bTableClick(Sender: TObject);
var
    i: Integer;
    x,y: Double;
begin
 Sg.Cells[0,0]:= '№';
 Sg.Cells[1,0]:= 'X';
 Sg.Cells[2,0]:= 'Y(X)';
 for i:= 0 to 10 do
  begin
   x:= 0.1*i;
   y:= Sqrt(2+Sqr(x));
   Sg.Cells[0,i+1]:= IntToStr(i);
   Sg.Cells[1,i+1]:= RealToStr(x,3);
   Sg.Cells[2,i+1]:= RealToStr(y,3);
  end;
end;

     Функции RealToStr, которая преобразует число в строку с нужным числом знаков после запятой, у Delphi отсутствует. Составим текст этой функции сами

function RealToStr(R: Double; Posle: byte): AnsiString;
begin
 Result:= Trim(Format('%*.*f',[30,Posle,r]));
end;        

    Поставьте текст этой процедуры перед кодом процедуры обработчика событий TForm1.bTableClick.     

    Комментарий к этому коду дан ниже.
 

Рис.2.7. Сетка с таблицей значений функции

Часть III. Построение графика функции

Задание. Дана функция

Вывести ее график для точек x = 0; 0,1; 0,2; ...; 0,8; 0,9; 1.

    Положите на форму компонент Chart (закладка TeeChartLite) и передвиньте компоненты на форме так, как показано на рис. 2.8. Положите на форму три кнопки - для построения графика, сохранения графика в виде рисунков растрового и векторного форматов. Измените надписи на кнопках, как показано на рис. 2.8.

Рис. 2.8. Форма с компонентом графика и тремя сопутсвующими кнопками

     Дважды щелкните на компоненте графика. В выпавшем окне (рис. 2.9) редактирования параметров графика щелкните по кнопке Add (добавить). Далее щелкните по прямоугольнику с надписью Line (линия).

Рис. 2.9. Окно редактирования параметров графика

     Если в окошечке 3D стоит галочка, уберите ее (3D означает трехмерное представление графика; убрав галочку, мы даем указание среде, что необходим плоский график без трехмерных эффектов). Щелкнув по кнопке ОК, закройте окно выбора вида графика. При этом добавится структура Series1, которая предназначена для отображения одного графика на компоненте Chart в виде линии.

    Теперь щелкните по закладке Titles (наименования). На этой странице щелкните по кнопке Font и установите размер 10, начертание заголовка – полужирное.

    Щелкните по закладке Legend. Эта страница предназначена для настройки так называемой легенды – прямоугольника, содержащего пояснения для графиков. Уберите галочку из окошка Visible. Это означает, что легенда на графике не нужна (будет невидима).

     Щелкните по закладке Axis (оси). На этой странице щелкните по строке с надписью Bottom (нижняя ось) списка Axis, затем по закладке Title (наименование). Внесите в строку ввода текст Время. Установите полужирный тип начертания надписи. Надпись теперь видна на компоненте и находится под нижней осью графика. Аналогично установите надпись Значения функции на левой (left) оси графика.

     На закладке Series и ее подзакладке Points установите параметры так, как показано на рис. 2.10.

Рис. 2.10. Окно назначения режима вывода точек, через которые пройдет график функции

    Теперь компонент Chart1 готов к использованию.

Процедура построения графика функции по точкам

     Создайте событие OnClick для кнопки bGraph и внесите в него следующий код

procedure TForm1.bGraphClick(Sender: TObject);
var
    i: Integer;
    x,y: Double;
begin
 Series1.Clear;
 for i:= 0 to 10 do
  begin
   x:= 0.1*i;
   y:= Sqrt(2+Sqr(x));
   Series1.AddXY(x,y,RealToStr(x,1),clRed);
  end;
end;

     Комментарий к коду приведен ниже.

     Запустите программу и щелкните на кнопке bGraph. При этом будет построен график функции, указанной в задании по тем точкам, которые указаны в сетке Sg (рис. 2.6).

Рис. 2.10. График функции y(x)

     Видно, что кривая на графике окрашена в красный цвет, при этом выделены точки, через которые она походит.

Сохранение графика в растровом и векторном форматах

     После того как график построен его можно сохранить в одном из графических форматов. Компонент Chart содержит несколько процедур, которые позволяют сохранить

а) в растровом графическом формате .bmp (простейший рисунок, состоящий их точек - растров)

б) в векторном графическом формате .wmf (изображение представлено не точками, а с помощью математических формул) или .emf (расширенный веторный формат).

     Создайте для каждой кнопки сохранения графика, как рисунка, события

procedure TForm1.bBmpClick(Sender: TObject);
begin
 Chart1.SaveToBitmapFile('Chart1.bmp');
 ShowMessage('График сохранен в растровом формате');
end;

procedure TForm1.bEmfClick(Sender: TObject);
begin
 Chart1.SaveToMetafileEnh('Chart1.emf');
 ShowMessage('График сохранен в векторном формате');
end;

     С помощью первой из этих процедур будет создан графический растровый файл Chart1.bmp. А с помощью второй - графический векторный файл Chart1.emf. Оба они будут помещены в ту же папку, в которой находится приложение.

     Процедура ShowMessage позволяет вывести окно с подтверждающим сохранение сообщением, текст которого должен быть заключен в апострофы.

     Доступ к форме математических расчетов возможен и из окна Редактора через позицию меню Расчёты. Запрограммируйте это событие самостоятельно.

     Приложение MyEditor полностью сконструировано и готово к работе.

Работа приложения MyEditor

     Нажав клавишу F9 или щелкнув по кнопке Run, запустите приложение на выполнение. На экране появится главная форма, что свидетельствует о том, что приложение загружено в оперативную память и начало работать. Щелкните по кнопке Редактор. Теперь на экране появится форма с нашим редактором текста. При этом в объекте Memo1 содержится одно слово – Memo1.

     Поработайте в окне Memo1, как в тестовом редакторе Word: введите какой-нибудь текст из нескольких строк, удалите отдельные его части, скопируйте фрагменты текста, перенесите их из одного места в другое и т. д. Конечно, наш редактор далеко не Word, но, согласитесь, что для такой простой программы редактор не так уж плох.

     Закройте формы и вернитесь в среду Delphi.

Задания и вопросы к отчету по теме "Визуальные компоненты и вычисления"

    Откройте программу MS Word и создайте отчет по данной теме. Для этого дайте ответы на нижеследующие вопросы и задания.

1. Приведите примеры визуальных компонентов закладки Standard и закладки Additional. Для чего предназначен каждый из этих компонентов?

2. Как называется компонент, который позволяет в приложениях создавать меню? Покажите преподавателю как добавить новый пункт в меню.

3. На форме fEditor поменяйте местами панель и текстовый редактор. У текстового редактора оставьте только вертикальную полосу прокрутки. Какие действия Вы предприняли для выполнения этого задания?

4. Для чего предназначена функция RealToStr? Что нужно изменить в расчетах значения функции, чтоб результат выводился с точностью до 4-х знаков после запятой?

5. Какое свойство отвечает за текст, который содержится в компоненте строки ввода Edit? Как программно очистить строку ввода?

6. С помощью какой функции можно преобразовать строку символов в число? Всегда ли можно преобразовать такую строку в число? Приведите примеры когда это выполнить можно, а когда нельзя.

7. Какое свойство сетки StringGrid отвечает за текст своих ячеек? Если есть компонент сетки строк StrGrid, то как в его ячейку, расположенную на пересечении 4-й строки и 6-го столбца программно добавить строку Значение? Как стереть значение этой ячейки? Как программно заполнить 200 ячеек 2-го столбца сетки, начиная с первой его строки, целыми числами, которые в 3 раза больше номера своей строки?

8. Как программно очистить первых 3 столбца и 500 строк сетки StringGrid?

9. Составьте оператор, который очистит график. Как заменить название графика? Как заменить надпись на оси абсцисс графика? Как заменить круглые маркеры точек графика на прямоугольные?

10. Какие изменения нужно внести в текст программы чтобы растровый график выводился в файл с именем Graph.bmp?

11. Замените прямоугольную кнопку сохранения векторного изображения графика на квадратную кнопку с пиктограммой, подобрав для нее подходящую картинку из графического файла.

12. В какой папке Вы сохранили свою вторую программу? Покажите преподавателю файлы сохраненных рисунков графика функции. Укажите имя получившегося файла загрузочного модуля Вашего приложения и его объем.