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>
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);
}
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>
I am using spark DropDownLists and I don't want to see any horizontal scrollbars in the dropdown. I'm OK with the dropdown being wider than the anchor, so I have a custom skin that sets popUpWidthMatchesAnchorWidth to false. But I don't want the dropdown to ever be smaller than the anchor. This is my dilemma.
I came up with a solution that sometimes works, but there is something wrong with it. My DropDownList skin is as follows:
<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled=".5" minHeight="25">
<fx:Metadata>
<![CDATA[
[HostComponent("spark.components.DropDownList")]
]]>
</fx:Metadata>
<fx:Script>
<![CDATA[
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
// anchor width is the min width of the dropdown
if (dropDown && openButton && popUp && dropDown.getExplicitOrMeasuredWidth() < openButton.getExplicitOrMeasuredWidth())
popUp.popUpWidthMatchesAnchorWidth = true;
super.updateDisplayList(unscaledWidth, unscaledHeight);
}
]]>
</fx:Script>
<s:states>
<s:State name="normal" stateGroups="closed" />
<s:State name="open" />
<s:State name="disabled" stateGroups="closed" />
</s:states>
<s:PopUpAnchor id="popUp" displayPopUp.normal="false" displayPopUp.open="true" includeIn="open"
left="0" right="0" top="0" bottom="0" itemDestructionPolicy="auto"
popUpPosition="below" popUpWidthMatchesAnchorWidth="false">
<s:Group id="dropDown" maxHeight="134" minHeight="22" >
<s:RectangularDropShadow id="dropShadow" blurX="20" blurY="20" alpha="0.45" distance="7"
angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>
<s:Rect id="border" left="0" right="0" top="0" bottom="0">
<s:stroke>
<s:SolidColorStroke id="borderStroke" weight="1"/>
</s:stroke>
</s:Rect>
<s:Rect id="background" left="1" right="1" top="1" bottom="1" >
<s:fill>
<s:SolidColor color="#222222"/>
</s:fill>
</s:Rect>
<s:Scroller id="scroller" left="0" top="0" right="0" bottom="0" hasFocusableChildren="false" minViewportInset="1">
<s:DataGroup id="dataGroup" itemRenderer="spark.skins.spark.DefaultItemRenderer">
<s:layout>
<s:VerticalLayout gap="0" horizontalAlign="contentJustify"/>
</s:layout>
</s:DataGroup>
</s:Scroller>
</s:Group>
</s:PopUpAnchor>
<s:Button id="openButton" left="0" right="0" top="0" bottom="0" focusEnabled="false" alpha.disabled="0.5"
skinClass.closed="assets.skins.dropDownList.dropDownListNormalButtonSkin"
skinClass.open="assets.skins.dropDownList.dropDownListOpenButtonSkin"/>
<s:Label id="labelDisplay" verticalAlign="middle" maxDisplayedLines="1"
mouseEnabled="false" mouseChildren="false"
left="7" right="30" top="2" bottom="2" width="75" verticalCenter="1" />
</s:SparkSkin>
This works as expected when the contents of the dropdown are either wider than the anchor or smaller than about 100px, but if I explicitly set the width in the instance of the DropDownList to be something like 200px and the contents of the dropdown are around 150px wide, the dropdown is smaller than the anchor.
Basically, it looks like openButton.getExplicitOrMeasuredWidth() returns about 100, regardless of what I set the DropDownList's width to be.
How can I change this so that I can have multiple DropDownLists with different widths, but always making sure that the dropdown's width is either greater than or equal to the anchor's width?
You Said:
"but if I explicitly set the width in the instance of the DropDownList to be something like 200px and the contents of the dropdown are around 150px wide, the dropdown is smaller than the anchor."
So if you explicitly set the width, then this.width is always reliable. Simply replace the button.getExplicitOrMeasuredWidth() with this.width, problem solved.
if (dropDown && openButton && popUp && dropDown.getExplicitOrMeasuredWidth() < this.width)
popUp.popUpWidthMatchesAnchorWidth = true;
I suggest you using openButton.width instead of openButton.getExplicitOrMeasuredWidth().
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 have a canvas lets say the size of it on the screen is 500x500. But I want the actual canvas size to be 1000x500 making the other half scrollable. How can I make a blank canvas with that specification?
Thank you
<s:Group width="500" height="500">
<s:Scroller left="0" right="0" top="0" bottom="0">
<s:Group width="1000" height="500" />
</s:Scroller>
</s:Group>