Форум Flasher.ru
Ближайшие курсы в Школе RealTime
Список интенсивных курсов: [см.]  
  
Специальные предложения: [см.]  
  
 
Регистрация Блоги Правила Справка Пользователи Календарь Поиск рулит! Сообщения за день Все разделы прочитаны
 

Вернуться   Форум Flasher.ru > Блоги > alatar

Оценить эту запись

IconButton с продвинутой иконкой

Запись от alatar размещена 01.02.2011 в 13:33

Итак задача: сделать кнопку с иконкой, причем иконка может быть предоставлена в виде относительного или абсолютного URL-адреса, ByteArray, представляющего файл SWF, GIF, JPEG или PNG, строки, представляющей класс, а также объекта, который реализует IFlexDisplayObject, либо класса, тип которого реализует IFlexDisplayObject.

Первое, что приходит в голову скормить все это добро Image. Собственно так и сделаем.
Код получился компактный, поэтому просто приведу его целиком:
Код AS3:
package alatar.components
{
    import mx.controls.Image;
 
    import spark.components.Button;
    import spark.components.Group;
 
    public class IconButton extends Button
    {
        //Контейнер для иконки.
        [SkinPart(required="false")]
        public var iconGroup:Group;
 
        //Непосредсвенно иконка
        protected var iconImage:Image;
 
        public function IconButton()
        {
            super();
        }
 
        private var _icon:Object;
 
        public function get icon():Object
        {
            return _icon;
        }
 
        public function set icon(value:Object):void
        {
            if (_icon == value)
                return;
 
            _icon = value;
 
            if (!iconImage)
            {
                iconImage = new Image();
            }
 
            iconImage.source = _icon;
 
            if (iconGroup && !iconGroup.contains(iconImage))
            {
                iconGroup.addElement(iconImage);
            }
        }
 
        override protected function partAdded(partName:String, instance:Object):void
        {
            super.partAdded(partName, instance);
 
            if (instance == iconGroup && iconImage)
                iconGroup.addElement(iconImage);
        }
 
        override protected function partRemoved(partName:String, instance:Object):void
        {
            super.partRemoved(partName, instance);
 
            if (instance == iconGroup)
                iconGroup.removeAllElements();
        }
    }
}
Осталось сделать для этой кнопки скин. Для примера возьмем автосгенерированный скин на основе ButtonSkin и изменим несколько строк в конце.
Было:
Код:
<!-- layer 8: text -->
<!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay -->
<s:Label id="labelDisplay"
         textAlign="center"
         verticalAlign="middle"
         maxDisplayedLines="1"
         horizontalCenter="0" verticalCenter="1"
         left="10" right="10" top="2" bottom="2">
</s:Label>
Стало:
Код:
<!-- layer 8: text and icon -->
<s:HGroup top="2" bottom="2" left="10" right="10" gap="10" verticalAlign="middle">
    <s:Group id="iconGroup"/>
    <!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay -->
    <s:Label id="labelDisplay"
             textAlign="center"
             verticalAlign="middle"
             maxDisplayedLines="1"
             left="10"
             right="10"
             top="2"
             bottom="2">
    </s:Label>
</s:HGroup>
Ну и на последок, пример того как это добро использовать:
Код:
<components:IconButton label="simple icon button"
                       icon="@Embed(source='AIRApp_32.png')"
                       skinClass="alatar.skins.IconButtonSimpleSkin"
                       click="iconbutton1_clickHandler(event)"/>
P.S. Эта реализация будет работать во Flex 4.x до 4.5.0.18623. В этой версии в кнопку опять добавили свойство icon, которое принимает в себя Class. Я так и не понял нафига они это сделали.
Изображения
Тип файла: jpg iconbutton.JPG (2.8 Кб, 737 просмотров)
Вложения
Тип файла: zip iconbutton.zip (258.1 Кб, 165 просмотров)
Размещено в Flex , Flex 4
Комментарии 4 Отправить другу ссылку на эту запись
Всего комментариев 4

Комментарии

Старый 02.02.2011 00:44 gloomyBrain вне форума
gloomyBrain
 
Аватар для gloomyBrain
Я понял 2 вещи:
- Adobe запутались
- пора учить Flex

PS
Спасибо за интересный пример
Старый 02.02.2011 00:55 alatar вне форума
alatar
 
Аватар для alatar
Цитата:
- Adobe запутались
Скорее пошли на поводу у толпы хомячков, которые не обнаружили у кнопки свойства icon. Плохо, то что впихнули это свойство непосредственно в Button. Можно будет переделать на наследование от ButtonBase. Это решит проблему.
Завтра, если успею, выложу скин к этой кнопке в стиле Win 7. Будет поинтереснее.
Старый 02.02.2011 17:39 Хемуль вне форума
Хемуль
 
Аватар для Хемуль
Цитата:
Скорее пошли на поводу у толпы хомячков, которые не обнаружили у кнопки свойства icon.
Наверняка так и есть. Надо было им гнуть свою линию дальше. Мне кажется, что те, кто пришёл во Flex и связался со Spark-компонентами, в большинстве своём люди, которые готовы разбираться и которым не составит особого труда написать один-два раза свою кнопку с иконкой. К тому же всегда остаются MX...
Старый 02.02.2011 17:51 alatar вне форума
alatar
 
Аватар для alatar
Надеюсь они все таки, когда нибудь, перепишут фреймворк с нуля. Без наследия в виде mx компонентов. Когда они только анонсировали Hero были обещания оптимизировать его для мобильников . Вот на него и возлагались большие надежны. Жаль, что они не оправдались
 

 


Часовой пояс GMT +4, время: 02:04.


Copyright © 1999-2008 Flasher.ru. All rights reserved.
Работает на vBulletin®. Copyright ©2000 - 2020, Jelsoft Enterprises Ltd. Перевод: zCarot
Администрация сайта не несёт ответственности за любую предоставленную посетителями информацию. Подробнее см. Правила.