Перемещение Spark.components. ControlBar приложения в его нижнюю часть

Как в Flex 4.5 можно переместить панель управления приложения в ее нижнюю часть?

В Adobe doc говорится только следующее:

По умолчанию класс ApplicationSkin определяет, что область панели управления должна отображаться в верхней части области содержимого контейнера Application с серым фоном. Создайте собственную обложку, чтобы изменить внешний вид панели управления по умолчанию.

Поэтому я смотрю spark.skins.spark .ApplicationSkin и есть controlBarGroup (содержит ли он содержимое ControlBar?), Но я не знаю, как переместить его сверху вниз.


skin apache-flex flex4 flex4.5
person Alexander Farber    schedule 10.09.2011    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Первое, что вам нужно сделать, это создать собственный класс скинов. В FlashBuilder (FB) есть возможность создать его автоматически, но по сути это просто класс, как и любой другой.

В FB щелкните правой кнопкой мыши где-нибудь в своем проекте и выберите «New> MXML Skin».

введите описание изображения здесь

Затем заполните форму мастера следующим образом:

введите описание изображения здесь

В противном случае просто создайте новый файл .mxml и скопируйте / вставьте в него код из spark.skins.spark.ApplicationSkin.

Затем в своем приложении назначьте только что созданный класс скина:

<s:Application ... skinClass="skins.MyApplicationSkin" />

Теперь давайте отредактируем ваш недавно созданный класс скина. Это та часть, которая вас интересует (я вырежу несколько частей, чтобы было понятнее):

<s:Group left="0" right="0" top="0" bottom="0">
    <s:layout>
        <s:VerticalLayout gap="0" horizontalAlign="justify" />
    </s:layout>

    <s:Group id="topGroup" minWidth="0" minHeight="0"
                includeIn="normalWithControlBar, disabledWithControlBar" >

        <!-- some graphic elements here -->

        <s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" ...>
            <s:layout>
                <s:HorizontalLayout ... />
            </s:layout>
        </s:Group>
    </s:Group>

    <s:Group id="contentGroup" width="100%" height="100%" ... />

</s:Group>

Почти готово. Теперь все, что нам нужно сделать, это переместить эту «topGroup» под «contentGroup». 'topGroup' содержит некоторую графику + controlBarGroup. «contentGroup» - это область, в которую будут вставлены все компоненты, кроме вас, в файл .mxml вашего приложения.

<s:Group left="0" right="0" top="0" bottom="0">
    <s:layout>
        <s:VerticalLayout gap="0" horizontalAlign="justify" />
    </s:layout>

    <s:Group id="contentGroup" width="100%" height="100%" ... />

    <s:Group id="topGroup" minWidth="0" minHeight="0"
                includeIn="normalWithControlBar, disabledWithControlBar" >

        <!-- some graphic elements here -->

        <s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" ...>
            <s:layout>
                <s:HorizontalLayout ... />
            </s:layout>
        </s:Group>
    </s:Group>

</s:Group>
person RIAstar    schedule 11.09.2011
comment
Спасибо за хорошее объяснение, это работает! И я даже изменил заливку фона на градиент, изменив backgroundRect. - person Alexander Farber; 11.09.2011

arrow_upward
0
arrow_downward

Вы можете попробовать переместить группу панели управления под группу содержимого, и она должна вести себя так, как ожидалось, особенно если вы посмотрите на макет родительской группы (вертикальный).
Если вы хотите осуществлять еще больший контроль над ней, переопределите partAdded метод.

person Radu    schedule 11.09.2011
comment
Спасибо, но как мне переместить группу панели управления под группу содержимого? - person Alexander Farber; 11.09.2011
comment
Получите доступ к исходному коду spark.skins.spark.ApplicationSkin. Скопируйте его и вставьте в новый созданный вами компонент (например, MySkin). После этого переместите часть кода, связанного с controlBarGroup, в группу с идентификатором contentGroup, и на этом все должно быть. - person Radu; 11.09.2011