I use a s:Group to place my component in my form.
I'd like all form item have the same horizontal align inside the group.
I try to use horizontalcenter with value 0 but it doesn't work.
So I don't know how to do and I hope you can help me to solve that.
<s:Group width="100%" resizeMode="noScale" verticalCenter="0" horizontalCenter="0">
<s:FormItem label="Naissance" tabIndex="5" x="{cbQualite.x}" id="fiNaissance">
<mx:DateField id="dfNaissance" width="100" editable="true"
formatString="DD/MM/YYYY" yearNavigationEnabled="true"
/>
</s:FormItem>
<s:RadioButton id="rbFem" label="Féminin" group="{rbsex}" tabIndex="7"
x="{fiNaissance.x + fiNaissance.width+5}"
/>
<s:RadioButton id="rbMas" label="Masculin" group="{rbsex}" tabIndex="6" x="{rbFem.width + rbFem.x + 5}" y="{fiNaissance.y +(fiNaissance.height)/2}"/>
<s:DropDownList id="cbDossier2" dataProvider="{DP_PAT_DOS1}" width="118" height="22" tabIndex="8" x="{cbDossier1.x}"/>
<s:FormItem label="" tabIndex="9" x="{fiDossier1.x}" >
<s:TextInput id="fDossier2" width="90" paddingRight="5" text="#{objectPatient.paDossier2}" />
</s:FormItem>
</s:Group>
What do you mean by same horizontal align ?
If you want elements inside Group to be centered horizontally you must put horizontalCenter="0" not on the parent but on each child.
Furthermore it is a mistake to specify width="100%" and horizontalCenter="0" both on Group.
width="100%" indicates your Group will take all horizontal space in the parent container if the parent container layout support it. Your Group will automatically be centered.
Put all parts of the forms inside FormItems, and put all the FormItems inside a Form.
Related
I've created a skin that allows me to have two labels on a spark button, but the button text won't center vertically. It stays at the top of the button no matter what settings I give it. The icon in the skin DOES however, center vertically.
This is the skin:
<s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
minWidth="82" minHeight="82"
alpha.disabled="0.5" initialize="autoIconManagement=false">
<fx:Metadata>[HostComponent("com.XXXX.components.TwoLineButton")]</fx:Metadata>
<!-- states -->
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>
<s:Image source="{getStyle('upSkin')}"
source.over="{getStyle('overSkin')}"
source.down="{getStyle('downSkin')}"
source.disabled="{getStyle('disabledSkin')}"
width="100%" height="100%"
/>
<s:HGroup verticalAlign="middle" height="100%" width="100%"
paddingLeft="{getStyle('paddingLeft')}"
paddingRight="{getStyle('paddingRight')}"
paddingTop="{getStyle('paddingTop')}"
paddingBottom="{getStyle('paddingBottom')}"
gap="{getStyle('horizontalGap')}"
verticalCenter="0">
<s:BitmapImage id="iconDisplay" includeInLayout="{iconDisplay.source}"/>
<s:VGroup gap="{getStyle('verticalGap')}" height="100%" width="100%">
<s:Label id="labelDisplay"
textAlign="center"
width="100%"
maxDisplayedLines="1"
horizontalCenter="0" verticalCenter="1" verticalAlign="middle"
left="10" right="10" top="2" bottom="2">
</s:Label>
<s:Label id="bottomLabelDisplay"
textAlign="center"
width="100%"
maxDisplayedLines="1"
horizontalCenter="0" verticalCenter="1" verticalAlign="middle"
left="10" right="10" top="2" bottom="2">
</s:Label>
</s:VGroup>
</s:HGroup>
This is the code I'm calling it with:
<components:TwoLineButton
width="308"
label="TopLabel"
bottomLabel="Bottom label"
click="handleButtonClick(event)"
/>
I've tried making the HGroup use a hardcoded height value, and that doesn't work either.
Thanks in advance.
You cannot use absolute constraints like 'x', 'y', 'left', 'right', 'top', 'bottom', 'horizontalCenter', 'verticalCenter', ... inside a relative layout like VerticalLayout (VGroup is just a Group with a VerticalLayout). This makes sense since you can't position something both relatively and absolutely. In this case the layout of the container takes precedence over whatever constraints you put on the child component. This means you can simply remove any of these constraints you have there: they simply don't have any effect.
Also 'verticalAlign' is a style you apply to a container, but it tells the container how to layout its children. You've assigned it to the Labels, so you're saying "lay out the text component inside the Label in the middle of the Label component" and not "layout the Label component in the middle of the VGroup". So this one is also redundant.
Something like the following should fix your issue:
<s:VGroup height="200">
<s:Label text="A" height="50%" verticalAlign="middle" />
<s:Label text="B" height="50%" verticalAlign="middle" />
</s:VGroup>
or if you want both Labels grouped together in the middle of the VGroup (it's not apparent from the description which one of both you want):
<s:VGroup height="200" verticalAlign="middle">
<s:Label text="A" />
<s:Label text="B" />
</s:VGroup>
The HGroup in your skin should look something like this:
<s:HGroup verticalAlign="middle" height="100%" width="100%"
paddingLeft="{getStyle('paddingLeft')}"
paddingRight="{getStyle('paddingRight')}"
paddingTop="{getStyle('paddingTop')}"
paddingBottom="{getStyle('paddingBottom')}"
gap="{getStyle('horizontalGap')}" >
<s:BitmapImage id="iconDisplay" includeInLayout="{iconDisplay.source}"/>
<s:VGroup gap="{getStyle('verticalGap')}" width="100%" verticalAlign="middle" >
<!-- not sure if you need 100% width here -->
<s:Label id="labelDisplay"
textAlign="center"
width="100%"
maxDisplayedLines="1">
</s:Label>
<s:Label id="bottomLabelDisplay"
textAlign="center"
width="100%"
maxDisplayedLines="1">
</s:Label>
</s:VGroup>
</s:HGroup>
Your labels are in a VGroup so attributes like verticalCenter, horizontalCenter, top, left, etc. do not apply. These attributes only work in BasicLayout (absolutely positioned layouts).
I also removed the 100% height on the VGroup that contained the labels. This means that group of labels will only be as tall as necessary (so now we can actually center it).
Finally, added verticalAlign="middle" to the VGroup. Since the parent of this group is an HGroup, the VGroup should be positioned horizontally next to the BitmapImage if present, and vertically aligned in the middle.
I'm trying to create a custom view (one that is not 100% listview, for example), mix and matching images and labels.
One issue is that when the label overflows greater than the screen height, the rest just gets off. I had assumed scrolling or touch-drag scrolling would be automatically enabled? How do you enable the touch-drag scrolling that happens naturally in list view?
I wrap all the visual elements of my View inside a Scroller - this will solve that problem
<s:Scroller id="scroller" left="10" right="10" top="10" bottom="10" >
<s:VGroup paddingTop="3" paddingLeft="5" paddingRight="5" paddingBottom="3" horizontalAlign="center">
<s:HGroup horizontalAlign="right" width="100%">
<s:Image scaleMode="letterbox" source="#Embed('images/small_background.GIF')"/>
</s:HGroup>
<s:TextInput id="txtUsername" prompt="Enter user name..." fontFamily="Arial"/>
<s:TextInput id="txtPassword" prompt="Enter password..." fontFamily="Arial"
displayAsPassword="true" />
<s:Button />
<s:Button />
</s:VGroup>
</s:Scroller>
I am trying to automatically resize the children within an s:Group. The children are another s:Group and a H:Group. Each have a percentage width of 10% and 90% each. The problem is that when one of the groups is resized (using a transition and rotation combination in the Skin), the other group does not automatically resize to fill the space?
Shouldn't Flex do this automatically? or do I have to code this?
<s:Group
id="listsGroup"
width="100%"
height="255"
>
<s:Label text="LIST WITH HEADER TEST" styleName="h1" />
<s:Group
id="listsGroupSavedSearches"
width="10%"
height="255"
>
<components1:ListWithHeader
id="categories11"
dataProvider="{listModel}"
headerLabel="Saved Searches"
allowMultipleSelection="true"
top="10" bottom="0"
left="0" width="10%"
/>
</s:Group>
<s:HGroup left="160" width="90%" height="150" top="50" gap="6">
<components1:ListWithHeader
id="categories1"
dataProvider="{listModel}"
headerLabel="Category1 "
allowMultipleSelection="true"
width="100%"
height="150"
/>
<components1:ListWithHeader
id="categories2"
dataProvider="{listModel}"
headerLabel="Category2"
allowMultipleSelection="true"
width="100%"
height="150"
/>
<components1:ListWithHeader
id="categories3"
dataProvider="{listModel}"
headerLabel="Category3"
allowMultipleSelection="true"
width="100%"
height="150"
/>
</s:HGroup>
</s:Group>
The best way to approach something like this is to tie into the Flex Component lifecycle methods, specifically updateDisplayList(). UpdateDisplayList() is used to position and size your children. It has two parameters, the height and width of your component. You can then write an algorithm to size and position your children based on the component's height and width.
MXML does this all under the hood, kind of in a black magic sort of way; but you'll gain more control if you write the layout code yourself.
In flex UI, my <mx:list> can not be shown completely because of other component shelterring (for example: the refresh button shelter part of it ). How can I make the <mx:list> in front of all other UI component.
This is my code:
<s:HGroup verticalAlign="middle">
<s:Label text="Choose Log File"/>
<mx:ComboBox id ="logFileChooseCombo" dataProvider="{fileNameList}" width="150" color="0x000000"
close="changeLogFilesHandler(event);"/>
<mx:Spacer width="320" />
<s:Label text="Filter or HighLight:" />
<mx:ComboBox id ="filterChooseCombo" dataProvider="{filterOrHighlight}" width="150" color="0x000000"/>
<s:VGroup height="25">
<s:TextInput id="logContentInput" change="filterLogContent()"
enabled="true"
focusIn="clearMyTextInput()"
text="Filter/HightLight"
width="250" height="26"/>
**<mx:List id="searchMsgList"** x="65" y="35" width="200" height="200" fontSize="12"
change="itemChangEvent(event);" />
</s:VGroup>
</s:HGroup>
</mx:Canvas>
<s:HGroup verticalAlign="middle">
<s:Label text="Filter By Log Level:"/>
<mx:ComboBox id ="logLevelCombo" dataProvider="{logLevelsInt}" width="150" color="0x000000"
close="changeLogLevelHandler(event);"/>
<s:CheckBox id="showStack" click="showStackTrace(event)" selected="false"/>
<s:Label text="show stackTraces"/>
<mx:Spacer width="550" />
<s:Button id="test" label="refresh2">
</s:Button>
</s:HGroup>
You have a lot going on, with a mix of nested layouts and a mix of Halo and Spark containers. I'm not sure what layout you're trying to create.
That said, take a look at the swapChildren method. Something like this should work:
this.swapChildren(refresh2, searchMsgList);
But it will most likely hide your refresh button, which seems less than ideal.
A few things strike me:
Inside your first VGroup you have x and y values specified. I thought those values were ignored inide VGroups, which automatically position your children in a vertical line.
I see an closing </mx:Canvas> tag, but not an opening canvas tag. It is unusual to me to use a canvas among all the HGroups and VGroups.
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.