I have a TextInput and a Canvas object both inside an HBox object. When the input text field has focus it highlights, I would like to change this to be the containing HBox that highlights when the Input Text has focus.
Does anyone have any ideas on how I can do that?
Here is my code:
<mx:HBox
keyDown="checkKey(event)"
horizontalGap="0">
<mx:TextInput
id="searchBox"
width="500"
fontSize="25"
backgroundColor="#F0F0F0"
borderThickness="2"
borderColor="#666666"
borderStyle="solid"/>
<mx:Canvas
borderThickness="2"
borderColor="#666666"
borderStyle="solid"
backgroundColor="#666666">
<mx:Button
label="Search"
click="searchInputText()"
fontSize="21"
styleName="primaryButton"/>
</mx:Canvas>
</mx:HBox>
Thanks!
I don't think HBoxes have highlighting enabled by default. But you could make the HBox respond to the focusIn event: Setting the filter's alpha to 0 makes it completely transparent.
<mx:HBox
name="parentHBox"
keyDown="checkKey(event)"
horizontalGap="0">
<mx:filters>
<mx:GlowFilter alpha=0.0>
</mx:filters>
<mx:TextInput
id="searchBox"
...
focusIn="{HBoxGlowFilter.alpha = 1.0}"
focusOut="{HBoxGlowFilter.alpha = 0.0}"/>
<mx:Canvas
...>
<mx:Button
label="Search"
click="searchInputText()"
fontSize="21"
styleName="primaryButton"/>
</mx:Canvas>
</mx:HBox>
Hope this helps.
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">
for some reason my code is not having the desired effect of having labels to the left of the textinput fields*(like in nearly all normal scenarios with forms). The labels are appearing above the textinput fields. I would also like to make some of them read only. Any advice much appreciated
Basically what i have is text sitting above the textbox instead of alongside it to the left.
Here is my code:
<mx:VBox width="100%" height="100%">
<mx:HBox>
<mx:FormItem textAlign="left" <mx:Label text="TEST" textAlign="left" fontSize="14" fontWeight="bold"/>
<mx:TextInput enabled="true" textAlign="right"/> </mx:FormItem>
Use the label field of the formitem.
<mx:FormItem textAlign="left" label="TEST" fontSize="14" fontWeight="bold"/>
<mx:TextInput enabled="true" textAlign="right">
</mx:FormItem>
If you want read-only, then you can put editable="true|false" in the TextInput.
I want to display an image instead of Color in item Selection and Hovering(mouse over) in Flex DataGrid. how i can do it ?
You could do this with an inline item renderer or a custom item renderer. Here's a quick and dirty example of how to do it with an inline item renderer. You'll probably want to tweak this a bit to fit your solution but it should give you a good starting point.
<mx:DataGrid dataProvider="{myDataProvider}">
<mx:columns>
<mx:DataGridColumn dataField="someDataField" width="100">
<mx:itemRenderer>
<fx:Component>
<mx:Canvas mouseOver="myImage.visible = true" mouseOut="myImage.visible = false" width="100">
<mx:Label text="{data.someDataField}" width="100%" x="0" y="0" />
<mx:Image id="myImage" x="0" y="0" source="{outerDocument.myImageClass}" visible="false" />
</mx:Canvas>
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
let say you have a
<mx:image id="img" src="sample.jpg" mouseOver="onHover()" mouseOut="onOut()"/>
a function
private function onHover():void{
img.src="sample2.jpg";
img.validateNow();
}
private function onOut():void{
img.src = "sample.jpg";
img.validateNow();
}
See if this works. not yet tested but the logic maybe there.
how can I reduce the space between my linkButtons and inside each linkButton ?
I've set padding to 0 but it was already 0.
I've been able to only change the height of the LinkButtons, but I cannot do that with the width because the text is dynamic.
<mx:Repeater id="bookmarksRepeater" dataProvider="{dataManager.bookmarksList}">
<mx:HBox>
<mx:VBox>
<mx:HBox>
<mx:Text >
<mx:text> {String(bookmarksRepeater.currentItem.name)}</mx:text>
</mx:Text>
<mx:LinkButton height="16" rollOverColor="#FFA500" label="Visit" />
<mx:LinkButton height="16" rollOverColor="#FFA500" label="Add" />
<mx:LinkButton height="16" rollOverColor="#FFA500" label="Save" />
</mx:HBox>
<mx:HBox>
<mx:Repeater id="tagsRepeater" dataProvider="{bookmarksRepeater.currentItem.tags}">
<mx:LinkButton height="14" color="0x0033CC" rollOverColor="#FFA500" fontSize="8" label="{String(tagsRepeater.currentItem.name)}"/>
</mx:Repeater>
</mx:HBox>
</mx:VBox>
<mx:Text height="16" color="0x0033CC" fontWeight="bold" >
<mx:text> {String(bookmarksRepeater.currentItem.popularity)} </mx:text>
</mx:Text>
</mx:HBox>
</mx:Repeater>
Your Repeater is inside an HBox, which has horizontal spacing set by default. To remove this spacing, set the horizontalGap to 0:
<mx:HBox horizontalGap="0">
<mx:Repeater id="tagsRepeater" dataProvider="{bookmarksRepeater.currentItem.tags}">
<mx:LinkButton height="14" color="0x0033CC" rollOverColor="#FFA500" fontSize="8"
label="{String(tagsRepeater.currentItem.name)}"/>
</mx:Repeater>
</mx:HBox>
To set the width of the LinkButtons dynamically, you will probably have to do it by overriding commitProperties of your container class, and for each LinkButton calculate the text metrics:
var m:TextLineMetrics = linkButton.measureText(lb.label);
Then you should be able to use the calculated metrics to set a precise width value for each LinkButton.
Another way to do it would be to listen for labelChanged events on the LinkButton, and then force a width recalculation in the listener.
I have a DataGrid,
<mx:DataGrid styleName="alternateColor"
verticalScrollBarStyleName="verticalScrollStyle"
headerSeparatorSkin="uiExtensions.DataGridHeaderSeparators"
width="100%" height="100%" editable="false" color="#000000"
verticalGridLines="false" variableRowHeight="true"
itemEditEnd="processData(event);" sortableColumns="false">
<mx:columns>
<mx:DataGridColumn wordWrap="true" dataField="Name">
<mx:itemRenderer>
<mx:Component>
<mx:Box>
<mx:Text id="tbName" selectable="false"
width="100%" fontSize="12" text="{data.Name}"/>
<mx:Text id="tbcontact" selectable="false"
width="100%" text="{data.Contact}"/>
</mx:Box>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
The datagrid does not scroll down after i've added 2 text components in a datagridcolumn.
The scrollbar scrolls back up on pulling it down.
Appreciate any help.
Thanks.
Scrolling is enabled in a DataGrid when the height of the grid is not enough to display all the items in its data provider; not when you add more controls to its columns. You have just defined a data grid with a single column that has two Text controls. Assign a big enough data to the dataProvider of the grid and it will work.
Btw, why are you using the Box control instead of HBox or VBox?
Issue Solved,
I used a VBox and Label instead of the Box and Text tags in the code posted above.
My code now looks like this...
<mx:Component>
<mx:VBox horizontalGap="0" verticalGap="0">
<mx:Label id="tbclassified" selectable="true" width="100%" fontSize="11" text="{data.Classified}"/>
<mx:HBox horizontalGap="0" verticalGap="0">
<mx:Label id="tbcategory" textAlign="left" selectable="true" width="100%" fontStyle="italic" color="#9F2200" text="{data.ClassifiedCategory}"/>
<mx:Label id="tbcontact" textAlign="right" selectable="true" width="100%" text="{data.Name} - {data.Contact}"/>
</mx:HBox>
</mx:VBox>
</mx:Component>