Positioning text in Flex - apache-flex

I want to display three different pieces of text in a line underneath a VBox so I've created a HBox and place the Text components in here:
<mx:HBox width="100%">
<mx:Text text="left" id="textLeft"/>
<mx:Text text="center" id="textCenter"/>
<mx:Text text="right" id="textRight"/>
</mx:HBox>
I want the text with id "textLeft" to be positioned on the very left on the HBox and textCenter to be in the center and textRight to be on the right...
Any solutions/pointers appreciated.

try
<mx:HBox width="100%">
<mx:Text text="left" id="textLeft"/>
<mx:Spacer width="100%" />
<mx:Text text="center" id="textCenter"/>
<mx:Spacer width="100%" />
<mx:Text text="right" id="textRight"/>
</mx:HBox>
or
<mx:HBox width="100%">
<mx:Text text="left" id="textLeft" textAlign="left" width="100%"/>
<mx:Text text="center" id="textCenter" textAlign="center" width="100%"/>
<mx:Text text="right" id="textRight" textAlign="right" width="100%"/>
</mx:HBox>
Personally I'd go with the top one

Thanks for your response. In the meantime I came up with this solution with help from a friend.
Using a grid:
<mx:Grid width="100%">
<mx:GridRow width="100%" height="100%">
<mx:GridItem width="33%" height="100%" horizontalAlign="left">
<mx:Text text="left" id="textLeft"/>
</mx:GridItem>
<mx:GridItem width="33%" height="100%" horizontalAlign="center">
<mx:Text text="center" id="textCenter"/>
</mx:GridItem>
<mx:GridItem width="33%" height="100%" horizontalAlign="right">
<mx:Text text="right" id="textRight"/>
</mx:GridItem>
</mx:GridRow>
</mx:Grid>
However I do see that your solution is better for more things being added.

Related

Actionscript- How do I set a click handler on a tab in TabNavigator?

I want the TextArea under my second tab to update when the tab is clicked. However, it's only updating when I click on the TextArea or the container for that text area.
Flex:
<mx:Box paddingLeft="0" paddingRight="0" paddingBottom="0" paddingTop="0" width="100%" height="100%"
<mx:VBox id="vbxHTMLBody" width="100%" height="100%" horizontalScrollPolicy="off" horizontalAlign="center">
<mx:TabNavigator id = "tabNav" borderStyle="solid" width="100%" height="100%" creationPolicy="all">
<mx:VBox label="Tab1" width="100%" height="100%">
<mx:TextArea id="textArea1" paddingTop="25" paddingLeft="25" paddingRight="25" verticalScrollPolicy="on" focusThickness="0" borderThickness="0" borderStyle="none" editable="true" fontFamily="Arial" fontSize="14" width="100%" height="100%"/>
</mx:VBox>
<mx:VBox label="Tab2" width="100%" height="100%" click="updateTextArea2()">
<mx:TextArea id="textArea2" paddingTop="25" paddingLeft="25" paddingRight="25" verticalScrollPolicy="on" focusThickness="0" borderThickness="0" borderStyle="none" editable="true" fontFamily="Arial" fontSize="14" width="100%" height="100%"/>
</mx:VBox>
</mx:TabNavigator>
</mx:VBox>
</mx:Box>
ActionScript:
private function updateTextArea2(): void {
textArea2.htmlText = textArea1.text;
tabNav.validateNow();
textArea2.validateNow();
}
*I've also tried setting the click listener to the outer containers and that hasn't worked either.
I used change="updateTextArea2()" to listen for any changes made to the text area.
Call updateTextArea2()on change of the TabNavigator:
<mx:TabNavigator id="tabNav" change=updateTextArea2()">
instead from VBox change.

How to align the formItems?

