Скинование компонента Accordion

[marat_sa]

Добрый день.
Задача заскиновать компонент Accordion.
Чтобы менялся цвет подложки заголовка в зависимости открыт ли данный раздел, цвет текста в заголовке и картиночка кастомная в заголовке была...

Подскажите пожалуйста, как лучше заскиновать, от какого класса наследовать mxml-скин?
Сам Accordion скины не поддерживает... По AccordionHeader примеров не нашел

Вот нашел примерчик скина на базовом SparkSkin... Но это только изменять графику подложки заголовка... До текста в скине доступа нет...
http://blog.flexexamples.com/2009/06...kin-in-flex-4/

Заранее спасибо.

[alatar]

Accordion это mx компонент и он не поддерживает полноценное spark скинирование (только вот такую кастрацию). Обратите внимание на свойство headerRenderer класса Accordion и класс AccordionHeader. Все вопросы у вас сведутся к одному: как скинировать mx:Button.

[marat_sa]

Нашел примеры в инете по использованию headerRenderer, но они под 3 флекс.
Если пишу:

<mx:Accordion id="accordion">
	<mx:headerRenderer>
		<fx:Component>
			<s:Button skin="skins.AccordionButtonSkin"/>
		</fx:Component>
	</mx:headerRenderer>
</mx:Accordion>

То пишет, что

Multiple markers at this line:
-Property 'skin' is read-only.
-Button

Если же меняю пространство на mx

<mx:Button skin="skins.AccordionButtonSkin"/>

То проект билдится, но в рантайме вылетае эксэпшн

Main Thread (Suspended: ArgumentError: Undefined state 'selectedUp'.)	
	mx.core::UIComponent/getState

Что собственно неудивительно, ведь у Button нет state selectedUp...
Что делать?((

---
Пример брал отсюда: http://blog.flexexamples.com/2007/09...ader-renderer/

[GBee]

Для 3-ки юзайте стили. Пример:

Accordion
{
	headerStyleName: accordionHeader;
	borderStyle: none;
	backgroundAlpha: 0.0;
	color: #888888;
	headerHeight: 20;
	verticalGap: 2;
 
}
.accordionHeader
{
	color: #45688E;
	fontSize: 12;
	selectedUpSkin: Embed(source='../../assets/vkstyle.swf', symbol='accordionOpenHeader');
	selectedOverSkin: Embed(source='../../assets/vkstyle.swf', symbol='accordionOpenHeader');
	selectedDownSkin: Embed(source='../../assets/vkstyle.swf', symbol='accordionOpenHeader');
	selectedDisabledSkin: Embed(source='../../assets/vkstyle.swf', symbol='accordionOpenHeader');
	selectedUpIcon: Embed(source='../../assets/vkstyle.swf', symbol='accordionOpenIcon');
	selectedOverIcon: Embed(source='../../assets/vkstyle.swf', symbol='accordionOpenIcon');
	selectedDownIcon: Embed(source='../../assets/vkstyle.swf', symbol='accordionOpenIcon');
	upSkin: Embed(source='../../assets/vkstyle.swf', symbol='accordionCloseHeader');
	overSkin: Embed(source='../../assets/vkstyle.swf', symbol='accordionCloseHeader');
	downSkin: Embed(source='../../assets/vkstyle.swf', symbol='accordionCloseHeader');
	disabledSkin: Embed(source='../../assets/vkstyle.swf', symbol='accordionCloseHeader');
	upIcon: Embed(source='../../assets/vkstyle.swf', symbol='accordionCloseIcon');
	overIcon: Embed(source='../../assets/vkstyle.swf', symbol='accordionCloseIcon');
	downIcon: Embed(source='../../assets/vkstyle.swf', symbol='accordionCloseIcon');
	disabledIcon: Embed(source='../../assets/vkstyle.swf', symbol='accordionCloseIcon');
	textSelectedColor: #45688E;
	textRollOverColor: #45688E;
	disabledColor: #888888;
}

[marat_sa]

Проект у меня под Flex 4, под ним не хочет работать.
Не хочется заморачиваться с CSS, а просто сделать отдельный MXML-скин.

Спасибо за пример, если не разберусь, так сделаю.

[marat_sa]

Вобщем подцепил скин и "черезодноместо" способом, описанным в комментах к теме:
http://blog.flexexamples.com/2009/06...kin-in-flex-4/
подцепил label из скина вместо родного label Accordion'а.

[marat_sa]

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