Добавление изображения в правой части строки заголовка панели в Flex 4

Question

Я пытаюсь создать компонент MXML на основе панели "спарк", и я хотел бы добавить изображение в правом конце строки заголовка, чтобы на панели был текст в строке заголовка и небольшое изображение справа конец. Я использую скин для определения цветов, фоновой заливки и т. Д. Но как мне добавить это изображение в правом конце строки заголовка? Я хотел бы сделать это изображение обрезанным, чтобы при вставке компонента использовалось либо изображение по умолчанию, либо новое изображение.

Пожалуйста, помогите с вашими идеями.

Answer 1

Добавьте компонент изображения в свой скин и присвойте ему идентификатор, а также установите изображение по умолчанию, которое вы хотите показать. Затем создайте компонент ActionScript, расширяющий Panel. В своем пользовательском коде Panel объявите часть обложки с тем же именем, что и идентификатор, который вы указали в своей обложке. Теперь переопределите функцию partAdded в вашей пользовательской панели и установите изображение в соответствии с вашими предпочтениями:

package mypackage
{
    import spark.components.Panel;
    import spark.primitives.BitmapImage;

    public class MyCustomPanel extends Panel
    {

        [SkinPart (required="false")]
        public var panelIcon:BitmapImage;

        override protected function partAdded(partName:String, instance:Object):void {
            super.partAdded(partName, instance);

            if (instance == panelIcon) {
                panelIcon.source = someOtherImageSource;
            }
        }
    }
}

Наконец, свяжите файл скина со своей пользовательской панелью, либо в CSS, либо установив skinClass при использовании своей пользовательской панели.

Answer 2

Вы всегда можете использовать TitleWindow и переназначить кнопку закрытия, чтобы сделать что-то помимо закрытия. Хороший пример создания обложки для TitleWindow и TitleWindowClosebutton здесь: http://blog.flexexamples.com/2010/04/04/changing-the-close-button-skin-on-the-spark-titlewindow-container-in-flex-4/