Extended widgets
From WebOS101
Contents |
An Extended "widget" Object
You can create an enhanced widget by extending it with a custom method (or any other properties you want).
"widget" Definition
This is the new widget object's constructor.
widget = function(definition) { // widget object
/*
* Defines a widget object
*/
var that = {};
- Note: that is what will be returned by the constructor when a new widget is created.
Next methods are added to that.
that.get_attributes = function() {
return definition.attributes;
};
that.set_attributes = function(attributes) {
definition.attributes = attributes;
};
that.get_model = function() {
return definition.model;
};
that.set_model = function(model) {
definition.model = model;
};
that.set_func = function(func) {
definition.func = func;
};
that.execute = function() {
definition.func.apply(definition, arguments);
};
- Note: that.execute passes definition as the value for this when calling the widget's function
Finally, return the new object.
return that;
}
"widget" Usage Examples
Spinner "widget"
Now you can create a variable that will represent a particular Mojo Widget.
var spinner1 = widget({
'attributes': {
'spinnerSize': 'small'
},
'model': {
'spinning': false
},
- Note: attributes and model are just what you would expect for a typical Mojo Widget.
The func method is what makes this widget special. It can be anything you want.
'func': function() {
arguments = arguments[0];
switch(arguments[0]) {
case true:
this.model.spinning = true;
break;
default:
this.model.spinning = false;
break;
}
Mojo.Controller.stageController.activeScene().modelChanged(this.model); // this lets the widget be updated in any scene
}
});
...
this.controller.setupWidget(theWidgetId, spinner1.get_attributes(), spinner1.get_model());
...
spinner1.execute(true); // to start the spinner
...
spinner1.execute(); // to stop the spinner
- Note: arguments is set to arguments[0] because this function is going to be called from the execute method of the widget object (which will pass its arguments array)
- Note: you still need to set up the widget, but now you use its get_attributes and get_model methods to supply the attributes and model objects. It is easily possible to assign the element's ID to another property of your widget definition and add get_id and set_id methods to the constructor function.
More concrete example of Spinner "widget" usage
spinner1.execute(true);
var url = 'http://www.example.com/myScript.php';
var request = new Ajax.Request(url,{
method: 'post',
parameters: {'parm1': 'value1'},
evalJSON: 'true',
onSuccess: spinner1.execute.bind(this, false),
onFailure: spinner1.execute.bind(this, false)
});
ProgressPill "widget"
This is another widget object. This time the attributes and model are for a ProgressPill Mojo Widget and the func method provides ways to set and update the progress amount that should be shown.
var progressPill1 = widget({
'attributes': {
'modelProperty': 'progress'
},
'model': {
'progress': 0.0
},
'func': function() {
switch(arguments[0]) {
case 'start':
if (arguments[1]) {
this.model.title = arguments[1];
}
this.model.progress = 0.0;
break;
case 'update':
this.model.progress = Math.round((arguments[1] + this.model.progress) * 10000) / 10000; // 4 digits of precision, change this if you need more
if (this.model.progress > 1) {
this.model.progress = 1;
}
break;
case 'complete':
if (arguments[1]) {
this.model.title = arguments[1];
}
this.model.progress = 1;
break;
}
if (Math.round(this.model.progress * 100) % 5 === 0) { // updates ProgressPill at every 5%
this.model.titleRight = Math.round(this.model.progress * 100) + '%'; // this will display the completion percentage
Mojo.Controller.stageController.activeScene().modelChanged(this.model);
}
}
});
...
this.controller.setupWidget(theWidgetId, progressPill1.get_attributes(), progressPill1.get_model());
...
progressPill1.execute('start', 'Processing...');
...
progressPill1.execute('update', 0.0025);
...
...
...
progressPill1.execute('update', 0.9975);
...
progressPill1.execute('complete', 'Processing complete.');
More concrete example of ProgressPill "widget" usage
var i, iLength, increment, db;
iLength = 1000; // for dummy data, you would want to figure out the number of records to insert and use that value instead
progressPill1.execute('start', 'Processing ' + iLength + ' records.');
db = openDatabase('MyDB', '0.1');
db.transaction(function(transaction) {
increment = Math.round((1 / iLength) * 10000) / 10000; // 4 digits of precision (will need more if inserting more than 10K records)
transaction.count = 0;
for (i = 0; i < iLength; i += 1) { // see comment at iLength above
transaction.executeSql("INSERT OR REPLACE INTO 'a_table' (a_column) VALUES (?)", [i],
function(transaction, result) {
transaction.count += 1;
progressPill1.execute('update', increment);
if (transaction.count === iLength) {
progressPill1.execute('complete');
}
}.bind(this),
function(transaction, error) {
transaction.count += 1;
progressPill1.execute('update', increment);
if (transaction.count === iLength) {
progressPill1.execute('complete');
}
}.bind(this));
}
}.bind(this));
