Урок Delphi | Создаем "Редактор"

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

 

Для это го в папке C:\Program Files\Borland\DeIphi\Projects создадим вложенную папку Redaktor и сохраним файлы будущего проекта.

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

 

Одна из них— это основная надпись, значение которой можно изменять путем ввода нового текста в текстовое окно. Вторая надпись вспомогательного характера содержит пояснение к текстовому окну;· текстовое окно. Введенный в него текст будет дублироваться в укрупненном виде в надписи; две экранные кнопки. Одна из них закрывает программу.

 

Вторая выводит сведения об авторе· сама форма, в которую мы помещаем все перечисленные компоненты. Настройку элементов интерфейса мы начнем с формы. Форма является таким же объектом программы, как и все прочие ее компоненты, и имеет ряд свойств, которые можно изменять при ее настройке.

 

Для того чтобы начать работу с формой, достаточно щелкнуть мышью на любом ее свободном месте.При этом в окне инспектора объектов будет отображаться объект по имени Form1, т. е. сама основная форма.В окне инспектора выделяем вкладку Properties (Свойства) и находим на этой вкладке свойство Caption.

 

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

 

Приступаем к программированию в Delphi.

Следующим шагом станет изменение цвета формы.При создании формы по умолчанию она получает серый цвет.Для того чтобы сделать фон формы бо лее ярким и красочным, нужно на вкладке Properties (Свойства) объекта Form1 найти свойство color.

 

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

 

Для нашей формы выбираем цвет clSkyBlue (небесно-голубой).Приставка CI, которую включает в себя название каждого из представленных в палитре цветов, представляет собой сокращение от английского слова Color (цвет).На этом работу с самой формой мы завершаем.

Затем необходимо создать надпись, которую в дальнейшем можно будет редактировать, заменяя ее своим текстом.Для создания надписи используем компонент Labe1, а соответствующий объект получит название Label1.

 

Чтобы по содержанию надписи можно было сразу понять ее назначение, свойству Caption присваиваем значение: Здесь отображается текст, вводимый пользо вателем.Затем переходим к свойству Font того же объекта и щелкаем кнопку построителя.

 

В открывшемся диалоговом окне выбираем какой-либо цвет, контрастирующий с фоном формы (например, ярко-красный) и увеличиваем размер шрифта до 14 пунктов.Далее с помощью панели компонентов выводим на форму еще один объект— надпись.

 

Он получит от системы наименование Label2. Расположим данный объект ниже первого. Он должен находиться примерно в середине формы по вертикали и ближе к левому ее краю по горизонтали.

 

Содержанием данной надписи будет сообщение о том, что в окно, находящееся рядом с этой надписью нужно вводить текст:

Вводите текст в это окно.

 

Цвет данной надписи мы изменять не будем (он останется по умолчанию черным), а размер ее сделаем несколь ко меньшим, чем у основной надписи Labeli (например, 12 пунктов). Справа от надписи Label2 расположим то самое текстовое окно, в которое пользователь может вводить текст произвольного содержания.

 

Для создания окна используется компонент Edit, который находится на той же стандартной вкладке панели компонентов, что и компонент Label (не путайте компонент Edit с разделом меню, имеющим то же название). Созданный с помощью этот компонента объект получает имя Edit1.Методом протягивания расширяем данный объект почти до правого края формы.

 

Данный объект не имеет свойства Caption, но имеет сходное с ним свойство Text. Сразу после создания объекта данное свойство имеет значение Editi, оно совпадает с именем объекта. Мы его удалим, а но вое значение вводить не будем.

 

Таким образом, после запуска программы на выполнение текстовое окно останется пустым и будет свободно для ввода текста. Подобно надписи, объект "текстовое окно" имеет свойство Font с та ким же построителем, открывающим диалоговое окно настройки шрифта.Цвет шрифта мы в данном случае изменять не будем, а размер его сделаем равным 10. Когда в ходе работы программы мы будем вводить в данное окно текст, то в нем будет виден курсор, имеющий форму вертикальной черты и отмечающий текущую позицию ввода текста.Текст, который мы будем вводить в данное окно, можно по ходу дела исправлять.

 

