I am using a canvas which has a degrafa background, so far so good.
However, when scrolling, the background (degrafa grid) does not get redrawn.
In the code the background strokes are linked to the container height. The container height does not change even when scrolling.
How do I get the height of the whole area so I can set the new height to my degrafa background?
It looks like this:
<mx:Canvas id="blackBoard"
width="100%"
height="100%"
x="0"
y="0"
backgroundColor="#444444"
clipContent="true">
<!-- Degrafa Surface -->
<degrafa:Surface id="boardSurfaceContainer">
<degrafa:strokes>
<degrafa:SolidStroke id="whiteStroke"
color="#EEE"
weight="1"
alpha=".2"/>
</degrafa:strokes>
<!-- Grid drawing -->
<degrafa:GeometryGroup id="grid">
<degrafa:VerticalLineRepeater count="{blackBoard.width / ApplicationFacade.settings.GRID_SIZE}"
stroke="{whiteStroke}"
x="0"
y="0"
y1="{blackBoard.height}"
offsetX="0"
offsetY="0"
moveOffsetX="{ApplicationFacade.settings.GRID_SIZE}"
moveOffsetY="0"/>
<degrafa:HorizontalLineRepeater count="{blackBoard.height / ApplicationFacade.settings.GRID_SIZE}"
stroke="{whiteStroke}"
x="0"
y="0"
x1="{blackBoard.width}"
offsetX="0"
offsetY="0"
moveOffsetX="0"
moveOffsetY="{ApplicationFacade.settings.GRID_SIZE}"/>
</degrafa:GeometryGroup>
</degrafa:Surface>
I just had to use the scroll position in the degrafa property binding
<degrafa:VerticalLineRepeater count="{(blackBoard.width + blackBoard.horizontalScrollPosition)/ ApplicationFacade.settings.GRID_SIZE}"
stroke="{whiteStroke}"
x="0"
y="0"
y1="{blackBoard.height + blackBoard.verticalScrollPosition}"
offsetX="0"
offsetY="0"
moveOffsetX="{ApplicationFacade.settings.GRID_SIZE}"
moveOffsetY="0"/>
Related
In Flex 4.0, I have a project with a videodisplay, and below it some controls that I've created (play/pause button, HSlider for showing progress, some volume controls...)
The problem arises when the flash is displayed in a window that is too small to fit all controls at their desired width. What I see is that some controls are pushed to the right, out of sight. (Maybe it's because they are in a custom container that acts as a window, but that's needed functionality).
I want to designate the HSlider as having flexible width, so when the user creates a small window, the items in the control bar are still visible, and the HSlider is compressed enough to make that happen...
Cheers!
Edit: the code for my window (it's the VBox that I would like to have variable-sized):
<ns1:CollapsableTitleWindow x="294" y="36.65" backgroundColor="#000000" width="436" height="373" id="wnd" title="test" allowClose="false">
<mx:VideoDisplay width="100%" height="100%" id="vd" autoPlay="false" volume="1"/>
<mx:ControlBar id="ctrlbarLiveVideo1" width="100%">
<mx:Button width="30" height="22" id="btnPlay" click="{doplay();}" icon="{imgPlayButton}"/>
<mx:VBox verticalGap="1" horizontalAlign="right">
<mx:HSlider id="slider" width="100%" invertThumbDirection="true" maximum="{vd.totalTime}" minimum="0" tickInterval="{vd.totalTime/10}" value="{Number(vd.playheadTime)}" />
<mx:Label text="{sec2hms(Number(vd.playheadTime))} / {sec2hms(Number(slider.maximum))}"/>
</mx:VBox>
<mx:HBox id="box" horizontalGap="1" verticalAlign="middle">
<mx:Label id="lblVolume" text = "{String(Math.round(vd.volume*100))+'%'}"/>
<mx:Button label="-" id="btnless" width="34" height="22" verticalGap="0" labelPlacement="top" labelVerticalOffset="0" click = "{vd.volume -= 0.10}"/>
<mx:Button label="+" id="btnmore" width="34" height="22" verticalGap="0" labelPlacement="top" labelVerticalOffset="0" click = "{vd.volume += 0.10}"/>
</mx:HBox>
</mx:ControlBar>
</ns1:CollapsableTitleWindow>
Produces this screenshot:
Apparently the answer was: set the minWidth of the HSlider explicitly to 0:
<mx:HSlider minWidth="0" id="slider" width="100%" ... />
And also make the VBox width="100%": (thanks to code90)
<mx:VBox width="100%" verticalGap="1" horizontalAlign="right">
I have created a tile list with custom item renderer and in terms of functionality it works as it should. I reduced the width and height of the item renderer to 95% which then shows the tile lists background in the remaining 5% of that item. The problem is that only when I hover over the item, the background is covered up and I cant get a gap to appear between items. Is it possible to change the height and width of the hover over? Am I missing something simple?
<mx:Canvas id="Card2" label="Card2" width="100%" height="100%" backgroundColor="#FFFFFF">
<mx:TileList id="tlCard2" x="10" y="10" dataProvider="{acCard2}" width="580" height="340" dropEnabled="true" borderThickness="0" maxColumns="4" maxRows="4" rowHeight="85" columnWidth="145" borderColor="#000000" horizontalScrollPolicy="off" verticalScrollPolicy="off" borderStyle="solid" dragMoveEnabled="true" dragEnabled="true" backgroundImage="{imgGuide}" themeColor="#BCBCBC">
<mx:itemRenderer>
<mx:Component>
<mx:Image source="{assets/' + data.imageId + '.jpg'+ '?cachekill=\'' + new Date()}" horizontalAlign="center" verticalAlign="middle" width="95%" height="95%" scaleContent="false" maintainAspectRatio="true"/>
</mx:Component>
</mx:itemRenderer>
</mx:TileList>
</mx:Canvas>
Thanks in Advance! :)
for spark components you have autoDrawBackground="false"
Try http://blog.flexexamples.com/2010/04/22/removing-the-rollover-and-selection-highlight-on-a-spark-list-control-in-flex-4/
for mx try useRollOver = false
Try http://blog.flexexamples.com/2008/02/01/disabling-item-roll-over-highlighting-in-the-flex-datagrid-control/
TileList inherits paddingTop paddingBottom attributes setting those should do it.
Another thing you can try is setting the rowHeight of the TileList and the set the height of the itemRenderer to a value less then the rowHeight
I think you should play with padding styles family.
I am trying to automatically resize the children within an s:Group. The children are another s:Group and a H:Group. Each have a percentage width of 10% and 90% each. The problem is that when one of the groups is resized (using a transition and rotation combination in the Skin), the other group does not automatically resize to fill the space?
Shouldn't Flex do this automatically? or do I have to code this?
<s:Group
id="listsGroup"
width="100%"
height="255"
>
<s:Label text="LIST WITH HEADER TEST" styleName="h1" />
<s:Group
id="listsGroupSavedSearches"
width="10%"
height="255"
>
<components1:ListWithHeader
id="categories11"
dataProvider="{listModel}"
headerLabel="Saved Searches"
allowMultipleSelection="true"
top="10" bottom="0"
left="0" width="10%"
/>
</s:Group>
<s:HGroup left="160" width="90%" height="150" top="50" gap="6">
<components1:ListWithHeader
id="categories1"
dataProvider="{listModel}"
headerLabel="Category1 "
allowMultipleSelection="true"
width="100%"
height="150"
/>
<components1:ListWithHeader
id="categories2"
dataProvider="{listModel}"
headerLabel="Category2"
allowMultipleSelection="true"
width="100%"
height="150"
/>
<components1:ListWithHeader
id="categories3"
dataProvider="{listModel}"
headerLabel="Category3"
allowMultipleSelection="true"
width="100%"
height="150"
/>
</s:HGroup>
</s:Group>
The best way to approach something like this is to tie into the Flex Component lifecycle methods, specifically updateDisplayList(). UpdateDisplayList() is used to position and size your children. It has two parameters, the height and width of your component. You can then write an algorithm to size and position your children based on the component's height and width.
MXML does this all under the hood, kind of in a black magic sort of way; but you'll gain more control if you write the layout code yourself.
I am using a WindowShader in my website. every thing is working fine. but for somereason i am unable to display any background for my "home_feeds" VBox. If i add components on it, i can see them. But they backgound is not working. Even if i remove every thing from the Canvas(with home_feeds) i still dont see any background. But if i remove the comments from my mx:List.. i can see the background.
my code is given below
<mx:VBox right="35" paddingRight="10" verticalAlign="top" horizontalAlign="right">
<containers:WindowShade id="shade" opened="false" openIcon="{null}" closeIcon="{null}" paddingTop="0"
headerLocation="bottom" visible="true">
<containers:headerRenderer>
<mx:Component>
<flexlib:CanvasButton width="100%" height="20" skin="mx.skins.ProgrammaticSkin">
<mx:Script>
<![CDATA[
import flexlib.containers.WindowShade;
]]>
</mx:Script>
<mx:Box width="100%" horizontalAlign="center">
<degrafa:Surface width="80">
<degrafa:GeometryGroup>
<geometry:EllipticalArc closureType="pie"
arc="180" startAngle="-180" width="80" height="35" y="-18">
<geometry:fill>
<paint:GradientFill angle="90">
<paint:GradientStop color="#920000" />
<paint:GradientStop color="#D31F1F" />
</paint:GradientFill>
</geometry:fill>
</geometry:EllipticalArc>
<geometry:Polygon>
<geometry:data>40,5 35,13 45,13</geometry:data>
<geometry:stroke>
<paint:SolidStroke color="#333333" alpha="{WindowShade(parent).opened ? 1 : 0}" weight="1" />
</geometry:stroke>
<geometry:fill>
<paint:SolidFill color="#ffffff" alpha="{WindowShade(parent).opened ? 1 : 0}" />
</geometry:fill>
</geometry:Polygon>
<geometry:Polygon>
<geometry:data>40,13 35,5 45,5</geometry:data>
<geometry:stroke>
<paint:SolidStroke color="#333333" alpha="{WindowShade(parent).opened ? 0 : 1}" weight="1" />
</geometry:stroke>
<geometry:fill>
<paint:SolidFill color="#ffffff" alpha="{WindowShade(parent).opened ? 0 : 1}" />
</geometry:fill>
</geometry:Polygon>
</degrafa:GeometryGroup>
</degrafa:Surface>
</mx:Box>
</flexlib:CanvasButton>
</mx:Component>
</containers:headerRenderer>
<mx:Canvas horizontalScrollPolicy="off" width="200" height="350" >
<!--mx:List id="home_feeds" height="100%" width="100%" itemRenderer="file_manager.list_item_template" doubleClickEnabled="true" /-->
<mx:VBox id="home_feeds"
width="100%"
backgroundAlpha="0.1"
left="10"
right="10">
</mx:VBox>
</mx:Canvas>
<containers:filters>
<mx:DropShadowFilter alpha=".3" angle="90" />
</containers:filters>
</containers:WindowShade>
</mx:VBox>
Kindly let me know what am i doing wrong here.... And how can i fix it. I want to use the VBox there.
Regards
Zeeshan
The size of a VBox without an explicit value for width would be zero if it doesn't have any children in it. Add some children (a Label for example) to see the background color. Increase background alpha from 0.1 to 0.5 or something to see it clearly.
If you mention explicit values for width and height (instead of percentages), you can see the background color even if it doesn't have any children.
set backgroundColor="#00ff00" (green) for the home_feeds VBox to differentiate VBox's background color from its parent's color.
I'm writing a chat client using Flex.
The basis for the chat window is a canvas. I've got that showing, but how do I make it scroll up? I want to clip the window so only the last 15 lines are shown.
This doesn't appear to be working (nothing moves):
<mx:Canvas id="canvas" width="300" height="3000" horizontalScrollPolicy="off" verticalScrollPolicy="on" creationComplete="myinit()">
<mx:Label text="HI" x="10" y="100"/>
</mx:Canvas>
Shouldn't this scroll the canvas every time it's called?:
canvas.verticalScrollPosition += 10;
You should change the verticalScrollPosition of the parent container. Such as
<mx:Canvas id="canvas" width="300" height="300"
horizontalScrollPolicy="off" verticalScrollPolicy="on"
creationComplete="myinit()">
<mx:Canvas id="canvas" width="300" height="3000">
<mx:Label text="HI" x="10" y="100"/>
</mx:Canvas>
</mx:Canvas>
Now
canvas.verticalScrollPosition += 10;
should work.