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>
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.
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.
In flex form layout
<mx:Form id="form">
<mx:FormItem label="horizontal:">
<mx:Text text="test"/>
</mx:FormItem>
</mx:Form>
the output will be
horizontal 'test'
But my constraint is i want to align the textbox(first child of the form item ) vertically with the label. How can i do this ?Any inputs invited
You could override the form / formitem class to change the layout approach by overriding updateDisplayList method.
You could also try something like this:
<mx:Form id="form">
<mx:FormItem direction="vertical">
<mx:Label text="horizontal:"/>
<mx:Text text="test"/>
</mx:FormItem>
</mx:Form>
For Spark-Forms it works differently. Take a look at this very good description: https://opensource.adobe.com/wiki/display/flexsdk/Spark+Form
From the source above:
<fx:Style>
#namespace s "library://ns.adobe.com/flex/spark";
#stackedForm s|FormItem
{
skinClass : ClassReference("spark.skins.spark.StackedFormItemSkin");
}
</fx:Style>
<s:Form id="stackedForm">
<s:FormItem label="Address" sequenceLabel="1." required="true" >
<s:TextInput width="100%"/>
<s:TextInput width="100%"/>
<s:TextInput width="100%"/>
<s:helpContent>
<s:Label text="(ex. 123 Main Street)" baseline="24"/>
<s:Button label="?" width="30" baseline="24" x="120"/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="City" sequenceLabel="2." required="true">
<s:TextInput width="100%"/>
</s:FormItem>
<s:FormItem label="State" sequenceLabel="3.">
<s:ComboBox dataProvider="{statesDP}" width="100%"/>
</s:FormItem>
<s:FormItem label="ZipCode" sequenceLabel="4." required="true">
<s:TextInput widthInChars="4" restrict="0123456789"/>
<s:helpContent>
<s:Label text="Will appear in your profile" left="0" right="0" baseline="24"/>
</s:helpContent>
</s:FormItem>
</s:Form>
How to put form items in view stack in flex?, so that i can get selected form item through one comboBox
<mx:ComboBox id="cb">
<mx:dataProvider>
<mx:Array>
<mx:String>Label-1</mx:String>
<mx:String>Label-2</mx:String>
<mx:String>Label-3</mx:String>
</mx:Array>
</mx:dataProvider>
</mx:ComboBox>
<mx:ViewStack id="vs" selectedIndex="{cb.selectedIndex}">
<mx:FormItem label="Label-1">
<mx:TextInput/>
</mx:FormItem>
<mx:FormItem label="Label-2">
<mx:TextInput/>
</mx:FormItem>
<mx:FormItem label="Label-3">
<mx:TextInput/>
</mx:FormItem>
</mx:ViewStack>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
My language is not the best, so try to understand me.
I have a login page (that working), if details is correct, i want to go to welcome page, and display the first name and last of the user.
Is ok to access to the label in the another page, and how can i do that
please?
This is my code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.rpc.events.ResultEvent;
import mx.rpc.events.FaultEvent;
import mx.controls.Alert;
[Bindable] public var user:User;
private function resultHandler(event:ResultEvent):void
{
// Is corroect to that :
welLabel.text ="Hello "+ event.result.firstName +" "+ event.result.lastName + ", Welcome to BSRM";
myApp.selectedChild=welcomePage;
}
private function faultHandler(event:FaultEvent):void
{
myApp.selectedChild=errorPage;
}
]]>
</mx:Script>
<mx:RemoteObject id="ro" destination="loginService" fault="faultHandler(event)">
<mx:method name="Login" result="resultHandler(event)"/>
</mx:RemoteObject>
<mx:VBox label="Login Page" width="325" height="220" x="210" y="157">
<mx:ViewStack id="myApp" height="206" width="100%">
<mx:Canvas label="Login Page" width="100%" height="100%">
<mx:Label text="User Name" fontWeight="bold" x="24" y="44"/>
<mx:Button label="Login" id="login" width="76" x="202" y="124" click="ro.Login(userName.text,password.text)"/>
<mx:TextInput id="userName" x="118" y="42"/>
<mx:Label text="Password" fontWeight="bold" x="31" y="83"/>
<mx:TextInput id="password" width="160" x="118" y="81"/>
<mx:LinkButton x="54.5" y="124" label="Forget my password" click="myApp.selectedChild=forgetPassword;"/>
<mx:LinkButton x="206" y="163" label="New user" click="myApp.selectedChild=registerPage;"/>
</mx:Canvas>
<mx:Canvas id="forgetPassword" label="forgetPassword" width="100%" height="100%">
<mx:Label x="2" y="76" text="your email" fontWeight="bold" textAlign="center"/>
<mx:TextInput x="74" y="74" width="241"/>
<mx:Text x="50.5" y="23" text="Forget My Password" fontWeight="bold" color="#F19114" width="224" height="26" fontSize="18"/>
<mx:Button x="252" y="104" label="Send" color="#F9AD0B"/>
</mx:Canvas>
<mx:Canvas id="welcomePage" label="Welcome Page" width="100%" height="100%">
<mx:Label id="welLabel" x="116" y="81"/>
</mx:Canvas>
<mx:Canvas id="errorPage" label="Error Page" width="100%" height="100%">
<mx:Label text="Invalid user name or password" x="82" y="85"/>
</mx:Canvas>
<mx:Canvas id="registerPage" label="Register Page" width="100%" height="100%">
<mx:TextInput x="140" y="29"/>
<mx:TextInput x="140" y="59"/>
<mx:TextInput x="140" y="89"/>
<mx:TextInput x="140" y="119"/>
<mx:TextInput x="140" y="149"/>
<mx:Label x="50" y="33" text="User name:"/>
<mx:Label x="50" y="61" text="Password :"/>
<mx:Label x="50" y="91" text="User name:"/>
<mx:Label x="50" y="121" text="First name:"/>
<mx:Label x="50" y="151" text="Last name:"/>
<mx:Button x="140" y="176" label="Send"/>
</mx:Canvas>
</mx:ViewStack>
</mx:VBox>
</mx:Application>
Just give the label you want to access an ID:
<mx:Label text="User Name" fontWeight="bold" x="24" y="44" id="lblUName/>
Then you can access it in any other part of your app:
<mx:Label id="welLabel" x="116" y="81" text="{lblUName.text}"/>