Dies ist ein Layout-Beispiel mit Bildern. Die Bilder behalten ihr Seitenverhältnis bei einer Größenveränderung. Die Objekte wurde wieder aus 2 Klassen ("layoutbox" und "imagebox") zusammen gestellt.

Beispiel:

Skript:

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

		this.classType="imagebox";
		
		this.nonPrototype=function(param,$class$)
		{
			return {
				sizes:{
					image:{width:"100%",height:"100%",keepAspect:true}
				}
			};
		}
		this.contentOpenHTML=function(param,$class$)
		{
			return	[	
				{tagOpen:"IMG",$id$:"image",src:this.src||"gfx/dummy.gif"}
			]
		}

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

		this.classType="layoutbox";
		this.gfxBorder=true;
		
		this.nonPrototype=function(param,$class$)
		{
			return {
				resizable:{render:true}
			};
		}
		
		
		this.construct=function(param,$class$)
		{
			addEvent.call(this,"resize_resized",$this$.setText);
			addEvent.call(this,"resize_resize",$this$.setText);
			addEvent.call(this,"resize_windowresized",$this$.setText,"global");
		}
		
		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",{size:{width:"fit",height:"50%"}})
	row.addLastChild("layoutbox.imagebox",{size:{position:"floatleft",width:"fit"},src:"gfx/frankenstein_gross.jpg"})
	row.addLastChild("layoutbox.imagebox",{size:{position:"floatleft",width:"fit"},src:"gfx/frankenstein_gross.jpg"})
	row.addLastChild("layoutbox.imagebox",{size:{position:"floatleft",width:"fit"},src:"gfx/frankenstein_gross.jpg"})

	var row2=app.newObject("layoutbox",{size:{width:"fit",height:"30%"}})
	row2.addLastChild("layoutbox.imagebox",{size:{position:"floatleft",width:"50%"},src:"gfx/frankenstein_gross.jpg"})
	row2.addLastChild("layoutbox.imagebox",{size:{position:"floatleft",width:"fit"},src:"gfx/frankenstein_gross.jpg"})
	row2.addLastChild("layoutbox.imagebox",{size:{position:"floatleft",width:"fit"},src:"gfx/frankenstein_gross.jpg"})

	var row3=app.newObject("layoutbox",{size:{width:"fit",height:"fit"}})
	row3.addLastChild("layoutbox.imagebox",{size:{position:"floatleft",width:"50%"},src:"gfx/frankenstein_gross.jpg"})
	row3.addLastChild("layoutbox.imagebox",{size:{position:"floatleft",width:"30%"},src:"gfx/frankenstein_gross.jpg"})
	row3.addLastChild("layoutbox.imagebox",{size:{position:"floatleft",width:"fit"},src:"gfx/frankenstein_gross.jpg"})
	

CSS:

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

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

	.app-layoutbox .app-content{
		text-align:center;
	}

	.app-text{
		margin:5px;
		overflow:hidden;
	}
	.app-image{
		padding:5px;
		border:1px solid black;
	}