From 81a82f46df3f3d9a349fe2bd43c40bfcec8556b4 Mon Sep 17 00:00:00 2001
From: yumoqing <yumoqing@gmail.com>
Date: Mon, 26 Feb 2024 18:22:18 +0800
Subject: [PATCH] bugfix

---
 bricks/bricksNS.js           |    0
 bricks/bricksend.js          |    1 +
 bricks/build.sh              |    2 +-
 bricks/collapseaccordion.js  |    0
 bricks/css/bricks.css        |    2 -
 bricks/datagridaccordion.js  |   51 ++
 bricks/dynamicaccordion.js   |  239 +++++
 bricks/form.js               |   16 +-
 bricks/header.tmpl           |    6 +
 bricks/iframe.js             |   12 +
 bricks/image.js              |   18 +-
 bricks/layout.js             |    6 +-
 bricks/scroll.js             |    4 +-
 bricks/video.js              |   36 +-
 examples/.channels.ui.swp    |  Bin 0 -> 12288 bytes
 examples/channels.dspy       |   10 +
 examples/channels.ui         |   64 ++
 examples/dynamicaccordion.ui |   40 +
 examples/footer.ui           |    6 +
 examples/iframe.ui           |    8 +
 examples/scroll.json         | 1599 +++++++++++++++++++++++++++++++++-
 examples/scroll.ui           |   28 +-
 examples/t.ui                |   33 +
 examples/tree_t.ui           |   35 +
 examples/video.ui            |    4 +-
 25 files changed, 2180 insertions(+), 40 deletions(-)
 create mode 100644 bricks/bricksNS.js
 create mode 100644 bricks/bricksend.js
 create mode 100644 bricks/collapseaccordion.js
 create mode 100644 bricks/datagridaccordion.js
 create mode 100644 bricks/dynamicaccordion.js
 create mode 100644 bricks/iframe.js
 create mode 100644 examples/.channels.ui.swp
 create mode 100644 examples/channels.dspy
 create mode 100644 examples/channels.ui
 create mode 100644 examples/dynamicaccordion.ui
 create mode 100644 examples/footer.ui
 create mode 100644 examples/iframe.ui
 create mode 100644 examples/t.ui
 create mode 100644 examples/tree_t.ui

diff --git a/bricks/bricksNS.js b/bricks/bricksNS.js
new file mode 100644
index 0000000..e69de29
diff --git a/bricks/bricksend.js b/bricks/bricksend.js
new file mode 100644
index 0000000..5c34318
--- /dev/null
+++ b/bricks/bricksend.js
@@ -0,0 +1 @@
+}
diff --git a/bricks/build.sh b/bricks/build.sh
index 657aa20..8077192 100755
--- a/bricks/build.sh
+++ b/bricks/build.sh
@@ -4,7 +4,7 @@ SOURCES=" factory.js uitypesdef.js utils.js i18n.js widget.js \
 	markdown_viewer.js video.js audio.js toolbar.js tab.js \
 	input.js registerfunction.js button.js accordion.js \
 	tree.js multiple_state_image.js form.js message.js \
-	paging.js datagrid.js dataviewer.js \
+	paging.js datagrid.js dataviewer.js iframe.js \
 	miniform.js wterm.js dynamicaccordion.js "
 echo ${SOURCES}
 cat ${SOURCES} > ../dist/bricks.js
