I have the following NumericStepper:
<s:NumericStepper id="estimertTidCell" value="{isNaN(hostComponent.estimertTid)?0:hostComponent.estimertTid}" stepSize="0.5" maximum="5" change="hostComponent.estimertTid=estimertTidCell.value"/>
When i set the value to e.g. 1.5 through the NumericStepper and store the value, the alert in the following code correctly displays 1.5:
private var _estimertTid:Number;
[Bindable]
public function get estimertTid():Number {
return _estimertTid;
}
public function set estimertTid(value:Number):void {
_estimertTid = value;
Alert.show("numeric stepper set:" + value);
invalidateSkinState();
}
Problem: My problem is that once the NumericStepper refreshes, or reloads the variable, it displays 2 instead of 1.5, or 4 instead of 3.5 etc. Anyone got any ideas of what is causing this behavior? I would think that by setting the stepSize=0.5 it would correctly display those decimal numbers.
Additional information: When i display the same variable in a spark Label, the value is correctly displayed as a decimal number.
At last! I found a small note that snapInterval has to be set to the same as stepSize or the value will be rounded up. So i hope my troubles help someone else in the future.
Set snapInterval to the same as stepSze to avoid numbers rounding up
Related
I'm make a react application that takes an input that should be shown to two decimal places. When the default input has a one number after the decimal, it should add a second number with a 0 after it. It also lets me add infinite amounts of "0"s, but caps any other number at 2 decimal places.
Two different problems pictured:
Case 1.
This is how the input looks when first loaded. The preferred display would be 1.60 (two decimal places)
Case 2.
Current behavior allows the user to add infinite 0s (any other number it caps at 2 decimal places). Expected behavior should cap all numbers including 0s at 2 decimal places.
function ProductMaterial() {
const [name, setName] = useState("");
function handleChange(e) {
let val = e.target.value;
if (val.includes(".") && val.split(".")[1].length > 2) {
}
else {
setName(parseFloat(val));
setMaterialState(parseFloat(val));
}
}
return (
<div className="input-group-sm col-xs-2 material input-group">
<div className="input-group-prepend">
<span className="input-group-text">$</span>
</div>
<input
className="form-control"
type="number"
min="0.00"
onChange={handleChange}
value={product.material}
/>
</div>
);
}
Here is the code for setMaterialState. It changes the product.material value, and then calls setMaterial() in a useEffect() function. The setMaterial() takes the id of the product, and the new material value and saves it to state.
function setMaterialState(newMaterial) {
product.material = newMaterial;
}
useEffect(() => {
setMaterial(product.id, product.material);
}, [product.material]);
I know that the issue here is that on first load nothing is triggering the onChange() function. I've tried setting value={product.material} to value={product.material.toFixed(2)} but it makes it difficult to fix the input. Is there a good way to initialize it before, maybe using a UseEffect() statement? And on top of this I'm not sure why the 0s can be added indefinitely.
Update:
The first problem with the leading 0s was solved by using the onKeyPress= answer suggested by Photonic.
However, I'm still struggling on the forcing it to be two decimal places when there is a 0 at the end problem. I'm realizing that the issue with not starting doing 1.60 is due to it being converted to a float value and not being a string. I tried doing a UseEffect() [] and force it to go to 2 decimal places with product.material.toFixed(); as well as modify the data to start with being 1.60, but it seems like the only way to force the two decimal places is keeping it as a string or converting it to a string by using product.material.toFixed(2). The value in the input value={product.material} need to be a number to correctly execute calculations and collect user input. I'm not sure what the best solution for this is.
I dont know how you are initializing the first load but you can use UseEffect() to fix the decimal place issue like you mentioned.
For the infinite decimal places...
onChange is an event that is already happen, you might want to try changing from onChange to onKeyDown or onKeyPress and in your code you can add e.preventDefault() to stop number from being entered
if (val.includes(".") && val.split(".")[1].length > 2) {
e.preventDefault()
}
If you want to call a function when the 'component did mount' you can use
useEffect(yourFunction(){}, [])
For example I have function declaration like this:
public function someLongMethodWithLongParamName(int $longparamName): VeryLongReturnValueType {}
with row length limit that less than chars count of function signature.
If I type Ctrl + Alt + L PhpStorm will format this row, but in strange way:
public function someLongMethodWithLongParamName(int $longparamName
): VeryLongReturnValueType {
}
(PhpStorm left parameter in the line of method name). If I will add one more parameter, PhpStorm will format line correct:
public function someLongMethodWithLongParamName(
int $longparamName,
bool $flag
): VeryLongReturnValueType {
}
Maybe someone deal with such bug?
P.S. Here are my Code Style settings:
Looks like you want it to wrap parameter & its type also? Then remove the Place ')' on new line checkbox in Method declaration parameters settings from your screenshot.
first time here on stackoverflow and first time scripting in flashCS6.
ill get down to it - the only lang ive done is html and a bit of css. I tried learning java, but gave up since i realised im making flash games so might as well just do AS3. Its pretty similar and not at all at the same time.
As my first original program (i did a tutorial of pong from a website before, got to know a bit about functions and event handlers[http://as3gametuts.com/2011/03/19/pong-1/]), im trying to create a calculator, and what want to know is how i can return the values from two input fields, put them into a logic calculator (say input a is 1 and input b is 2, and there are four functions, each attached to an event listener for the 4 mathematical operations, and i press addition so the calculator goes 2+1=3)
main question here, how do i get the outut text field to display the answer. In java i just used system.out.println(inputA + inputB).
Here i tried to do out.text = ( a + b) (where out is output , a is input and b is input 2)
Here is the code i have so far:
a is input 1, b is input 2
Out is output
and mul, add, sub and div are symbols containing dynamic test fields with instance names adn, sub, mul and div respectively. The symbol instances are the same as the test instances) Ex: i have a text field that says addition, its instance name is adn, then i convert it to a symbol and make its instance name adn as well.
a.text.restrict = "0-9";
b.text.restrict = "0-9";
mul.addEventListener(MouseEvent.CLICK, output);
adn.addEventListener(MouseEvent.CLICK, addition);
sub.addEventListener(MouseEvent.CLICK, subtraction);
div.addEventListener(MouseEvent.CLICK, division);
a.addEventListener(TextInput,input);
b.addEventListener(TextInput,input);
function output ():void
{
out.text=("test to see if output works")
}
function input (e:TextInput)
{
}
function multiplication (e:MouseEvent)
{
}
function addition (e:MouseEvent)
{
}
function subtraction (e:MouseEvent)
{
}
function division (e:MouseEvent)
{
}
thanks guys, and cheers! Also, ill appreciate if anyone can link me to a good video or text tutorial (series) for AS3 introduction. My main focus is to be making PC games and not apps, so keep that in mind.
Check This Out
Also, don't forget to convert value to string, that may be neccessary:
out.text = String(a + b);
Since a text field will give you the input typecast as a string you will need to type cast them to type Number or type int before you can do any kind of math function on them.
And if you want to create a more complex calculator I would suggest you read up on the Math class
function subtraction (e:MouseEvent)
{
var result:Number = Number(a.text) - Number(b.text)
out.text = String(result)
}
So I just found out that the datetime input fields I use all over my app are no longer working on IOS7, so I found that the datetime-local input type is still supported. Timezone is not important to the function of my app, so this is ok. The problem is, the code I was using to populate and retrieve the date values from the input fields does not work. Here is my code:
$("#date").val(pv.When);
To set it, where date is the id of my input and pv.When is a datetime object
theVisit.When = new Date($("#date").val());
To retrieve it, right now neither do anything, the field is empty when i load the form, and the value does not save. Do I need to do anything special to make this work?
OK, what I did was this, I wrote 2 utility functions, one to set the value of the datetime-local field and one to get the value out as a date. You will notice as part of the fix I am using the Moment.js date helper library.
Here are my 2 functions:
function getDateTimeForPicker(d) {
var offset = d.getTimezoneOffset() / 60;
d.setMinutes(d.getMinutes() - d.getTimezoneOffset())
return d.toISOString().replace("Z", "");
}
function getDateTimeFromPicker(d) {
var m = moment(d);
var ret = m.toDate();
return ret;
}
so I can set as easy as :
$("#dateTimeBox").val(getDateTimeForPicker(new Date()));
This is tested and working fine on iOS7
I've got a DataGrid in my mobile application (I know, I know but there's currently not other solution for this), that numeric values. Depending on the value of a cell, the text gets colored. My big issue is that this doesn't work very for more than about 5 rows of data. I reckon the issue is that the set text function (in which I format the color) can't keep up with the amount of cell changes and formats the text based on the last updated cell of the row.
I thought about a column item renderer so that the renderer only gets the value for that column, and not the whole data of the row.
Is something like that possible?
Just for reference, this is my current item renderer (again, this works fine for few rows, for 5+ of fast changing data, this doesn't work any more, cells get formatted even though their data hasn't changed).
public class ColorGridItemRenderer extends DefaultGridItemRenderer
{
public function ColorGridItemRenderer() {
super();
}
override public function set text(value:String):void {
if (!value)
value = "";
if(Number(value) > Number(text) && text!="")
setStyle("color", 0x40c040);
else if(Number(value) < Number(text) && text!="")
setStyle("color", 0xf05050);
else
setStyle("color", 0xc1c1c1);
}
super.text = value;
}
}
Edit:
I just double-checked and have to revert my previous statement. A single row works fine, the second row already messes up the color formatting though. It seems as if the datagrid somehow throws together the values.
Doing the color formatting in the set data method shows the exact same effect;
override public function set data(value:Object):void {
if(value && data) {
label = value[column.dataField];
if(value[column.dataField] > _oldVal && _oldVal != 0)
setStyle("color", 0x40c040);
else if(value[column.dataField] < _oldVal)
setStyle("color", 0xf05050);
else
setStyle("color", 0xc0c0c0);
_oldVal = value[column.dataField];
}
super.data = value;
}
Edit2:
My assumption about the grid messing up the ItemRenderer's data seems to be correct.
A simple trace in the set data method (trace("old: " + _oldVal + "new : " + value[column.dataField]);) revealed that somehow, values of the next grid row (in case there are 2) get used as well as _oldVal gets the old value of the next row.
Just for reference:
Calling super on the overridden function sets the value to the superclass, thus mixing the values of the rows. Leaving it from the function solves the problem.