Ever thought about why the mojo SDK doesn't contain a floatPicker?
So did I.
With a little code changes and some thought i present to you:
Usage:
HTML :
<div id="FloatPickerID" x-mojo-element="FloatPicker"></div>
JS :
****.prototype.setup = function() {
attributes = {
label: 'Float', // the label next to the control
min: 0, // minimum value
max: 10, // maximum value
modelProperty: 'value',
Interval:0.1 //the "jumps" of the value , use integers to display as integerPicker
};
this.model = {
value : 0.1, // current value
disabled : false // use this to set enable/disable of the control
}
this.controller.setupWidget('FloatPickerID', attributes, this.model);
}
This FloatPicker is a subclass of IntegerPicker so it uses the same attributes and model , with the addition of Interval attribute which determain the value "jumps" of the control.
to change the control's enable disable state use:
this.pickerModelNewPoints.disabled = true; // or false
this.controller.modelChanged(this.model);
Enjoy
wow, just what i was looking for!
thanks.
Happy to help
I beat my head against my desk for hours trying to figure out how to do this!
Thanks!
Ok, what would it take to create a picker widget that had two capsules, one for the integer and another for the fraction - perhaps separated by a decimal point?
can't you use 2 widgets of this one?
I was trying to have more than 1 picker,( total of 6) each with different model and attributes, but it did not work. Only last will have correct values, rest of other picker will be blank.
i will check
Thanks codesos.
I got above issue resolved by declaring the Items Array as this.Items, but now If I change the model by calling,
this.controller.setWidgetModel
I ran into the same issue. the popup model has the Items array populated but somehow it won't render the values in Capsule. The capsule is blank.
If I don't call the above API, everything works fine but I need to change the value that gets displayed after making the selection,
Can you suggest the proper way to do it. Right now I am calling the setWidgetModel on propertyChange.
can you send me the code that generated that problem?
The code to instantiate the FloatPicker is below. The number is dynamic it could be 2 or more.
var maxVal = this.multiplierArray[this.multiplierArray.length-y]*11;
var intervalDigit = this.multiplierArray[this.multiplierArray.length-y];
var modelDigit = this.multiplierArray[this.multiplierArray.length-y];
oCell.innerHTML = '<div id="multi_digit_field_'+y+'_'+x+'" name="multi_digit_field_'+y+'_'+x+'" x-mojo-element="FloatPicker" ></div>'; this.controller.setupWidget('multi_digit_field_'+y+'_'+x, {label: " ", min:intervalDigit, max:maxVal,Interval:intervalDigit,modelProperty:'value'}, {value : modelDigit});
Mojo.Event.listen(this.controller.get('multi_digit_field_'+y+'_'+x),Mojo.Event.propertyChange,this.linePropertyChanged);
The code which is causing the problem is below
MultisheetAssistant.prototype.linePropertyChanged = function(event)
{
var idx = event.target.id;
var idl = event.target.id.length;
var idnum = idx.substring(idl-3,idl);
Mojo.Log.info('event.value is >>>> '+event.value);
var aValue = ''+event.value;
var aCarryOver = 0;
if(aValue>9)
{
aValue = aValue.substring(1,2);
aCarryOver = aValue.substring(0,1);
}
var aWidget = this.controller.get(idx);
this.controller.setWidgetModel(aWidget, {value : aValue});
}
Fixed the above issue, changed the FloatPicker code little bit
changed the popup model to have the itemRange also.
popupModel = {
onChoose: this._choose,
value: this.assistant.getModelProperty(),
itemsRange:{min:this.controller.attributes.min,max:this.controller.attributes.max}//todayDate.getHours()
};
nice job!1
How ever , adding this line
itemsRange:{min:this.controller.attributes.min,max:this.controller.attributes.max}
does create a bug in which the current item in the popup list , is not the current value