Главная страница | IconButton с продвинутой иконкой »

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, не загромождая основной код лишней писаниной и не куроча стандартные компоненты.

Собственно исходники с примером.

Изображения

	skin1.JPG (17.0 Кб, 1731 просмотров)
	skin2.JPG (16.9 Кб, 1586 просмотров)
	skin3.JPG (16.8 Кб, 1762 просмотров)

Вложения

source.zip (268.6 Кб, 513 просмотров)

Размещено в Flex , Flex 4

Комментарии 13

Всего комментариев 13

03.12.2010 01:23
alatar	Шкурку можно вставить любую, кнопку только как дополнительную. Те кнопки которые создаются в компоненте можно скинировать через css, как и все кнопки. Можно добавить в компонент стиль для кнопок и задавать его отдельно.

03.12.2010 01:34 alatar вне форума

alatar

Цитата:

А не скажете, что можно почитать для начала отстающим в развитии Flex'а?

Читать надо все что попадается. Есть документация от Adobe, есть книга: Joshua Noble, Todd Anderson и др. Flex 4 Cookbook. В интернете есть информация о жизненном цикле компонентов и множество статей о Layout в четвертом СДК.

03.12.2010 01:42
alatar	Забыл вставить лицензию. Думаю MIT всех устроит? Еще добавлю стиль для скинирования кнопок. Когда добавлю отпишусь в комментариях. Не забудьте заново скачать исходники. В этом виде их не получится использовать в коммерческих проектах.
	Обновил(-а) alatar 03.12.2010 в 17:16

03.12.2010 03:32
iNils	Цитата: В этом виде их не получится использовать в коммерческих проектах. Отсутствие лицензии никак не влияет на запрет в использовании.

03.12.2010 10:10
alatar	Ну для многих и присутствие не влияет

03.12.2010 12:03
Волгоградец	Крутяк, молодец. Помню как приходилось пилить mx'совский Alert чтобы нужный вид придать.

03.12.2010 12:24
iNils	Цитата: Ну для многих и присутствие не влияет Ну это другой вопрос. Хотя это и понятно. Тут два момента. 1. Хочешь выложить код? Выкладывай и пусть делают с ним что хотят. Не хочешь чтобы меняли? Не выкладывай. И не надо никаких лицензий. 2. Писать надо нормальным языком, а не только юридическим. Мне как-то надо было понять смысл одной лицензии. Перерыл весь интернет, так и не понял о чем шла речь, что можно, а что нельзя. Было бы не плохо, если бы кто-то написал про это статью. А отсутствие не влияет... на форуме столько кода навалено в помощь, представляю, если бы для каждого фрагмента вставляли лицензию.
	Обновил(-а) iNils 03.12.2010 в 12:28

03.12.2010 13:57
Котяра	Надо написать в правилах форума: " Выложенный на форуме код является общественным достоянием (ну или MIT/BSD какой-нить) если иные правоограничения не описаны дополнительно".

03.12.2010 17:09 alatar вне форума

alatar

Цитата:

Было бы не плохо, если бы кто-то написал про это статью.

Такие статьи есть. В итоге получается, что только MIT отвечает понятию OpenSource (в реалиях AS3 библиотек), т.е. код можно свободно применять в любых проектах и менять его по своему усмотрению. BSD для AS3 мало применима, точно уже не помню, но у нее есть крайне неприятные ограничения. Код без лицензии, это как русская рулетка, я бы не рискнул использовать такой код в коммерческом проекте.

03.12.2010 22:58 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	yesLabel & noLabel не лишними будут

Последние записи от alatar

Трансформации вокруг произвольной точки (05.02.2015)
Декомпозиция матрицы. (25.12.2014)
Баги TextField в iOS (29.07.2013)
[Spark] Стрелочный индикатор. (06.12.2012)
RSLs Monkey Patching (23.01.2012)

03.12.2010 00:29
gloomyBrain	Интересно, спасибо. А не скажете, что можно почитать для начала отстающим в развитии Flex'а? А то я не все понимаю пока =)

03.12.2010 01:00
Котяра	A вставить scale-9 шкурку на фон и кастомную кнопку можно?

Архив
< > Октябрь 2024
Вс	Пн	Вт	Ср	Чт	Пт	Сб
22	23	24	25	26	27	28
29	30	1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31	1	2