I have RadioButton, just one singular RadioButton not in a Group or anything like that. I set it's width to 100. I then give it a label which is much longer than 100px. Also, in the Skin for this RadioButton I have the Label just being a subclass of Spark Label in which I set the showTruncationTip of TextBase to true because that's the behavior I'm looking for.
So the Label should truncate, should it not? Instead, my label shows the entire thing not truncated at 100.
However, if I do the same exact thing but with a CheckBox, it works correctly.
Here's the MXML for my RadioButton:
<myNameSpace:RadioButton width="100" id="radBtn1" value="1" label="Yooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo o" />
And here is the relevant part in the Skin:
<s:HGroup width="100%" left="18" gap="5" y="{ icon.height === 0 ? 2 : -4}" verticalAlign="middle">
<myNameSpace:Icon id="icon"/>
<myNameSpace:Label id="labelDisplay"
textAlign="start"
verticalAlign="middle"
maxDisplayedLines="1"/>
</s:HGroup>
And just to show you that it's basically the same, here's my CheckBox Code:
<myNameSpace:CheckBox id="checkBox" width="100" label="Click here to turn this On"/>
And the Skin:
<s:HGroup left="18" right="0" top="3" bottom="3" verticalCenter="0" verticalAlign="middle" width="100%">
<myNameSpace:Label id="labelDisplay"
textAlign="start"
maxDisplayedLines="{getStyle('wrapLabel') ? -1 : 1}"
width="100%" />
<myNameSpace:Label id="readOnlyLabel" includeIn="readOnly"/>
</s:HGroup>
So what's going on? I even tried just doing this with a normal Spark RadioButton but even that won't truncate.
Edit:
Well from what I'm finding out from trial and error, it seems that mx RadioButton will truncate correctly, but Spark will not. My RadioButton extends from Spark so it also will not truncate.
So question now is: How can I make a Spark RadioButton's label truncate? As you can see from the Skin in the original post, I do have maxDisplayedLines set to 1, but it still won't show.
If you give the Label a width, it will truncate the text. Notice in your check box case, the label has width="100%", but there's no width in the radio button case.
Related
I put a FormItem in a Form like below.
<mx:Form width="100%">
<mx:FormItem label="Context Aware" width="100%" backgroundColor="red">
<editorControls:CheckBox/>
</mx:FormItem>
</mx:Form>
There's gap between the actual content height and the form item boundary. Any idea on how to strictly fit the FormItem height to content?
This is Image:
The checkbox is actually a button with an image overlaid on it, as an icon. The icon is a box with some whitespace, as an image. You will have to create a new image which does not have whitespace, and replace the current icon. Remember that this applies to downstate and so on, so you will need a series of similar images. (cf., Adobe's Button docs example).
Of course, you will also have to set verticalGap and indicatorGap as well as paddingTop to 0, on the CheckBox, FormItem, and Form. (cf., Adobe's Flex help on Form, FormHeading, and FormItem layout containers, the section titled "Laying out forms").
Here is some sample code:
<mx:Form width="100%" backgroundColor="0x0000ff" verticalGap="0" paddingTop="0" indicatorGap="0">
<mx:FormItem label="Context Aware" width="100%" backgroundColor="0x00ff00" verticalGap="0" paddingTop="0" indicatorGap="0">
<mx:CheckBox verticalGap="0" paddingTop="0" icon="#Embed('cbIcon.gif')"/>
</mx:FormItem>
</mx:Form>
(If the answer is wrong, please let me know. If it is right, please check it as "correct".)
The following code display a list of comments using List control. The item height set to a fixed value (150), so it seems working: if the content is too long, the scrollbar shows...
However, what I really want is not to set the height but let it to change according to the content size. Is there any way to accomplish this?
<mx:List id="commentList" width="100%" dataProvider="{commentSet.commentArrayColl}"
rowCount="{commentSet.commentArrayColl.length}" >
<mx:itemRenderer>
<mx:Component>
<mx:VBox width="100%" height="150" >
<mx:Text text="{data.commentContent}" />
<mx:Text text="{data.username} ({data.modified})"/>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:List>
EDIT:
To be more clear, I don't want to set the itemRenderer's VBox height to "150" or any other fixed value - but it'll only show one line of the text if I don't do it. So I'm looking for a way out of this. (If the VBox is not inside the itemRenderer, it'll auto ajust height as Text field string length grows - that's what I want.)
Add a height property that binds a function of dataProvider.length * 150:
<mx:List id="commentList" width="100%" dataProvider="{commentSet.commentArrayColl}"
rowCount="{commentSet.commentArrayColl.length}" height={commentSet.commentArrayColl.length*150}>
<mx:itemRenderer>
<mx:Component>
<mx:VBox width="100%" height="150" >
<mx:Text text="{data.commentContent}" />
<mx:Text text="{data.username} ({data.modified})"/>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:List>
Try not setting the height on the VBox, and variableRowHeight to true on the list. Although I'm not sure how nice the List would play with that.
Alternatively, since you're not really using the advantage of itemRender recycling (because of rowCount = dataProvider.length) you might want to consider using a repeater instead of the list.
I have a comboBox and values like basic and advanced. And viewstack container conatains 2 grids.
When i select the base option in Combobox, the first grid has to be selected. select the advanced value in comboBox, the second grid has to be selected.
Please chck my below code and help me how to do it.
<mx:ViewStack id="viewstack1" width="95%" height="85%" x="0" y="63" >
<tables:KeyMetricsBasicTable basicArrayDataProvider="{basicArrayResult1}" width="100%" height="100%"/>
<tables:KeyMetricsAdvTable advArrayDataProvider="{advArrayResult1}" width="100%" height="100%"/>
</mx:ViewStack>
Thanks,
Ravi
Something like this:
<mx:ComboBox id="comboBox" change="{viewstack1.selectedIndex = comboBox.selectedIndex}" />
I have a custom component with textbox & a poup button
as
<mx:HBox>
<mx:Text id="source" height="100%" width="40%" data="my text" />
<mx:VBox backgroundAlpha="0" height="100%" borderThickness="0">
<mx:PopUpButton enabled="true" id="editButton" width="40" icon="#Embed('assets/images/Legends/editIcon.png')"
initialize="popUpButton_initialize()"
popUp="{actionMenuEdit}"
height="19" toolTip="Edit at segment"/>
</mx:VBox>
</mx:HBox>
I am using this custom component as the itemEditor for the datagrid
I have a problem with focus. I need to set focus to the text after popup buttton itemclick
The scenario is that I am typing text in the source text. If I go to popup button and click any item, the focus moves to the popup button, and I am unable to type in the text as the focus is lost.
I need to set the focus back to the source code after pop-up-button item-selection so that I can continue typing.
At the moment I need to click gain in the text and then I am able to type.
source.setFocus()
You will need to add a handler for the change event of the pop up button that sets the focus to your text box.
This will be something like this:
this.focusManager.setFocus(source);
or in your example:
<mx:HBox>
<mx:Text id="source" height="100%" width="40%" data="my text" />
<mx:VBox backgroundAlpha="0" height="100%" borderThickness="0">
<mx:PopUpButton enabled="true" id="editButton" width="40" icon="#Embed('assets/images/Legends/editIcon.png')"
initialize="popUpButton_initialize()"
popUp="{actionMenuEdit}"
change="{this.focusManager.setFocus(source)}"
height="19" toolTip="Edit at segment"/>
</mx:VBox>
</mx:HBox>
may b this help u
if (flexApplication != "undefined") flexApplication.focus();
I have two questions.
How do I change the corner radius of a Label component in Flex. Tried applying style name, and the setStyle('cornerRadius',9) methods, but doesn't work.
How can I change the arrow image in the combo box control to a different image?
Please give your suggestions.
Ok, I've edited my answer.
Looks like the only way to do it is wrap the Label in a container like an HBox
<mx:HBox width="100%" horizontalAlign="right" id="hbox1" cornerRadius="16" borderStyle="solid">
<mx:Label label="{stuff}" id="opLabel" />
</mx:HBox>
Using Spark components use the BorderContainer control
<s:BorderContainer id="brdr"
cornerRadius="6"
width="80" height="30"
horizontalCenter="0" verticalCenter="0">
<s:Label id="lblFoo"
text="Bar"
width="100%" height="15"
horizontalCenter="0" verticalCenter="0"/>
</s:BorderContainer>
To change the combobox arrow you need to change the following skins:
upSkin
overSkin
downSkin
disabledSkin
For an editable combobox you need to change the following skins:
editableUpSkin
editableOverSkin
editableDownSkin
editableDisabledSkin
If you coding on actionScript try this one, first you have to create in your css file attribute, for example:
CSS-File
.lineCorner{ corner-radius: 20; }
And in your main mxml app you have to set styleName to your Label like this example:
var myLabel:Label = new Label();
myLabel.text = "Bla-Bla-Bla";
myLabel.styleName = "lineCorner";
this.addChild(myLabel);