В ходе работы с пиккером, мы столкнулись с его неприятной особенностью: при попытке заменить предустановленный цвет пиккера на черный (самый первый элемент таблицы пиккера) контролл аккуратно закрывался, но и только. Т.е событие change не диспатчилось и текущий цвет не менялся.
В чем же проблема?
У стандартного пиккера предустановлена коллекция отображаемых в таблице цветов. Она передается в дата провайдер и содержит в себе 240 цветовых квадратов. Отображаемые в таблице цвета можно регулировать путем замены или модификации этой коллекции.
Для управления выбранным цветом контролла предусмотрено 2 свойства: selectedIndex selectedColor. Очевидно что selectedIndex — индекс цвета в коллекции дата провайдера. А вот с selectedColor все не так однозначно. При всем изобилии, таблица пиккера не вмещает в себя все могущие прийти в голову дизайнера цвета. И, когда вы пытаетесь в качестве selectedColor указатиь пиккеру значение отсутствующее в коллекции дата провайдера, происходит следующее.
* selectedColor устанавливается в заданный цвет
* В дата провайдере осуществляется поиск индекса итема содержащего этот цвет.
* Если такой итем найден, в selectedIndex прописывается соответствующее значение.
* Если же в дата провайдере отсутствует данный цвет, selectedIndex не изменяется.
Следует отметить, что по умолчанию selectedIndex и selectedColor выставлены в 0. Т.е когда мы пытаемся установить selectedColor в цвет отсутствующий в коллекции, selectedIndex не меняется и остается равным 0. В момент же интерактивного выбора нужного цвета в пиккере на каком-то из этапов осуществляется проверка соответствия индекса выбираемого значения текущему. Если значения совпадают, ничего не происходит. Отсюда и этот прекрасный баг. В selectedIndex-е пиккера прямо указано, что цвет у нас черный. А вот значение selectedColor при этом совершенно никого не волнует
Что делать?
Решение очевидно. Надо добавить в коллекцию дата провайдера недостающий цвет.
Вот так выглядит стандартный пиккер
Так он будет выглядеть если добавить новый цвет в конец коллекции.
Не слишком симпатично. Поэтому я предлагаю обратить внимание на второй столбец цветовой палитры. Он совершенно черный. Нехитрые исследования предустановленной коллекции дата провайдера показали, что перед нами столбец нулевых значений.
Для чего он, мне понять не удалось. А раз так, ничто не мешает добавлять в него новые цвета.
Нулевые элементы палитры начинаются с 1 индекса и повторяются через каждые 20, вплоть до 221 индекса.
Все что нужно это:
* Проверить значение selectedIndex после установки selectedColor.
* Если индекс не изменился, ищем первый нулевой элемент коллекции и присваиваем ему значение нового цвета.
* Если нулевые значения кончились добавляем новый цвет в конец коллекции.
Ниже код и превью результата
Code:
package | |
{ | |
import mx.collections.ListCollectionView; | |
import mx.controls.ColorPicker; | |
| |
public class ChartColorPicker extends ColorPicker | |
{ | |
public function ChartColorPicker() | |
{ | |
super(); | |
} | |
| |
override public function set selectedColor(value:uint):void | |
{ | |
| |
if(dp && !dp.contains(value)) | |
{ | |
var ind: int = findFirstEmptyItemIndex(); | |
if(ind == -1) dp.addItem(value); | |
else dp.setItemAt(value, ind); | |
} | |
super.selectedColor = value; | |
} | |
| |
private function get dp(): ListCollectionView | |
{ | |
if( dataProvider is ListCollectionView) return dataProvider as ListCollectionView; | |
else return null; | |
} | |
| |
private const FIRST_EMPTY_INDEX: int = 1; | |
private const EMPTY_INDEX_SHIFT: int = 20; | |
| |
private function findFirstEmptyItemIndex(): int | |
{ | |
if(!dp) return -1; | |
| |
for(var i: int = FIRST_EMPTY_INDEX; i<dp.length; i+=EMPTY_INDEX_SHIFT) | |
{ | |
if(dp.getItemAt(i) == 0) | |
{ | |
return i; | |
} | |
} | |
return -1; | |
} | |
} | |
} |
Постоянная ссылка
XML ленты