MSEide+MSEgui - Free Pascal и X-приложения

Материал из Mageia Russian Community Wiki
Версия от 14:44, 11 марта 2014; Romkaromka (обсуждение | вклад)

(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

Начальная программа

Существует несколько способов написать программу на Free Pascal, используя для отрисовки её интерфейса только иксовые библиотеки: MSEide+MSEgui, fpGUI. Это позволяет не зависеть от gtk, qt, а только от иксов.

В этой статье рассмотрим MSEide+MSEgui и простой пример программы сложения двух чисел. Нам потребуется установить пакет: mseide-msegui.

Теперь запустите mseide-msegui и выберите Проект -> Новый -> Из шаблона:

Mseide1.png

Выберите default_all_langs.prj, нажмите кнопку "Готово" (Вы можете выбрать default.prj, если Вы хотите, чтобы Ваша программа выдавала различные служебные окна на английском языке; но если Вы хотите, чтобы язык этих служебных окон был в соответствии с текущим языком системы, то выберите default_all_langs.prj; при этом помните, что исполняемый файл программы только с одним английским языком будет меньшего размера, далее об этом будет написано подробнее):

Mseide2.png

Вам будет предложено ввести имя нового проекта и по-умолчанию предлагается сделать это в директории /home/user/Документы (здесь Вы можете создать поддиректории для различных Ваших проектов), введите любое имя, к примеру, summa, нажмите кнопку "Готово":

Mseide3.png

Щёлкните на появившуюся форму - появится Инспектор объектов, в котором укажите заголовок будущего окна - это свойство caption, введите в нём "Сумма":

Mseide4.png

У любой программы должен быть выход из неё. Добавим на форму кнопку, для этого в Палитре компонентов выберите мышкой на вкладке Widget компонент tbutton (при наведении мышкой на компоненты появляются всплывающие подсказки):

Mseide5.png

Теперь щёлкните мышкой на форме - появится кнопка, которую можно растянуть любого размера и переместить. Щёлкните по этой кнопке на форме и в Инспекторе объектов введите текст, которой будет размещён на кнопке - за это отвечает свойство caption, напишите в нём "Выход":

Mseide6.png

Можно оставить имя кнопки, предложенное по-умолчанию, но правилом хорошего тона считается писать понятные имена, чтобы любой, читающий код, смог легко понять его, поэтому смените имя кнопки с tbutton1, предложенного по-умолчанию, на tbutton_exit - за это отвечает свойство Name:

Mseide10.png

Теперь надо запрограммировать событие, которое возникает при щелчке мыши по этой кнопке, чтобы программа прекратила своё выполнение. Смотрите чтобы кнопка на форме была выделена, найдите в Инспекторе объектов событие onexecute и введите имя процедуры, которая будет обрабатывать это событие. Введите, к примеру, onexit и нажмите клавишу Enter:

Mseide7.png

Будет автоматически сформирована процедура - обработчик события:

procedure tmainfo.onexit(const sender: TObject);
begin
end;

Мы знаем, что при нажатии на кнопку "Выход" должно произойти закрытие формы, поэтому впишите Close:

procedure tmainfo.onexit(const sender: TObject);
begin
  Close;
end;

Вы можете нажать на кнопку запуска и проверить как работает запрограммированная Вами кнопка "Выход":

Mseide8.png

Простейшая программа готова. Мы научились помещать на форму компоненты, вписывать их свойства, а также писать обработчики событий.

Программа сложения двух чисел

Теперь продолжим писать программу и научим её считать сумму двух чисел.

Найдите в Палитре компонентов компонент tintegeredit на вкладке Edit и щёлкните на нём мышкой, а затем щёлкните на форме.

Mseide9.png

Впишите для появившегося на форме компонента его имя A и заголовок A. Имя - это свойство Name, а заголовок - это свойство caption, скрытое как frame:

Mseide11.png

Аналогично создайте ещё один компонент tintegeredit, только назвав его именем B, указав его заголовок B.

Теперь нам нужен компонент, который бы вывел полученную сумму A + B, но при этом его значение было бы запрещено к изменению пользователем. Это компонент tintegerdisp на вкладке Widget Палитры компонентов:

Mseide12.png

Поместите его на форму, укажите его имя Name как C, а заголовок caption (см. frame) как "A + B =":

Mseide13.png

Выделите на форме щелчком мышки компонент A (tintegeredit), найдите в Инспекторе объектов у него событие ondataentered - это событие возникает при вводе данных - и впишите обработчик события, к примеру, назовите его summa и нажмите клавишу Enter:

Mseide14.png

В коде будет автоматически сформирована процедура - обработчик этого события:

procedure tmainfo.summa(const sender: TObject);
begin
end;

Впишите в ней следующее:

procedure tmainfo.summa(const sender: TObject);
begin
  C.value:= A.value + B.value;
end;

То есть значения у компонентов tintegeredit, tintegerdisp хранятся в свойстве value, складываем их и результирующее значение записываем в C.value. По-умолчанию они нулевые (можете указать любые другие стартовые значения):

Mseide15.png

Теперь сделайте всё точно также для B (tintegeredit). Обратите внимание, что у них будет один и тот же обработчик события, названный summa.

Запустите программу на выполнение:

Mseide16.png

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

Mseide17.png

Обратите внимание, что если бы Вы выбрали шаблон проекта default.prj, то Вы увидели бы текст ошибки в этом служебном окне на английском языке, но так как Вы выбрали default_all_langs.prj, то Вы видите, что язык был автоматически определён как русский, и это служебное окно русское.

Оформление красивого интерфейса программы

Наша программа получилась чёрно-белая. Разукрасим её. Рассмотрим наложение градиентов.

Выберите на форме компонент A (tintegeredit), а в Инспекторе объектов для него найдите свойство face и нажмите кнопку "..." (<disable> изменится на <tface>):

Mseide18.png

Теперь выберите face -> fade -> color.count и нажмите кнопку "...":

Mseide19.png

Откроется редактор Fade. В нём нарисуйте требуемый градиент:

Mseide20.png

Теперь сделайте для B (tintegeredit) градиент такой же как для A (tintegeredit). Для этого нажмите кнопку "Сохранить" в редакторе Fade и сохраните градиент в виде файла, а для B (tintegeredit) нажмите в редакторе Fade кнопку "Загрузить" и загрузите градиент, который Вы сохранили в файле. Для C (tintegerdisp) нарисуйте градиент самостоятельно. Получится примерно так:

Mseide21.png

Кнопку "Выход" тоже разукрасим. Её разрисовка ничем не отличается от вышеописанного. Поменяем лишь направление градиента face -> fade -> direction -> gd_up (что означает снизу вверх):

Mseide22.png

Раскрасим форму. Щёлкните на ней мышкой и выберите свойство color как cl_transparent (то есть прозрачный):

Mseide23.png

Остальное, как пользоваться редактором Fade, Вы уже знаете. У нас получится примерно так:

Mseide24.png

Запущенная программа будет значительно красивее, чем чёрно-белая:

Mseide25.png

Заголовок окна зависит от настроек системы, от темы оформления:

Mseide26.png

Обратите внимание на поддержку русского языка - получившаяся программа подсчёта суммы на русском языке, а среда MSEide, в которой она была разработана, также русская.

Подробнее:

http://freepascal.ru/article/mse

Об FpGUI: FpGUI - Free Pascal и X-приложения