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)
Related
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>
I have a chart with a legend
<s:VGroup width="100%" height="100%">
<mx:LineChart width="100%" height="100%" id="lineChart" showDataTips="true" dataTipFunction="columnChartDataTipFunction">
<mx:verticalAxis>
<mx:LinearAxis id="v1" title="Position" labelFunction="labelFuncY"/>
</mx:verticalAxis>
<mx:horizontalAxis>
<mx:CategoryAxis
categoryField="kh_formatted_date" />
</mx:horizontalAxis>
<mx:verticalAxisRenderers>
<mx:AxisRenderer id="vax" axis="{v1}" placement="top"/>
</mx:verticalAxisRenderers>
</mx:LineChart>
<s:BorderContainer width="100%" borderColor="#ff0000" borderWeight="4">
<mx:Legend verticalGap="0" dataProvider="{lineChart}" clipContent="true" maxWidth="100"/>
</s:BorderContainer>
</s:VGroup>
I have this result but I was expecting scrollbars, also maxWidth seems to be ignored.
Use this structure instead
<s:BorderContainer width="100" borderColor="#ff0000" borderWeight="4">
<s:Scroller left="0" right="0" top="0" bottom="0">
<s:Group left="0" right="0" top="0" bottom="0">
<mx:Legend verticalGap="0" dataProvider="{myChart}" clipContent="true"/>
</s:Group>
</s:Scroller>
</s:BorderContainer>
to control the width of the legend you can use the width property of the BorderContainer
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">
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.
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>