Flex 4 Slidedown Effect - actionscript-3

I am attempting to recreate an effect that I found on (another site. When you hover over the gray header area a slide down menu is displayed.
The issue that I am having is that when I mouse over the area, the hiddenNav container instantly appears and does not have the nice move effect.
Here is my current code
<?xml version="1.0"?>
<!-- Simple example to demonstrate the WipeDown effect. -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo" xmlns:mx1="library://ns.adobe.com/flex/mx" currentState="normalMenu">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
protected function expandSubNavigation(event:MouseEvent):void
{
currentState=(currentState == 'hiddenMenu') ? 'normalMenu' : 'hiddenMenu';
}
]]>
</fx:Script>
<s:states>
<s:State name="normalMenu"/>
<s:State name="hiddenMenu"/>
</s:states>
<s:transitions>
<s:Transition id="myTransition" fromState="*" toState="*" >
<s:Parallel id="t1" targets="{[visibleNav,hiddenNav]}">
<s:Move duration="600"/>
</s:Parallel>
</s:Transition>
</s:transitions>
<s:BorderContainer x="0" y="0" width="100%" mouseOver="expandSubNavigation(event)" height="32" borderVisible="false" backgroundColor="#848484" >
<s:Label x="30" text="Lorem Ipsum" verticalCenter="0" color="#FFFFFF"/>
</s:BorderContainer>
<s:HGroup x="0" y="33" id="visibleNav" width="100%" height="24" gap="0">
<s:BorderContainer width="200" height="100%" borderVisible="false" backgroundColor="#227258" >
<s:Label text="Ipsum: " verticalCenter="0" left="10" color="#FFFFFF" fontSize="10"/>
</s:BorderContainer>
<s:BorderContainer width="100%" height="24" borderVisible="false" backgroundColor="#005C3F" >
</s:BorderContainer>
</s:HGroup>
<s:Group id="hiddenNav" alpha="0.9" x="0" y="0" y.hiddenMenu="33" includeIn="hiddenMenu" width="100%" height="50">
<s:BorderContainer width="100%" height="25" borderVisible="false" backgroundColor="#00110B" backgroundAlpha="0.9" y="0" x="0">
<s:Label text="Lorem Ipsum" x="0" y="0" color="0xFFFFFF"/>
</s:BorderContainer>
<s:BorderContainer width="100%" height="25" borderVisible="false" backgroundAlpha="0.9" backgroundColor="#333333" left="0" borderAlpha="0.9" y="25">
</s:BorderContainer>
</s:Group>
</s:Application>

problem was in targets attribute - it's useless to mention a Group there, here's your code fixed:
<?xml version="1.0" encoding="utf-8"?>
<!-- Simple example to demonstrate the WipeDown effect. -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo" xmlns:mx1="library://ns.adobe.com/flex/mx" currentState="normalMenu">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:states>
<s:State name="normalMenu"/>
<s:State name="hiddenMenu"/>
</s:states>
<s:transitions>
<s:Transition id="myTransition1" fromState="*" toState="*" >
<s:Sequence id="t1" targets="{[o0, o1]}">
<s:Move duration="600"/>
</s:Sequence >
</s:Transition>
</s:transitions>
<s:HGroup x="0" y="33" id="visibleNav" width="100%" height="24" gap="0">
<s:BorderContainer width="20%" height="100%" borderVisible="false" backgroundColor="#0000ff" >
<s:Label text="HGroup Ipsum: " verticalCenter="0" left="10" color="#FFFFFF" fontSize="10"/>
</s:BorderContainer>
<s:BorderContainer width="100%" height="24" borderVisible="false" backgroundColor="#005C3F" >
</s:BorderContainer>
</s:HGroup>
<s:Group id="hiddenNav" alpha="0.9" x="0" y="0" width="100%" mouseOut="if(event.stageY>60)currentState='normalMenu'">
<s:BorderContainer id="o0" width="100%" height="25" borderVisible="false" backgroundColor="#00110B" y="-20" x="0" y.hiddenMenu="33" y.normalMenu="-20">
<s:Label text="hiddenNav Lorem Ipsum" x="0" y="0" color="0xFFFFFF"/>
</s:BorderContainer>
<s:BorderContainer id="o1" width="100%" height="25" borderVisible="false" backgroundColor="#ffff00" y="5" y.hiddenMenu="58" y.normalMenu="5">
</s:BorderContainer>
</s:Group>
<s:BorderContainer x="0" y="0" width="100%" mouseOver="currentState='hiddenMenu'" height="32" borderVisible="false" backgroundColor="#848484" >
<s:Label x="30" text="BorderContainer Lorem Ipsum" verticalCenter="0" color="#FFFFFF"/>
</s:BorderContainer>
</s:Application>

Related

Flex radioButton Set selected Value via ActionScript

I have a radioButton in an ItemRenderer of a List component. I am trying to set the selected value of each radioButton based on a field in the dataprovider (SchoolList.Athletics_Fav).
These traces show the correct value:
trace("value: " +value.Athletics_Fav2);
trace("selectetText: " +selectText);
This one is not.
trace("btnSelect: "+radBtnPhone.selected);
Anyone have a suggestion as to how I can set radBtnPhone.selected to the dataprovider value (SchoolList.Athletics_Fav)? Any help would be greatly appreciated.
Code:
]]>
</fx:Script>
<s:Group width="100%" height="100%">
<s:Rect width="100%" height="100%">
<s:fill><s:SolidColor color="0xffffff" /></s:fill>
</s:Rect>
<s:Line width="100%">
<s:stroke>
<s:SolidColorStroke weight="1" color="0xd3d3d3"/>
</s:stroke>
</s:Line>
</s:Group>
<s:HGroup id="bigGrpPhone" width="100%" verticalAlign="middle">
<s:HGroup id="grpPhone" gap="6" height="100%" width="95%" paddingLeft="2" paddingRight="2" paddingTop="2" verticalAlign="middle">
<s:BitmapImage id="imgPhone" source="{data.SchoolImage}" width="70" height="70" />
<s:Label id="schlNamePhone" maxDisplayedLines="1" width="100%" height="100%" text="{data.SchoolName}" verticalAlign="middle"/>
</s:HGroup>
<s:HGroup width="5%" horizontalAlign="center" verticalAlign="middle">
<s:RadioButton width="50" id="radBtnPhone" styleName="myRadioButton" />
</s:HGroup>
</s:HGroup>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
Try this out:
<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
>
<s:SkinnableDataContainer>
<s:layout>
<s:VerticalLayout/>
</s:layout>
<mx:ArrayList id="SchoolList">
<fx:Object SchoolName="Smith" Athletics_Fav="true" SchoolImage="./SchoolImage.png"/>
<fx:Object SchoolName="Jones" Athletics_Fav="false" SchoolImage="./SchoolImage.png"/>
<fx:Object SchoolName="Davis" Athletics_Fav="false" SchoolImage="./SchoolImage.png"/>
<fx:Object SchoolName="Cooper" Athletics_Fav="true" SchoolImage="./SchoolImage.png"/>
</mx:ArrayList>
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer>
<s:Group width="100%" height="100%">
<s:Rect width="100%" height="100%">
<s:fill><s:SolidColor color="0xffffff" /></s:fill>
</s:Rect>
<s:Line width="100%">
<s:stroke>
<s:SolidColorStroke weight="1" color="0xd3d3d3"/>
</s:stroke>
</s:Line>
<s:HGroup id="bigGrpPhone" width="100%" verticalAlign="middle">
<s:HGroup id="grpPhone" gap="6" height="100%" width="95%" paddingLeft="2" paddingRight="2" paddingTop="2" verticalAlign="middle">
<s:BitmapImage id="imgPhone" source="{data.SchoolImage}" width="70" height="70" />
<s:Label id="schlNamePhone" maxDisplayedLines="1" width="100%" height="100%" text="{data.SchoolName}" verticalAlign="middle"/>
</s:HGroup>
<s:HGroup width="5%" horizontalAlign="center" verticalAlign="middle">
<s:RadioButton width="50" id="radBtnPhone" styleName="myRadioButton" selected="{data.Athletics_Fav}"/>
</s:HGroup>
</s:HGroup>
</s:Group>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:SkinnableDataContainer>
</s:Application>
I figured out a simple solution and wanted to post here for others who may need it. I created a Boolean variable (btnPhValue) and set it's value based on the value of the field AthleticsFavs in my SchoolList array. Then I set the radioButton.selected value to the Boolean var I created. Works Perfectly!
<s:List id="phoneList" width="100%" height="100%" contentBackgroundColor="0x0065a4" fontSize="20"
dataProvider="{SchoolList}" >
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer >
<fx:Script>
<![CDATA[
override public function set data(value:Object):void
{
super.data = value;
var selectPhText = value.AthleticsFavs;
var btnPhValue:Boolean;
radBtnPhone.group=outerDocument.radGrp;
if (selectPhText == 1)
btnPhValue = true;
else
btnPhValue = false;
radBtnPhone.selected = btnPhValue;
}
]]>
</fx:Script>
<s:Group width="100%" height="100%">
<s:Rect width="100%" height="100%">
<s:fill><s:SolidColor color="0xffffff" /></s:fill>
</s:Rect>
<s:Line width="100%">
<s:stroke>
<s:SolidColorStroke weight="1" color="0xd3d3d3"/>
</s:stroke>
</s:Line>
</s:Group>
<s:HGroup id="bigGrpPhone" width="100%" verticalAlign="middle">
<s:HGroup id="grpPhone" gap="6" height="100%" width="95%" paddingLeft="2" paddingRight="2" paddingTop="2" verticalAlign="middle">
<s:BitmapImage id="imgPhone" source="{data.SchoolImage}" width="70" height="70" />
<s:Label id="schlNamePhone" maxDisplayedLines="1" width="100%" height="100%" text="{data.SchoolName}" verticalAlign="middle"/>
</s:HGroup>
<s:HGroup width="5%" horizontalAlign="center" verticalAlign="middle">
<s:RadioButton width="50" id="radBtnPhone" styleName="myRadioButton" />
<!-- <MyComp:myRadioButton width="50" id="radBtnPhone" styleName="myRadioButton" /> -->
</s:HGroup>
</s:HGroup>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:List>

Increase height of just one ItemRender

I am trying to develop a Call Log with Flex, and I have some troubles with the ItemRenders. In fact, here is what I've got :
And when you click on an Item, the size of the Item changes to display more details :
But as you can see, every item are affected by this resize. The Tile Layout is taking the highest render and apply its height to the others.
Here is my code, where I call the Render :
<s:DataGroup id="TileListUsers"
left="10" right="10" top="10" bottom="10" width="300"
itemRenderer="assets.render.CallLogRender"
dataProvider="{ListCall}"
horizontalCenter="0" verticalCenter="0" contentBackgroundAlpha="0.0">
<s:layout>
<s:TileLayout horizontalGap="15" requestedColumnCount="1" verticalGap="15" />
</s:layout>
</s:DataGroup>
And in the Render, I'm using three BorderContainer, one for the first block, one for the second block, and one for the details displayed between them :
override public function set data(value:Object):void {
super.data = value;
CallerIDLabel.text = "Appel du : " + data.CallerID;
StartHourLabel.text = data.StartHour;
StartDateLabel.text = data.StartDate;
if(value == null){
return;
}
if (!data.Answer){
ShadowColor.color=0xCC9900;
CallerIDLabel.text = "Appel manqué : " + data.CallerID;
SourceIcon.source=callFinished;
}
}
private function onClick():void{
if (data.Answer){
this.height=170;
DetailLineContainer.visible=true;
SecondBlocContainer.visible=true;
}
}
]]>
</fx:Script>
<s:BorderContainer id="DetailLineContainer" x="0" y="39" width="100%" height="101"
backgroundAlpha="0.0" borderColor="#FFFFFF" borderVisible="false"
borderWeight="1" cornerRadius="5" visible="false" >
<s:Line id="LineDetail" x="25" y="0" height="100%">
<s:stroke>
<s:SolidColorStroke color="#aeaeae" weight="3" caps="square"/>
</s:stroke>
</s:Line>
<s:Graphic x="21" y="25" width="8" height="8">
<s:Ellipse x="0" y="0" width="8" height="8">
<s:fill>
<s:SolidColor id="CircleColor" color="#5b5b5b"/>
</s:fill>
</s:Ellipse>
</s:Graphic>
<s:Graphic x="21" y="53" width="8" height="8">
<s:Ellipse x="0" y="0" width="8" height="8">
<s:fill>
<s:SolidColor id="CircleColor2" color="#5b5b5b"/>
</s:fill>
</s:Ellipse>
</s:Graphic>
<s:Label id="DurationLabel" x="35" y="25" width="250"
color="#929292" fontFamily="proxima" fontSize="13"
text="Durée de l'appel : 13 minutes 23 secondes" textAlign="left"
verticalAlign="top"/>
<s:Label id="QualityLabel" x="35" y="52" width="250"
color="#929292" fontFamily="proxima" fontSize="13"
text="Qualité de l'appel : moyenne" textAlign="left"
verticalAlign="top"/>
</s:BorderContainer>
<s:BorderContainer id="FirstBlocContainer" width="100%" height="50" click="onClick()" backgroundColor="#FFFFFF"
borderColor="#FFFFFF" borderVisible="false" borderWeight="1" cornerRadius="5">
<s:BorderContainer width="50" height="50" borderVisible="false" backgroundAlpha="0.0">
<s:Graphic id="Shadow" x="0" y="0" width="100%" height="100%">
<s:Rect x="0" y="0" width="50" height="50" bottomLeftRadiusX="5" topLeftRadiusX="5">
<s:fill>
<s:SolidColor id="ShadowColor" color="#70b13c"/>
</s:fill>
</s:Rect>
</s:Graphic>
<s:Image id="SourceIcon" horizontalCenter="0"
source="#Embed('/assets/images/CallLogIncomming.png')" verticalCenter="0"/>
</s:BorderContainer>
<s:Graphic id="CallState" x="0" bottom="0" width="100%" height="2%" alpha="0.15">
<s:Rect x="0" y="-1" width="260" height="2">
<s:fill>
<s:SolidColor color="#000000"/>
</s:fill>
</s:Rect>
</s:Graphic>
<s:Label id="CallerIDLabel" left="60" width="180" color="#5B5B5B" fontFamily="proxima"
fontSize="14" maxDisplayedLines="2" text="Appel du : 0636360400" textAlign="left"
verticalAlign="middle" verticalCenter="0"/>
<s:Label id="StartDateLabel" y="10" right="5" width="50" color="#C0C4C3" fontSize="12" text="08/04/14"
textAlign="center" verticalAlign="middle"/>
<s:Label id="StartHourLabel" y="24" right="5" width="50" color="#C0C4C3" fontSize="12"
text="12:45" textAlign="center" verticalAlign="middle"/>
</s:BorderContainer>
<s:BorderContainer id="SecondBlocContainer" x="0" y="117" width="100%" height="50"
backgroundColor="#FFFFFF" borderColor="#FFFFFF" borderVisible="false"
borderWeight="1" cornerRadius="5" visible="false" >
<s:BorderContainer width="50" height="50" borderVisible="false" backgroundAlpha="0.0">
<s:Graphic id="CallState2" x="0" y="0" width="100%" height="100%">
<s:Rect x="0" y="0" width="50" height="50" bottomLeftRadiusX="5" topLeftRadiusX="5">
<s:fill>
<s:SolidColor id="ShadowColor2" color="#B1463C"/>
</s:fill>
</s:Rect>
</s:Graphic>
<s:Image id="SourceIcon2" horizontalCenter="0"
source="#Embed('/assets/images/CallLogFinished.png')" verticalCenter="0"/>
</s:BorderContainer>
<s:Graphic id="Shadow2" x="0" bottom="0" width="100%" height="2%" alpha="0.15">
<s:Rect x="0" y="-1" width="260" height="2">
<s:fill>
<s:SolidColor color="#000000"/>
</s:fill>
</s:Rect>
</s:Graphic>
<s:Label id="CallerIDLabel2" left="60" width="180" color="#5B5B5B" fontFamily="proxima"
fontSize="14" maxDisplayedLines="2" text="Vous avez raccroché" textAlign="left"
verticalAlign="middle" verticalCenter="0"/>
<s:Label id="StopDateLabel" y="10" right="5" width="50" color="#C0C4C3" fontSize="12" text="08/04/14"
textAlign="center" verticalAlign="middle"/>
<s:Label id="StopHourLabel" y="24" right="5" width="50" color="#C0C4C3" fontSize="12"
text="12:45" textAlign="center" verticalAlign="middle"/>
</s:BorderContainer>
Is there a way to say to the TileLayout to just increase the height of one component without affecting the others ?
Why use TileLayout if you have only one column? Use VerticalLayout and set its variableRowHeight property to true. Here's an example.

How to scroll view in Flex/Flash Builder?

I'm having problems srolling the content of a View that I've created in Flex/Flash Builder. When the content extends the screen I simply can't scroll to be able to see the rest.
What's the issue and how do I fix this?
I thought that clipAndEnableScrolling="true" would solve it but it didn't.
My code for the view with the content:
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" title="Information">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Style source="style.css">
</fx:Style>
<fx:Script>
<![CDATA[
protected function button2_clickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub
if (tabBarVisible){
tabBarVisible = false;
} else {
tabBarVisible = true;
}
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:actionContent>
<s:Button label="Meny" click="button2_clickHandler(event)"/>
</s:actionContent>
<s:VGroup clipAndEnableScrolling="true" width="90%" height="90%" horizontalCenter="0" verticalCenter="0">
<s:Button id="braAttVeta" width="100%" label="Bra att veta" styleName="knapp"/>
<s:Button id="karen" width="100%" label="Kåren" styleName="knapp"/>
<s:Button id="utskott" width="100%" label="Utskott" styleName="knapp"/>
<s:Button id="kontakt" width="100%" label="Kontakt" styleName="knapp"/>
<s:Button id="ordlista" width="100%" label="Ordlista" styleName="knapp"/>
<s:Button id="overallskultur" width="100%" label="Overallskultur" styleName="knapp"/>
<s:Button id="sponsorer" width="100%" label="Sponsorer" styleName="knapp"/>
<s:Button width="100%" label="Button" styleName="knapp"/>
<s:Button width="100%" label="Button" styleName="knapp"/>
<s:Button width="100%" label="Button" styleName="knapp"/>
<s:Button width="100%" label="Button" styleName="knapp"/>
<s:Button width="100%" label="Button" styleName="knapp"/>
<s:Button width="100%" label="Button" styleName="knapp"/>
<s:Button width="100%" label="Button" styleName="knapp"/>
<s:Button width="100%" label="Button" styleName="knapp"/>
<s:Button width="100%" label="Button" styleName="knapp"/>
<s:Button width="100%" label="Button" styleName="knapp"/>
</s:VGroup>
</s:View>
Throw the VGroup in a Scroller. (http://help.adobe.com/en_US/flex/using/WSb04c7610c3432839-13869d09121418556f1-7ffc.html)

Flex/mxml: newbie layout issue involving TabBar

If you run the following mxml code, you'll see there's a gap between the TabBar and the BorderContainer. How to simply remove that gap? I'm having trouble laying it out. Nothing I enter in TabBar (e.g. top="10", or y="10") has any effect.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<s:VGroup top="10" bottom="20" left="20" right="20">
<s:Group width="100%">
<s:HGroup left="0" top="2">
<s:Label id="titleTextId" text="My Title" fontWeight="bold" fontSize="18"/>
</s:HGroup>
<s:HGroup right="0" verticalAlign="middle">
<s:Button label="Button1" width="65"/>
<s:Button label="Button2" width="65" />
</s:HGroup>
</s:Group>
<s:TabBar id="tabs" dataProvider="{vs}"/>
<mx:ViewStack id="vs" height="100%" width="100%">
<s:NavigatorContent label="Tab 1" width="100%" height="100%">
<s:BorderContainer width="100%" height="100%" borderWeight="1" borderStyle="solid">
<s:Label left="3" top="5" text="This is my first tab..."/>
</s:BorderContainer>
</s:NavigatorContent>
<s:NavigatorContent label="Tab 2" width="100%" height="100%">
<s:BorderContainer width="100%" height="100%" borderWeight="1" borderStyle="solid">
<s:Label left="3" top="5" text="This is my second tab..."/>
</s:BorderContainer>
</s:NavigatorContent>
</mx:ViewStack>
</s:VGroup>
Try the gap attribute, this should do it!
<s:VGroup top="10" bottom="20" left="20" right="20" gap="0">

Creating a Popup in FLEX 3.0

I have created a Popup that is custom component extends Canvas i want the look of the canvas is similar like that showed in image. is there any idea that how to create a pop up similar like that.
Here i am giving you the sample code that i have done till now...
<?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>
The main idea is to show the close button on the Canvas currently i am getting that behind the Canvas.
Please Help me.
Put the <mx:Image source="Images/close.png" top="4" left="500" useHandCursor="true" buttonMode="true" click="{btnImage_click();}" /> tag at the very bottom of the code before last </mx:Canvas> tag. Because canvas behaves like last is at the very top in the z-index.