Графические интерфейсы X: Текстовое поле ввода, слайдер картинок и простые элементы управления (build 5)

О том, для чего предназначена эта библиотека, более подробно можно прочитать в первой статье серии: Графические интерфейсы I: Подготовка структуры библиотеки (Глава 1). В конце статей каждой части представлен список глав со ссылками, и там же есть возможность загрузить к себе на компьютер полную версию библиотеки на текущей стадии разработки. Файлы нужно разместить по тем же директориям, как они расположены в архиве.

В этой статье рассмотрим новые элементы управления: «Текстовое поле ввода», «Слайдер картинок», а также простые дополнительные элементы: «Текстовая метка» и «Картинка», которые тоже могут пригодиться в различных случаях. Библиотека продолжает развиваться, и кроме добавления новых элементов управления, улучшаются и те, которые уже были созданы ранее. Поскольку библиотеку применяют в своей работе уже множество пользователей, то от них поступают различные замечания и предложения. Многие из этих просьб реализованы в новой версии библиотеки. Плюс ко всему были оптимизированы некоторые алгоритмы. Это ещё сильнее уменьшило потребление ресурсов процессора. Подробнее обо всём этом читайте далее в статье.

До сих пор в разрабатываемой библиотеке уже присутствовал элемент «Поле ввода» (класс CSpinEdit), но он предназначен только для ввода числовых значений. Пополним библиотеку ещё одним элементом, который позволит вводить в поле любой текст. Элемент «Текстовое поле ввода» может понадобиться в разных ситуациях. Например, можно создать поиск строки в файлах «песочницы» терминала. Еще одна возможность применения — предоставить конечному пользователю MQL-приложения возможность самому ввести массив символов для торговли. Словом, это могут быть любые текстовые данные, необходимые для работы.

Перечислим все составные части, из которых будет собираться элемент «Текстовое поле ввода»:

1. Фон
2. Ярлык
3. Описание
4. Поле ввода

Рис. 1. Составные части элемента «Текстовое поле ввода».

Рассмотрим подробнее, как устроен класс этого элемента.

Создаём файл TextEdit.mqh с классом CTextEdit со стандартными для всех элементов методами и подключаем его к движку библиотеки (файл WndContainer.mqh). В списке ниже перечислены свойства элемента, которые доступны для настройки пользователем:

• Цвет фона элемента
• Ярлыки элемента для активного и заблокированного состояния
• Отступы ярлыка по двум осям (x, y)
• Текст описания элемента
• Отступы текстовой метки по двум осям (x, y)
• Цвет текста в разных состояниях элемента
• Размеры поля ввода
• Отступы поля ввода по двум осям (x, y)
• Цвет поля ввода и текста поля ввода в разных состояниях
• Выравнивание текста в поле ввода (слева/справа/по центру)
• Режим показа указателя выделения текста
• Режим сброса значения в поле ввода

Режим показа указателя выделения текста означает, что при наведении курсора мыши на текстовое поле он будет дополняться ярлыком, показывающим, что здесь можно ввести текст. Ччтобы это работало, в перечисление ENUM_MOUSE_POINTER был добавлен ещё один идентификатор ( MP_TEXT_SELECT ).

Соответствующее дополнение было внесено и в класс CPointer (см. листинг кода ниже). Картинка для ярлыка указателя выделения текста доступна в архиве в конце статьи.

//+------------------------------------------------------------------+ //| Установка картинок для указателя по типу указателя | //+------------------------------------------------------------------+ void CPointer::SetPointerBmp( void )

Для создания элемента «Текстовое поле ввода» понадобятся пять приватных ( private ) методов и один публичный ( public ):

В остальном в классе CTextEdit больше нет ничего такого, что не рассматривалось бы в предыдущих статьях этой серии. Поэтому с его возможностями вы сможете ознакомиться самостоятельно. Текущая версия элемента «Текстовое поле ввода» имеет ограничение в 63 символа.

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

Перечислим все составные части, из которых будет собираться элемент «Слайдер картинок».

1. Фон
2. Кнопки последовательного переключения картинок
3. Группа радио-кнопок
4. Группа картинок, связанная с группой радио-кнопок

Рис. 2. Составные части элемента «Слайдер картинок».

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

• Цвет фона элемента
• Цвет рамки фона элемента
• Отступ для картинок по оси Y
• Отступы для кнопок последовательного переключения картинок по двум осям (x, y)
• Отступы для радио-кнопок по двум осям (x, y)
• Отступ между радио-кнопками