Напомним, что для удаления отдельных символов используются клавиши <Delete> и <Backspace>.


Если требует ся удалить сразу целый фрагмент введенного текста, то можно выделить этот фрагмент клавишей <стрелка влево> или <стрелка вправо> при нажатой кла више <Shift> и затем нажать клавишу <Delete>.Для быстрого перехода в на чало или конец вводимого текста достаточно нажать соответственно клавиши <Ноте> или <End>.Все описанные действия не надо специальным образом программировать. Эту задачу берет на себя сама система Delphi.Для завершения создания интерфейса программы осталось разместить на форме еще два объекта — командные кнопки, которые будут управлять рабо той приложения.Для создания этих кнопок используем компонент Button. Первый из этих объектов получит по умолчанию имя Button1.

 

Мы поместим его в левой нижней части формы. Щелчок на этой кнопке будет приводить к тому, что введенная пользователем в текстовом окне фраза будет продубли рована в виде надписи вверху формы.Изменим для этой кнопки свойство Caption.

 

Вместо имеющегося по умолчанию заголовка Button1 введем сле дующий: изменить текст надписи. Воспользуемся свойством Font объекта Buttonl для того, чтобы увеличить шрифт надписи на кнопке до 10 пунктов.Кроме того, нужно увеличить методом протягивания размер объекта таким образом, чтобы надпись была целиком видна на экранной кнопке.

 

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

После этого создаем второй объект-кнопку, которая по умолчанию получит имя Button2.Эту кнопку мы разместим в правой нижней части формы и свой­ству Caption присвоим значение Закрыть программу.

 

Увеличим шрифт на кнопке до 10 пунктов и увеличим размеры кнопки для нормального отобра жения на ней надписи.

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

 

Для объекта Button2 выбираем на вкладке Events (События) событие onclick и пишем для него код, состоящий из слова Close.Эта кнопка будет закрывать программу подобно кнопке Выход из предыдущей программы.

 

Вид созданной процедуры также аналогичен соответствующей процедуре в предыдущем проекте.Для того чтобы разобраться в том, какой код нужно писать для кнопки Button1, необходимо прежде всего понять, что это кнопка должна делать. Как мы уже знаем, она должна изменять надпись, т. е. изменять ее свойст во caption.

 

Изменение это производится путем присвоения свойству Label1.Caption нового значения, отличного от предыдущего. Как уже извест но по предыдущей программе, операция присваивания состоит из знака ра венства и двоеточия.

 

Само же это новое значение содержится в объекте Edit1, а точнее в его свойстве Text.

 

Поэтому мы и запишем это свойство так: Edit1.Text.

 

Следовательно операция изменения заголовка надписи будет вы­глядеть следующим образом:

Label1.Caption:=Edit1.Text;

Для того чтобы вставить эту строку в подпрограмму, описывающую реакцию кнопки Button1, нужно выделить эту кнопку на форме, выделить в инспекто ре объектов вкладку Events (События) и найти событие onclick, для которого и указать этот код.

В результате указанных действий процедура Buttonlciick будет выглядеть следующим образом:

 

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

Текст программы "Редактор" 

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

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

 

После щелчка на экранной кнопке Изменить текст надписи курсор в текстовом окне исчез нет, и мы увидим введенный текст, написанный вверху формы большими красными буквами (рис. 2).

 

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

 

Тогда можно вводить в окно новый текст, который отобразится в верхней части формы после щелчка на экранной кнопке.

 

На нашем сайте есть целый видеоурок посвященный созданию текстовго редактора: смотреть

dle

Помоги проекту! Расскажи друзьям об этом сайте: