Стандартный калькулятор — Часть 2. Интерфейс

Создадим новый проект Flex «Calculator», где укажем тип — Web-приложение. Реализацию пользовательского интерфейса начнём с создания двух дополнительный классов. Это будут MXML-компоненты на основе класса s:Button. Какие кнопки нажимать, чтобы создать новый MXML-компонент, я подробно рассказал в этом уроке. В этом и последующих уроках я не буду заострять внимание на том, что уже пройдено, а только буду давать пояснения новым вещам.

Разработка профессиональных приложений практически невозможна или по крайней мере весьма неудобна без использования пакетов (packages). Подробное описание понятия пакета несложно найти в интернете. Вкратце — это папка на физическом диске, в которую помещаются однотипные файлы классов. Пакеты также помогают контролировать видимость классов и методов. Мы будем хранить наши новые классы элементов управления в новом пакете controls. Для этого нужно щёлкнуть правой кнопкой мыши по узлу src в Проводнике пакетов и выбрать в выпадающем меню Создать -> Пакет. В поле Имя введём наименование пакета controls и нажмём кнопку Готово. Теперь в Проводнике пакетов ниже пакета по-умолчанию появился наш новый пакет.

Далее в пакете controls создадим 2 MXML-компонента. На начальном этапе они будут различаться только наименованием. Эти компоненты построены на основе s:Button и называются CalcButton.mxml и NumberButton.mxml. Код этих классов приведён ниже:

<?xml version="1.0" encoding="utf-8"?>
<s:Button xmlns:fx="http://ns.adobe.com/mxml/2009" 
	  xmlns:s="library://ns.adobe.com/flex/spark" 
          xmlns:mx="library://ns.adobe.com/flex/mx"
          width="50" height="40">
</s:Button>

Первый контейнер, который мы используем, будет <s:Panel>. Обычно я использую этот элемент управления для создания всплывающих окон, но т.к. это неплохой визуальный компонент, он вполне подходит для оформления нашего калькулятора. Внутри этого контейнера мы скомбинируем контейнеры <s:HGroup> и <s:VGroup>, чтобы упорядоченно выстроить кнопки калькулятора. Кнопка [+] будет самая большая и будет занимать 2 смежных квадрата. Комбинирование элементов <s:HGroup> и <s:VGroup> немного напоминает комбинирование таблиц HTML со смежными ячейками. Напомню, что <s:HGroup> упорядочивает элементы по-горизонтали, а <s:VGroup> — по-вертикали. Расстояние между элементами в этих контейнерах фиксированное и контролируется свойством gap. Но в нашем примере я хочу показать, что можно варьировать расстояние между отдельными элементами, используя элемент <s:Spacer>.

Далее, нужно расположить кнопки (наши новые классы) в необходимом порядке, проставить им идентификаторы и свойства label. Особый интерес вызывают кнопки с нестандартными символами, такими как знаки умножение, деления, квадратного корня и т.п. В этом случае можно использовать коды мнемоник HTML или символы Unicode. На этом этапе приведу пример кода.

<s:Panel left="10" top="10" width="320" height="325" title="Калькулятор">
    <s:VGroup left="10" top="10">
        <s:HGroup width="296">
            <s:TextInput id="mem" width="40" height="40" enabled="false" textAlign="center"/>
            <s:TextInput id="out" width="251" height="40" enabled="false" text="{numberFormatter.format(out.text)}"/>    
        </s:HGroup>
        <s:HGroup>
            <controls:CalcButton id="bMR" label="MR"/>
            <s:Spacer width="5"/>
            <controls:CalcButton id="bMC" label="MC"/>
            <controls:CalcButton id="bMinus" label="M-"/>
            <controls:CalcButton id="bPlus" label="M+"/>
            <s:Spacer width="5"/>
            <controls:CalcButton id="bMul" label="\u00D7"/>
        </s:HGroup>
        <s:HGroup>
            <controls:CalcButton id="bBackspace" label="−/+"/>
            <s:Spacer width="5"/>
            <controls:NumberButton id="b7" label="7"/>
            <controls:NumberButton id="b8" label="8"/>
            <controls:NumberButton id="b9" label="9"/>
            <s:Spacer width="5"/>
            <controls:CalcButton id="bDiv" label="\u00F7"/>
        </s:HGroup>
        <s:HGroup>
            <controls:CalcButton id="bSquare" label="√"/>
            <s:Spacer width="5"/>
            <controls:NumberButton id="b4" label="4"/>
            <controls:NumberButton id="b5" label="5"/>
            <controls:NumberButton id="b6" label="6"/>
            <s:Spacer width="5"/>
            <controls:CalcButton id="bSub" label="−"/>
        </s:HGroup>
        <s:HGroup>
            <s:VGroup width="230">
                <s:HGroup>
                    <controls:CalcButton id="bPersent" label="%"/>
                    <s:Spacer width="5"/>
                    <controls:NumberButton id="b1" label="1"/>
                    <controls:NumberButton id="b2" label="2"/>
                    <controls:NumberButton id="b3" label="3"/>
                </s:HGroup>
                <s:HGroup>
                    <controls:CalcButton id="bC" label="C"/>
                    <s:Spacer width="5"/>
                    <controls:NumberButton id="b0" label="0"/>
                    <controls:CalcButton id="bDot" label="."/>
                    <controls:CalcButton id="bResult" label="="/>
                </s:HGroup>
            </s:VGroup>
            <s:Spacer width="5"/>
            <s:VGroup width="50">
                <controls:CalcButton id="bSum" label="+" height="86"/>        
            </s:VGroup>
        </s:HGroup>            
    </s:VGroup>
