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.
Related
I have a custom component that has an background image.
But when you generate this component by an ItemRenderer in a List, the background image is gone.
What am I doing wrong?
Here is an image. The first element is not generated in a list and has a background image. The other three are part of a List and have no background image.
Here is the code of the MXML of the List
<mx:VBox>
<solutionItems:displaySolutionItem /> <!-- This element shows the background image -->
<mx:List selectable="false"
useRollOver="false"
id="listControllers"
backgroundAlpha="1"
dataProvider="{controllers}" >
<mx:itemRenderer>
<fx:Component>
<solutionItems:displaySolutionItem /> <!-- These elements have nog background image -->
</fx:Component>
</mx:itemRenderer>
</mx:List>
</mx:VBox>
And here is the code of <solutionItems:displaySolutionItem />
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas
xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundImage="{itemBackGround}"
backgroundSize="100%">
<mx:Script>
<![CDATA[
[Bindable]
[Embed(source="assets/Components/ContainerBackgrounds/BoxBg.png", scaleGridLeft="5", scaleGridRight="50", scaleGridTop="5", scaleGridBottom="50")]
private var itemBackGround:Class;
]]>
</mx:Script>
<mx:VBox
paddingBottom="10"
paddingLeft="10"
paddingRight="10"
paddingTop="10">
<mx:CheckBox id="chbControllerItem" label="NSL-4601" styleName="titleRed" />
<mx:HBox>
<mx:Image width="67" height="50" id="loader1" source="#Embed(source='assets/Components/ContainerBackgrounds/BoxBg.png')"/>
<mx:HBox>
<mx:VBox>
<mx:Label text="Cube size" styleName="formLabel" height="12" />
<mx:Label text="Cube config" styleName="formLabel" height="12" />
<mx:Label text="Display res" styleName="formLabel" height="12" />
<mx:Label text="DPI" styleName="formLabel" height="12" />
<mx:Label text="Price" styleName="formLabel" height="12" />
</mx:VBox>
<mx:Box>
<mx:Label text="50''" height="12" />
<mx:Text text="2x3 (1224mm x 3264mm)" height="12" />
<mx:Label text="WXGA (1360x768)" height="12" />
<mx:Label text="72 dpi" height="12" />
<mx:Label text="€ 101.000,00" height="12" />
</mx:Box>
</mx:HBox>
</mx:HBox>
</mx:VBox>
</mx:Canvas>
It is probably something small, but I can not find it.
The following will get around the problem:
Remove the backgroundImage="{itemBackGround}" from the Canvas element of the itemRenderer
Add the following before the VBox in the itemRenderer class. I tested it out and it works fine:
<mx:Canvas width="100%" height="100%" backgroundImage="{itemBackGround}" backgroundSize="100%"/>
If your find a better way, sure update your question to let us know,
Brian
Have you tried setting the alpha, or backgroundAlpha properties on your List or perhaps in the itemRenderer?
I'm guessing that the List is either drawing something on top of the background, or preventing the background from being drawn. You'd have to step through code to know for sure, though.
I didn't try this, but look like
component is not creating multiple instance/copies of image for each renderer
possible solution may be is, load image in any Singleton/Constant Class like in Model and NOT in component/list and use Model's attribute reference in component/list i.e. one copy for all renderer.
Hopes this works
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.
i want to populate a horizontalList component from a xml file, the width value will be inside the xml file as well with all the data.
actually i have this code:
<mx:Model id="epg" source="epg.xml" />
<mx:Component id="customRend">
<mx:Label text="{data.description}" width="{data.width}"/>
</mx:Component>
<mx:HBox x="82" y="104" width="1203" height="113" verticalAlign="middle">
<mx:HorizontalList width="100%" dataProvider="{epg.channel.program}"
itemRenderer="{customRend}" horizontalScrollPolicy="off">
</mx:HorizontalList>
</mx:HBox>
but it sets same width for all elements in the list.
Do you know how to do this?
Thanks a lot.
Br
Two ways to do this:
Set label.width = data.width on creationComplete
Wrap Label in Canvas
The creationComplete way (probably because an itemRenderer should be a Container?):
<mx:HorizontalList width="100%" dataProvider="{epg.channel.program}" horizontalScrollPolicy="off">
<mx:itemRenderer>
<mx:Component id="customRend">
<mx:Label text="{data.description}" creationComplete="this.width = data.width"/>
</mx:Component>
</mx:itemRenderer>
</mx:HorizontalList>
... or wrapped in Canvas:
<mx:HorizontalList width="100%" dataProvider="{epg.channel.program}" horizontalScrollPolicy="off">
<mx:itemRenderer>
<mx:Component id="customRend">
<mx:Canvas horizontalScrollPolicy="off">
<mx:Label text="{data.description}" width="{data.width}"/>
</mx:Canvas>
</mx:Component>
</mx:itemRenderer>
</mx:HorizontalList>
Hope that helps,
Lance
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>
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.