I tried to search, but I couldn't find what I was looking for... so sorry if this is a repost.
I need to create 10 separate radio button groups, each with three options (show, collapse, or hide). I've created the following:
<mx:HBox>
<mx:Text text="Directors Prep." width="125" />
<mx:RadioButtonGroup id="dprepRB" enabled="false" />
<mx:RadioButton id="dprepshow" label="Show" value="1" groupName="{dprepRB}" />
<mx:RadioButton id="dprepcollapse" label="Collapse" value="0" groupName="{dprepRB}" />
<mx:RadioButton id="dprephide" label="Hide" value="-1" groupName="{dprepRB}" selected="true" />
</mx:HBox>
<mx:HBox>
<mx:Text text="Check In/Out" width="125" />
<mx:RadioButtonGroup id="checkIORB" enabled="false" />
<mx:RadioButton id="checkioshow" label="Show" value="1" groupName="{checkIORB}" />
<mx:RadioButton id="checkiocollapse" label="Collapse" value="0" groupName="{checkIORB}" />
<mx:RadioButton id="checkiohide" label="Hide" value="-1" groupName="{checkIORB}" selected="true" />
</mx:HBox>
... and so on with the other 8 groups
On load, I would like the "Hide" button to be selected. However, when the application loads, only the hide button on the last group is selected. If I select any other button on any other group, the "Hide" button from the last group is deselected, and the button I clicked becomes the only selected radio button. It seems like, for some reason, flex is thinking all the radio buttons belong to the same group. What am I doing wrong?
Thanks,
Brds
Try to use:
<mx:HBox>
<mx:Text text="Directors Prep." width="125" />
<mx:RadioButtonGroup id="dprepRB" enabled="false" />
<mx:RadioButton id="dprepshow" label="Show" value="1" group="{dprepRB}" />
<mx:RadioButton id="dprepcollapse" label="Collapse" value="0" group="{dprepRB}" />
<mx:RadioButton id="dprephide" label="Hide" value="-1" group="{dprepRB}" selected="true" />
</mx:HBox>
See details here.
Hi my solution was to define the RadioButtonGroup is the declarations tag block:
<fx:Declarations>
<mx:RadioButtonGroup id="dprepRB"/>
</fx:Declarations>
And then use the group later on in the HBox or whatever:
<mx:HBox>
<mx:Text text="Directors Prep." width="125" />
<mx:RadioButton id="dprepshow" label="Show" value="1" group="{dprepRB}" />
<mx:RadioButton id="dprepcollapse" label="Collapse" value="0" group="{dprepRB}" />
<mx:RadioButton id="dprephide" label="Hide" value="-1" group="{dprepRB}" selected="true" />
</mx:HBox>
You should use group="" not groupname="". Then each independent radio button group can be selected.
Cheers
Related
I have a form that looks like the following:
<mx:HBox width="100%" horizontalAlign="center" verticalAlign="middle">
<mx:Panel horizontalAlign="center"
title="{resourceManager.getString('Resources','views.login.title')}"
verticalAlign="middle">
<mx:Form id="loginForm" defaultButton="{loginButton}">
<mx:FormItem label="{resourceManager.getString('Resources','views.login.ip')}">
<mx:Label id="url" text="{url}"/>
</mx:FormItem>
<mx:FormItem label="{resourceManager.getString('Resources','views.login.username')}"
required="true">
<mx:TextInput id="username"/>
</mx:FormItem>
<mx:FormItem label="{resourceManager.getString('Resources','views.login.password')}"
required="true">
<mx:TextInput id="password" displayAsPassword="true"/>
</mx:FormItem>
</mx:Form>
<mx:FormItem direction="horizontal" width="100%" horizontalAlign="right" paddingBottom="2" paddingRight="2">
<mx:Button id="loginButton"
label="{resourceManager.getString('Resources','views.login.loginBtn')}"/>
</mx:FormItem>
</mx:Panel>
</mx:HBox>
The behavior I experince some times (not always) is when I tab from username to password and then try to hit "Enter" the Botton's click callback does not get called. If I click on the label (id is "url") then go into any of the textboxes, "Enter" key works just fine. I am assuming that the form somehow keep loosing focus. I would appreciate any idea about solving this problem.
I experienced the same issue recently, did you find the root cause? I found a workaround is set the form defaultButton in creationComplete handler instead of on the mxml tag. I saw this issue in Flex4.1, I don't see it in Flex 3.6. I haven't try flex 4.6 though.
I have to add * mark for required fields in my application. I have done this by the code
<mx:VBox>
<mx:Form>
<mx:FormItem label="Name" required="true">
<mx:TextInput id="Name" width="200" editable="true"/>
</mx:FormItem>
<mx:FormItem label="priority" required="true">
<mx:ComboBox id="priorityId" width="200" cornerRadius="4" dataProvider="{customerPriorityList}" />
</mx:FormItem>
</mx:Form>
<mx:VBox>
but the problem is that the * mark comes near the text input field or near the combo box. But i want that * mark near the label only as per my application.
I tried my best but failed.
Is there any way???
Thanks in advance...
try this one
<mx:Form width="30%">
<mx:HBox horizontalGap="0">
<mx:Label text="First Name"/>
<mx:Label width="11" color="0xFF0000" text="*"/>
<mx:Spacer width="20"/>
<mx:TextInput/>
</mx:HBox>
</mx:Form>
for some reason my code is not having the desired effect of having labels to the left of the textinput fields*(like in nearly all normal scenarios with forms). The labels are appearing above the textinput fields. I would also like to make some of them read only. Any advice much appreciated
Basically what i have is text sitting above the textbox instead of alongside it to the left.
Here is my code:
<mx:VBox width="100%" height="100%">
<mx:HBox>
<mx:FormItem textAlign="left" <mx:Label text="TEST" textAlign="left" fontSize="14" fontWeight="bold"/>
<mx:TextInput enabled="true" textAlign="right"/> </mx:FormItem>
Use the label field of the formitem.
<mx:FormItem textAlign="left" label="TEST" fontSize="14" fontWeight="bold"/>
<mx:TextInput enabled="true" textAlign="right">
</mx:FormItem>
If you want read-only, then you can put editable="true|false" in the TextInput.
I have a test application here which was made using the following code:
<fx:Script>
<![CDATA[
public function comboBoxHandler():void{
var selectedItem:String = showComboBox.selectedItem;
if(selectedItem == "All results"){
currentState = "default";
return;
}else if(selectedItem == "Only results within tags"){
currentState = "tagInput";
return;
}
}
]]>
</fx:Script>
<s:states>
<s:State name="default"/>
<s:State name="tagInput"/>
</s:states>
<s:transitions>
<s:Transition id="showTagTextInput" fromState="default" toState="tagInput">
<s:Sequence id="t1p1" targets="{[tagsLabel,tagsTextInput,GoButton]}">
<s:Move duration="700"/>
<s:Fade duration="400"/>
</s:Sequence>
</s:Transition>
<s:Transition id="hideTagTextInput" fromState="tagInput" toState="default">
<s:Sequence id="t2p1" targets="{[tagsLabel,tagsTextInput,GoButton]}" >
<s:Fade duration="400"/>
<s:Move duration="700"/>
</s:Sequence>
</s:Transition>
</s:transitions>
<s:Label x="136" y="13" width="120" height="34" fontFamily="Arial" fontSize="15"
text="Lessons
Learnt" textAlign="center"/>
<s:Group id="group" width="100%" height="100%"
x.default="0" y.default="55" width.default="400" height.default="231"
y.tagInput="55" height.tagInput="256">
<s:Label x="45" y="38" width="50" height="22" text="Search" textAlign="center"
verticalAlign="middle"/>
<s:TextInput x="103" y="38" width="193"
useHandCursor.tagInput="false"/>
<s:Label x="45" y="89" width="51" height="22" text="Show" textAlign="center"
verticalAlign="middle"/>
<s:Button id="GoButton" x="253" y="137" width="43" label="Go" useHandCursor="true"
buttonMode="true" mouseChildren="false"
x.tagInput="254" y.tagInput="188"/>
<s:DropDownList id="showComboBox" x="104" y="89" width="192" change="comboBoxHandler();"
selectedIndex="0">
<s:ArrayCollection>
<fx:String>All results</fx:String>
<fx:String>Only results within tags</fx:String>
</s:ArrayCollection>
</s:DropDownList>
<s:Label id="tagsLabel" includeIn="tagInput" x="104" y="146" width="61" height="20" text="Tags"
textAlign="center" verticalAlign="middle"/>
<s:TextInput id="tagsTextInput" includeIn="tagInput" x="173" y="146" width="123"/>
</s:Group>
You can check, by clicking the link I gave, that this app performs some basic transition effect when you select different options from the DropDownBox.
The first (show) transition doesn't work so well, but the second (hide) transition does.
Does anyone know how to fix that? In the first transition, I would like the button to slide down first, only after that should the text input fade In. Why isn't this working?
Thanks in advance.
It is better to point particular effect target rather that pointing all the targets in <s:Sequence />. So place targets to <s:Move /> and <s:Fade />. Also you can perform additional transitions tuning by placing <s:AddAction /> and <s:RemoveAction /> with corresponding targets to point a place within sequence where transition should invoke includeIn and excludeFrom states declarations.
So these transitions works fine with your code:
<s:transitions>
<s:Transition fromState="default" id="showTagTextInput" toState="tagInput">
<s:Sequence id="t1p1">
<s:Move duration="700" targets="{[GoButton]}" />
<s:AddAction targets="{[tagsLabel,tagsTextInput]}" />
<s:Fade duration="400" targets="{[tagsLabel,tagsTextInput]}" />
</s:Sequence>
</s:Transition>
<s:Transition fromState="tagInput" id="hideTagTextInput" toState="default">
<s:Sequence id="t2p1">
<s:Fade duration="400" targets="{[tagsLabel,tagsTextInput]}" />
<s:RemoveAction targets="{[tagsLabel,tagsTextInput]}" />
<s:Move duration="700" targets="{[GoButton]}" />
</s:Sequence>
</s:Transition>
</s:transitions>
I would imagine it's because your tag input is only being included in the tagInput state, but the alpha is 100% and there's no transition between the states. Try this:
<s:Label id="tagsLabel" alpha.default="0" alpha.tagInput="100" x="104" y="146" width="61" height="20" text="Tags" textAlign="center" verticalAlign="middle"/>
<s:TextInput id="tagsTextInput" alpha.default="0" alpha.tagInput="100" x="173" y="146" width="123"/>
You might also want to set visible to false during 'default' state. Also, what Constantiner said is true.
I want to have the title of my application to be freezed, that is, even if I scroll down the page, I want the label name to be in focus, at the top always.. Is that possible?
Now if I scroll down , the screen name disappears. Instead, can it be freezed like freezing columns or rows in excel?
Run this:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%">
<mx:VBox width="100%" height="100%">
<mx:Label text="My Label!" />
<mx:VBox width="100%" height="100%" minWidth="0" minHeight="0">
<mx:CheckBox label="1" />
<mx:CheckBox label="2" />
<mx:CheckBox label="3" />
<mx:CheckBox label="4" />
<mx:CheckBox label="5" />
<mx:CheckBox label="6" />
<mx:CheckBox label="7" />
<mx:CheckBox label="8" />
<mx:CheckBox label="9" />
<mx:CheckBox label="10" />
<mx:CheckBox label="11" />
<mx:CheckBox label="12" />
<mx:CheckBox label="13" />
<mx:CheckBox label="14" />
<mx:CheckBox label="15" />
<mx:CheckBox label="16" />
<mx:CheckBox label="17" />
<mx:CheckBox label="18" />
<mx:CheckBox label="19" />
</mx:VBox>
<mx:Label text="Bottom label here!" />
</mx:VBox>
</mx:Application>
Set minWidth=0 and minHeight=0 so Vbox is not going to expand.
Have you tried ApplicationControlBar - use it with dock set to true.
Quoting from the linked page:
Docked mode: The bar is always at the top of the application's drawing area and becomes part of the application chrome. Any application-level scroll bars don't apply to the component, so that it always remains at the top of the visible area, and the bar expands to fill the width of the application. To create a docked bar, set the value of the dock property to true.
I don't know if I understand you correct, but I would make it the following way:
<mx:VBox width="100%" height="100%" verticalScrollPolicy="off">
<mx:Label label="My Title" />
<mx:VBox name="content">
...
</mx:VBox>
</mx:VBox>
So you'll be scrolling just the second VBox and the outer VBox with the title keeps always on top.