Создание всплывающего окна в FLEX 3.0 - PullRequest
Новая
       32

Создание всплывающего окна в FLEX 3.0

0 голосов
/ 23 января 2012

Я создал всплывающее окно, в котором пользовательский компонент расширяет Canvas. Я хочу, чтобы внешний вид холста был таким же, как на изображении.Есть ли идея, что как создать всплывающее окно, подобное этому. enter image description here

Здесь я даю вам пример кода, который я сделал до сих пор ... 

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="550" height="350" backgroundAlpha="0">
<mx:Script>
    <![CDATA[
        import mx.managers.PopUpManager;

        public function btnImage_click():void
        {
            PopUpManager.removePopUp(this);
        }

    ]]>
</mx:Script>
<mx:Image source="Images/close.png" top="4" left="500" useHandCursor="true" buttonMode="true" click="{btnImage_click();}" />
<mx:Fade id="fadeIn" duration="700" alphaFrom="0.0" alphaTo="1.0"/>
<mx:VBox height="100%" width="100%" horizontalAlign="center" verticalAlign="middle">
    <mx:Canvas height="85%" width="90%" backgroundColor="#ffffff" backgroundAlpha="1" >
        <mx:VBox height="100%" width="100%">
            <mx:HBox height="70%" width="100%" horizontalAlign="center" verticalAlign="middle">
                <mx:Image id="btnPrevious" source="Images/previous.png" 
                    click="{vsSubImages.selectedIndex--}" enabled="{vsSubImages.selectedIndex!=0}"/>
                <mx:ViewStack height="100%" width="90%" creationPolicy="all" id="vsSubImages">
                    <mx:VBox height="100%" width="100%" horizontalAlign="center" verticalAlign="middle" showEffect="{fadeIn}">
                        <mx:Image id="img1" maintainAspectRatio="true" height="100%" width="100%" horizontalAlign="center" verticalAlign="middle" />    
                    </mx:VBox>                  
                    <mx:VBox height="100%" width="100%" horizontalAlign="center" verticalAlign="middle" showEffect="{fadeIn}">
                        <mx:Image id="img2" maintainAspectRatio="true" height="100%" width="100%" horizontalAlign="center" verticalAlign="middle" />    
                    </mx:VBox>                  
                    <mx:VBox height="100%" width="100%" horizontalAlign="center" verticalAlign="middle" showEffect="{fadeIn}">
                        <mx:Image id="img3" maintainAspectRatio="true" height="100%" width="100%" horizontalAlign="center" verticalAlign="middle" />    
                    </mx:VBox>                  
                </mx:ViewStack>
                <mx:Image id="btnNext" source="Images/next.png" 
                    click="{vsSubImages.selectedIndex++}" enabled="{vsSubImages.selectedIndex!=2}" />
            </mx:HBox>
            <mx:Box height="30%" width="100%" horizontalAlign="right" verticalAlign="top">
                <mx:Form height="100%" width="100%">
                    <mx:FormItem label="Project Name : " >
                        <mx:Label id="lblName" />
                    </mx:FormItem>
                    <mx:FormItem label="Description : " >
                        <mx:Label id="lblDescription" />
                    </mx:FormItem>
                    <mx:FormItem label="Technology Name : " >
                        <mx:Label id="lblTechnology" />
                    </mx:FormItem>
                </mx:Form>
            </mx:Box>
        </mx:VBox>
    </mx:Canvas>
</mx:VBox>
</mx:Canvas>

Основная идея - показать кнопку закрытия на холсте, в настоящее время я получаю это за холстом.Пожалуйста, помогите мне.

1 Ответ

1 голос
/ 23 января 2012

Поставьте тег <mx:Image source="Images/close.png" top="4" left="500" useHandCursor="true" buttonMode="true" click="{btnImage_click();}" /> в самом низу кода перед последним тегом </mx:Canvas>. Поскольку холст ведет себя так, как последний находится на самом верху в z-index.

...