Для создания элемента «Слайдер картинок» понадобятся пять приватных ( private ) методов и один публичный ( public ):

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

Перед тем, как вызвать главный метод создания элемента, нужно добавить картинки в массив с помощью метода CPicturesSlider::AddPicture(). Если не передать в качестве единственного аргумента этого метода путь к изображению, будет применяться путь по умолчанию .

Для показа картинки из группы нужно использовать метод CPicturesSlider::SelectPicture(). Этот метод будет вызываться при нажатии кнопок-переключателей и радио-кнопок в обработчике класса CPicturesSlider.

При нажатии на кнопки для последовательного переключения картинок в обработчике элемента вызываются методы CPicturesSlider::OnClickLeftArrow() и CPicturesSlider::OnClickRightArrow(). В листинге ниже показан код метода для левой кнопки. События нажатия на кнопки слайдера картинок можно при необходимости отследить в пользовательском классе MQL-приложения.

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

В качестве дополнения в библиотеку включены два новых класса CTextLabel и CPicture для создания простых элементов интерфейса «Текстовая метка» и «Картинка». Они могут использоваться как отдельные объекты, без жёсткой привязки, к какому-либо другому элементу. Их содержание очень простое. В классе CPicture пользователь может изменить только одно свойство – это путь к картинке. Для этого предназначен метод CPicture::Path(). Если не указать свой путь, то будет использоваться картинка по умолчанию . Картинку можно изменить программно в любой момент и после создания графического интерфейса MQL-приложения.

//+------------------------------------------------------------------+ //| Установка картинки | //+------------------------------------------------------------------+ void CPicture::Path( const string path)

Что касается элемента «Текстовая метка», то здесь тоже всё довольно просто и пользователь может установить всего лишь четыре свойства:

• Текст метки
• Цвет текста
• Шрифт
• Размер шрифта

Для более простого выбора шрифта был написан дополнительный класс CFonts. В нём доступны 187 шрифтов. Это системные шрифты терминала, список которых вы уже наверняка видели в настройках некоторых графических объектов.

Рис. 3. Системные шрифты терминала.

Файл со шрифтами (Fonts.mqh) находится в директории "MetaTrader 5\MQL5\Include\EasyAndFastGUI\Fonts.mqh" и для полного доступа во всей схеме библиотеки подключен к файлу Objects.mqh:

В классе CFonts есть только два публичных метода для получения размера массива шрифтов и получения названия шрифта по индексу . Массив шрифтов инициализируется в конструкторе класса .

CFonts( void )

При вызове метода CFonts::FontsByIndex() осуществляется корректировка, предотвращающая выход за пределы массива :

1. Исправлен некорректный показ всплывающих подсказок в диалоговых окнах. Теперь статус кнопки подсказок на главном окне при нажатии распространяется на все окна графического интерфейса. При нажатии на кнопку генерируется сообщение с новым идентификатором события ON_WINDOW_TOOLTIPS (см. файл Defines.mqh).

Соответственно, в класс CWindow добавлен метод OnClickTooltipsButton() для обработки нажатия на кнопке всплывающих подсказок:

Для того, чтобы всё это работало в движке библиотеки (класс CWndEvents), добавлен метод OnWindowTooltips() для обработки события с идентификатором ON_WINDOW_TOOLTIPS:

2. Добавлена возможность изменять текст в описании следующих элементов после их создания:

Рис. 4. Список элементов с возможностью изменения текста после создания.

3. Во всех элементах, где это могло понадобиться, теперь можно установить картинку (см. таблицу ниже). Кроме этого, добавлена возможность изменять картинки элементов уже после их создания:

Рис. 5. Список элементов с возможностью изменения картинки после создания.

Для замены картинки во всех перечисленных в таблице выше элементах есть методы IconFileOn() и IconFileOff().

4. Добавлена возможность программно управлять состоянием всех типов кнопок и вкладок (нажата/отжата) после их создания. В таблице ниже показаны элементы, к которым относится это дополнение:

Рис. 6. Список элементов с возможностью изменения состояния (нажата/отжата) после создания.

5. Оптимизирован алгоритм подсветки пунктов при наведении курсора мыши в следующих элементах:

Рис. 7. Элементы с оптимизацией алгоритма подсветки пунктов элемента.

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

