Урок 14 - Знакомство с компонентами (часть 5/12)

  В этом уроке мы переходим на вкладку Win32! Первый компонент, который мы будем рассматривать на этой вкладке называется ImageList или как говорят в народе "хранилище картинок".
Кидаем данный компонент на форму и щелкаем по нему 2 раза. Нам открывается окно редактора картинок. Здесь жмем на кнопку "Add..." и выбираем понравившуюся картинку.
Я выбрал две картинки из папки, которая устанавливается вместе с Delphi и находится вот по такому адресу:
C:\Program Files (x86)\Common Files\Borland Shared\Images\Buttons. И так, выбираем картинки и нажимаем кнопку "Открыть". Далее появится окно, в котором Delphi спросит: "Разделить ли картинку на 2 части, то есть на левую половинку и правую)". Нажимаем кнопку "Yes" (или кнопку "Yes to All", если вы как и я выбрали две картинки).

Если все сделано правильно, то картинки отобразятся в редакторе картинок.



Заметьте, что каждая картинка получила свой индекс, он отображается снизу картинки. Теперь удалим "бледные" картинки (на скриншоте под индексами 1 и 3), выделив их и нажав кнопку "Delete". Что они, мешать нам будут? :)



Закрываем редактор картинок, нажимая на кнопку "OK", чтобы все изменения сохранились.

Далее выделяем на форме знакомый нам компонент MainMenu. У него есть свойство Images, в котором нужно выбрать наш ImageList из выпадающего списка.



Теперь кликнем два раза по компоненту MainMenu. Откроется окно редактирования меню, в котором выбираем пункт "Файл -> Посчитать".



В инспекторе объектов ищем свойство ImageIndex.



ImageIndex это индекс картинки в нашем "хранилище" (ImageList), по умолчанию оно имеет значение "-1", то есть картинка не выбрана. выбираем любую картинку из "хранилища", изменяя индекс например на "0" (ноль), а пункту "Файл -> Выход" поменяем индекс на "1" (единица). Всё готово, закрываем редактор и компилируем программу. Наблюдаем результат.



По-моему, всё так, как мы и хотели! Кстати, проделать ту же работу можно и с компонентом PopupMenu.

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

Поместим компонент PageControl на форму, кликнем по нему правой кнопкой мыши и выберем пункт "New Page", чтобы создать новую вкладку. Таким же образом создайте еще три вкладки, чтобы в итоге у вас получилось четыре вкладки.

Сразу объясню один момент, чтобы не было ошибок и недопонимания. Компонент PageControl имеет два выделения: Выделение всего компонента и выделение отдельной вкладки. Если вы выделили весь компонент, то черные квадратики, обозначающие выделение будут располагаться над выбором вкладок. Если же вы выделили отдельную вкладку, то черные квадратики будут находиться под выбором вкладок.
Не знаю поняли вы меня или нет, поэтому покажу на скриншоте.





И так, выделите первую вкладку. В инспекторе объектов измените свойство Caption на "Калькулятор". Теперь это же свойство, только у второй вкладки заменяем на "История". Свойство Caption третей вкладки заменяем на "Диаграмма". Про название четвертой вкладки мы поговорим позже.
У компонента PageControl есть еще такое интересное свойство MultiLine. Если оно принимает значение True, то вкладки, при недостаточном месте, располагаются в несколько строк.
Свойство TabPosition определяет позицию отображения вкладок.
Кстати, компонент PageControl тоже имеет свойство Images, в котором вы можете выбрать наше "хранилище картинок" и назначить вкладкам определенные картинки по индексу. Ну вот и всё, компонент готов!

Приступим к использованию этого компонента по назначению, а именно к экономию места в программе.
Если сейчас попробовать перетащить Edit1 на первую вкладку компонента PageControl, то наш Edit1 будет находиться как бы под компонентом PageControl. Что бы перенести компоненты, которые находились на форме раньше чем PageControl, нужно выделить эти компоненты, вырезать их и вставить в PageControl. И так, выделяем мышкой:

• Label1
• Edit1
• Edit2
• RadioButton1
• RadioButton2
• RadioButton3
• RadioButton4
• Button1
• Button2
• ComboBox1

Нажимаем правой кнопкой мыши по одному из выделенных компонентов и выбираем пункт меню "Edit -> Cut" (вырезать).
Теперь выделяем вкладку "Калькулятор" и вставляем в нее вырезанные компоненты, выбирая в пункте меню "Edit -> Paste" (вставить).
То же самое проделайте с остальными вкладками, вставляя в них нужные компоненты. У меня получилась вот так.







Сейчас я предлагаю скомпилировать программу и потестировать наш новый интерфейс! Если всё отлично и результат вас устраивает, то переходим к изучению следующего и последнего на этот урок компонента RichEdit.

