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">
Related
Apologies for the rookie Q - trying to learn Flex/Actionscript and just having some basic layout issues. (Using FlashBuilder 4, with Flex 4.5 HERO SDK)
I have a TitleWindow, and have embedded a mx:TabNavigator within it.
I have then placed a list within the first tab and set its width/height to 100%
However, there appears to be a gap between the top of the list, and the bottom of the tab menus.
Why is this happening and what is the best way to ensure the top of the list aligns up flush with the top of the VBox?
<s:TitleWindow title="Dekho Resource Center"
id="titleWindow"
close="cancel();"
width="375"
height="500"
backgroundAlpha="0"
cornerRadius="5">
<mx:TabNavigator borderStyle="solid" left="0" top="0" width="100%" height="100%" backgroundAlpha="0" >
<mx:VBox label="Blog Posts"
width="100%"
height="100%">
<s:List labelField="title" id="theList" width="100%" height="100%"
contentBackgroundAlpha="0.7" rollOverColor="#F58B57" selectionColor="#FF7227"
doubleClickEnabled="true" doubleClick="theList_doubleClickHandler(event)">
<mx:AsyncListView list="{getDataResult.lastResult}"/>
</s:List>
</mx:VBox>
<mx:VBox label="Search"
width="100%"
height="100%">
</mx:VBox>
</mx:TabNavigator>
Remove the padding from the TabNavigator:
<mx:TabNavigator paddingTop="0"
paddingLeft="0"
paddingRight="0"
paddingBottom="0">
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 have the following application and I am trying to put a scrollbar somewhere inside the TabNavigator, preferably on the innermost Vbox, but the scrollbar always ends up on the Panel. Is there some kind of property which controls this? I thought height=100% would have controlled it but it doesn't seem to work.
Sample is here. You can view source on it:
VBox Sample
Here is the source anyway:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" viewSourceURL="srcview/index.html">
<mx:Panel width="400" height="400">
<mx:TabNavigator width="100%" height="100%" creationPolicy="all">
<mx:VBox label="Tab 1" width="100%" height="100%">
<mx:ViewStack width="100%" height="100%">
<mx:VBox width="100%" height="100%">
<mx:Text width="100%" height="500" text="This box is taller than the Panel, but the scrollbar is on the window." />
</mx:VBox>
</mx:ViewStack>
</mx:VBox>
</mx:TabNavigator>
</mx:Panel>
</mx:Application>
I found the proper solution is to set the minheight on the box to 0. When the minheight is not defined, the box will try to remain at it's measured height. By setting the minheight you are telling the box it is ok to shrink.
I've had this issue in the past, and the solution is a bit wonky, but hopefully this helps:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Panel width="400" height="400" verticalScrollPolicy="off">
<mx:TabNavigator width="100%" height="100%">
<mx:VBox id="container" label="Tab 1" width="100%" height="100%">
<mx:ViewStack width="100%" height="{container.height - 20}">
<mx:VBox width="100%" height="100%">
<mx:Text width="100%" height="500" text="This box is taller than the Panel, but the scrollbar is on the window." />
</mx:VBox>
</mx:ViewStack>
</mx:VBox>
</mx:TabNavigator>
</mx:Panel>
</mx:Application>
Flex seems to calculate dynamic component dimensions properly about 98% of the time, but sometimes we need to "massage" the logic.
When you look at your layout hierarchy (as I've shown above), you just need to name the parent container (in this case Tab1) for the purposes of data binding, then use that container's height property for your sizing. (you also don't need to explicitly state verticalScrollPolicy="off" on the panel, but I use if for good measure :P)
Note that you may need to subtract a bit from the given height or your scrollbar will be below the component bounds ;)
I have a combobox with a width set to 100%. However, when one of its elements is larger, the combobox grows larger aswell, creating scrollbars and other uglyness in my app!
How do I keep the combobox contained within its parent?
NB it's OK if the list that drops down is larger as long as the closed combobox stays smaller.
Sample:
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%">
<!-- I'm using a Canvas instead of a VBox because the VBox spaces the elements too far appart -->
<mx:HBox id="tagsHBox" width="{formsHBox.width - 16}" x="8" y="8">
<!-- This label should align with the labels in the left form -->
<mx:Label text="Tags" id="tabLabel" width="{titleTxt.x + 4}" textAlign="right" />
<!-- This textbox should spread accross both forms, that's why it's in a seperate HBox -->
<mx:TextInput height="20" width="100%" />
</mx:HBox>
<mx:HBox id="formsHBox" x="8" y="{8 + tagsHBox.height}" width="{this.width-16}">
<mx:Form id="leftForm" width="50%">
<!-- Personal details -->
<mx:FormHeading label="Personal Details" width="100%" />
<mx:FormItem label="First name" width="100%">
<mx:TextInput text="{person.firstName}" width="100%"/>
</mx:FormItem>
<mx:FormItem label="Last name" width="100%">
<mx:TextInput text="{person.lastName}" width="100%"/>
</mx:FormItem>
<!-- And 15 more formItems :) -->
</mx:Form>
<mx:Form id="rightForm" width="50%">
<!-- Address -->
<mx:FormHeading label="Address" width="100%" />
<mx:FormItem label="Street" width="100%">
<mx:TextInput text="{person.address.street}" width="100%"/>
</mx:FormItem>
<mx:FormItem label="City" width="100%">
<mx:TextInput text="{person.address.city}" width="100%"/>
</mx:FormItem>
<mx:FormItem label="Country" width="100%">
<!-- This combobox right here is the troublemaker. There's a
country named 'South Georgia and the South Sandwich
Islands' consising of a few small islands in the southern
pacific and a name which is too long for my innocent
unsuspecting combobox -->
<form:ComboBox id="countryCombo" height="20" width="100%"
dataProvider="{model.systemDataModel.countries}" />
</mx:FormItem>
<!-- And 15 more formItems :) -->
</mx:Form>
</mx:HBox>
</mx:Canvas>
You might be able to use minWidth instead. Set it to zero or some other low value. I know it works with containers like HBox and VBox to make them stop growing larger than their parent container, so it might work with ComboBox too. Basically, what happens is that minWidth="0" overrides the measuredMinWidth, which is a value that the parent container normally respects as the minimum possible size, and it may be bigger than the container's own bounds.
I had the same issue and I solve it easily. I had a country comboBox and a state comboBox components and dynamically filled with country names and the other with states related... I had two forms inside an HBox to show "two columns like" forms and inside the right side form there was a formItem and inside the formItem the comboBox. The problem was when I gave the comboBox its dataProvider then scrollBars appeared and it was very disgusting...
The solution: I show you just the right form because it was the problem (autoLayout="false" in Form and minWidth="0" in ComboBox definition)
<mx:Form autoLayout="false" verticalGap="12">
<mx:FormItem label="Country" required="false" width="100%" direction="vertical">
<mx:ComboBox id="countryComboBox" minWidth="0" width="100%" labelField="#name"/>
</mx:FormItem>
<mx:FormItem label="State" required="false" width="100%" direction="vertical">
<mx:ComboBox id="stateComboBox" minWidth="0" width="100%" labelField="#name"/>
</mx:FormItem>
</mx:Form>
You can use the maxWidth attribute with an absolute size (in pixels) however part of the combobox items ( which are larger then the combobox ) will be cropped .
from adobe :
combobox default size :
Wide enough to accommodate the longest entry in the drop-down list in the display area of the main control, plus the drop-down button. When the drop-down list is not visible, the default height is based on the label text size.
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.