Usage example

<!DOCTYPE html>
<html>
	<head>
		<meta  name = "viewport" content = "initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no">
		<link rel="stylesheet" href="codebase/touchui.css" type="text/css" media="screen" charset="utf-8">
		<script src="codebase/touchui.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.my_control .item1,.my_control .item2,.my_control .item3{
				float:left;
			}
			.my_control .item1{
				background:#ccffff;
			}
			.my_control .item2{
				background:#ffccff;
			}
			.my_control .item3{
				background:#ccccff;
			}
		</style>
 
		<script>
 
		dhx.protoUI({
			name:"custom",
			$init:function(config){
				this.$view.className = "my_control";
				this.$view.innerHTML = "<div class='item1'></div><div class='item2'></div><div class='item3'></div>";
 
			},
			defaults:{
				controlHeight:100
			},
			item1_setter:function(value){
				if(value)
					this.$view.childNodes[0].innerHTML = value;
 
				return value;
			},
			item2_setter:function(value){
				if(value)
					this.$view.childNodes[1].innerHTML = value;
				return value;
			},
			item3_setter:function(value){
				if(value)
					this.$view.childNodes[2].innerHTML = value;
				return value;
			},
			$getSize:function(){
				return [1,-1,0,this.config.controlHeight];
			},
 
			$setSize:function(x,y){ 
				if (dhx.ui.view.prototype.$setSize.call(this,x,y)){
					var itemWidth = Math.round(this.$width/3);
					for(var i=0;i<3;i++){
						this.$view.childNodes[i].style.width = (i==2?this.$width-(itemWidth*2):itemWidth) +"px";
						this.$view.childNodes[i].style.height = this.$height+"px";
					}
				}
			}
		}, dhx.MouseEvents, dhx.EventSystem, dhx.ui.view);
		</script>
	</head>
<body>
 
		<script>
		dhx.ready(function(){
			dhx.ui({
				cols:[
					{
						rows:[
							{ height: 50, view:"custom", item1:"one", item2:"two",item3:"three" },
							{ template: "Row 2"	}
						]
					},
					{
						template:"Column 2"
					}
				]
 
			});
		});
		</script>
</body>
</html>