PDA

Просмотр полной версии : Скинование компонента Accordion


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

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

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

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

alatar
16.09.2010, 20:56
Accordion это mx компонент и он не поддерживает полноценное spark скинирование (только вот такую кастрацию). Обратите внимание на свойство headerRenderer (http://help.adobe.com/ru_RU/AS3LCR/Flex_4.0/mx/containers/Accordion.html#headerRenderer)класса Accordion и класс AccordionHeader (http://help.adobe.com/ru_RU/AS3LCR/Flex_4.0/mx/containers/accordionClasses/AccordionHeader.html). Все вопросы у вас сведутся к одному: как скинировать mx:Button.

marat_sa
17.09.2010, 11:16
Нашел примеры в инете по использованию 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/24/creating-a-simple-flex-accordion-inline-header-renderer/

GBee
17.09.2010, 11:42
Для 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
17.09.2010, 12:22
Проект у меня под Flex 4, под ним не хочет работать.
Не хочется заморачиваться с CSS, а просто сделать отдельный MXML-скин.

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

marat_sa
20.09.2010, 15:36
Вобщем подцепил скин и "черезодноместо" способом, описанным в комментах к теме:
http://blog.flexexamples.com/2009/06/21/creating-a-custom-halo-accordion-header-skin-in-flex-4/
подцепил label из скина вместо родного label Accordion'а.

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