diff --git a/bricks/collapseaccordion.js b/bricks/collapseaccordion.js
new file mode 100644
index 0000000..e69de29
diff --git a/bricks/css/bricks.css b/bricks/css/bricks.css
index ad0dce2..c0f9c2f 100755
--- a/bricks/css/bricks.css
+++ b/bricks/css/bricks.css
@@ -68,7 +68,6 @@ body {
 .vcontainer {
 	display: flex;
 	flex-direction: column;
-	// overflow:auto;
 }
 
 .vbox {
@@ -79,7 +78,6 @@ body {
 .hcontainer {
 	display: flex;
 	flex-direction: row;
-	// overflow:auto;
 }
 
 .hbox {
diff --git a/bricks/datagridaccordion.js b/bricks/datagridaccordion.js
new file mode 100644
index 0000000..4da8082
--- /dev/null
+++ b/bricks/datagridaccordion.js
@@ -0,0 +1,51 @@
+var bricks = window.bricks || {};
+bricks.DataGridAccordion = class extends bricks.VBox {
+	/*
+		options:{
+			data_url:
+			title:
+			description:
+			footer:
+			header:
+			record:
+			detail_url:
+		}
+	*/
+	constructor(opts):
+		super(opts);
+		if (self.opts.title){
+			var t = new bricks.Title3(
+				otext=self.opts.title,
+				i18n=true
+			);
+			this.add_widget(t);
+		}
+		if (self.opts.description){
+			var d = new bricks.Text(
+				otext=self.opts.description,
+				i18n=true,
+				wrap=true,
+				halign='left'
+			);
+			this.add_widget(d);
+		}
+		if (this.opts.header){
+			var h = await bricks.widgetBuild(this.opts.header, this);
+			if (h){
+				this.add_widgettype(h);
+			}
+		}
+		var filler = new bricks.Filler();
+		var this.accordion = await this.buildAccordion();
+		filler.add_widget(this.accordion)
+		this.add_widget(filler);
+		if (this.opts.footer){
+			var f = await bricks.widgetBuild(this.opts.footer, this);
+			this.add_widget(f);
+		}
+	}
+	async buildAccordion(){
+		var p = bricks.VScrollPanel();
+
+	}
+}
diff --git a/bricks/dynamicaccordion.js b/bricks/dynamicaccordion.js
new file mode 100644
index 0000000..b09de7a
--- /dev/null
+++ b/bricks/dynamicaccordion.js
@@ -0,0 +1,239 @@
+var bricks = window.bricks || {};
+bricks.PageContent = class extends bricks.Layout {
+	constructor(opts){
+		super(opts);
+	}
+}
+
+bricks.AccordionItem = class extends bricks.Layout {
+	constructor(opts){
+		super(opts);
+		this.set_css('accordion-item');
+	}
+}
+
+bricks.AccordionHeader = class extends bricks.Layout {
+	constructor(opts){
+		super(opts);
+		this.set_css('accordion-item-header');
+	}
+}
+
+bricks.DynamicAccordion = class extends bricks.VScrollPanel {
+	/*
+		{
+			"title":
+			"description",
+			"data_url",
+			"content_url"
+			"content_view"
+			"cache_limit",
+			"page_rows",
+			"header":
+			"record_view"
+			"record_show_field":
+		}
+	*/
+	constructor(opts){
+		super(opts);
+		this.set_css("accordion");
+		this.element = this.dom_element;
+		this.dataUrl = this.opts.data_url;
+		this.base_params = opts.params || {};
+		this.rows = parseInt(this.opts.page_rows);
+		this.lastPage = null;
+		this.contentUrl = this.opts.content_url;
+		this.pages = new Map(); // 用于存储已加载的页面数据
+		this.pageContents = new Map(); // 用于存储已加载的页面内容
+		this.active_content = null;
+		this.loading = false;
+		this.cacheLimit = this.opts.cache_limit;
+		if (this.opts.content_view){
+			this.content_view_tmpl = JSON.stringify(this.opts.content_view);
+		}
+		if (this.opts.record_view){
+			this.record_view_tmpl = JSON.stringify(this.opts.record_view);
+		}
+		this.bind('min_threshold', this.load_previous_page.bind(this));
+		this.bind('max_threshold', this.load_next_page.bind(this));
+		this.render();
+	}
+
+	render(params) {
+		this.clear_widgets();
+		this.pages = new Map(); // 用于存储已加载的页面数据
+		this.pageContents = new Map(); // 用于存储已加载的页面内容
+		params = params || {};
+		this.params = bricks.extend(this.base_params, params);
+		this.loadPage(1);
+	}
+
+	async loadPage(page) {
+		if (this.loading){
+			return;
+		}
+		this.loading = true;
+		// 检查页面是否在缓存中
+		if (! this.pages.has(page)) {
+			var jc = new bricks.HttpJson();
+			var params = bricks.extend({}, this.params);
+			params = bricks.extend(params,{
+				page:page, 
+				rows:this.rows
+			});
+			var d = await jc.get(this.dataUrl,{params:params});
+			if (!d){
+				console.log(this.dataUrl,{params:params}, 'error');
+				this.loading = false;
+				return;
+			}
+			var data = d.rows;
+			this.lastPage = Math.ceil(d.total / this.rows);
+			this.pages.set(page, data); // 将数据缓存起来
+			await this.renderAccordionItems(data, page);
+			// 检查缓存是否已满
+			if (this.pages.size > this.cacheLimit) {
+				// 删除当前页最远的一页
+				var max, min;
+				var pages = Array.from(this.pages.keys());
+				max = Math.max(...pages);
+				min = Math.min(...pages);
+				const farthestPage = page == max? min : max;
+				var w = this.pageContents.get(farthestPage);
+				this.remove_widget(w);
+				this.pages.delete(farthestPage);
+				this.pageContents.delete(farthestPage);
+			}
+			var pages = Array.from(this.pages.keys());
+			if (page == Math.min(pages)){
+				this.scrollY = 1 / pages.length;
+				if (this.scrollY == 1){
+					this.scrollY = 0;
+				}
+			} else {
+				this.scrollY = (pages.length - 1) / pages.length;
+			}
+		}
+		this.loading = false;
+		return;
+	}
+	async renderAccordionItems(data, page) {
+
+		const pageContent = new bricks.PageContent({height:"auto"});
+		pageContent.page = page;
+
+		for (var i=0;i<data.length;i++){
+			const record = data[i];
+			const item = new bricks.AccordionItem({});
+			const header = new bricks.AccordionHeader({});
+			if (this.opts.record_view){
+				var w;
+				w = await bricks.widgetBuildWithData(this.record_view_tmpl,
+						header, record);
+				if (w){
+					header.add_widget(w);
+				} else {
+					console.log('bricks.widgetBuildWithData(), tmpl=', this.record_view_tmpl, 'record=', record);
+				}
+			}
+			header.textContent = record.title; // 使用数据记录的标题字段
+			var content = new bricks.VBox({
+				height:'auto',
+				display:'none'
+			});
+			content.set_css('accordion-item-content');
+			content.hide();
+			header.bind('click', this.toggle_content.bind(this, content, record));
+			item.add_widget(header);
+			item.add_widget(content);
+			pageContent.add_widget(item);
+		};
+
+		this.pageContents.set(page, pageContent);
+		var pages = Array.from(this.pages.keys());
+		if (page == Math.min(...pages)){
+			this.add_widget(pageContent, 0);
+		} else {
+			this.add_widget(pageContent);
+		}
+	}
+	async toggle_content(content, record, event){
+		if (this.active_content){
+			if (this.active_content != content){
+				this.active_content.clear_widgets();
+				this.active_content.hide();
+				this.active_content = null;
+			}
+		}
+		content.toggle_hide();
+		if (content.dom_element.style.display == 'none'){
+			console.log('content just collapsed');
+			content.clear_widgets();
+			this.active_content = null;
+			return;
+		}
+		
+		var jc = new bricks.HttpJson();
+		var w;
+		if (this.content_view_tmpl){
+			w = await bricks.widgetBuildWithData(this.content_view_tmpl,
+					content, record);
+		} else if (this.contentUrl){
+			var url = this.contentUrl;
+			var params = {
+				'id':record.id
+			}
+			var desc = await jc.get(url, {params:params});
+			w = await bricks.widgetBuild(desc, content);
+		}
+		if (w){
+			content.add_widget(w);
+			this.active_content = content;
+		} else {
+			this.active_content = null;
+			content.hide();
+		}
+	}
+	get_load_page(dir){
+		var pages = Array.from(this.pages.keys());
+		if (dir=='up'){
+			var page =  Math.min(...pages);
+			console.log('page=', page, pages, 'dir=', dir);
+			return page - 1;
+		} else {
+			var page = Math.max(...pages);
+			console.log('page=', page, pages, 'dir=', dir);
+			return page + 1;
+		}
+	}
+	async load_previous_page(){
+		var pages = Array.from(this.pages.keys());
+		var page = this.get_load_page('up');
+		if (page > 0){
+			await this.loadPage(page);
+			console.log('page loaded, page=', page);
+		} else {
+			var pages = Array.from(this.pages.keys());
+			console.log('page NOT loaded, page=', page,
+							'lastPage=', this.lastPage,
+							'rows=', this.rows,
+							'cacheLimit=', this.cacheLimit,
+							'buffered page=', pages.length);
+		}
+	}
+	async load_next_page(){
+		var pages = Array.from(this.pages.keys());
+		var page = this.get_load_page('down');
+		if (page <= this.lastPage){
+			await this.loadPage(page);
+			console.log('page Loaded, page=', page);
+		} else {
+			console.log('page=', page,
+							'lastPage=', this.lastPage,
+							'rows=', this.rows,
+							'cacheLimit=', this.cacheLimit,
+							'buffered page=', pages);
+		}
+	}
+}
+bricks.Factory.register('DynamicAccordion', bricks.DynamicAccordion);
diff --git a/bricks/form.js b/bricks/form.js
index e919f6d..dcbf307 100644
--- a/bricks/form.js
+++ b/bricks/form.js
@@ -21,9 +21,9 @@ bricks.FormBody = class extends bricks.VBox {
 		opts.width = '100%';
 		opts.scrollY = 'scroll';
 		super(opts);
-		console.log('dxcygvuhbijnokmpl,;lmknjbhvgcfx');
 		this.name_inputs = {};
 		this.form_body = new bricks.Layout({width:'100%',
+							height:"100%",
 							overflow:'auto' 
 							});
 		this.add_widget(this.form_body);
@@ -129,13 +129,6 @@ bricks.Form = class extends bricks.VBox {
 	*/
 	constructor(opts){
 		super(opts);
-		if (this.opts.title){
-			var t = new bricks.Title3({
-					otext:this.opts.title,
-					height:'auto',
-					i18n:true});
-			this.add_widget(t);
-		}
 		if (this.opts.description){
 			var d = new bricks.Text({
 					otext:this.opts.description,
@@ -147,6 +140,13 @@ bricks.Form = class extends bricks.VBox {
 		this.add_widget(this.body);
 		if (! opts.notoolbar)
 			this.build_toolbar(this);
+		if (this.opts.title){
+			var t = new bricks.Title3({
+					otext:this.opts.title,
+					height:'auto',
+					i18n:true});
+			this.add_widget(t, 0);
+		}
 	}
 	build_toolbar(widget){
 		var box = new bricks.HBox({height:'auto', width:'100%'});
diff --git a/bricks/header.tmpl b/bricks/header.tmpl
index 5675137..a6717ae 100644
--- a/bricks/header.tmpl
+++ b/bricks/header.tmpl
@@ -5,12 +5,18 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@4.19.0/css/xterm.css" />
+<link href="https://vjs.zencdn.net/8.10.0/video-js.css" rel="stylesheet" />
 
 	<link rel="stylesheet" href="{{entire_url('/bricks/css/bricks.css')}}">
+ <!-- support IE8 (for Video.js versions prior to v7) -->
+<script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
 </head>
   <body>
   <script src="https://cdn.jsdelivr.net/npm/xterm@4.19.0/lib/xterm.js"></script>
+<!---  <script src="https://vjs.zencdn.net/7.14.3/video.js"></script> --->
+  <script src="https://vjs.zencdn.net/8.10.0/video.min.js"></script>
   <script src="{{entire_url('/3parties/recorder.wav.min.js')}}"></script>
+<!---  <script src="{{entire_url('/3parties/videojs-contrib-hls.min.js')}}"></script> --->
   <script src="{{entire_url('/bricks/bricks.js')}}"></script>
 	<script>
 		const opts = {
diff --git a/bricks/iframe.js b/bricks/iframe.js
new file mode 100644
index 0000000..48e8a99
--- /dev/null
+++ b/bricks/iframe.js
@@ -0,0 +1,12 @@
+var bricks = window.bricks || {};
+bricks.Iframe = class extends bricks.Layout {
+	constructor(opts){
+		super(opts);
+		this.dom_element.src = opts.url;
+	}
+	create(){
+		this.dom_element = document.createElement('iframe');
+	}
+}
+
+bricks.Factory.register('Iframe', bricks.Iframe);
diff --git a/bricks/image.js b/bricks/image.js
index ddde62f..8191f9e 100755
--- a/bricks/image.js
+++ b/bricks/image.js
@@ -36,20 +36,23 @@ bricks.Image = class oops extends bricks.JsWidget {
 
 bricks.Icon = class oops extends bricks.Image {
 	constructor(opts){
+		var rate = opts.rate || 1;
+		var siz = bricks.app.charsize * rate + 'px';
+		opts.width = siz;
+		opts.height = siz;
 		super(opts);
-		this.opts.width = bricks.app.charsize;
-		this.opts.height = bricks.app.charsize;
+		this.rate = rate;
 		this.ctype = 'text';
 		this.sizable();
 		this.set_fontsize();
 	}
 	change_fontsize(ts){
-		var siz = bricks.app.charsize;
+		var siz = bricks.app.charsize * this.rate + 'px';
 		this.set_width(siz);
 		this.set_height(siz);
 	}
 	set_fontsize(){
-		var siz = bricks.app.charsize;
+		var siz = bricks.app.charsize * this.rate + 'px';
 		this.set_width(siz);
 		this.set_height(siz);
 	}
@@ -63,20 +66,19 @@ bricks.Icon = class oops extends bricks.Image {
 
 bricks.BlankIcon = class oops extends bricks.JsWidget {
 	constructor(opts){
-		opts.width = bricks.app.charsize;
-		opts.height = bricks.app.charsize;
 		super(opts);
+		this.rate = opts.rate || 1;
 		this.ctype = 'text';
 		this.sizable();
 		this.set_fontsize();
 	}
 	change_fontsize(ts){
-		var siz = bricks.app.charsize + 'px';
+		var siz = bricks.app.charsize * this.rate + 'px';
 		this.set_width(siz);
 		this.set_height(siz);
 	}
 	set_fontsize(){
-		var siz = bricks.app.charsize + 'px';
+		var siz = bricks.app.charsize * this.rate + 'px';
 		this.set_width(siz);
 		this.set_height(siz);
 	}
diff --git a/bricks/layout.js b/bricks/layout.js
index 7ec05e8..252f36a 100755
--- a/bricks/layout.js
+++ b/bricks/layout.js
@@ -8,11 +8,13 @@ bricks.Layout = class  extends bricks.JsWidget {
 
 	add_widget(w, index){
 		if (! index || index>=this.children.length){
+			// append child at end
 			w.parent = this;
 			this.children.push(w);
 			this.dom_element.appendChild(w.dom_element);
 			return
 		}
+		// insert to where index point out
 		var pos_w = this.children[index];
 		this.dom_element.insertBefore(w.dom_element, pos_w.dom_element);
 		this.children.insert(index+1, w);
@@ -105,6 +107,6 @@ bricks.HFiller = class extends bricks.Layout {
 bricks.Factory.register('HBox', bricks.HBox);
 bricks.Factory.register('VBox', bricks.VBox);
 bricks.Factory.register('Filler', bricks.Filler);
-bricks.Factory.register('HFiller', bricks.HFiller);
-bricks.Factory.register('VFiller', bricks.VFiller);
+bricks.Factory.register('HFiller', bricks.Filler);
+bricks.Factory.register('VFiller', bricks.Filler);
 
diff --git a/bricks/scroll.js b/bricks/scroll.js
index b10901d..633d66b 100644
--- a/bricks/scroll.js
+++ b/bricks/scroll.js
@@ -26,8 +26,8 @@ bricks.HScrollPanel = class extends bricks.HBox {
 	constructor(opts){
 		opts.width = '100%';
 		opts.height = '100%';
+		opts.overflow = 'auto';
 		super(opts);
-		this.set_css('hscroll');
 		this.min_threshold = opts.min_threshold || 0.02;
 		this.max_threshold = opts.max_threshold || 0.95;
 		this.bind('scroll', this.scroll_handle.bind(this))
@@ -63,8 +63,8 @@ bricks.VScrollPanel = class extends bricks.VBox {
 	constructor(opts){
 		opts.width = '100%';
 		opts.height = '100%';
+		opts.overflow = 'auto';
 		super(opts);
-		this.set_css('vscroll');
 		this.min_threshold = opts.min_threshold || 0.02;
 		this.max_threshold = opts.max_threshold || 0.95;
 		this.bind('scroll', this.scroll_handle.bind(this))
diff --git a/bricks/video.js b/bricks/video.js
index f2295f2..f5fccab 100755
--- a/bricks/video.js
+++ b/bricks/video.js
@@ -3,7 +3,7 @@ var bricks = window.bricks || {};
 we use videojs for video play
 https://videojs.com
 */
-bricks.Video = class extends bricks.JsWidget {
+bricks.Video = class extends bricks.Layout {
 	/*
 	{
 		vtype:
@@ -18,24 +18,44 @@ bricks.Video = class extends bricks.JsWidget {
 		this.set_css('vjs-big-play-centered');
 		this.set_css('vjs-fluid');
 		this.cur_url = options.url;
-		this.cur_vtype = options.vtype;
-		console.log('here1');
+		this.cur_vtype = options.type;
 		schedule_once(this.create_player.bind(this), 0.1);
+		this.hidedbtn = new bricks.Button({text:'click me'});
+		this.hidedbtn.hide();
+		this.add_widget(this.hidedbtn);
+		this.hidedbtn.bind('click', this.play.bind(this));
 	}
 	create(){
-		this.dom_element = document.createElement('video');
+		var e;
+		e = document.createElement('video');
+		e.controls = true;
+		this.dom_element = e;
+	}
+	auto_play(){
+		this.hidedbtn.dispatch('click');
+	}
+	play(){
+		this.player.play();
 	}
 	create_player(){
 		console.log('here2');
 		this.player = videojs(this.dom_element);
-		console.log('here3');
 		this._set_source();
+		if (this.opts.autoplay){
+			// schedule_once(this.auto_play.bind(this), 0.1);
+			;
+		}
+		console.log('here3', this.player);
 	}
 	_set_source(){
-		console.log('--------set source ---------');
-	}
-	set_source(url){
+		this.player.src({
+			src:this.cur_url,
+			type:this.cur_vtype
+		});
+    }
+	set_source(url, vtype){
 		this.cur_url = url;
+		this.cur_vtype = vtype;
 		this._set_source();
 	}
 }
diff --git a/examples/.channels.ui.swp b/examples/.channels.ui.swp
new file mode 100644
index 0000000000000000000000000000000000000000..4f1ad2bc0944e2dc3c5a0368cb17f24d8d2f573f
GIT binary patch
literal 12288
zcmeI2&ubGw6vro`;;L1#dJr#hRO*j5Nh<|g#n$4%f>qJBASz+9nI_Y2cGk_NZ4A+i
zM~}Vs*rWe|7rl5ciXwvIP4Q6h;!TR*+1(^fP<rXX!dv>uvNJm~?|t6OsmW!g$0w3Q
zsSLw)h_M$tKg&H6BZ+gz60BN!WJWi=O8Sv<3+28EVUKA&*LU03DM#DF=~(#$8>VN=
z>71|ZxpG=AijwEZa@sBm*Og8=RZ$%)=#dPNfh{pm31<2(cCiZs{oz;rBtMbtK0LK0
zThk_FfDDiUGC&5%02v?yWPl884+DXhU{4Y1jyT-W_@3yv$B%R)17v^<kO4A42FL&z
zAOmE843GgbKnAv<0g-3y<zB|#?L+YR|Nm&5!}>wSK7&=T3}(Pxa0&E+qhJSEJHXg?
z@ByrXmtYw@2eaTNxB>>jaj@RS*e|dKzJagc6L<|)z!Gr5J#Y(*gKJ;}Tmik{2-pRF
z?q}=^_z2#BS6~G!foEVA*x&(}2A9Ek&<*y3-5>#eBljQRBX|#ti?@I-GC&5%02v?y
zWPl8i0W$Fa8>ll2e-^ieU6ffzl~llo2hE5l3Nq{Kg)$$$n91~FsBS*2hvp+()Vf(b
zkc(KzPt^hyII_;emn^QmKxr3S)Z&2!l`qI3sCp7_Pnt#HrdBi`ozUFf;uYTscXf0@
zXYtV3*y6qju*E>Mdb5MZZS8J6h?gt5C=!Hr--H&Q%rP1iab$lcb2>_b7o{o`O>*H_
zcwk3fW>qVz>tlK`JdFF&)_y)aujGO;fOGz)Fquq7a$4!OWg5#8p64iA7@z6IzLF;k
zQ+IB}No|(@w8~4}d{^a>%)A-$98s12Ml%f&jRMEz-cV|^h9h#))MX66+n$s8Bzh*!
z0F$mLncC)}xyGSZTw%NrXzet#W8d&OTM~XjxkmD!7umxU((;vbgD`2#74i63<JoC!
z+ffLtXe-4ej>?Hff))=mH|Mto!^Zn}KQxO!n8_fpFwJI@453G&2IP8P`ZJD3ow=w4
zvFncL+GCq;wh5XuK$guuK^BdnsQ+s<Oe<fSZ@`%zQ?zXSEBI8t>{WZt*6U#$JTC%a
jUP2V@Yf`PB&2L=M7GQgL*QzL_vai~vh0$|3pvL|H&E8c4

literal 0
HcmV?d00001

diff --git a/examples/channels.dspy b/examples/channels.dspy
new file mode 100644
index 0000000..89f513f
--- /dev/null
+++ b/examples/channels.dspy
@@ -0,0 +1,10 @@
+sql = """select id, tv_name as title, url, logo_url from iptvchannels"""
+ns = {k:v for k,v in params_kw.items() }
+ns['sort'] = 'title'
+print(f'{ns=}')
+db = DBPools()
+async with db.sqlorContext('iptvdb') as sor:
+	d = await sor.sqlPaging(sql, ns)
+	print(f'get {len(d["rows"])} records')
+	return d
+
diff --git a/examples/channels.ui b/examples/channels.ui
new file mode 100644
index 0000000..db1ace4
--- /dev/null
+++ b/examples/channels.ui
@@ -0,0 +1,64 @@
+{
+	"widgettype":"DynamicAccordion",
+	"options":{
+		"data_url":"{{entire_url('./channels.dspy')}}",
+		"content_url":"{{entire_url('play_channel.dspy')}}",
+		"content_view":{
+			"widgettype":"VBox",
+			"options":{
+				"overflow":"auto",
+				"width":"90%",
+				"height":"500px"
+			},
+			"subwidgets":[
+				{
+					"id":"toolbar",
+					"widgettype":"Toolbar",
+					"options":{
+						"orientation":"horizontal",
+						"tool_margin":"15px",
+						"tools":[
+							{
+								"name":"blocked",
+								"label":"Blocked it"
+							}
+						]
+					}
+				},
+				{
+					"id":"videoplayer",
+					"widgettype":"Video",
+					"options":{
+						"type":"application/x-mpegURL",
+						"url":"${url}"
+					}   
+				}
+			]
+		},
+
+		"record_view":{
+			"widgettype":"HBox",
+			"options":{
+				"height":"100%",
+				"width":"100%"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Icon",
+					"options":{
+						"rate":2,
+						"url":"${logo_url}"
+					}
+				},
+				{
+					"widgettype":"Text",
+					"options":{
+						"text":"${title}"
+					}
+				}
+			]
+		},
+		"page_rows":800,
+		"cache_limit":5
+	}
+}
diff --git a/examples/dynamicaccordion.ui b/examples/dynamicaccordion.ui
new file mode 100644
index 0000000..3eb4ca6
--- /dev/null
+++ b/examples/dynamicaccordion.ui
@@ -0,0 +1,40 @@
+{
+	"widgettype":"DynamicAccordion",
+	"options":{
+		"data_url":"{{entire_url('./channels.dspy')}}",
+		"content_url":"{{entire_url('play_channel.dspy')}}",
+		"content_view":{
+			"id":"videoplayer",
+			"widgettype":"Iframe",
+			"options":{
+				"width":"100%",
+				"url":"${url}"
+			}   
+		},
+
+		"record_view":{
+			"widgettype":"HBox",
+			"options":{
+				"height":"100%",
+				"width":"100%"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Icon",
+					"options":{
+						"rate":2,
+						"url":"${logo_url}"
+					}
+				},
+				{
+					"widgettype":"Text",
+					"options":{
+						"text":"${title}"
+					}
+				}
+			]
+		},
+		"page_rows":800,
+		"cache_limit":5
+	}
+}
diff --git a/examples/footer.ui b/examples/footer.ui
new file mode 100644
index 0000000..968376e
--- /dev/null
+++ b/examples/footer.ui
@@ -0,0 +1,6 @@
+{
+	"widgettype":"Text",
+	"options":{
+		"text":"Bricks module, make front end coding easier"
+	}
+}
diff --git a/examples/iframe.ui b/examples/iframe.ui
new file mode 100644
index 0000000..7ec0576
--- /dev/null
+++ b/examples/iframe.ui
@@ -0,0 +1,8 @@
+{
+	"id":"videoplayer",
+	"widgettype":"Iframe",
+	"options":{
+		"width":"100%",
+		"url":"{{params_kw.url}}"
+	}   
+}
diff --git a/examples/scroll.json b/examples/scroll.json
index 8281360..0e18f24 100644
--- a/examples/scroll.json
+++ b/examples/scroll.json
@@ -1,7 +1,6 @@
 {
-	"widgettype":"ScrollPanel",
+	"widgettype":"VScrollPanel",
 	"options":{
-		"scrollY":"hidden"
 	},
 	"subwidgets":[
 		{
@@ -21,11 +20,1605 @@
 			]
 		},
 		{
-			"widgettype":"VScrollPanel",
+			"widgettype":"HBox",
 			"options":{
+				"height":"auto",
+				"width":"auto"
 			},
 			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"auto",
+				"width":"auto"
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"width":"3000px",
+						"text":"this is long text"
+					}
+				}
 			]
 		}
+		
 	]
 }
diff --git a/examples/scroll.ui b/examples/scroll.ui
index 93ce80b..cfef7ad 100644
--- a/examples/scroll.ui
+++ b/examples/scroll.ui
@@ -1,7 +1,27 @@
-
 {
-	"widgettype":"urlwidget",
+	"widgettype":"VBox",
 	"options":{
-		"url":"scroll.json"
-	}
+		"width":"100%",
+		"height":"100%"
+	},
+	"subwidgets":[
+		{
+			"widgettype":"Title3",
+			"options":{
+				"text":"Scroll Widget"
+			}
+		},
+		{
+			"widgettype":"urlwidget",
+			"options":{
+				"url":"{{entire_url('scroll.json')}}"
+			}
+		},
+		{
+			"widgettype":"urlwidget",
+			"options":{
+				"url":"{{entire_url('footer.ui')}}"
+			}
+		}
+	]
 }
diff --git a/examples/t.ui b/examples/t.ui
new file mode 100644
index 0000000..c427f8d
--- /dev/null
+++ b/examples/t.ui
@@ -0,0 +1,33 @@
+{
+	"widgettype":"VBox",
+	"options":{
+		"width":"100%"
+	},
+	"subwidgets":[
+		{
+			"widgettype":"Title3",
+			"options":{
+				"height":"auto",
+				"text":"Header information"
+			}
+		},
+		{
+			"widgettype":"Filler",
+			"options":{},
+			"subwidgets":[
+				{
+					"widgettype":"urlwidget",
+					"options":{
+						"url":"{{entire_url('channels.ui')}}"
+					}
+				}
+			]
+		},
+		{
+			"widgettype":"Text",
+			"options":{
+				"text":"Footer information"
+			}
+		}
+	]
+}
diff --git a/examples/tree_t.ui b/examples/tree_t.ui
new file mode 100644
index 0000000..024dc5c
--- /dev/null
+++ b/examples/tree_t.ui
@@ -0,0 +1,35 @@
+{
+	"widgettype":"VBox",
+	"options":{
+		"height":"100%",
+		"width":"100%"
+	},
+	"subwidgets":[
+		{
+			"widgettype":"Title3",
+			"options":{
+				"height":"auto",
+				"text":"This is a tree"
+			}
+		},
+		{
+            "widgettype":"Filler",
+            "options":{},
+            "subwidgets":[
+                {
+                    "widgettype":"urlwidget",
+                    "options":{
+                        "url":"{{entire_url('tree.ui')}}"
+                    }
+                }
+            ]
+        },
+		{
+			"widgettype":"Text",
+			"options":{
+				"height":"auto",
+				"text":"This is footer message"
+			}
+		}
+	]
+}
diff --git a/examples/video.ui b/examples/video.ui
index a55618c..7db1416 100644
--- a/examples/video.ui
+++ b/examples/video.ui
@@ -1,10 +1,10 @@
 
 {
 	"id":"videoplayer",
-	"widgettype":"VideoPlayer",
+	"widgettype":"Video",
 	"options":{
 		"autoplay":true,
 		"url":"http://kimird.com/video/sample-mp4-file.mp4",
-		"type":"mp4"
+		"type":"video/mp4"
 	}
 }