Обучение - Создание GUI калькулятора

В этом обучении мы попытаемся показать создание базового калькулятора, такого же, как в Windows. Используйте функции GUI AutoIt.
Предполагается, что вы уже знакомы с созданием и запуском скриптов AutoIt как показано в примере.

Создание GUI

В этой части описания мы начнем с создания GUI. Хорошо иметь идею внешнего вида основываясь на программе.
Итак, сколько потребуется элементов и какого типа? В данном случае мы будем использовать такой же внешний вид, что и у стандартного калькулятора в Windows.
На Рис. 1, мы видим завершённый вид нашего калькулятора.

Рис. 1

Чтобы начать создание GUI, добавим некоторые библиотеки, которые объявляют константы, которые мы будем использовать в нашем GUI. Эти константы содержат числовые значения стилей и параметров, которые определяют внешний вид каждого элемента, а также значения событий и состояния. (Обычно, "GUIConstantsEx.au3" уже включён и находится в установленной папке AutoIt). Позже мы увидим как они применяются, а в данный момент мы включим библиотеки в свой скрипт, добавив следующие строки:

#include <GUIConstantsEx.au3>
#include <StaticConstants.au3>
#include <EditConstants.au3>
#include <WindowsConstants.au3>

Для начала создания своего GUI укажем параметры окна, такие как заголовок, размеры и координаты, смотрите GUICreate(). Значения окна могут быть следующими:
Title = "Калькулятор"
Width = 260
Height = 230
Следовательно, следующая строка нашего скрипта должны быть:

GUICreate("Калькулятор", 260, 230)

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

пример.

Придумывание имён переменных
Придумывание имён переменных является личным предпочтением, но важно осмысленно давать имена, чтобы было легко понять назначение переменной по её названию. Как видно из ниже следующего примера, используется синтаксис: $CTRL_btn1, который означает "Элемент GUI (CTRL), являющийся кнопкой (btn), с индексом 1", и с параметрами для этой кнопки, в том же примере:
Текст ="1", Левый = 54, Верхний = 138, Ширина = 36, Высота = 29

$CTRL_btn1 = GUICtrlCreateButton("1", 54, 138, 36, 29)

Как я упомянул прежде, это делает код более понятным.

Создание элементов
Как видно на рисунке Рис.1, необходимо создать несколько кнопок, с помощью функции GUICtrlCreateButton(). Кнопки, которые запланированы: цифры от 0 до 9, кнопки операций, кнопки памяти, такие как "Очистка памяти" ("MC" - Memory Clear), "Восстановление из памяти" ("MR" - Memory Restore), и т.д.
Вы можете скопировать код показанный ниже, чтобы добавить в свой скрипт:

; Кнопки с цифрами
Local $CTRL_btn0 = GUICtrlCreateButton("0", 54, 171, 36, 29)
Local $CTRL_btn1 = GUICtrlCreateButton("1", 54, 138, 36, 29)
Local $CTRL_btn2 = GUICtrlCreateButton("2", 93, 138, 36, 29)
Local $CTRL_btn3 = GUICtrlCreateButton("3", 132, 138, 36, 29)
Local $CTRL_btn4 = GUICtrlCreateButton("4", 54, 106, 36, 29)
Local $CTRL_btn5 = GUICtrlCreateButton("5", 93, 106, 36, 29)
Local $CTRL_btn6 = GUICtrlCreateButton("6", 132, 106, 36, 29)
Local $CTRL_btn7 = GUICtrlCreateButton("7", 54, 73, 36, 29)
Local $CTRL_btn8 = GUICtrlCreateButton("8", 93, 73, 36, 29)
Local $CTRL_btn9 = GUICtrlCreateButton("9", 132, 73, 36, 29)
Local $CTRL_btnPeriod = GUICtrlCreateButton(".", 132, 171, 36, 29)

; Кнопки памяти
Local $CTRL_btnMClear = GUICtrlCreateButton("MC", 8, 73, 36, 29)
Local $CTRL_btnMRestore = GUICtrlCreateButton("MR", 8, 106, 36, 29)
Local $CTRL_btnMStore = GUICtrlCreateButton("MS", 8, 138, 36, 29)
Local $CTRL_btnMAdd = GUICtrlCreateButton("M+", 8, 171, 36, 29)