</s:Panel>

Ничего сложного в этом коде нет. У каждой кнопки есть свой id и label, а у остальных элементов проставлены свойства width и height. Некоторые label прописаны в виде: «\uХХХХ» Это и есть символ Unicode. На форме отобразиться необходимый нам символ, если мы подставили код правильно.
У элемента <s:Spacer> описано только одно свойство width. Это невидимый элемент, который выполняет функцию отступа между другими элементами в приложении.
Если нажать кнопку Выполнить, запуститься браузер с нашим приложением в таком виде:

Весьма неплохо… Давайте теперь немного изменим оформление нашего приложения. Это можно сделать несколькими способами. Например, программное или графическое скинирование с использованием CSS или без использования. Не нужно пугаться незнакомых слов, т.к. для понимания это легко. Вместо стандартных изображений частей элементов управления подставляются либо нарисованные с помощью кода, либо загруженные графические файлы. А указание на новые изображения прописываются либо в основном коде, либо выносятся в файл CSS, что мы сейчас и сделаем. Создадим файл CSS Файл -> Создать -> Файл CSS и назовём его styles.css. Пакет оставим по-умолчанию. В созданном файле добавим одну строчку:

/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
@namespace controls "controls.*";

Для начала добавим свойства для абсолютно всех элементов управления через блок global.

/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
@namespace controls "controls.*";

global
{
    color: #FFFFFF;
    chromeColor: #677a94;
    fontFamily: Arial;
}

Чтобы увидеть изменения необходимо связать наше приложение и файл CSS. Для этого сразу после блока свойств приложения добавим такую строчку:

<s:Application xmlns...">
    <fx:Style source="styles.css"/>

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

global
{
    color: #FFFFFF;
    chromeColor: #677a94;
    fontFamily: Arial;
}

s|Panel
{
    fontSize: 16;
}

s|TextInput 
{
    textAlign: right;
    fontSize: 26;
    color: #000000;
}

s|Button
{
    fontSize: 16;
    fontWeight: bold;
}

controls|NumberButton
{
    fontSize: 16;
    fontWeight: bold;
    chromeColor: #889db5;
}

controls|CalcButton.styleC
{
    chromeColor: #C54F4F;
    fontWeight: bold;
}

После блока global следует блок s|Panel, где указан размер шрифта. Это значит, что этот размер будет применён для всех элементов Panel в нашем приложении, если в коде явно не присвоен другой стиль. Далее описывает стиль для элементов s|TextInput и s|Button. Тут всё понятно. Далее стоит такой блок controls|NumberButton. Этот блок будет отвечать за оформление объектов нашего класса NumberButton. Так как этот класс расширяет класс <s:Button>, то при отсутствии этого блока, к нему будет применён стиль s|Button. Если есть желание, можете поэкспериментировать. И последний блок controls|CalcButton.styleC — это специальный блок для объектов класса CalcButton, для которых явно указан этот стиль в коде. Это значит, что если мы не присвоим этот стиль какому-либо объекту <controls:CalcButton> через свойство styleName, то мы его не увидим. Сделаем же это в файле Calculator.mxml кнопке с идентификатором bC. Это будет наша красная кнопка.

<controls:CalcButton id="bC" label="C" fontWeight="normal" styleName="styleC"/>

Теперь вновь запустим приложение

Наш интерфейс готов. Перейдём к программированию.