Simple ContainerComponent Development Example

NEST.define("com.nxstinc.nest.component.example", {
MyPanel : function() {
	var clazz = function(id) {
		this.id = id;
		this.size = {
			"width" : "100%",
			"min-height" : "20px",
		};
		this.style = {};
		this.padding = {};
		this.margin = {};
	};
	
	clazz.prototype = NEST.inherits("com.nxstinc.nest.component.ContainerComponent");

	clazz.prototype.paint = function(context) {
		var me = this;
		
		var $ss = $("<div></div>");
		$ss.attr("id", me.id);
		$ss.addClass(me.styleClass);
		$ss.css(me.size);
		$ss.css(me.style);
		$ss.css(me.padding);
		$ss.css(me.margin);
		
		// console.log(ss);
		var parent = context.selector;

		var me = this;
		me.__element = $ss;
		$(parent).append($ss);
		
		me.on($ss, "tap", function(ev) {
			me.trigger("onTap");
		});
		me.on($ss, "doubletap", function(ev) {
			me.trigger("onDoubleTap");
		});
		
		var ctx = new NEST.c.com.nxstinc.nest.component.Context();
		ctx.parent = context;
		ctx.selector = $ss;
		ctx.component = this;

		// ※ ContainerComponent must invoke Paint function method declared in hierarchy class. 

		NEST.inherited(this).paint.call(this, ctx);
	};
	
	clazz.prototype.hide = function() {
		var element = this.__element;
		if (element) {
			element.hide();
			this.trigger("onHide");
		}
	};
	
	// #ifdef designing
	clazz.prototype.editor = function() {
		var d = {
			palette : {
				category : "Layout",
				alias : undefined,
				priority : 2,
			},
			property : {
				styleClass : {
					type : "string",
					editor : "StyleClassSelectionEditor",
					category : "Decoration",
					priority : 2,
					alias : "Style Class",				
				},
				size : {
					type : "size",
					editor : "SizeEditor",
					category : "Decoration",
					priority : 3,
				},
				style : {
					type : "style",
					editor : "StyleEditor",
					category : "Decoration",
					priority : 4,
				},
				padding : {
					type : "padding",
					editor : "PaddingEditor",
					category : "Decoration",
					priority : 5,
				},
				margin : {
					type : "margin",
					editor : "MarginEditor",
					category : "Decoration",
					priority : 6,
				},
			},
			event : {
				onHide : {
					priority : 4,
				},
			},
			method : {
				hide : {
					priority : 2,
				},
			},
		};
		return d;
	};
	// #endif designing

	return clazz;
}
});