In my project I have an user input, the first 4 characters should be number, and the fifth character must be /, is there a way to control this?
I am using Adobe Flash builder 4.6. I only know use restrict for number input.
EDIT1:
After following Timofei's solution, I modified my source code as followings, but it not take effect, only notifying user "This field is required". Whatever I input in the textbox, no warning there, is it some wrong with my code?
<?xml version="1.0" encoding="utf-8"?>
<viewer:BaseWidget xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:viewer="com.esri.viewer.*"
right="450" bottom="175" width="320" height="450" widgetConfigLoaded="init()">
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import spark.events.IndexChangeEvent;
import flash.events.MouseEvent;
import flash.events.Event;
import mx.managers.PopUpManager;
public function handleEvent():void
{
mx.controls.Alert.show("bq no input: " + attr_bqNo.text)
}
]]>
</fx:Script>
<fx:Declarations>
<mx:RegExpValidator id="validator" expression="^\d\{4\}/" noMatchError="Error text here" source="{attr_bqNo}" property="text"
trigger="{attr_bqNo}" triggerEvent="change"/>
</fx:Declarations>
<s:TextInput id="attr_bqNo" x="41" y="29" width="212"/>
<viewer:WidgetTemplate id="attributesearch"
width="320" height="450">
<viewer:layout>
<s:BasicLayout/>
</viewer:layout>
<s:Label x="41" y="15" width="132" height="15" text="BQ No."/>
<s:Label x="40" y="59" width="150" height="16" text="Contract No."/>
<s:TextInput id="attr_contractNo" x="41" y="73" width="213"/>
<s:Label x="40" y="146" text="Drain Name"/>
<s:TextInput id="attr_drainName" x="40" y="159" width="213"/>
<s:Label x="40" y="189" text="Project/Contract Title"/>
<s:TextInput id="attr_projectTitle" x="40" y="203" width="213"/>
<s:Label x="40" y="323" text="Location (Road Name)"/>
<s:TextInput id="attr_roadName" x="40" y="337" width="213"/>
<s:Button id="attr_ok" x="68" y="367" label="Ok" click = "handleEvent()"/>
<s:Button id="attr_clear" x="156" y="367" label="Clear"/>
</viewer:WidgetTemplate>
</viewer:BaseWidget>
You can use RegExpValidator.
<fx:Declarations>
<mx:RegExpValidator id="validator" expression="^\d\{4\}/" noMatchError="Error text here" source="{input}" property="text"
trigger="{input}" triggerEvent="change"/>
</fx:Declarations>
<s:TextInput id="input"/>
Read about validators
Related
I have this ItemRenderer
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="false">
<s:HGroup verticalAlign="middle">
<s:Button label="{data.Nome} ({data.Rating})" width="150" height="35"/>
<s:Button label="{data.Estado}" width="150" height="30"/>
</s:HGroup>
</s:ItemRenderer>
I'd like to see the properties of data object when typing . since its a custom object. How can I see them?
data is suppose to be a User class object.
Try this
<fx:Script>
<![CDATA[
import yourPackage.User;
[Bindable]
private var user:User;
override public function set data(value:Object):void{
super.data = value;
user = data as User;
}
]]>
</fx:Script>
<s:HGroup verticalAlign="middle">
<s:Button label="{user.Nome} ({user.Rating})" width="150" height="35"/>
<s:Button label="{user.Estado}" width="150" height="30"/>
</s:HGroup>
Either as Юрий Борыс said or you could also cast data as User:
<s:Button label="{User(data).Nome} ({User(data).Rating})" width="150" height="35"/>
HIH
I can validating only one filed.
<mx:Validator required="true" property="text" source="{name}" valid="vaildator(event)" invalid="vaildator(event)" />
thanks
Use Validator.validateAll() function to get the validity of each field and then check if the returned array is empty.
<?xml version="1.0" encoding="utf-8"?>
<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" minWidth="955" minHeight="600">
<fx:Declarations>
<mx:StringValidator
id="svSurname"
source="{tiSurname}"
property="text"
requiredFieldError="Surname is required!"
required="true"/>
<mx:StringValidator
id="svFirstname"
source="{tiFirstname}"
property="text"
requiredFieldError="Firstname is required!"
required="true"/>
<mx:NumberValidator
id="nvAge"
source="{tiAge}"
property="text"
lowerThanMinError="Only after 18 years old"
minValue="18"
requiredFieldError="Age is required!"
required="true"/>
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.validators.Validator;
private function onBtnEnter():void
{
var validationResult:Array = Validator.validateAll([svSurname, svFirstname, nvAge]);
if (validationResult.length == 0)
Alert.show("All right!");
else
Alert.show("You have an error!");
}
]]>
</fx:Script>
<s:VGroup x="10" y="10" width="250" height="150">
<s:HGroup width="100%" verticalAlign="bottom">
<s:Label text="Surname*" width="120" textAlign="right"/>
<s:TextInput id="tiSurname" width="120"/>
</s:HGroup>
<s:HGroup width="100%" verticalAlign="bottom">
<s:Label text="Firstname*" width="120" textAlign="right"/>
<s:TextInput id="tiFirstname" width="120"/>
</s:HGroup>
<s:HGroup width="100%" verticalAlign="bottom">
<s:Label text="Age*" width="120" textAlign="right"/>
<s:TextInput id="tiAge" width="120"/>
</s:HGroup>
<s:HGroup horizontalAlign="center" width="100%" height="40">
<s:Button id="btnEnter" label="Send" click="onBtnEnter()"/>
</s:HGroup>
</s:VGroup>
</s:Application>
Can someone show me how should I correctly implement mathematical calculations like (+,-,/,*) using text inputs in 2 cases:
1 - more states
2 - input in a view an the result in other
Here is a part of my code:
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
creationComplete="init()" currentState="State1" overlayControls="false" title="Calculator">
<s:states>
<s:State name="State1"/>
<s:State name="RezultatCalculator"/>
</s:states>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import spark.events.DropDownEvent;
protected function init():void
{
addEventListener(TransformGestureEvent.GESTURE_SWIPE, swipeHandler);
}
protected function swipeHandler(event:TransformGestureEvent):void
{
if (event.offsetX == 1)
{
navigator.pushView(CalculatorView);
}
}
protected function primulcalcul_openHandler(event:DropDownEvent):void
{
// TODO Auto-generated method stub
}
]]>
</fx:Script>
<s:Scroller includeIn="State1" left="3" right="3" top="0" height="547">
<s:VGroup width="100%" height="100%" gap="24" horizontalAlign="justify" paddingTop="8"
verticalAlign="top">
<s:Label id="actot" width="237" height="60" text="Active Totale" textAlign="center"
verticalAlign="middle"/>
<s:TextInput id="actot_val" width="183" height="60" fontFamily="_sans" fontSize="28"
textAlign="center" softKeyboardType="number" />
<s:Label id="disp" width="159" height="60" text="Disponibilitati" textAlign="center"
verticalAlign="middle"/>
<s:TextInput id="disp_val" width="164" height="60" fontFamily="_sans" fontSize="28"
textAlign="center" softKeyboardType="number"/>
<s:Label id="datot" width="159" height="60" text="Datorii Totale" textAlign="center"
verticalAlign="middle"/>
<s:TextInput id="datot_val" width="164" height="60" fontFamily="_sans"
fontSize="28" textAlign="center" softKeyboardType="number"/>
<s:Label id="caprop" width="159" height="60" fontSize="24" text="Capitaluri Proprii"
textAlign="center" verticalAlign="middle"/>
<s:TextInput id="caprop_val" width="164" height="60" fontFamily="_sans" fontSize="28"
textAlign="center" softKeyboardType="number"/>
<s:Button id="butstart0" width="401" height="70" label="START"
click="currentState='RezultatCalculator'" enabled="true"/>
</s:VGroup>
</s:Scroller>
<s:CalloutButton id="primulcalcul" includeIn="RezultatCalculator" x="22" y="28" width="145"
height="63" label="primulcalcul" enabled="true"
open="primulcalcul_openHandler(event)"/>
<s:TextArea id="Primul_val" includeIn="RezultatCalculator" x="203" y="27" width="267"
editable="false" prompt="result"/>
<fx:Script>
<![CDATA[
import flash.globalization.NumberFormatter;
import flashx.textLayout.formats.Float;
import flashx.textLayout.formats.Float;
import learnmath.mathml.components.MathMLFormula;
import learnmath.mathml.formula.layout.MathBox;
public function MathMLFormula():void
{
var Primul_val:Number=new Number
var datot:Number=new Number
var disp:Number=new Number
Primul_val=0
NumberFormatter(TextArea(Primul_val))==NumberFormatter(TextInput(datot))+NumberFormatter(TextInput(disp)); /* this is one of the examples, i tied some different values like valueOf */
}
]]>
</fx:Script>
</s:View>
I have a few suggestions, but I'm not sure exactly what your problem is.
First, use the restrict attribute on your TextArea. The restrict attribute will prevent people from entering non-numeric keys. Sort of like this:
<s:TextInput id="datot_val" width="164" height="60" fontFamily="_sans"
fontSize="28" textAlign="center" softKeyboardType="number" restrict="0-9"/>
It's entirely possible that the use of the softKeyboardType makes this a non-issue if you're using a mobile application on a device that supports it.
The line of code you mentioned in the comments looks to be error prone:
NumberFormatter(TextArea(Primul_val))==NumberFormatter(TextInput(datot))+NumberFormatter(TextInput(disp));
First, datot and disp are Labels; not TextInputs. They have hard coded non-numeric values. I think you want to use datot_val and disp_val. which are TextInputs. Since they are already inputs you do not need to cast them as such.
Second you do not need to cast the TextInput as a NumberFormatter. You would not usually use a NumberFormatter as a static class, but rather create an instance of it. More info on NumberFormatter here.
So, I believe your line would be rewritten like this:
Primul_val.text== String(
int(datot.text) + int(disp.text)
);
I added some extra lines so the parenthesis wouldn't get confused.
I take the input of datot (AKA datot.text) and cast it as an int. I take the input of disp (disp.text) and cast that as an int. I add the two together and convert them both to a String. The string is stored in the text value of Primul_val.
Does that help clear anything up?
I am using the flex 4 popup manager to popup a panel, but the children of the panel are not staying inside the panel. But when i close the popup the children are being removed.
Like this: (sorry i can't post pics)
----------
l________l
l l
..... please enterl
l--------1
Anybody know why? Here's my code:
var forgotPopup:Panel = PopUpManager.createPopUp(this, forgottenForm, true) as Panel;
PopUpManager.centerPopUp(forgotPopup);
And here's what i'm popping up:
<?xml version="1.0" encoding="utf-8"?>
<s:Panel xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="218" height="168" skinClass="PanelSkin" title="Reset Details">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.FlexEvent;
import mx.managers.PopUpManager;
// Handle the close button and Cancel button.
private function handleCloseEvent():void {
PopUpManager.removePopUp(this);
}
]]>
</fx:Script>
<mx:Form horizontalCenter="0" verticalCenter="0">
<mx:FormHeading label="Please enter your e-mail address and your login details will be e-mailed to you"/>
<mx:FormItem label="E-mail">
<s:TextInput id="userInput" x="78" y="49"/>
</mx:FormItem>
<mx:FormItem direction="horizontal">
<s:Button id="okButton" label="Submit" skinClass="ButtonSkin" />
<s:Button id="cancelButton" label="Cancel" skinClass="ButtonSkin"/>
</mx:FormItem>
</mx:Form>
</s:Panel>
Any help on this would be brilliant, thanks.
Try to use the following:
<?xml version="1.0" encoding="utf-8"?>
<s:Panel xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="218" height="168" skinClass="PanelSkin" title="Reset Details">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.FlexEvent;
import mx.managers.PopUpManager;
// Handle the close button and Cancel button.
private function handleCloseEvent():void {
PopUpManager.removePopUp(this);
}
]]>
</fx:Script>
<mx:Form left="10" right="10" top="10" bottom="10">
<mx:FormHeading label="Please enter your e-mail address and your login details will be e-mailed to you"/>
<mx:FormItem label="E-mail">
<s:TextInput id="userInput" x="78" y="49"/>
</mx:FormItem>
<mx:FormItem direction="horizontal">
<s:Button id="okButton" label="Submit" skinClass="ButtonSkin" />
<s:Button id="cancelButton" label="Cancel" skinClass="ButtonSkin"/>
</mx:FormItem>
</mx:Form>
</s:Panel>
If you need to have header word wrapped you should reject standard FormHeading and replace it with Label:
<?xml version="1.0" encoding="utf-8"?>
<s:Panel xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="218" height="168" skinClass="PanelSkin" title="Reset Details">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.FlexEvent;
import mx.managers.PopUpManager;
// Handle the close button and Cancel button.
private function handleCloseEvent():void {
PopUpManager.removePopUp(this);
}
]]>
</fx:Script>
<mx:Form left="10" right="10" top="10" bottom="10">
<s:Label width="100%" text="Please enter your e-mail address and your login details will be e-mailed to you" fontWeight="bold" />
<mx:FormItem label="E-mail">
<s:TextInput id="userInput" x="78" y="49"/>
</mx:FormItem>
<mx:FormItem direction="horizontal">
<s:Button id="okButton" label="Submit" skinClass="ButtonSkin" />
<s:Button id="cancelButton" label="Cancel" skinClass="ButtonSkin"/>
</mx:FormItem>
</mx:Form>
</s:Panel>
But the best way is to switch to Spark Form which is available since Flex 4.5.
Please Avoid X and Y position
this might also cause the Objects Positions.
This is similar to my previous posting. But this time I want to call a function that exists on the main mxml page.
This is my main mxml page:
main.mxml
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*">
<mx:Script>
<![CDATA[
public function changeText(currentText:String):void{
switch (currentText){
case "changeText":
lblOne.text = "More Text";
}
}
]]>
</mx:Script>
<mx:HBox x="137.5" y="10" width="100%" height="100%">
<ns1:menu id="buttons"> </ns1:menu>
</mx:HBox>
<mx:Canvas x="137" y="88" width="408.5" height="200">
<mx:HBox x="0" y="10" width="388.5" height="190">
<mx:Panel width="388" height="179" layout="absolute">
<mx:Label x="10" y="10" text="Some Text" visible="{buttons.showLabel}" id="lblOne"/>
</mx:Panel>
</mx:HBox>
</mx:Canvas>
</mx:Application>
Here is my included page:
menu.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">
<mx:Script>
<![CDATA[
[Bindable] public var showLabel:Boolean = true;
]]>
</mx:Script>
<mx:MenuBar width="380" height="58"></mx:MenuBar>
<mx:Button x="10" y="10" width="80" label="Show" id="btnOne" click="this.showLabel=true;" />
<mx:Button x="94" y="10" width="80" label="Hide" id="btnTwo" click="this.showLabel=false;"/>
<mx:Button x="181" y="10" width="80" label="Run Function" id="btnThree" click="{changeText('changeText')}"/>
</mx:Canvas>
How do I call the changeText function from the button on menu.mxml?
Add this to menu:
<mx:Metadata>
[Event(name="buttonClicked", type="flash.events.Event")]
</mx:Metadata>
<mx:Button x="10" y="10" width="80" label="Show" id="btnOne" click="this.showLabel=true;dispatchEvent(new Event("buttonClicked"));"/>
Change main to:
<ns1:menu id="buttons" buttonClicked="changeText("Your Text");">
I couldn't tell where current text is coming from but if it is from menu you may have to build your own custom flex event or create a common variable for the two parts to access. The first is usually preferred.
P.S. The event metadata thing could also be achieved by adding the event listener when the creation of the application completes. You would add to main:
buttons.addEventListener("buttonClicked",changeText("Your Text"));
there is a simpler way, just use parentDocument.
Change this:
<mx:Button x="181" y="10" width="80" label="Run Function" id="btnThree" click="{changeText('changeText')}"/>
to:
<mx:Button x="181" y="10" width="80" label="Run Function" id="btnThree" click="{parentDocument*.changeText('changeText')}"/>**