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".)
Related
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.
I'm a new to Flex, and I'm trying to add a second label to a text box.
like this: Label [_______] label 2
So the first label will describe the text box and the second the unit, for example:
cost of cleaning [_______] $ per hour
Can I do this with a label inside the form item?
what I have tried looks like this:
<mx:FormItem label="cost of cleaning">
<mx:TextInput id="proSRO2YO" text="" width="120" maxChars="20"/>
<mx:Label text="dollars per hour"/>
</mx:FormItem>
but that results in a second label one line below, I need these on the same line.
Any help would be appreciated.
Use the direction property and set it to horizontal. the default is vertical.
<mx:FormItem label="cost of cleaning" direction="horizontal">
<mx:TextInput id="proSRO2YO" text="" width="120" maxChars="20"/>
<mx:Label text="dollars per hour"/>
</mx:FormItem>
I want to add a button with a cross to the header of the accordion which can be clickable. that means i want to display a message when the some one click on that button. i go through many of the samples in the web but couldn't get it done. if any one who knows do this in flex4 it will very helpful.
I tried with also a CanvasButtonAccordionHeader, it shows the button but when i click it, it didn't give the message although i created the click event handler.
if somebody know how to resolve this please describe it with a simple source code.
thanx.
You can easily do that by customizing the header in CSS.
Add the header Style to you accordion.
<mx:Accordion id="accordion"
headerStyleName="accHeader"
width="100%" />
In your CSS
.accHeader {
fillColors: haloSilver, haloBlue;
fillAlphas: 1.0, 0.5;
selectedFillColors: black, black;
}
Or embed your image in here.
You can place that message in your ViewStack.
I use the CanvasButtonAccordionHeader in Flex 3, so not sure if this will work in Flex 4.
But.... in case it's of any use, I create my CanvasButtonAccordianHeader as a custom componant which dispatches an event when the button is clicked:
<CanvasButtonAccordionHeader xmlns="flexlib.containers.accordionClasses.*"
xmlns:mx="http://www.adobe.com/2006/mxml" mouseChildren="true"
<mx:Script>
<![CDATA[
[Bindable]
private var itemName:String;
public function init():void{
itemName=data.name;
}
]]>
</mx:Script>
<mx:Metadata>
[Event(name="homeButtonClicked")]
</mx:Metadata>
<mx:HBox width="100%" horizontalAlign="right" height="100%"
paddingRight="5"
verticalAlign="middle">
<mx:LinkButton label="<>"
click="dispatchEvent(new Event('homeButtonClicked'));"
/>
</mx:HBox>
</CanvasButtonAccordionHeader>
Then I instantiate the custom componant at the bottom of the Accordian as a Header Renderer:
............................................
<mx:headerRenderer>
<mx:Component>
<applicationLayout:AccordionNavHeaderRenderer
homeButtonClicked="outerDocument.dispatchEvent(new Event('homeClick'))"/>
</mx:Component>
</mx:headerRenderer>
</mx:Accordion>
Hope this is of use.
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 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);