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

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

Рейтинг: 5.00. Голосов: 2.

Spark Alert

Запись от alatar размещена 02.12.2010 в 20:22
Обновил(-а) alatar 13.12.2010 в 12:11 (Перенесено в Flex 4)

Надеюсь многие уже успели оценить spark компоненты, которые появились в FlexSDK 4. Не для кого не секрет, что Adobe реализовала в spark далеко не все компоненты которые доступны в пакете mx.

И так, постараемся восполнить, этот досадный пробел. В частности, хочу представить вам реализацию Alert на основе SkinnableComponent.

Итак, чего же хотелось бы получить?
1. Полную совеместимость с Alert в коде. Т.е. по-сути должно быть достаточно заменить в коде:
Код AS3:
import mx.controls.Alert;
на импорт нашего компонента и все должно работать.
2. Полный контроль над видом нашего Alert. Тут спасибо Adobe, все делается на ура.

Подробно останавливаться на коде я не буду. Желающие могут посмотреть в исходниках. Остановлюсь лишь на ключевых моментах.

Почему был выбран именно SkinnableComponent?
mx.controls.Alert базируется на Panel. Чесно говоря, сомнительное решение, т.к. в 99% случаев функционал контейнера (коим по-сути является Panel) для Alert не востребован. Многие из вас добавляли в Alert что нибудь динамически? А если добавляли, то было ли это вызвано необходимостью, а не нуждой?

После осмысления всего этого, был выбран SkinnableComponent, как базовый по-функционалу и не содержащий лишнего.

В контейнерах есть единственный функционал, который нам понадобится – это свойство defaultButton. Поэтому, добавим его в наш компонент:
Код AS3:
private var _defaultButton:IFlexDisplayObject;
 
public function get defaultButton():IFlexDisplayObject
{
    return _defaultButton;
}
 
public function set defaultButton(value:IFlexDisplayObject):void
{
    _defaultButton = value;
    ContainerGlobals.focusedContainer = null;
}
Последняя строчка:
Код AS3:
ContainerGlobals.focusedContainer = null;
Нужна для установки фокуса на кнопку, ссылка на которую хранится в _defaultButton.
Дабы эта вся красота заработала прийдется реализовать интерфейс IFocusManagerContainer.
Код AS3:
public class Alert extends SkinnableComponent implements IFocusManagerContainer
Как раз в нем и описаны геттер и сеттер defaultButton.

Есть еще один важный момент. Для размещения кнопок используется контейнер controlBarGroup:Group. Я использовал именно Group, вместо GroupBase, из-за его свойства mxmlContent, в связи с чем добавление кнопок в группу удалось свести к одной строчке:
Код AS3:
controlBarGroup.mxmlContent = _buttons;
Где _buttons предварительно сформированный на основе флагов массив.
Об этом следует помнить, если кто нибудь решит использовать самописную группу в скине.
В связи с таким решением пришлось добавить очистку группы при смене скина.
Код AS3:
override protected function partRemoved(partName:String, instance:Object):void
{
    super.partRemoved(partName, instance);
 
    if (instance == controlBarGroup)
    {
                controlBarGroup.removeAllElements();
    }
}
В остальном код во многом повторяет mx.controls.Alert, с учетом моментов свойственных spark-компонентам.

Что же в итоге получилось?
Сделаем простенький скин (дабы не нагружать простынями кода, примеры выложу вместе с исходниками), прописываем стиль:
Код:
<fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";
    @namespace mx "library://ns.adobe.com/flex/mx";
    @namespace components "alatar.components.*";

    components|Alert
    {
        skinClass: ClassReference("alatar.skins.AlertSkin1");
    }
</fx:Style>
Вызываем наш Alert:
Код AS3:
Alert.show("I custom alert", "Custom Alert", Alert.OK | Alert.CANCEL, this, null, Alert.OK);
В итоге получаем:

Не впечатляет? Ничем не отличается от стандартного?
Усложним:

Такое уже труднее реализовать в стандартном компоненте. Ну и что бы добить:


В итоге, мы получили полный контроль над видом Alert используя только mxml, не загромождая основной код лишней писаниной и не куроча стандартные компоненты.

Собственно исходники с примером.
Изображения
Тип файла: jpg skin1.JPG (17.0 Кб, 1597 просмотров)
Тип файла: jpg skin2.JPG (16.9 Кб, 1489 просмотров)
Тип файла: jpg skin3.JPG (16.8 Кб, 1651 просмотров)
Вложения
Тип файла: zip source.zip (268.6 Кб, 371 просмотров)
Размещено в Flex , Flex 4
Комментарии 13 Отправить другу ссылку на эту запись
Всего комментариев 13

