I have the following code:
<s:BorderContainer id="myBorder"
width="78" height="78"
horizontalCenter="0"
>
<s:Scroller id="myScroller" horizontalScrollPolicy="off" >
<s:TileGroup id="thingyList"
height="78"
focusEnabled="true"
horizontalGap="4"
verticalGap="4"
mouseOver="thingyList_mouseOverHandler(event)"
paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0"
requestedColumnCount="3"
requestedRowCount="3"
maxHeight="78"
maxWidth="78"
bottom="row1:3"
verticalScrollPosition="70"
horizontalAlign="center"
verticalAlign="middle"
clipAndEnableScrolling="true"
/>
</s:Scroller>
</s:BorderContainer>
The problem I'm having is that as items are added to the tileGroup, the vertical display of the tile group overflows its' bounds, thus displaying +- 3 1/2 rows of data.!
It's really driving me crazy! ideas anyone?
thanks!,
mce
Scroller are tricky in the Spark architecture.
Give the Scroller an explicit height and width; set the TileGroup to height and width of 100%.
<s:Scroller id="myScroller" horizontalScrollPolicy="off" height="78" width="78" >
<s:TileGroup id="thingyList"
height="100%"
focusEnabled="true"
horizontalGap="4"
verticalGap="4"
mouseOver="thingyList_mouseOverHandler(event)"
paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0"
requestedColumnCount="3"
requestedRowCount="3"
maxHeight="78"
maxWidth="78"
bottom="row1:3"
verticalScrollPosition="70"
horizontalAlign="center"
verticalAlign="middle"
clipAndEnableScrolling="true"
width="100%"
/>
</s:Scroller>
Related
I have a canvas and inside that canvas have a Vgroup.i add dynamically graphic objects to that vgroup. After adding more than 4 graphic objects i enable up and down arrows.
this is my canvas code.
<mx:Canvas id="canvas" width="120">
<s:VGroup id="levels" width="120"/>
</mx:Canvas>
this is whole code
<s:VGroup>
<s:VGroup>
<s:HGroup>
<s:Spacer width="50"/>
<s:Image id="prev" source="../assets/navPrev.png" mouseOver="arrowImageMouseOver(event)" mouseOut="arrowImageMouseOut(event)" visible="false"
buttonMode="true" click="clickUpArrow()"/>
</s:HGroup>
<mx:Canvas id="canvas" width="120">
<s:VGroup id="levels" width="120"/>
</mx:Canvas>
<s:HGroup>
<s:Spacer width="50"/>
<s:Image id="next" source="../assets/navNext.png" mouseOver="arrowImageMouseOver(event)" mouseOut="arrowImageMouseOut(event)" visible="false"
buttonMode="true" click="clickDownArrow()" />
</s:HGroup>
</s:VGroup>
</s:VGroup>
when click on up and down arrows .. i want to scroll on canvas.How can i do that ?
i tried this one but did not work
private function clickUpArrow():void
{
canvas.verticalScrollPosition-=(levellength+10);
}
private function clickDownArrow():void
{
canvas.verticalScrollPosition +=(levellength+10);
}
Hope this will help you,
Need to set height for your canvas component like height="120" because items are arranged in vertical order so height is mandatory for enabling vertical scrollbar.
<mx:Canvas id="canvas" height="120">
<s:VGroup id="levels" width="120"/>
</mx:Canvas>
Better you need to use Scroller spark component instead of Canvas (mx component) like below markup.
<s:VGroup>
<s:VGroup>
<s:HGroup>
<s:Spacer width="50"/>
<s:Image id="prev" source="../assets/navPrev.png" mouseOver="arrowImageMouseOver(event)" mouseOut="arrowImageMouseOut(event)" visible="false"
buttonMode="true" click="clickUpArrow()"/>
</s:HGroup>
<s:Scroller id="scroller" height="120" width="150">
<s:VGroup id="levels" width="120"/>
</s:Scroller>
<s:HGroup>
<s:Spacer width="50"/>
<s:Image id="next" source="../assets/navNext.png" mouseOver="arrowImageMouseOver(event)" mouseOut="arrowImageMouseOut(event)" visible="false"
buttonMode="true" click="clickDownArrow()" />
</s:HGroup>
</s:VGroup>
</s:VGroup>
Up and Down Arrow click handler like this,
private function clickUpArrow():void
{
if(scroller.verticalScrollBar){
scroller.verticalScrollBar.viewport.verticalScrollPosition -=(levellength+10);
}
//scroller.verticalScrollBar.changeValueByPage(false);
}
private function clickDownArrow():void
{
if(scroller.verticalScrollBar){
scroller.verticalScrollBar.viewport.verticalScrollPosition -=(levellength+10);
}
//scroller.verticalScrollBar.changeValueByPage(true);
}
for example I have a container:
<mx:HBox width="100">
<mx:Box width="50">
</mx:Box>
<mx:Box width="50">
</mx:Box>
<mx:Box width="50">
</mx:Box>
</mx:HBox>
the parent container have a width of 100, and the children containers are obviusly bigger, well then appears the scrollbar that can be disabled/enabled, but I want the third block to jump down, i mean 2 box in a line each 50 * 2 = 100, but I can't realize that, also i've tried the same with <s:HGroup>, is that possible to do?
right now I am forced to do this:
<mx:VBox width="100">
<mx:HBox>
<mx:Box width="50">
</mx:Box>
<mx:Box width="50">
</mx:Box>
</mx:HBox>
<mx:HBox>
<mx:Box width="50">
</mx:Box>
</mx:HBox>
</mx:VBox>
The code below produces two groups with colored backgrounds and a margin between them. Ive tried the obvious css fixes (margin-top/bottom etc) but it seems it doesnt do any good. Does anyone know how i can do this?
<s:VGroup width="100%" height="100%" verticalAlign="middle" horizontalAlign="center">
<s:Group id="topBar" width="100%" height="10%" bottom="0">
<s:Rect width="100%" height="100%">
<s:fill><s:SolidColor color="black" /></s:fill>
</s:Rect>
</s:Group>
<s:Group id="contentBar" width="100%" height="90%" top="0">
<s:Rect width="100%" height="100%">
<s:fill><s:SolidColor color="red" /></s:fill>
</s:Rect>
</s:Group>
</s:VGroup>
Are you saying you want to get rid of the gap between children elements of the VGroup?
You can set gap=0 in the group, as in:
<s:VGroup gap="0" />
Hope that helps.
I am having some problems with clipAndEnableScrolling, it works fine for VGroup when the parent has fixed height, but if the parent doesn't have a fixed height then it doesn't work and the content spills over. e.g:
<s:TitleWindow width="500" height="500">
<s:VGroup width="100%">
<s:Group width="100%">
<!-- The content in here changes height based on the state, I won't complicate this example with the details -->
</s:Group>
<s:Group width="100%" clipAndEnableScrolling="true">
<s:Scroller height="100%" width="100%">
<s:DataGroup dataProvider="{someData}" width="100%">
<s:layout>
<s:VerticalLayout gap="1"/>
</s:layout>
</s:DataGroup>
</s:Scroller>
</s:Group>
</s:VGroup>
</s:TitleWindow>
This is a contrived example, but the point is that I don't know the hight of the first group ahead of time so can't set the height of the second group, also the component in reality is quite a lot more complex that the contrived example above so I don't want to have to perform any kind of gymnastics to calculate the heights of everything above the second Group.
Can anyone tell me how to get a scrollbar on the second group?
Cheers,
Chris
Can you try setting height to 100% upon all the groups, something like this
<s:TitleWindow width="500" height="500">
<s:VGroup width="100%" height="100%">
<s:Group width="100%" height="100%">
<!-- The content in here changes height based on the state, I won't complicate this example with the details -->
</s:Group>
<s:Group width="100%" height="100%" clipAndEnableScrolling="true">
<s:Scroller height="100%" width="100%">
<s:DataGroup dataProvider="{someData}" width="100%" height="100%">
<s:layout>
<s:VerticalLayout gap="1"/>
</s:layout>
</s:DataGroup>
</s:Scroller>
</s:Group>
</s:VGroup>
</s:TitleWindow>
Put your group inside the scroller.
<s:Scroller height="100%" width="100%">
<s:DataGroup dataProvider="{someData}" width="100%" height="100%">
<s:layout>
<s:VerticalLayout gap="1"/>
</s:layout>
</s:DataGroup>
</s:Scroller>
</s:Group>
When I set the visible property to false for a child in a container, how can I get the container to resize? In the example bellow, when clicking on "Toggle", "containerB" is hidden, but the main container's scrollable area is not resized. (I do not want to scroll through a lot of empty space.)
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
public function toggle():void {
containerB.visible = !containerB.visible;
}
]]>
</mx:Script>
<mx:VBox height="300" width="200" horizontalAlign="center">
<mx:Button label="Toggle" click="toggle()" width="200"/>
<mx:VBox id="containerA" height="400" width="150" horizontalAlign="center">
<mx:Button label="A" height="400" width="100"/>
</mx:VBox>
<mx:VBox id="containerB" height="400" width="150" horizontalAlign="center">
<mx:Button label="B" height="400" width="100"/>
</mx:VBox>
</mx:VBox>
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
public function toggle():void {
containerB.visible = !containerB.visible;
}
]]>
</mx:Script>
<mx:VBox height="300" width="200" horizontalAlign="center">
<mx:Button label="Toggle" click="toggle()" width="200"/>
<mx:VBox id="containerA" height="400" width="150" horizontalAlign="center">
<mx:Button label="A" height="400" width="100"/>
</mx:VBox>
<mx:VBox id="containerB" height="400" width="150" horizontalAlign="center" includeInLayout="{containerB.visible}">
<mx:Button label="B" height="400" width="100"/>
</mx:VBox>
</mx:VBox>
</mx:Application>
Hi, just make the containerB includeInLayout property to be dependant on its visible property,
i just added includeInLayout="{containerB.visible}" in conatinerB property list, this is working, i hope this is wht u were luking for
have a gr8 time
Ankur Sharma
Lots of ways, I think given your current code you should listen to the show and hide event on containerB.
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="creationComplete()">
<mx:Script>
<![CDATA[
public function toggle():void {
containerB.visible = !containerB.visible;
}
public function creationComplete():void{
containerB.addEventListener(FlexEvent.SHOW, onContainerBChange );
containerB.addEventListener(FlexEvent.HIDE, onContainerBChange );
}
public function onContainerBChange():void{
if(this.containerB.visible == true){
this.mainContainer.width = this.containerB.width + this.containerA.width
this.mainContainer.height = this.containerB.height + this.containerA.height
} else {
this.mainContainer.width = this.containerA.width;
this.mainCintainer.height = this.containerA.height;
}
}
]]>
</mx:Script>
<mx:VBox height="300" width="200" horizontalAlign="center" id="mainContainer">
<mx:Button label="Toggle" click="toggle()" width="200"/>
<mx:VBox id="containerA" height="400" width="150" horizontalAlign="center">
<mx:Button label="A" height="400" width="100"/>
</mx:VBox>
<mx:VBox id="containerB" height="400" width="150" horizontalAlign="center">
<mx:Button label="B" height="400" width="100"/>
</mx:VBox>
</mx:VBox>
I'm writing code in the browser so this should viewed as psuedo code. A big plus for you if, instead of having the resize code in the onContainerBChange handler you invalidate the displaylist and put the code in updateDisplayList();
As a complete aside; I hope your real code does not use a VBox with only a container inside it. In this simple example, there is no reason you can't have eliminate containerA and containerB altogether and just have three buttons in an VBox.