Стандартный калькулятор — Часть 1. Описание

Автор: Андрей. Категория: Уроки Flex

Flex-приложение "Стандартный калькулятор" Описание

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

В этом уроке мы рассмотрим создание калькулятора, похожего на стандартный калькулятор Windows. Думаю, каждый из нас держал в руках обычный калькулятор, большой или маленький, для студентов или бухгалтеров. Но, несмотря на то, что этот девайс знаком нам с детства, многие даже не задумывались о том, какая же программная начинка в него заложена. Естественно, калькулятор необходим для того, чтобы выполнять математический операции над несколькими числами. Но что происходит, когда мы нажимаем на кнопки? Хороший вопрос. Нужно подробно разобрать алгоритм работы калькулятора. Этот урок разделён на несколько частей, в каждой их которых мы подробно рассмотрим интерфейс, основные и дополнительные операции калькулятора.

Цель

  • расширить знания об элементах управления
  • научиться использовать таблицы стилей CSS для оформления интерфейса приложения
  • научиться использовать контейнеры для правильного расположения элементов
  • рассмотреть возможность отделения интерфейса от программного кода
  • научиться составлять классы
  • познакомиться с понятием «interface» в программировании
  • познакомиться с понятием «pattern» или шаблон проектирования
  • применить форматирование текста

Техническое задание

Приложение будет состоять из 24-х функциональных кнопок и 2-х полей для отображения результата и состояния памяти. Калькулятор будет 10-разрядным, с разделением разрядов по три. Нажатие на кнопку с цифрой добавляет соответствующую цифру после последней цифры уже имеющегося числа. Нажатие на кнопку с точкой вставляет разделитель между целой и дробной частью. Кнопка [=] отвечает за вывод итогового результата. Кнопки [Мx] отвечают за ячейку памяти для сохранения произвольного результата, а именно [М+] — прибавление значения к существующему в памяти с предварительным вычислением, если таковое необходимо, [М-] — вычитание числа из уже существующего с предварительным вычислением, [MR] — вывод значения в памяти на дисплей, [MC] — очистка значения в памяти. Кнопки арифметических действий выполняют комбинированное действие: [=] & «запоминаем следующую операцию». Кнопка [-/+] меняет знак числа. [√] — вычисляет квадратный корень. Кнопка [%] — преобразует второе число в процентное значение относительно первого и вычисляет результат. (Например, [50] [+] [20] [%] [=] [60]). Кнопка [С] устанавливает все внутренние значения и состояние памяти по-умолчанию.

Решение

Начнём решение с текстового поля для отображения результата. Это будет обычный TextInput, в котором отображаются все цифры, знак минус и точка. Но мы не будем использовать свойство restrict, как в предыдущем уроке. Потому что эти знаки мы будем не вводить с клавиатуры, а выводить из памяти. С клавиатуры, наоборот, мы не должны вводить ничего, поэтому используем свойство enabled. Аналогичное описание для поля вывода состояния памяти. Только в него мы будем выводить букву «М», если значение памяти отличное от нуля. Теперь подумаем, какие у нас будут кнопки. В большинстве калькуляторов большая часть кнопок имеют одинаковый размер. Чтобы не прописывать каждой кнопке свойства width и height, мы создадим дополнительный класс CalcButton, на основе класса s:Button, где укажем ширину и высоту кнопки. Что касается действий, заметим, что кнопки с цифрами будут выполнять одно и то же действие, а именно передавать значение свойства label. Остальные кнопки будут выполнять различные действия. Поэтому выделим ещё один класс NumberButton.
Теперь перейдём к реализации задачи. Следующим шагом будет создание пользовательского интерфейса.


Тэги: , ,

Ссылка для вашего сайта.



Добавить комментарий

Дополнительно