I'm trying to create a form, but i am having issues aligning the formItems.
This is mx:Form namespace. (xmlns:mx="http://www.adobe.com/2006/mxml")
does anyone have any suggestions on how to correct this. any help would be greatly appreciated.
<mx:VBox paddingLeft="0" height="100%">
<form:Form width="100%"
textAlign="left">
<mx:VBox>
<mx:HBox id="snapShotSelect">
<form:FormItem label="My Label Here"
includeInLayout="{model.formItemVisible}"
visible="{model.formItemVisible}"/>
<mx:VBox>
<form:FormItem includeInLayout="{model.formItemVisible}"
visible="{model.formItemVisible}">
<components:SageTextInput textAlign="left"/>
</form:FormItem>
<form:FormItem label=""
visible="{model.formItemVisible}"
includeInLayout="{model.formItemVisible}"/>
<form:FormItem visible="{model.formItemVisible}"
includeInLayout="{model.formItemVisible}">
<components:SageList id="snaps"
allowMultipleSelection="false"
width="200"
rowCount="5"/>
</form:FormItem>
</mx:VBox>
</mx:HBox>
<mx:HBox>
<form:FormItem label="My Label Here"
width="100%"
visible="{model.formItemVisible}"
includeInLayout="{model.formItemVisible}"/>
<form:FormItem label=""
width="100%">
<components:SageComboBox dataProvider="{model.generations}"
textAlign="left"
enabled="{model.generations.length > 0}"/>
</form:FormItem>
</mx:HBox>
<mx:HBox id="radioSelectGroup">
<form:FormItem label="">
<components:SageRadioButtonGroup id="rbGroup"
groupId="rbGroup"
labelPlacement="right"/>
</form:FormItem>
</mx:HBox>
<mx:HBox id="radioNew">
<form:FormItem>
<components:SageRadioButton id="radioCopy" value="{model.RADIO_CREATE}"
group="{rbGroup}"
labelPlacement="right"
width="250"
label="Radio Button 1" />
</form:FormItem>
<form:FormItem>
<components:SageTextInput textAlign="left"
enabled="{rbGroup.selectedValue == model.RADIO_CREATE}"/>
</form:FormItem>
</mx:HBox>
<mx:HBox id="radioExisting">
<form:FormItem>
<components:SageRadioButton id="radioNoCopy" value="{model.RADIO_USE_EXISTING}"
group="{rbGroup}"
labelPlacement="right"
width="250"
label="Radio Button 2"/>
</form:FormItem>
<mx:VBox>
<form:FormItem label=""
paddingBottom="0">
<components:SageTextInput textAlign="left"
enabled="{rbGroup.selectedValue == model.RADIO_USE_EXISTING}"/>
</form:FormItem>
<form:FormItem label=""
indentationLevel="0"
paddingTop="0">
<components:SageList allowMultipleSelection="false"
width="200"
rowCount="5"
enabled="{rbGroup.selectedValue == model.RADIO_USE_EXISTING}"/>
</form:FormItem>
</mx:VBox>
</mx:HBox>
</mx:VBox>
</form:Form>
</mx:VBox>
It Looks like this at the moment.
But i want it to look like this
Use the following code : Please adjust the width of spacer according to your alignment requirements. Also Dont miss out mentioning the width of every HBox and VBox inside the formItem. Here, I am using all mx components.
<mx:Form>
<mx:FormItem width="100%">
<mx:VBox id="ContainerVBox" width="100%">
<mx:HBox width="100%">
<mx:Label id="label1" text="my label here"/>
<mx:Spacer width="10%"/>
<mx:TextInput id="textInput1" text="This is text input 1"/>
</mx:HBox>
<mx:TextInput id="textInput2" text="This is text input 2"/>
</mx:VBox>
</mx:FormItem>
<mx:FormItem width="100%">
<mx:HBox width="100%">
<mx:Label id="label1" text="my label here"/>
<mx:Spacer width="10%"/>
<mx:ComboBox id="myComboBox"/>
</mx:HBox>
</mx:FormItem>
<mx:FormItem width="100%">
<mx:HBox width="100%">
<mx:RadioButton id="myRadioButton"/>
<mx:Text text="Radio Button 1"/>
<mx:Spacer width="10%"/>
<mx:TextInput id="textInput3"/>
</mx:HBox>
</mx:FormItem>
<mx:FormItem width="100%">
<mx:VBox width="100%">
<mx:HBox width="100%">
<mx:RadioButton id="myRadioButton"/>
<mx:Text text="Radio Button 2"/>
<mx:Spacer width="10%"/>
<mx:TextInput id="textInput4"/>
</mx:HBox>
<mx:TextInput id="textInput5" text="This is text input 5"/>
</mx:VBox>
</mx:FormItem>
</mx:Form>
</mx:VBox>

Flex 3.5 - 100% Width Grid inside ApplicationControlBar

I've got a really simple Grid inside an ApplicationControlBar:
<mx:Grid>
<!--<mx:GridRow width="100%" height="100%">
<mx:GridItem colSpan="3">
<mx:Text fontSize="18" color="#000000" text="Conferences"/>
</mx:GridItem>
</mx:GridRow>
-->
<mx:GridRow width="100%" height="100%">
<mx:GridItem width="100%" height="100%">
<mx:HBox id="addedBtns">
</mx:HBox>
</mx:GridItem>
<mx:GridItem width="100%" height="100%">
</mx:GridItem>
<mx:GridItem width="100%" height="100%">
<views:LanguageSelector id="langSelector" visible="false" />
<mx:LinkButton label="{ResourceUtil.getInstance().getString('bbb.mainToolbar.helpBtn')}" click="onHelpButtonClicked()"/>
<mx:Button label="{ResourceUtil.getInstance().getString('bbb.mainToolbar.logoutBtn')}" id="btnLogout"
toolTip="{ResourceUtil.getInstance().getString('bbb.mainToolbar.logoutBtn.toolTip')}" click="doLogout()"/>
</mx:GridItem>
</mx:GridRow>
</mx:Grid>
All I want to do Is make the Grid stretch 100% across the full width of the screen, however the above does not.
Any ideas?
Try this
<mx:Grid width="100%">
Your code now makes the grid scale to the size of its children.
Setting the grid width to 100% will make it scale to the size of its container.
Cheers