RichEdit по сути то же самое, что и Memo, но с более расширенными возможностями. Например форматирование отдельных абзацев текста и поддержка формата ".rtf".
Разместим RichEdit в четвертой вкладке компонента PageControl, а вкладку переименуем в "RichEdit". Еще нам потребуется парочка кнопок, поэтому кинем их туда же, куда и RichEdit.

Переходим из визуальной части программы во внутреннюю и начинаем печатать код.
Создаем обработчик события Button3Click и пишем код:

procedure TForm1.Button3Click(Sender: TObject);
begin
RichEdit1.Lines.Add('Добавленная строка');
end;

Компонент RichEdit имеет свойство Lines, точно такое же как и в Memo. Этот код, как вы уже наверно догадались, добавляет в самый конец новую строку в RichEdit.
Теперь изменим код в обработчике на следующий:

procedure TForm1.Button3Click(Sender: TObject);
begin
RichEdit1.Text:='Новый текст';
end;

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

procedure TForm1.Button3Click(Sender: TObject);
begin
RichEdit1.Text:='Новый текст'+#13#10+'Новая строка';
end;

Сначала мы присваиваем новый текст в RichEdit, потом прибавляем комбинацию "#13#10" и потом еще прибавляем текст новой строки.

Копипаст для ознакомления:
Тип данных string представляет собой совокупность одного или нескольких символов, каждый из которых записывается в виде символа "#" и числа от 0 до 255 (в десятичной или шестнадцатеричной форме) - каждая такая комбинация обозначает соответствующий ASCII-символ.
Комбинация "#13#10" - это комбинация возврата каретки и символа новой строки.
"#13" - это ASCII-эквивалент значения CR (carriage return - возврат каретки);
"#10" представляет собой LF (line feed - признак новой строки).

Как я говорил раньше, RichEdit позволяет форматировать текст, давайте это сейчас и сделаем:

procedure TForm1.Button3Click(Sender: TObject);
begin
RichEdit1.Paragraph.Numbering:=nsBullet;
end;

Если сейчас скомпилировать программу, то строка, на которой стоит каретка будет отображаться в маркированном списке.
Так же можно выровнять наш текст, по левому краю, по центру или по правому.
Выравнивание по центру:

procedure TForm1.Button3Click(Sender: TObject);
begin
RichEdit1.Paragraph.Alignment:=taCenter;
end;

Таким же образом можно изменять и выделенный текст. Перейдем в обработчик события четвертой кнопки Button4Click и напишем код:

procedure TForm1.Button4Click(Sender: TObject);
begin
RichEdit1.SelAttributes.Color:=clRed;
end;

Запускаем программу, выделяем какой-нибудь текст и нажимаем на четвертую кнопку. Текст окрашивается в красный цвет. Вместо clRed можно написать любые другие цвета, например clGreen, clBlue, clYellow и так далее...
Тут же можно изменить стиль текста:

procedure TForm1.Button4Click(Sender: TObject);
begin
RichEdit1.SelAttributes.Color:=clRed; // Окрашивание
RichEdit1.SelAttributes.Style:=[fsbold]; // Жирный стиль текста
end;

Вот таким образом происходит форматирование текста в компоненте RichEdit.

Как я говорил раньше, компонент RichEdit умеет работать с форматом ".rtf". Давайте научимся сохранять текст в этом формате и загружать его обратно в RichEdit.
Добавим для удобства еще две кнопки на четвертую вкладку компонента PageControl и назовем их "Сохранить" и вторую кнопку "Загрузить".

В обработчике события для кнопки "Сохранить" пишем код:

procedure TForm1.Button5Click(Sender: TObject);
begin
RichEdit1.Lines.SaveToFile('MyFile.rtf'); // Save = Сохранить
end;

А для кнопки "Загрузить" следующий код:

procedure TForm1.Button6Click(Sender: TObject);
begin
RichEdit1.Lines.LoadFromFile('MyFile.rtf'); // Load = Загрузить
end;

В одинарных кавычках указываем путь, куда сохраняем файл и откуда загружаем файл. Файл сохранится в папку, где находится сама программа, то есть сам ".exe" файл.
Теперь вы можете открыть сохраненный файл "MyFile.rtf" например в программе Microsoft Office Word.
Сейчас измените текст в RichEdit и загрузите сохраненный файл.

В следующем уроке мы продолжим изучение компонентов с вкладки Win32.

Ну вот и всё! Удачи!
Встретимся в следующем уроке!

Добавил(а): SyGaK	Дата: 2012-12-22
Ура! Спасибо! Супер!

Добавил(а): Mikhail	Дата: 2013-03-19
Круто . Когда следующий урок

Добавил(а): Nester_Novopolotsk	Дата: 2016-03-12
спасибо за урок. все получилось, но где теперь найти место в голове, чтобы это все запомнить=)

Добавил(а): pronin106	Дата: 2017-05-24
Спасибо за урок. Было бы круто, если бы открывалось окно с выбором файла