156 lines
5.6 KiB
JavaScript
156 lines
5.6 KiB
JavaScript
//>>built
|
|
define("dojox/mvc/Generate", [
|
|
"dojo/_base/lang",
|
|
"dojo/_base/declare",
|
|
"./_Container",
|
|
"./Group",
|
|
"dijit/form/TextBox"
|
|
], function(lang, declare, Container){
|
|
/*=====
|
|
Container = dojox.mvc._Container;
|
|
declare = dojo.declare;
|
|
=====*/
|
|
|
|
return declare("dojox.mvc.Generate", [Container], {
|
|
// summary:
|
|
// A container that generates a view based on the data model its bound to.
|
|
//
|
|
// description:
|
|
// A generate introspects its data binding and creates a view contained in
|
|
// it that allows displaying the bound data. Child dijits or custom view
|
|
// components inside it inherit their parent data binding context from it.
|
|
|
|
// _counter: [private] Integer
|
|
// A count maintained internally to always generate predictable widget
|
|
// IDs in the view generated by this container.
|
|
_counter : 0,
|
|
|
|
// defaultWidgetMapping: Object
|
|
// The mapping of types to a widget class. Set widgetMapping to override this.
|
|
//
|
|
_defaultWidgetMapping: {"String" : "dijit.form.TextBox"},
|
|
|
|
// defaultClassMapping: Object
|
|
// The mapping of class to use. Set classMapping to override this.
|
|
//
|
|
_defaultClassMapping: {"Label" : "generate-label-cell", "String" : "generate-dijit-cell", "Heading" : "generate-heading", "Row" : "row"},
|
|
|
|
|
|
// defaultIdNameMapping: Object
|
|
// The mapping of id and name to use. Set idNameMapping to override this. A count will be added to the id and name
|
|
//
|
|
_defaultIdNameMapping: {"String" : "textbox_t"},
|
|
|
|
////////////////////// PRIVATE METHODS ////////////////////////
|
|
|
|
_updateBinding: function(){
|
|
// summary:
|
|
// Regenerate if the binding changes.
|
|
this.inherited(arguments);
|
|
this._buildContained();
|
|
},
|
|
|
|
_buildContained: function(){
|
|
// summary:
|
|
// Destroy any existing generated view, recreate it from scratch
|
|
// parse the new contents.
|
|
// tags:
|
|
// private
|
|
this._destroyBody();
|
|
|
|
this._counter = 0;
|
|
this.srcNodeRef.innerHTML = this._generateBody(this.get("binding"));
|
|
|
|
this._createBody();
|
|
},
|
|
|
|
_generateBody: function(binding, hideHeading){
|
|
// summary:
|
|
// Generate the markup for the view associated with this generate
|
|
// container.
|
|
// binding:
|
|
// The associated data binding to generate a view for.
|
|
// hideHeading:
|
|
// Whether the property name should be displayed as a heading.
|
|
// tags:
|
|
// private
|
|
var body = "";
|
|
for(var prop in binding){
|
|
if(binding[prop] && lang.isFunction(binding[prop].toPlainObject)){
|
|
if(binding[prop].get(0)){
|
|
body += this._generateRepeat(binding[prop], prop);
|
|
}else if(binding[prop].value){
|
|
// TODO: Data types based widgets
|
|
body += this._generateTextBox(prop);
|
|
}else{
|
|
body += this._generateGroup(binding[prop], prop, hideHeading);
|
|
}
|
|
}
|
|
}
|
|
return body;
|
|
},
|
|
|
|
_generateRepeat: function(binding, repeatHeading){
|
|
// summary:
|
|
// Generate a repeating model-bound view.
|
|
// binding:
|
|
// The bound node (a collection/array node) to generate a
|
|
// repeating UI/view for.
|
|
// repeatHeading:
|
|
// The heading to be used for this portion.
|
|
// tags:
|
|
// private
|
|
var headingClass = (this.classMapping && this.classMapping["Heading"]) ? this.classMapping["Heading"] : this._defaultClassMapping["Heading"];
|
|
var repeat = '<div data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: \'' + repeatHeading + '\'" + id="' + this.id + '_r' + this._counter++ + '">' +
|
|
'<div class="' + headingClass + '\">' + repeatHeading + '</div>';
|
|
repeat += this._generateBody(binding, true);
|
|
repeat += '</div>';
|
|
return repeat;
|
|
},
|
|
|
|
_generateGroup: function(binding, groupHeading, hideHeading){
|
|
// summary:
|
|
// Generate a hierarchical model-bound view.
|
|
// binding:
|
|
// The bound (intermediate) node to generate a hierarchical
|
|
// view portion for.
|
|
// groupHeading:
|
|
// The heading to be used for this portion.
|
|
// hideHeading:
|
|
// Whether the heading should be hidden for this portion.
|
|
// tags:
|
|
// private
|
|
var group = '<div data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: \'' + groupHeading + '\'" + id="' + this.id + '_g' + this._counter++ + '">';
|
|
if(!hideHeading){
|
|
var headingClass = (this.classMapping && this.classMapping["Heading"]) ? this.classMapping["Heading"] : this._defaultClassMapping["Heading"];
|
|
group += '<div class="' + headingClass + '\">' + groupHeading + '</div>';
|
|
}
|
|
group += this._generateBody(binding);
|
|
group += '</div>';
|
|
return group;
|
|
},
|
|
|
|
_generateTextBox: function(prop){
|
|
// summary:
|
|
// Produce a widget for a simple value.
|
|
// prop:
|
|
// The data model property name.
|
|
// tags:
|
|
// private
|
|
// TODO: Data type based widget generation / enhanced meta-data
|
|
var idname = this.idNameMapping ? this.idNameMapping["String"] : this._defaultIdNameMapping["String"];
|
|
idname = idname + this._counter++;
|
|
var widClass = this.widgetMapping ? this.widgetMapping["String"] : this._defaultWidgetMapping["String"];
|
|
var labelClass = (this.classMapping && this.classMapping["Label"]) ? this.classMapping["Label"] : this._defaultClassMapping["Label"];
|
|
var stringClass = (this.classMapping && this.classMapping["String"]) ? this.classMapping["String"] : this._defaultClassMapping["String"];
|
|
var rowClass = (this.classMapping && this.classMapping["Row"]) ? this.classMapping["Row"] : this._defaultClassMapping["Row"];
|
|
|
|
return '<div class="' + rowClass + '\">' +
|
|
'<label class="' + labelClass + '\">' + prop + ':</label>' +
|
|
'<input class="' + stringClass + '\" data-dojo-type="' + widClass + '\" data-dojo-props="name: \'' + idname + "', ref: '" + prop + '\'" id="' +
|
|
idname + '\"></input>' +
|
|
'</div>';
|
|
}
|
|
});
|
|
});
|