; Операции
Local $CTRL_btnChangeSign = GUICtrlCreateButton("+/-", 93, 171, 36, 29)
Local $CTRL_btnDivision = GUICtrlCreateButton("/", 171, 73, 36, 29)
Local $CTRL_btnMultiplication = GUICtrlCreateButton("*", 171, 106, 36, 29)
Local $CTRL_btnSubtract = GUICtrlCreateButton("-", 171, 138, 36, 29)
Local $CTRL_btnAdd = GUICtrlCreateButton("+", 171, 171, 36, 29)
Local $CTRL_btnAnswer = GUICtrlCreateButton("=", 210, 171, 36, 29)
Local $CTRL_btnInverse = GUICtrlCreateButton("1/x", 210, 138, 36, 29)
Local $CTRL_btnSqrt = GUICtrlCreateButton("Sqrt", 210, 73, 36, 29)
Local $CTRL_btnPercentage = GUICtrlCreateButton("%", 210, 106, 36, 29)
Local $CTRL_btnBackspace = GUICtrlCreateButton("Backspace", 54, 37, 63, 29)
Local $CTRL_btnClearE = GUICtrlCreateButton("CE", 120, 37, 62, 29)
Local $CTRL_btnClear = GUICtrlCreateButton("C", 185, 37, 62, 29)

Local $CTRL_EdtScreen = GUICtrlCreateEdit("0.", 8, 2, 239, 23)
Local $CTRL_LblMemory = GUICtrlCreateLabel("", 12, 39, 27, 26)

Указаны создание всех элементов GUI, это достаточно, чтобы добавить следующую строку - функцию GUISetState(), которая отобразит GUI.

GUISetState()

Цикл событий
Как представлено в одном из

, функция GUIGetMsg() выдаёт в качестве результата событие GUI, и оно помещается в переменную, в данном случае в $msg, которая сравнивается каждый раз в повторяющемся цикле Do...Until. В этом примере мы добавили простое событие, которое повторяется в бесконечном цикле, пока событие не станет равным константе $GUI_EVENT_CLOSE (равной -3) и это приведёт к закрытию окна и завершению скрипта. Таким образом следующие строки нашего скрипта будут такими:

Local $msg
Do
$msg = GUIGetMsg()

Until $msg = $GUI_EVENT_CLOSE

Стили программы
К этому времени мы уже способны создать внешний вид нашего GUI. Также можно выполнить скрипт и увидеть почти завершённый калькулятор, теперь видим, что калькулятор показывает что-то не предвиденное во внешнем виде. Элемент "Edit", который представляет собой цифровое табло отображается не корректно (смотрите Рис. 2). Для правильного отображения используем стили Edit:

Рис. 2

Здесь нам необходимо модифицировать только две строки нашего кода.

Первая модификация: в строке с переменной $CTRL_EdtScreen, инициализирующей элемент Edit, в параметр стилей (style) добавляем стиль "только чтение" ($ES_READONLY) и выравнивание по правому краю ($ES_RIGHT), для объединения стилей используется функция BitOR() как показано в примере ниже. Также в параметр расширенных стилей (exStyle) добавляем стиль $WS_EX_STATICEDGE, который придаёт утопленный вид границам элемента. Для подробного объяснения каждого стиля элемента Edit смотрите таблицу.

Local $CTRL_EdtScreen = GUICtrlCreateEdit("0.", 8, 2, 239, 23, BitOR($ES_READONLY, $ES_RIGHT), $WS_EX_STATICEDGE)

Вторая модификация: в строке с переменной $CTRL_LblMemory, инициализирующей элемент Label, который отображает состояние хранения в памяти, указываем элементу утопленный стиль ($SS_SUNKEN) как показано в примере ниже. Для подробного объяснения каждого стиля элемента Label смотрите таблицу

Local $CTRL_LblMemory = GUICtrlCreateLabel("", 12, 39, 27, 26, $SS_SUNKEN)

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

Рис. 3

В качестве упражнения для читателя, попробуйте добавить стиль $BS_FLAT в параметр стиля (style) какой нибудь кнопки, и вы увидите плоский стиль кнопки.