In diesem Beispiel wird die Veränderung des grundlegenden Layouts, durch hinzufügen einer Klasse für die Tabulator Darstellung, demonstriert. Es entspricht dem Beispiel "Layout", allerdings wurden bei der Angabe der Objekte, zu der Klasse von der das Objekt abgeleitet wird, die Klasse "tab" hinzugefügt. Die einzelnen Tabulatoren können per "Drag und Drop" zwischen den "Tabulator-Boxen" ausgetauscht werden. Zusätzlich ist es möglich die einzelnen "Layout-Boxen" in der Größe zu verändern. Die entsprechende Größenangaben werden angezeigt. Die Größenangabe "fit" geht bei einer Größenveränderung verloren. Die relative Größenangabe mit "%" bleibt, auch bei einer Veränderung durch "resizen", relativ.

Beispiel:

Skript:

	app.newClass("layoutbox","movedock",function(param,app,superClass){

		this.classType="layoutbox";
		this.gfxBorder=true;
		this.nonPrototype=function(param,$class$)
		{
			return {
				selectable:{},
				resizable:{}
			};
		}
		
		this.construct=function(param,$class$)
		{
			addEvent.call(this,"resize_resized",$this$.setText);
			addEvent.call(this,"resize_windowresized",$this$.setText,"global");
			addEvent.call(this,"movedock_dock",$this$.setText);
			addEvent.call(this,"movedock_movedock",$this$.setText);
		}
		
		this.setText=function(param,$class$)
		{
			getElement.call(this,"text").innerHTML=$this$.getText.call(this)
		}
		
		this.getText=function(param,$class$)
		{
			return "width:"+this.size.width+";height:"+this.size.height;
		}

		this.bodyOpenHTML=function(param,$class$)
		{
			return	[	
				{tagName:"DIV",$id$:"text",style:"height:auto;",children:[$this$.getText.call(this)]}
			]
		}

	})
	
	var row=app.newObject("layoutbox.tab",{size:{width:"fit"}})
	row.addLastChild("layoutbox.tab",{size:{position:"floatleft",width:"fit"},lable:"Tab 1"})
	row.addLastChild("layoutbox.tab",{size:{position:"floatleft",width:"fit"},lable:"Tab 2"})
	row.addLastChild("layoutbox.tab",{size:{position:"floatleft",width:"fit"},lable:"Tab 3"})

	var row2=app.newObject("layoutbox.tab",{size:{width:"fit"},headsPosition:"bottom"})
	row2.addLastChild("layoutbox.tab",{size:{position:"floatleft",width:"50%"},lable:"Tab 1"})
	row2.addLastChild("layoutbox.tab",{size:{position:"floatleft",width:"fit"},lable:"Tab 2"})
	row2.addLastChild("layoutbox.tab",{size:{position:"floatleft",width:"fit"},lable:"Tab 3"})

	var row3=app.newObject("layoutbox.tab",{size:{width:"fit"},headsPosition:"left"})
	row3.addLastChild("layoutbox.tab",{size:{position:"floatleft",width:"50%"},lable:"Tab 1"})
	row3.addLastChild("layoutbox.tab",{size:{position:"floatleft",width:"30%"},lable:"Tab 2"})
	row3.addLastChild("layoutbox.tab",{size:{position:"floatleft",width:"fit"},lable:"Tab 3"})
	

CSS:

	.app-layoutbox-tab{
		border-radius: 5px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border:2px solid #cccccc;
		margin:3px;
		padding:3px;
		min-width:10px;
	}
	.app-text{
		margin:5px;
		overflow:hidden;
	}