I created my own validation control.
something like this
control.mxml:
<mx:states>
<mx:State name="ExceptionState">
<mx:AddChild relativeTo="{hbox1}">
<mx:TextArea id="txtError"
styleName="errorMessage"
width="140" minHeight="26"
wordWrap="true" editable="false"
/>
</mx:AddChild>
<mx:SetProperty name="height" value="56" />
<mx:SetProperty target="{txtInput}" name="y" />
<mx:SetProperty name="width" value="100%" />
</mx:State>
</mx:states>
<mx:HBox width="100%" x="0" y="0" id="hbox1" styleName="nopadding">
<mx:TextInput id="txtInput"
text="{text}"
displayAsPassword="{displayAsPassword}"
maxChars="{maxLength}"
cornerRadius="0"
height="22"
styleName="{inputStyleName}"
width="{_inputWidth}"
/>
</mx:HBox>
When I validate the txtinput and it's not valid, the textarea will appear with some information in it.
Now I have several textinput fields in a canvas
<custom:control id="eerstes" errormessage("message1");/>
<custom:control id="tweeds"errormessage("message2");/>
etc.
but when eerstes is not valid, the textarea appears and my custom control with id tweeds will shift a little.
Is it possible to let the textarea float but that is is still relative to hbox1?
Thank you,
JSMB
If I were you, I would try using the PopUpManager.addPopUp to place the TextField into the box. Once you've done that, you can manually reposition the TextField without effecting the alignment of the box's children. You may even be able to get this to work using BindingUtils, so that you don't have to reposition this every time.
On the other hand, you could use Alert.show, which would simply put a pop-up over the entire SWF.
What is the base class for your component custom:control ? Does it extend Canvas?
Related
I have a MXML compoenent that is launched as a popup:
<s:TitleWindow>
[...]
<s:BorderContainer>
<s:HGroup>
two s:Button OK and Cancel
</s:HGroup>
</s:BorderContainer>
<custom:box>
</s:TitleWindow>
custom:box looks like this
<s:BorderContainer>
<s:Image source="{Util.getImage('error.icon')}" />
<s:Image source="{Util.getImage('close.icon')}" />
<s:VGroup id="messageContainer" />
</s:BorderContainer>
What I need is to add the close icon to the tab navigation and focus.
I've tried with implements="mx.managers.IFocusManagerComponent" to the custom:box as an attempt to change the focus on focusHandler(). I only get focus on the custom:box at most.
Also I've tried to set buttonMode="true" and focusEnabled="true" on the close image.
Any ideas would be much appreciated.
Thanks!
I've got FormItems with labels, and I'd like for the label to appear on top of the textinput within it rather than to its left, but I don't know where I need to go or what CSS I need to set this.
<mx:Form id="myform" defaultButton="{BtnSave}">
<mx:FormItem label="MyData" required="true">
<s:TextInput id="dataTextInput" text="{data}"/>
</mx:FormItem>
</mx:Form>
I don't think this is possible w/ MX Forms. I guess in theory you could do something like this:
<mx:Form id="myform" defaultButton="{BtnSave}">
<mx:FormItem required="true" direction="vertical">
<s:Label text="MyData" />
<s:TextInput id="dataTextInput" text="{data}"/>
</mx:FormItem>
</mx:Form>
But, If you're going to do that then why bother using the form in the first place?
I have a panel with a button in it. Clicking on the button will direct the panel to state "State2" adding another two buttons into the panel. During the state change, I want the panel to resize first and then show the newly added two buttons, so I applied transitions onto the state change.
My question is:
If I put the two buttons within a HBox directly under the addChild tag, it works fine. However, if I create a new component with the same code (HBox with two buttons in it) and then add the new component to the panel (Comp in the code commented), it won't show the resize effect.
Could someone tell me how to fix this? Thanks in advance.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">
<mx:Script>
<![CDATA[
protected function button1_clickHandler(event:MouseEvent):void
{
currentState="State2";
}
]]>
</mx:Script>
<mx:transitions>
<mx:Transition>
<mx:Sequence targets="{[comp,panel1]}">
<mx:Resize target="{panel1}" />
<mx:AddChildAction />
</mx:Sequence>
</mx:Transition>
</mx:transitions>
<mx:states>
<mx:State name="State2">
<mx:AddChild relativeTo="{panel1}" position="lastChild">
<mx:HBox id="comp">
<mx:Button label="B" />
<mx:Button label="C" />
</mx:HBox>
<!--<local:Comp id="comp" />-->
</mx:AddChild>
</mx:State>
</mx:states>
<mx:Panel layout="horizontal" borderThickness="1" borderStyle="solid" id="panel1" title="AB">
<mx:Button label="A" click="button1_clickHandler(event)"/>
</mx:Panel>
</mx:Application>
I guess <mx:AddChild> tag can handle only one component at a time.
You will get your sweet resize effect if you separate your custom component to another <mx:AddChild> tag, similar to the code below:
<mx:AddChild relativeTo="{panel1}" position="lastChild">
<mx:HBox id="comp">
<mx:Button label="B" />
<mx:Button label="C" />
<!-- Don't put your custom component here. -->
</mx:HBox>
</mx:AddChild>
<!-- Use separated AddChild. Still add to same relativeTo object -->
<mx:AddChild relativeTo="{panel1}" position="lastChild">
<local:Comp id="comp2" />
</mx:AddChild>
I hope you got what you want.
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.
I have the following MXML:
<mx:State name="myState">
<mx:AddChild relativeTo="{myhbox}" position="after">
<mx:Box verticalAlign="middle" horizontalAlign="center" width="100%" height="100%">
<mx:Form id="myForm" width="479" verticalScrollPolicy="off" horizontalScrollPolicy="off">
<mx:FormItem label="My Label:" fontWeight="bold" id="myLabel" direction="vertical">
<mx:TextInput id="myTextInput" width="282" />
<mx:HBox>
<mx:Button label="Go" click="go();" id="goButton" />
</mx:HBox>
</mx:FormItem>
</mx:Form>
</mx:Box>
</mx:AddChild>
</mx:State>
How do I set focus on the TextInput field using <mx:SetProperty/>? I've tried the following, but it only results in the field being highlighted -- the cursor does not appear in the TextInput:
<mx:SetProperty target="{stage}" name="focus" value="{myTextInput}"/>
Long story short, I want the cursor to appear in the field.
UPDATE: I figured it out. See comments for solution.
I try to avoid using the AddChild state tag. It's usually better to put all that in a component, and use SetProperty to set visible and includeInLayout when you want it to display.
You can always override visible in your custom component to set the focus to the field. Or create a custom setter than does the same thing
public function set show(value:Boolean):void
{
visible = true;
includeInLayout = true;
if (value)
myFunctionThatSetsTheFocus();
}
Add a "creationComplete" to the TextInput and had it call a method that setFocus on the TextInput