Dieses Beispiel zeigt die letzte "magische" Methode. Ihre Funktionalität unterscheidet sich von den ersten 8 Methoden, da der zurückgegebene Markup in "Container" eines Elternelements eingefügt wird (falls dieser "Container" vorhanden ist) und nicht dazu dient die HTML-Elemente einer Klasse zu bestimmen. Dies kann benutzt werden um Representationen eines Objektes innerhalb eines Eltern-Objektes zu erstellen. Die Sichtbarkeit des representierten Teils des Objektes kann dann z.B. über die Selektions-Funktionalität der generellen Klasse "states" kontrolliert werden (Die Klasse "tab" benutzt diese Technik um Tabulatoren darzustellen). Eine hierrarchische Task-Leiste, wäre eine weitere Anwendung für diese "magische" Methode

	this.containerHTML=function(param,$this$)
	{
		return {
			[container name]:[
					
			]
		}
	}
	

Für den Fall das ein "Container" keinen "Content" hat, kann der "Container" unsichtbar gemacht werden.

	this.nonPrototype=function(param,$class$){
		return {
			onNoChildren:{
				[container name]:"hidden"
			}
		}
	}
	

Beispiel:

Skript:

	app.newClass("containerDemo","content",function(param,app,superClass){
		
		this.classType="containerDemo"
		
		this.nonPrototype=function(param,$class$){
			return {
				onNoChildren:{
					container:"hidden"
				},
				size:{
					height:"auto"
				}
				,sizes:{
					content:{sizeHeight:true}
				}
			}
		}
		
		this.objectOpenHTML=function(param,$this$)
		{
			return [
				{tagName:"div",$id$:"container"}
			]
		}
		
		this.contentOpenHTML=function(param,$this$)
		{
			return [
				{tagName:"div",$id$:"inContent",children:[
					{tagName:"span",children:[
						"Content. Object: "+this
					]}
				]}
			]
		}
		
		this.containerHTML=function(param,$this$)
		{
			return {
				container:{tagName:"div",$id$:"containerContent",children:[
					{tagName:"span", children:["Container Content. Object: "+this]}
				]}
			}
		}
	})
	
	var o
	(o=app.newObject("containerDemo")
		.addLastChild("containerDemo"))
			.addLastChild("containerDemo",{sizes:{containerContent:{position:"floatleft",width:"fit"}}})
			.addNext("containerDemo",{sizes:{containerContent:{position:"floatleft",width:"fit"}}})
			.addNext("containerDemo",{sizes:{containerContent:{position:"floatleft",width:"fit"}}})
		o.addNext("containerDemo")
		.addNext("containerDemo")
	

CSS:

	.app-containerDemo.app-object{
		border:1px solid black;
		padding:5px;
		margin:5px;
	}
	
	.app-containerDemo .app-content{
		border:1px solid #cccccc;
		padding:5px;
		margin:5px;
	}
	
	.app-container{
		border:1px solid red;
		padding:5px;
		margin:5px;
		overflow:hidden;
	}
	
	.app-containerContent{
		border:1px solid blue;
		padding:5px;
		margin:5px;
	}