Комментарии

Старый 03.12.2010 00:29 gloomyBrain вне форума
gloomyBrain
 
Аватар для gloomyBrain
Интересно, спасибо.
А не скажете, что можно почитать для начала отстающим в развитии Flex'а? А то я не все понимаю пока =)
Старый 03.12.2010 01:00 Котяра вне форума
Котяра
 
Аватар для Котяра
A вставить scale-9 шкурку на фон и кастомную кнопку можно?
Старый 03.12.2010 01:23 alatar вне форума
alatar
 
Аватар для alatar
Шкурку можно вставить любую, кнопку только как дополнительную. Те кнопки которые создаются в компоненте можно скинировать через css, как и все кнопки. Можно добавить в компонент стиль для кнопок и задавать его отдельно.
Старый 03.12.2010 01:34 alatar вне форума
alatar
 
Аватар для alatar
Цитата:
А не скажете, что можно почитать для начала отстающим в развитии Flex'а?
Читать надо все что попадается. Есть документация от Adobe, есть книга: Joshua Noble, Todd Anderson и др. Flex 4 Cookbook. В интернете есть информация о жизненном цикле компонентов и множество статей о Layout в четвертом СДК.
Старый 03.12.2010 01:42 alatar вне форума
alatar
 
Аватар для alatar
Забыл вставить лицензию. Думаю MIT всех устроит? Еще добавлю стиль для скинирования кнопок. Когда добавлю отпишусь в комментариях. Не забудьте заново скачать исходники. В этом виде их не получится использовать в коммерческих проектах.
Обновил(-а) alatar 03.12.2010 в 17:16
Старый 03.12.2010 03:32 iNils вне форума
iNils
 
Аватар для iNils
Цитата:
В этом виде их не получится использовать в коммерческих проектах.
Отсутствие лицензии никак не влияет на запрет в использовании.
Старый 03.12.2010 10:10 alatar вне форума
alatar
 
Аватар для alatar
Ну для многих и присутствие не влияет
Старый 03.12.2010 12:03 Волгоградец вне форума
Волгоградец
 
Аватар для Волгоградец
Крутяк, молодец. Помню как приходилось пилить mx'совский Alert чтобы нужный вид придать.
Старый 03.12.2010 12:24 iNils вне форума
iNils
 
Аватар для iNils
Цитата:
Ну для многих и присутствие не влияет
Ну это другой вопрос. Хотя это и понятно. Тут два момента.
1. Хочешь выложить код? Выкладывай и пусть делают с ним что хотят. Не хочешь чтобы меняли? Не выкладывай. И не надо никаких лицензий.
2. Писать надо нормальным языком, а не только юридическим. Мне как-то надо было понять смысл одной лицензии. Перерыл весь интернет, так и не понял о чем шла речь, что можно, а что нельзя.
Было бы не плохо, если бы кто-то написал про это статью.

А отсутствие не влияет... на форуме столько кода навалено в помощь, представляю, если бы для каждого фрагмента вставляли лицензию.
Обновил(-а) iNils 03.12.2010 в 12:28
Старый 03.12.2010 13:57 Котяра вне форума
Котяра
 
Аватар для Котяра
Надо написать в правилах форума: " Выложенный на форуме код является общественным достоянием (ну или MIT/BSD какой-нить) если иные правоограничения не описаны дополнительно".
Старый 03.12.2010 17:09 alatar вне форума
alatar
 
Аватар для alatar
Цитата:
Было бы не плохо, если бы кто-то написал про это статью.
Такие статьи есть. В итоге получается, что только MIT отвечает понятию OpenSource (в реалиях AS3 библиотек), т.е. код можно свободно применять в любых проектах и менять его по своему усмотрению. BSD для AS3 мало применима, точно уже не помню, но у нее есть крайне неприятные ограничения. Код без лицензии, это как русская рулетка, я бы не рискнул использовать такой код в коммерческом проекте.
Старый 03.12.2010 22:58 alatar вне форума
alatar
 
Аватар для alatar
Обновил исходники, теперь можно ставить стиль для кнопок.
В CSS:
Код:
components|Alert
{
    skinClass: ClassReference("alatar.skins.AlertSkin1");
    buttonsSkinClass: ClassReference("alatar.skins.CustomButtonSkin");
}
или в коде:
Код AS3:
...
alert.setStyle("buttonsSkinClass", CustomButtonSkin);
Старый 01.11.2012 12:59 $mival вне форума
$mival
 
Аватар для $mival
yesLabel & noLabel не лишними будут
 

 


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


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