Стандартный калькулятор — Часть 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"/>
Теперь вновь запустим приложение
Наш интерфейс готов. Перейдём к программированию.
Тэги: flex, интерфейс, простые, уроки
Ссылка для вашего сайта.
Комментарии (1)
Сергей
| #
Ты наверное забыл вот это : xmlns:controls=»controls.*»
добавить чтобы пакет controls подключить))))
Ответить