Simple VisualComponent Development Example

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

	clazz.prototype.paint = function(context) {
		var me = this;
	
		var $ss = $("<button></button>");
		$ss.attr("id", me.id);
	
		if (this.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;
	};
	
	clazz.prototype.hide = function() {
		if (this.__element)
		this.__element.hide();
	};
	
	// #ifdef designing
	clazz.prototype.editor = function() {
		var d = {
			palette : {
				category : "Basic",
				alias : undefined,
				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,
				},
			},
			method : {
				hide : {
					priority : 2,
				},
			},				
			event : {
				onTap : {
					priority : 1,
				},
			},
		};
		return d;
	};
	// #endif designing

	return clazz;
}
});