Позиционирование элементов в скинованном ActionBar (flex mobile)

[PainKiller]

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

А нужно чтобы он выглядел вот так:

То есть проблема в позиционировании компонента «крестик с циферкой» который сделан во флеше и просто заэддчайлден в классе UIComponent
Как все сделано сейчас
Скин присвоен в css:

s|ActionBar
{
	chromeColor: #d9e0e7;
	titleAlign: center;
	skinClass: ClassReference("theme.ActionBarSkin");
	paddingBottom: 0;
	paddingLeft: 10;
	paddingRight: 0;
	paddingTop: 2;
}

Класс скина я просто скопировал из мобильной темы, и внес в него все необходимые мне изменения.
В классе Main содержимое ActionBar вставляется так:

<s:navigationContent>
				<s:Image smooth="true" left="15" top="2"         source="@Embed('../assets/actionBar/header.png')"/>
</s:navigationContent>
 
<s:actionContent>
				<s:Image id="menuBack" smooth="true" width="100%" height="100%" source="@Embed('../assets/actionBar/menuBtn.png')" click="navigator.popToFirstView();"/>
</s:actionContent>

То есть картинка-лейбл слева вставляется в navigationContent, синяя кнопка возврата в меню в actionContent. Компонент я решил вставить в titleContent, соотвественно во view, где он появляется, я вписываю следующее:

<s:titleContent>
		<as3comps:SmallSelectedIcon   width="100%" height="100%" click="navigator.pushView(views.Selected)"  />
</s:titleContent>
<s:actionContent>
		<s:Image id="menuBack" name="menuBack" smooth="true" width="100%"  height="100%" source="@Embed('../assets/actionBar/menuBtn.png')" click="navigator.popToFirstView();"/>
</s:actionContent>

Ну и теперь самое главное, я думал что теперь мне достаточно в классе скина изменить лейаут titleGroup примерно так (строчка с комментарием):

titleGroup = new Group();
        hLayout = new HorizontalLayout();
        hLayout.horizontalAlign = HorizontalAlign.RIGHT; //  было LEFT
        hLayout.verticalAlign = VerticalAlign.MIDDLE;
        hLayout.gap = 0;
        hLayout.paddingLeft = hLayout.paddingRight = layoutTitleGroupHorizontalPadding; 
        hLayout.paddingTop = hLayout.paddingBottom = 0;
        titleGroup.layout = hLayout;
        titleGroup.id = "titleGroup";

однако обнаружил что изменения вносимые в лейаут в скине, ни напрямую в код, ни через css, никак не проявляются, компонент остается на своем месте. Все остальные способы поменять его место (впихнуть в actionGroup и т.д.) оказались глючными или нерабочими. В общем на этом примере я остро ощутил свое непонимание принципов позиционирования компонентов во Flex, очень надеюсь что кто нибудь прояснит хотя бы в каком направлении копать.

[alatar]

1. Уберите вот это: "и внес в него все необходимые мне изменения."
2. Откройте документацию.
3. Обратите внимание на свойства actionLayout и navigationLayout.
4. Прочитайте наконец то что написано по ссылкам в разделах "Дополнительные примеры" и "Дополнительно" в документации на этот компонент (они находятся вверху страницы, сразу после раздела "Синтаксис MXML").
5. Если все еще будет непонятно, где вы ошиблись, напишите об этом, попробую объяснить вам своими словами.

[PainKiller]

Спасибо! В принципе этот вопрос я уже решил, в классе скина я выцепляю этот компонент по getChildByName, отрубаю лейаут и позиционирую его сам, но есть сильное ощущение что этот подход очень кривой и может еще вылезти боком, поэтому спасибо за наводку, сейчас приходится другим проектом заниматься, но на той неделе я попробую сделать все правильно и отпишу о результатах.

[alatar]

Это не решение. В принципе.
Для позиционирования дочерних элементов в ActionBar вам нет необходимости модифицировать его скин (если речь не идет о изменении позиционирования navigationGroup, titleGroup или actionGroup, что не является вашим случаем). О существовании getChildByName в контексте spark компонентов, можете вообще забыть, как и о существовании свойства name.

[PainKiller]

В общем появилось время на эксперименты, перечитал еще раз документацию, сделал все так как там написано, поместил нужные мне компоненты таким вот образом:

<s:actionContent>
		<s:Button icon="{ new SmallSelectedIcon() }" click="navigator.pushView(views.Selected);"/>
		<s:Button icon="@Embed('../assets/actionBar/menuBtn.png')" click="navigator.popToFirstView();"/>
</s:actionContent>

где new SmallSelectedIcon() это как раз тот самый компонент "плюсик с цифрой" о котором шла речь. Как изменять его состояние я думаю разберусь (сделаю bindable), вопрос теперь заключается в другом. ActionBar теперь выглядит вот так:

и непонятно как растянуть icon (а точнее Button, я так понимаю иконка во всю кнопку и так растянута) в высоту всего ActionBar? Присвоение height="100%" ничего не меняет. Ничего на эту тему я в документации не нашел

[alatar]

Вот в этом случае можете сделать свой скин для Button. Хотя по уму у вас должна быть иконка соответствующего размера. Вот вам еще дополнительное чтиво.

[PainKiller]

Понял, спасибо большое. С иконками разного DPI все равно ничего не получается, они просто делают кнопку более крупной, а пустая окантовка по краям все равно остается. В общем буду делать скин кнопки.

Добавлено через 1 час 38 минут
И еще один вопрос по скинованию кнопки с компонентом. В общем я сделал так:

[Bindable]
public static var selIcon:SmallSelectedIcon = new SmallSelectedIcon();
 
<s:actionContent>
		<s:Button icon="{ selIcon }" skinClass="theme.ActionBtnSkinComp" click="navigator.pushView(views.Selected);"/>
	</s:actionContent>

и все нормально, обновляю как мне надо компонент, все ок. Проблема со скином, вот его класс (ActionBtnSkinComp):

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
		xmlns:s="library://ns.adobe.com/flex/spark">
	<!-- host component -->
	<fx:Metadata>
		[HostComponent("spark.components.Button")]
	</fx:Metadata>
 
	<!-- states -->
	<s:states>
		<s:State name="disabled" />
		<s:State name="down" />
		<s:State name="over" />
		<s:State name="up" />
	</s:states> 
 
	<s:BitmapImage id="iconDisplay"  left="0" right="0" top="0" bottom="0" />
 
 
	<!-- SkinParts
	name=iconDisplay, type=spark.primitives.BitmapImage, required=false
	name=labelDisplay, type=spark.core.IDisplayText, required=false
	-->
</s:SparkSkin>

когда я присваиваю его кнопке она исчезает.

Добавлено через 1 час 57 минут
В принципе я это тоже исправил скопировав из мобильной темы класс ButtonSkin.as, и внеся в него необходимые мне изменения, затем присвоил его моей кнопке. Но если есть подходы получше, просьба ими поделиться))