Развитие сервис-ориентированного клиента на платформе Flash Player.

Материал из Flexipedia

[править] Введение

Элемент PopUpButton состоит из двух кнопок: основной и маленькой, называемой поп-ап кнопкой и имеющей только иконку. Основная кнопка – это простой Button.

Поп-ап кнопка при нажатии открывает поп-ап элемент. При повторном нажатии поп-ап элемент закрывается.

Элемент PopUpButton добавляет гибкость элементу Button. Элемент PopUpButton обычно открывает элемент List или Menu:

http://livedocs.macromedia.com/flex/2/docs/images/popupbutton8.jpg

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

Элемент PopUpButton не ограничен отображением только меню. Он может отображать любой элемент управления в качестве поп-апа. Потоковое приложение, которое позволяет пользователям отсылать документы для проверки, например, может использовать элемент Tree визуального отображения структуры подразделения. Всплывающий элемент будет отображать дерево элементов, из которого пользователь будет выбирать, например, получателей сообщения.

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

Элемент PopUpButton является подклассом элемента Button и наследует все его свойства, стили, события и методы, за исключением свойства toggle и стилей, относящихся к выбранной кнопке.

Характеристики элемента:

• Атрибут popUp определяет всплывающий элемент (например, List или Menu).
• Методы open() и close() позволяют открывать и закрывать всплывающий элемент программно.
• События open и close происходят, когда элемент открывается и закрывается.
• Чтобы определить внешний вид элемента PopUpButton, можно использовать стилевые свойства popUpIcon и arrowButtonWidth

См. также PopUpButton в Adobe Flex 2.0 ActionScript and MXML Language Reference.

Элемент PopUpButton имеет следующие свойства по умолчанию:

• Размер по умолчанию – размер, достаточный, чтобы уместить подпись и иконку на основной кнопке и иконку на маленькой кнопке
• Минимальный размер – 0
• Максимальный размер – неопределен

[править] Создание PopUpButton

Чтобы определить PopUpButton в MXML, используется тег <mx:PopUpButton>, как показано в следующем примере. Задайте значение id, если вы собираетесь ссылаться на компонент где-нибудь в коде.

В следующем примере PopUpButton используется для открытия элемента Menu. Открытый элемент Menu или любой другой открытый элемент ведет себя как обычно.

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[

[as3]

           import mx.controls.*;
           import mx.events.*;

           private var myMenu:Menu;

           // Инициализируем элемент Menu и определяем его в качестве всплывающего объекта
           // элемента PopUpButton. 
           private function initMenu():void {
               myMenu = new Menu();
               var dp:Object = [{label: "New Folder"}, {label: "Sent Items"},
                   {label: "Inbox"}];        
               myMenu.dataProvider = dp;
               myMenu.addEventListener("itemClick", changeHandler);
               popB.popUp = myMenu;
           }

            // Определяем слушатель события change для элемента Menu.  
           private function changeHandler(event:MenuEvent):void {
               var label:String = event.label;        
               popTypeB.text=String("Moved to " + label);
               popB.label = "Put in: " + label;
               popB.close();
           }

        ]]>
    </mx:Script>

    <mx:VBox>
        <mx:Label text="Main button mimics the last selected menuItem." />
        <mx:PopUpButton id="popB" label="Edit" width="135" 
            creationComplete="initMenu();"/>
        
        <mx:Spacer height="50"/>
        <mx:TextInput id="popTypeB"/>

    </mx:VBox>
</mx:Application>

[править] Взаимодействие с пользователем

Взаимодействие с элементом PopUpButton с помощью мыши:

• При помещении указателя мыши над элементом PopUpButton, он подсвечивается.
• При нажатии передается событие click.
• При нажатии открывается всплывающий элемент и передается событие open.
• Нажатие за пределами кнопки или по кнопке закрывает элемент и передает событие close.

Следующие клавиши используются для навигации по PopUpButton:

• Пробел – действие как при клике на основную кнопку.
• CTRL + Стрелка вниз - открывает элемент и инициирует событие open. Работает обработка клавиатурных событий для всплывающего элемента.
• CTRL + Стрелка вверх - закрывает элемент и инициирует событие close.

Нельзя использовать Tab, чтобы покинуть открытый элемент, сперва необходимо сделать выбор или закрыть элемент.