I always end up hard-coding things that appear to be so simple...
This is the scenario:
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<s:Form>
<s:layout>
<s:TileLayout requestedColumnCount="2"
verticalAlign="middle" />
</s:layout>
<s:FormItem label="Label with long text">
<s:TextInput />
</s:FormItem>
<s:FormItem label="Label with long text">
<s:Label text="something" />
</s:FormItem>
<s:FormItem label="shortLabel">
<s:TextInput />
</s:FormItem>
<s:FormItem label="shortLabel">
<s:Label text="something" />
</s:FormItem>
</s:Form>
</s:Application>
Is there a simple way to give each tile layout column a FormLayout?
In form layout, all the first items on FormItem containers are aligned.
You have overridden form layout that's why elements are not aligned correctly.
As I understand you need multi columns form. Flex doesn't support such functionality now.
Possible solutions are:
1. Use 2 forms in container. In such case form items would be aligned.
2. Define form items sizes.
3. Write you own new multi column form layout and share it.
Spark FormLayout extends VerticalLayout, changing its inheritance to TileLayout in customLayout class(say FormTileLayout) worked for my project.
Related
I have a checkbox label that needs to be about 50 characters long, but it's being truncated at 13 characters.
How do I code it to allow longer text in the label please?
Thank you
You can follow two different ways:
The first: Try in your checkBox (s: or mx:) to increase the width property
<s:CheckBox id="myChk" width="100" />
<mx:CheckBox id="myChk" width="100" />
The second: You can wrap your checkbox in a FormItem (s: or mx:) so, you can manage the width of FormItem and your checkbox manage only the tick select.
<s:FormItem id="myItem" label="AAAAAAAAAAAAAAAAAAAAAAAAAAAAA">
<s:CheckBox id="myChk" />
</s:FormItem>
I have a TextArea component as follows:
<mx:TextArea
id="textArea"
width="100%"
height="100%"
editable="false"
verticalScrollPolicy="on"
/>
My issue is that I populate the TextArea with a huge amount of text that needs to be scrolled through. The vertical scrollbar exists, but is disabled. Even though it is disabled the user can scroll using the mouse scroll.
Note: If I change the text later the scrollbar reenables.
The fix turned out simply using the spark component instead of mx component:
<s:TextArea
id="textArea"
width="100%"
height="100%"
editable="false"/>
How to hide a tab in TabNavigator and also remove the empty space from it?
Example code:
<mx:TabNavigator id="TabNavigator">
<s:NavigatorContent id="tab1" label="Tab 1">
</s:NavigatorContent>
<s:NavigatorContent id="tab2" label="Tab 2">
</s:NavigatorContent>
<s:NavigatorContent id="tab3" label="Tab 3">
</s:NavigatorContent>
</mx:TabNavigator>
We can hide a tab via TabNavigator.getTabAt(1).visible = false;. But this will left an empty space between Tab 1 and Tab3. I don't want to use TabNavigator.removeChildAt(1); because the program may need to show Tab 2 again.
So, how to temporary remove a tab in TabNavigator and also the empty space from it?
Thank you.
In action script you can do it. Just use id of navigatorcontent to set visible or includeinlayout. When you require make it true else make it false.
Default set to false. When you need make it true in AS.
<mx:TabNavigator id="TabNavigator">
<s:NavigatorContent id="tab1" label="Tab 1" visible="false" includeInLayout="false">
</s:NavigatorContent>
<s:NavigatorContent id="tab2" label="Tab 2">
</s:NavigatorContent>
<s:NavigatorContent id="tab3" label="Tab 3">
</s:NavigatorContent>
I am developing flex mobile project in adobe air, using flash builder 4.7, i am able to apply Transition in views, How can i apply Transition to Spark components like BorderContainer, List...
<s:BorderContainer id="Login" backgroundAlpha="0" borderStyle="inset" visible="true" >
<s:Label width="100%" height="100%" color="white" text="Logon Details"/>
<s:TextArea prompt="UserName" id="txtuser" />
<s:TextArea prompt="Password" id="txtpwd" />
<s:CheckBox />
<s:Button id="btnlogin" color="white" fontFamily="Book Antiqua" fontWeight="bold"/>
<s:Button id="btnreset" color="white" fontFamily="Book Antiqua" fontWeight="bold"/>
</s:BorderContainer>
I would like to apply Transition for above BorderContainer, like moving BorderContainer to another location in screen on clicking a button.
Thanks in Advance...
Here is a little code to show you how to use a Tween manually, without a Transition.
<fx:Declarations>
<mx:Move id="myMove" target="{login}" xTo="200" yTo="500"/>
</fx:Declarations>
<s:Group width="100%" height="100%">
<s:BorderContainer id="login" />
</s:Group>
<s:Button id="button" click="myMove.play(); button.enabled=false;" />
You may find, for each Tween, some code example in the reference, such as this one.
I need to put a button in one of the columns of datagrid tag and the column's value should appear on the buttons label. Any help will be highly appreciated
In flex 3, use the tag mx:itemRenderer:
<mx:DataGrid id="myDataGrid" dataProvider="{myDP}">
<mx:columns>
<mx:DataGridColumn dataField="field">
<mx:itemRenderer>
<mx:Component>
<mx:Button label="{data.field}"/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
In flex 4, use spark dataGrid and the s:itemRenderer tag:
<s:DataGrid dataProvider="{myDP}">
<s:columns>
<s:ArrayList>
<s:GridColumn dataField="Price">
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<s:Button label="{data.Price}"/>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
</s:ArrayList>
</s:columns>
</s:DataGrid>