Далее в качестве примера рассмотрим, как это было реализовано в классе CListView. Для реализации описанного выше нужно было добавить (1) поле класса m_prev_item_index_focus для сохранения индекса последнего в фокусе пункта, (2) метод CListView::CheckItemFocus() для проверки фокуса над пунктом и (3) изменить алгоритм в методе CListView::ChangeItemsColor().

Метод CListView::CheckItemFocus() вызывается только в том случае, если курсор мыши зашёл в область элемента (в данном случае списка – CListView), а также когда осуществлён переход курсора мыши с одного пункта на другой (см. листинг кода ниже). Как только пункт, над которым находится курсор мыши, найден, его индекс сохраняется .

Вызов метода CListView::CheckItemFocus() осуществляется в методе CListView::ChangeItemsColor() в случаях, как это было описано в предыдущем абзаце (см. листинг кода ниже):

В обработчике событий CListView::OnEvent() вызов метода CListView::ChangeItemsColor() осуществляется только если курсор мыши находится в области элемента. Как только курсор вышел из области элемента, устанавливаются цвета по умолчанию и сбрасывается значение индекса пункта . Ниже показана сокращённая версия обработчика событий.

//+------------------------------------------------------------------+ //| Обработчик событий | //+------------------------------------------------------------------+ void CListView::OnEvent( const int id, const long &lparam, const double &dparam, const string &sparam)

Такой же принцип реализован в классах CTable, CCalendar и CTreeView, но с некоторыми отличиями, учитывающими особенности каждого элемента.

6. При нажатии на кнопку типа CIconButton в двойном режиме (когда кнопка не отжимается после нажатия) показывается другая картинка, если она установлена. Картинку для нажатой кнопки можно установить с помощью методов CIconButton::IconFilePressedOn() и CIconButton::IconFilePressedOff() .

7. Добавлена возможность программно выделять ряд в таблице (CTable). Для этого воспользуйтесь методом CTable::SelectRow() . Указание индекса уже выделенного ряда снимает выделение.

8. Устранена недоработка в отображении элементов выделенной вкладки элемента типа CIconTabs. Проблема возникала при открытии и разворачивании формы с этим типом вкладок.

Напишем тестовое приложение, в котором вы сможете протестировать все новые элементы и самостоятельно попрактиковаться, испытав различные их режимы. В графическом интерфейсе приложения создадим элемент «Вкладки» (класс CTabs), в котором будет четыре вкладки со следующим содержанием:

1. Первая вкладка:

• Прогресс-бар (CProgressBar).
• Текстовое поле ввода (CTextEdit).
• Комбо-бокс с выпадающим списком (CCombobox).
• Поле ввода для числовых значений (CSpinEdit).
• Кнопка для вызова цветовой палитры (CColorButton).
• Текстовая метка (CTextLabel).

Для всех элементов, кроме текстовой метки, установим ярлык. У элементов «Прогресс-бар» и «Текстовое поле ввода» через определённые временные интервалы будем изменять текстовое описание элемента, чтобы продемонстрировать, что такая возможность теперь доступна. В список комбо-бокса поместим названия всех шрифтов из класса CFonts. Событийную модель тестового MQL-приложения настроим таким образом, чтобы выбор шрифта из списка комбо-бокса отражался на текстовой метке. Точно так же свяжем с текстовой меткой числовое поле ввода для изменения размера шрифта и выбор цвета в палитре.

Обработчик событий для управления параметрами элемента «Текстовая метка» тогда будет выглядеть так:

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

Рис. 8. Группа элементов на первой вкладке.

2. На второй вкладке поместим только один элемент – «Слайдер картинок» (класс CPicturesSlider). Добавим в группу только три картинки по умолчанию, чтобы вы могли быстро протестировать этот элемент самостоятельно. Для корректной работы элемента подготовьте картинки одинакового размера.

Рис. 9. Элемент «Слайдер картинок» на второй вкладке.

Для программного переключения картинок воспользуйтесь методом CPicturesSlider::SelectPicture().

3. На третьей вкладке будет таблица типа CTable. Для программного выделения ряда воспользуйтесь методом CTable::SelectRow().

Рис. 10. Элемент «Таблица» на третьей вкладке.

4. На четвёртой вкладке расположим три элемента: (1) календарь, (2) выпадающий календарь и (3) кнопку с двумя разными картинками для состояний нажата/отжата.

Рис. 11. Группа элементов на четвёртой вкладке.

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

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

Рис. 12. Структура библиотеки на текущей стадии разработки.

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

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