DataStoreComponent Organizing VisualComponent Development Example

NEST.define("com.nxstinc.nest.component.example", {
MyLabel : function() {
	var clazz = function(id) {
		this.id = id;
		this.text = "Hello";
		this.size = {};
		this.style = {};
		this.styleClass = "label";
		this.dataStore = undefined;
		this.dataText = undefined;
	};
			
	clazz.prototype = NEST.inherits("com.nxstinc.nest.component.VisualComponent");

	clazz.prototype.paint = function(context) {
		var me = this;
	
		var $ss = $("");
		$ss.attr("id", me.id);	
		if (me.styleClass)
			$ss.addClass(me.styleClass);
		$ss.css(me.size);
		$ss.css(me.style);		
		if (me.text)
			$ss.text(me.text);

		var parent = context.selector;
		$(parent).append($ss);
		me.on($ss, "click", function(ev) {
			me.trigger("onTap");
			return false;
		}, true);
		this.__element = $ss;
		
		if (undefined !== me.dataStore) {
			me.dataStore.bind("onTake", function(p) {
				var table = p.content;
				if (table && table.length > 0) {
					var row = table[0];
					$ss.text(row[me.dataText]);
				}
			});
		}
	};
		
	// #ifdef designing
	clazz.prototype.editor = function() {
		var d = {
			palette : {
				category : "Basic",
				priority : -1,
			},
			property : {
				text : {
					type : "string",
					category : "Setup",
					priority : 1,
				},
				styleClass : {
					type : "string",
					editor : "StyleClassSelectionEditor",
					category : "Decoration",
					priority : 2,
					alias : "Style Class",				
				},
				size : {
					type : "size",
					editor : "SizeEditor",
					category : "Decoration",
					priority : 4,
				},
				style : {
					type : "style",
					editor : "StyleEditor",
					category : "Decoration",
					priority : 5,
				},
				dataStore : {						
					type : "Reference",
					editor : "DataStoreEditor",
					category : "DataStore",
					priority : 1,
					alias : "Store",
				},
				dataText : {						
					type : "String",
					editor : "DataColumnEditor",
					category : "DataStore",
					priority : 2,
					alias : "Text",
				},
			},
		};
		return d;
	};
	// #endif designing

	return clazz;
}
});