Flex grid automatic width

I have three griditems in a grid row.
Two with fixed width. How can i make the third scale automatically to maximize the grid?
I'd like the same functionality as html:
<table width="100%">
<tr><td width=50></td>
<td>this scales</td>
</td><td width=50></td></tr></table>
Regards
Anders
I think this code snippet can help you:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application layout="absolute" xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Grid bottom="0" left="0" right="0" top="0">
<mx:GridRow width="100%">
<mx:GridItem width="50">
<mx:Button label="Test" width="100%" />
</mx:GridItem>
<mx:GridItem width="50">
<mx:Button label="Test" width="100%" />
</mx:GridItem>
<mx:GridItem width="100%">
<mx:Button label="Test" width="100%" />
</mx:GridItem>
<mx:GridItem width="50">
<mx:Button label="Test" width="100%" />
</mx:GridItem>
</mx:GridRow>
<mx:GridRow width="100%">
<mx:GridItem>
<mx:Button label="Test" width="100%" />
</mx:GridItem>
<mx:GridItem>
<mx:Button label="Test" width="100%" />
</mx:GridItem>
<mx:GridItem>
<mx:Button label="Test" width="100%" />
</mx:GridItem>
<mx:GridItem>
<mx:Button label="Test" width="100%" />
</mx:GridItem>
</mx:GridRow>
</mx:Grid>
</mx:Application>

How to fix overlapping VBox children in a canvas?

I have multiple HBoxes inside a VBox inside a canvas like so:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">
<mx:Canvas width="600" height="500">
<mx:VBox height="100%" left="10" right="10">
<mx:HBox width="100%" >
<mx:VBox width="48%" height="100%" horizontalAlign="left">
<mx:Label text="Label" />
</mx:VBox>
<mx:VBox width="48%" height="100%" horizontalAlign="left">
<mx:Label text="Label" />
<mx:HBox width="100%">
<mx:VBox width="48%">
<mx:Label text="Label" />
<mx:ComboBox />
</mx:VBox>
</mx:HBox>
</mx:VBox>
</mx:HBox>
<mx:VBox>
<mx:HBox>
<mx:Label text="Label" />
<mx:Label text="Label" />
</mx:HBox>
</mx:VBox>
<mx:HBox>
<mx:Label text="Label" />
<mx:ComboBox/>
</mx:HBox>
<mx:HBox>
<mx:VBox horizontalScrollPolicy="off" verticalScrollPolicy="off"
includeInLayout="false" >
<mx:Label text="Label" />
</mx:VBox>
<mx:VBox>
<mx:HBox horizontalScrollPolicy="off" verticalScrollPolicy="off"
includeInLayout="false"
>
<mx:VBox >
<mx:Label text="Text" />
<mx:ComboBox />
</mx:VBox>
<mx:VBox>
<mx:Label text="Label" />
<mx:ComboBox />
</mx:VBox>
</mx:HBox>
<mx:HBox horizontalScrollPolicy="off" verticalScrollPolicy="off"
includeInLayout="false"
>
<mx:VBox>
<mx:Label text="Label:"/>
<mx:ComboBox />
</mx:VBox>
<mx:VBox>
<mx:Label text="Label: "/>
<mx:ComboBox />
</mx:VBox>
</mx:HBox>
</mx:VBox>
</mx:HBox>
<mx:HBox >
<mx:Label text="Label:" />
<mx:CheckBox />
</mx:HBox>
</mx:VBox>
</mx:Canvas>
</mx:Application>
The last child in the VBox is overlapping with other components. How do you prevent children of a VBox in a Canvas from overlapping? How do you debug this situation?
I have tried the following:
Removing percent based sizing
IncludeInLayout = true
Sceenshot - Label and Checkbox Overlapping:
It's hard to say with the information provided, but the two questions that come to mind first are:
Is your VBox height greater than the sum of the heights of its children?
Have you set the verticalGap property on the VBox? verticalGap determines vertical spacing between children.
I just tried this (AIR app) and it looks alright to me.
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Canvas height="100%" width="100%"
borderStyle="solid"
backgroundColor="0x0000ff">
<mx:VBox height="100%" width="100%">
<mx:VBox backgroundColor="0xff0000" height="50%" width="100%">
<mx:HBox backgroundColor="0x000000" height="50%" width="50%"/>
<mx:HBox backgroundColor="0xffffff" height="50%" width="50%"/>
<mx:HBox backgroundColor="0x00ffff" height="50%" width="50%"/>
</mx:VBox>
<mx:HBox height="50%" width="100%"
backgroundColor="0xff0000" backgroundAlpha="0.5"
borderColor="0x000000" borderStyle="solid" borderThickness="1"/>
</mx:VBox>
</mx:Canvas>
</mx:WindowedApplication>
I resolved this by making the includeInLayout property of some of these components the same conditional used by their visible property.
Not sure what caused the issue though.

Resources