From 3a97400c94781315ebf98c11abf6bca48abf774e Mon Sep 17 00:00:00 2001
From: yumoqing <yumoqing@gmail.com>
Date: Tue, 6 Feb 2024 14:30:10 +0800
Subject: [PATCH] bugfix

---
 bricks/header.tmpl         |   3 +
 bricks/layout.js           |   1 +
 examples/accordion.html    |  52 ------------
 examples/accordion.ui      |  33 ++++++++
 examples/audio.html        |  28 -------
 examples/audio.ui          |   9 ++
 examples/button.html       |  57 -------------
 examples/button.ui         |  40 +++++++++
 examples/datagrid.html     |  22 -----
 examples/datagrid.ui       |   7 ++
 examples/datagrid1.html    |  22 -----
 examples/docs.html         |  24 ------
 examples/docs.ui           |   8 ++
 examples/editabletree.html |  24 ------
 examples/editabletree.ui   |   7 ++
 examples/error.html        | 105 -----------------------
 examples/error.ui          |  83 ++++++++++++++++++
 examples/fileupload.html   |  64 --------------
 examples/fileupload.ui     |  32 +++++++
 examples/footer.html       |   4 -
 examples/form.html         | 167 -------------------------------------
 examples/form.ui           | 151 +++++++++++++++++++++++++++++++++
 examples/hbox.html         |  65 ---------------
 examples/hbox.ui           |  50 +++++++++++
 examples/header.html       |   8 --
 examples/image.html        |  27 ------
 examples/image.ui          |   9 ++
 examples/m3u8.html         |  29 -------
 examples/m3u8.ui           |  10 +++
 examples/markdonw.html     |   0
 examples/markdown.html     |  38 ---------
 examples/markdown.ui       |  21 +++++
 examples/message.html      | 107 ------------------------
 examples/message.ui        |  83 ++++++++++++++++++
 examples/miniform.html     |  24 ------
 examples/miniform.ui       |   7 ++
 examples/modal.html        |  22 -----
 examples/model.ui          |   7 ++
 examples/recorder.html     |  26 ------
 examples/recorder.ui       |  17 ++++
 examples/scroll.html       |  24 ------
 examples/scroll.ui         |   7 ++
 examples/t1.html           |  69 ---------------
 examples/tab.html          |  75 -----------------
 examples/tab.ui            |  58 +++++++++++++
 examples/table.ui          |   7 ++
 examples/tables.html       |  25 ------
 examples/terminal.html     |  39 ---------
 examples/test11.html       | 144 --------------------------------
 examples/testlogin.html    |  24 ------
 examples/text.html         | 117 --------------------------
 examples/toolbar.html      |  48 -----------
 examples/toolbar.ui        |  31 +++++++
 examples/tree.html         |  24 ------
 examples/tree.ui           |   7 ++
 examples/vbox.html         |  70 ----------------
 examples/vbox.ui           |  97 +++++++++++++++++++++
 examples/vbox1.ui          |  40 +++++++++
 examples/video.html        |  25 ------
 examples/video.ui          |  10 +++
 60 files changed, 835 insertions(+), 1599 deletions(-)
 delete mode 100644 examples/accordion.html
 create mode 100644 examples/accordion.ui
 delete mode 100755 examples/audio.html
 create mode 100644 examples/audio.ui
 delete mode 100644 examples/button.html
 create mode 100644 examples/button.ui
 delete mode 100644 examples/datagrid.html
 create mode 100644 examples/datagrid.ui
 delete mode 100644 examples/datagrid1.html
 delete mode 100755 examples/docs.html
 create mode 100644 examples/docs.ui
 delete mode 100644 examples/editabletree.html
 create mode 100644 examples/editabletree.ui
 delete mode 100644 examples/error.html
 create mode 100644 examples/error.ui
 delete mode 100755 examples/fileupload.html
 create mode 100644 examples/fileupload.ui
 delete mode 100755 examples/footer.html
 delete mode 100644 examples/form.html
 create mode 100644 examples/form.ui
 delete mode 100755 examples/hbox.html
 create mode 100644 examples/hbox.ui
 delete mode 100755 examples/header.html
 delete mode 100755 examples/image.html
 create mode 100644 examples/image.ui
 delete mode 100755 examples/m3u8.html
 create mode 100644 examples/m3u8.ui
 delete mode 100755 examples/markdonw.html
 delete mode 100755 examples/markdown.html
 create mode 100644 examples/markdown.ui
 delete mode 100644 examples/message.html
 create mode 100644 examples/message.ui
 delete mode 100644 examples/miniform.html
 create mode 100644 examples/miniform.ui
 delete mode 100755 examples/modal.html
 create mode 100644 examples/model.ui
 delete mode 100644 examples/recorder.html
 create mode 100644 examples/recorder.ui
 delete mode 100644 examples/scroll.html
 create mode 100644 examples/scroll.ui
 delete mode 100755 examples/t1.html
 delete mode 100755 examples/tab.html
 create mode 100644 examples/tab.ui
 create mode 100644 examples/table.ui
 delete mode 100644 examples/tables.html
 delete mode 100644 examples/terminal.html
 delete mode 100644 examples/test11.html
 delete mode 100644 examples/testlogin.html
 delete mode 100755 examples/text.html
 delete mode 100755 examples/toolbar.html
 create mode 100644 examples/toolbar.ui
 delete mode 100644 examples/tree.html
 create mode 100644 examples/tree.ui
 delete mode 100755 examples/vbox.html
 create mode 100644 examples/vbox.ui
 create mode 100644 examples/vbox1.ui
 delete mode 100755 examples/video.html
 create mode 100644 examples/video.ui

diff --git a/bricks/header.tmpl b/bricks/header.tmpl
index dfafee5..2818480 100644
--- a/bricks/header.tmpl
+++ b/bricks/header.tmpl
@@ -4,9 +4,12 @@
     <meta charset="UTF-8" />
     <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 rel="stylesheet" href="/bricks/css/bricks.css">
 </head>
   <body>
+  <script src="https://cdn.jsdelivr.net/npm/xterm@4.19.0/lib/xterm.js"></script>
   <script src="/3parties/recorder.wav.min.js"></script>
   <script src="/bricks/bricks.js"></script>
 	<script>
diff --git a/bricks/layout.js b/bricks/layout.js
index dcf9216..638383d 100755
--- a/bricks/layout.js
+++ b/bricks/layout.js
@@ -16,6 +16,7 @@ bricks.Layout = class  extends bricks.JsWidget {
 		var pos_w = this.children[index];
 		this.dom_element.insertBefore(w.dom_element, pos_w.dom_element);
 		this.children.insert(index+1, w);
+		w.dispatch('on_parent', this);
 	}
 	remove_widgets_at_begin(cnt){
 		return this._remove_widgets(cnt, false);
diff --git a/examples/accordion.html b/examples/accordion.html
deleted file mode 100644
index fd996f6..0000000
--- a/examples/accordion.html
+++ /dev/null
@@ -1,52 +0,0 @@
-
-
-  <html>
-  <head>
-  <link rel="stylesheet" href="/bricks/css/bricks.css">
-  </head>
-  <body>
-  <script src="/bricks/bricks.js"></script>
-
-	<script>
-		const opts = 
-{
-	"widget": {
-		"widgettype":"Accordion",
-		"options":{
-			"item_size":'28px',
-			"items":[
-				{
-					"name":"test1",
-					"icon":"/imgs/t.png",
-					"text":"accordion 1 test",
-					"content":{
-						"widgettype":"Text",
-						"options":{
-							"text":"text content 1",
-							"i81n":true
-						}
-					}
-				},
-				{
-					"name":"test2",
-					"icon":"/imgs/t.png",
-					"text":"accordion 2 test",
-					"content":{
-						"widgettype":"Text",
-						"options":{
-							"text":"text content 2",
-							"i81n":true
-						}
-					}
-				}
-			]
-		}
-	}
-}
-
-		;
-		const app = new BricksApp(opts);
-		app.run();
-	</script>
-</body>
-</html>
diff --git a/examples/accordion.ui b/examples/accordion.ui
new file mode 100644
index 0000000..12e6b74
--- /dev/null
+++ b/examples/accordion.ui
@@ -0,0 +1,33 @@
+
+{
+	"widgettype":"Accordion",
+	"options":{
+		"item_size":'28px',
+		"items":[
+			{
+				"name":"test1",
+				"icon":"/imgs/t.png",
+				"text":"accordion 1 test",
+				"content":{
+					"widgettype":"Text",
+					"options":{
+						"text":"text content 1",
+						"i81n":true
+					}
+				}
+			},
+			{
+				"name":"test2",
+				"icon":"/imgs/t.png",
+				"text":"accordion 2 test",
+				"content":{
+					"widgettype":"Text",
+					"options":{
+						"text":"text content 2",
+						"i81n":true
+					}
+				}
+			}
+		]
+	}
+}
diff --git a/examples/audio.html b/examples/audio.html
deleted file mode 100755
index 4ab4a02..0000000
--- a/examples/audio.html
+++ /dev/null
@@ -1,28 +0,0 @@
-  <html>
-  <head>
-  </head>
-  <body>
-  <script src="http://kimird.com/bricks/bricks.js"></script>
-	<script>
-	/*
-	https://abc-iview-mediapackagestreams-2.akamaized.net/out/v1/6e1cc6d25ec0480ea099a5399d73bc4b/index.m3u8
-	https://cbcnewshd-f.akamaihd.net/i/cbcnews_1@8981/index_2500_av-p.m3u8
-	*/
-		const opts = 
-{
-	"widget": {
-		"id":"audioplayer",
-		"widgettype":"AudioPlayer",
-		"options":{
-			"autoplay":true,
-			"url":"http://kimird.com/songs/sample-mp3-file.mp3"
-		}
-	}
-}
-
-		;
-		const app = new BricksApp(opts);
-		app.run();
-	</script>
-</body>
-</html>
diff --git a/examples/audio.ui b/examples/audio.ui
new file mode 100644
index 0000000..ae37486
--- /dev/null
+++ b/examples/audio.ui
@@ -0,0 +1,9 @@
+
+{
+	"id":"audioplayer",
+	"widgettype":"AudioPlayer",
+	"options":{
+		"autoplay":true,
+		"url":"http://kimird.com/songs/sample-mp3-file.mp3"
+	}
+}
diff --git a/examples/button.html b/examples/button.html
deleted file mode 100644
index 36240d0..0000000
--- a/examples/button.html
+++ /dev/null
@@ -1,57 +0,0 @@
-  <html>
-  <head>
-  <link rel="stylesheet" href="/bricks/css/bricks.css">
-  </head>
-  <body>
-  <script src="/bricks/bricks.js"></script>
-
-	<script>
-		const opts = 
-{
-	"widget": {
-		"widgettype":"HBox",
-		"options":{
-			"height":"auto",
-			"width":"100%"
-		},
-		"subwidgets":[
-			{
-				"widgettype":"Button",
-				"options":{
-					"name":"test",
-					"icon":"/bricks/imgs/submit.png",
-					"label":"test once",
-					"tooltip":"This is a joke too",
-					"nonepack":true,
-					"orientation":"horizontal"
-				}
-			},
-			{
-				"widgettype":"Button",
-				"options":{
-					"name":"test",
-					"icon":"/bricks/imgs/reset.png",
-					"tooltip":"This is a joke",
-					"label":"test twice",
-					"nonepack":true,
-					"orientation":"horizontal"
-				}
-			}
-		],
-		"binds":[
-			{
-				"wid":"self",
-				"event":"click",
-				"actiontype":"script",
-				"script":"alert('HBox clicked');"
-			}
-		]
-	}
-}
-
-		;
-		const app = new BricksApp(opts);
-		app.run();
-	</script>
-</body>
-</html>
diff --git a/examples/button.ui b/examples/button.ui
new file mode 100644
index 0000000..5923b10
--- /dev/null
+++ b/examples/button.ui
@@ -0,0 +1,40 @@
+
+{
+	"widgettype":"HBox",
+	"options":{
+		"height":"auto",
+		"width":"100%"
+	},
+	"subwidgets":[
+		{
+			"widgettype":"Button",
+			"options":{
+				"name":"test",
+				"icon":"/bricks/imgs/submit.png",
+				"label":"test once",
+				"tooltip":"This is a joke too",
+				"nonepack":true,
+				"orientation":"horizontal"
+			}
+		},
+		{
+			"widgettype":"Button",
+			"options":{
+				"name":"test",
+				"icon":"/bricks/imgs/reset.png",
+				"tooltip":"This is a joke",
+				"label":"test twice",
+				"nonepack":true,
+				"orientation":"horizontal"
+			}
+		}
+	],
+	"binds":[
+		{
+			"wid":"self",
+			"event":"click",
+			"actiontype":"script",
+			"script":"alert('HBox clicked');"
+		}
+	]
+}
diff --git a/examples/datagrid.html b/examples/datagrid.html
deleted file mode 100644
index 858633e..0000000
--- a/examples/datagrid.html
+++ /dev/null
@@ -1,22 +0,0 @@
-  <html>
-  <head>
-  <link rel="stylesheet" href="/bricks/css/bricks.css">
-  </head>
-  <body>
-  <script src="/bricks/bricks.js"></script>
-
-	<script>
-		const opts = 
-{
-	"widget": {
-		"widgettype":"urlwidget",
-		"options":{
-			"url":"users.bcrud"
-		}
-	}
-};
-		const app = new BricksApp(opts);
-		app.run();
-	</script>
-</body>
-</html>
diff --git a/examples/datagrid.ui b/examples/datagrid.ui
new file mode 100644
index 0000000..c60417f
--- /dev/null
+++ b/examples/datagrid.ui
@@ -0,0 +1,7 @@
+
+{
+	"widgettype":"urlwidget",
+	"options":{
+		"url":"users.bcrud"
+	}
+}
diff --git a/examples/datagrid1.html b/examples/datagrid1.html
deleted file mode 100644
index 9b74065..0000000
--- a/examples/datagrid1.html
+++ /dev/null
@@ -1,22 +0,0 @@
-  <html>
-  <head>
-  <link rel="stylesheet" href="/bricks/css/bricks.css">
-  </head>
-  <body>
-  <script src="/bricks/bricks.js"></script>
-
-	<script>
-		const opts = 
-{
-	"widget": {
-		"widgettype":"urlwidget",
-		"options":{
-			"url":"iptvchannels.bcrud"
-		}
-	}
-};
-		const app = new BricksApp(opts);
-		app.run();
-	</script>
-</body>
-</html>
diff --git a/examples/docs.html b/examples/docs.html
deleted file mode 100755
index ccb4f7b..0000000
--- a/examples/docs.html
+++ /dev/null
@@ -1,24 +0,0 @@
-  <html>
-  <head>
-  </head>
-  <body>
-  <script src="/marked.js"></script>
-  <script src="http://kimird.com/bricks/bricks.js"></script>
-	<script>
-		const opts = 
-{
-	"widget": {
-		"widgettype":"MarkdownViewer",
-		"options":{
-			"navigator":true,
-			"md_url":"../docs/index.md"
-		}
-	}
-}
-
-		;
-		const app = new BricksApp(opts);
-		app.run();
-	</script>
-</body>
-</html>
diff --git a/examples/docs.ui b/examples/docs.ui
new file mode 100644
index 0000000..4926f49
--- /dev/null
+++ b/examples/docs.ui
@@ -0,0 +1,8 @@
+
+{
+	"widgettype":"MarkdownViewer",
+	"options":{
+		"navigator":true,
+		"md_url":"../docs/index.md"
+	}
+}
diff --git a/examples/editabletree.html b/examples/editabletree.html
deleted file mode 100644
index 3cfe04e..0000000
--- a/examples/editabletree.html
+++ /dev/null
@@ -1,24 +0,0 @@
-
-  <html>
-  <head>
-<link rel="stylesheet" href="/bricks/css/bricks.css">
-  </head>
-  <body>
-  <script src="/bricks/bricks.js"></script>
-	<script>
-		const opts = 
-{
-	"widget": {
-		"widgettype":"urlwidget",
-		"options":{
-			"url":"editabletree.json"
-		}
-	}
-}
-
-		;
-		const app = new BricksApp(opts);
-		app.run();
-	</script>
-</body>
-</html>
diff --git a/examples/editabletree.ui b/examples/editabletree.ui
new file mode 100644
index 0000000..cc19f0b
--- /dev/null
+++ b/examples/editabletree.ui
@@ -0,0 +1,7 @@
+
+{
+	"widgettype":"urlwidget",
+	"options":{
+		"url":"editabletree.json"
+	}
+}
diff --git a/examples/error.html b/examples/error.html
deleted file mode 100644
index 432bc26..0000000
--- a/examples/error.html
+++ /dev/null
@@ -1,105 +0,0 @@
-  <html>
-  <head>
-<link rel="stylesheet" href="/bricks/css/bricks.css">
-  </head>
-  <body>
-  <script src="/bricks/bricks.js"></script>
-	<script>
-		const opts = 
-{
-	"widget": {
-		"widgettype":"Tree",
-		"options":{
-			"idField":"id",
-			"textField":"text",
-			"data":[
-				{
-					"id":1,
-					"text":"node1",
-					"is_leaf":false,
-					"children":[
-						{
-							"id":11,
-							"text":"node11",
-							"is_leaf":false,
-							"children":[
-								{
-									"id":112,
-									"text":"node.12",
-									"is_leaf":false,
-									"children":[
-										{
-											"id":1112,
-											"text":"node1112",
-											"is_leaf":true
-										},
-										{
-											"id":1113,
-											"text":"node113",
-											"is_leaf":true
-										}
-									]
-								},
-								{
-									"id":113,
-									"text":"node113",
-									"is_leaf":true
-								}
-							]
-						},
-						{
-							"id":12,
-							"text":"node12",
-							"is_leaf":true
-						},
-						{
-							"id":13,
-							"text":"node13",
-							"is_leaf":true
-						}
-					]
-				},
-				{
-					"id":2,
-					"text":"node2",
-					"is_leaf":false,
-					"children":[
-						{
-							"id":21,
-							"text":"node21",
-							"is_leaf":true
-						},
-						{
-							"id":22,
-							"text":"node22",
-							"is_leaf":true
-						},
-						{
-							"id":23,
-							"text":"node23",
-							"is_leaf":true
-						}
-					]
-				},
-				{
-					"id":3,
-					"text":"node3",
-					"is_leaf":true
-				}
-			]
-		}
-	}
-}
-
-		;
-		const app = new BricksApp(opts);
-		app.run();
-		var m = new Error({
-			"title":"TEst Message",
-			"message":"This is a test message",
-			"auto_open":true,
-			"timeout":30
-		})
-	</script>
-</body>
-</html>
diff --git a/examples/error.ui b/examples/error.ui
new file mode 100644
index 0000000..cebeeeb
--- /dev/null
+++ b/examples/error.ui
@@ -0,0 +1,83 @@
+
+{
+	"widgettype":"Tree",
+	"options":{
+		"idField":"id",
+		"textField":"text",
+		"data":[
+			{
+				"id":1,
+				"text":"node1",
+				"is_leaf":false,
+				"children":[
+					{
+						"id":11,
+						"text":"node11",
+						"is_leaf":false,
+						"children":[
+							{
+								"id":112,
+								"text":"node.12",
+								"is_leaf":false,
+								"children":[
+									{
+										"id":1112,
+										"text":"node1112",
+										"is_leaf":true
+									},
+									{
+										"id":1113,
+										"text":"node113",
+										"is_leaf":true
+									}
+								]
+							},
+							{
+								"id":113,
+								"text":"node113",
+								"is_leaf":true
+							}
+						]
+					},
+					{
+						"id":12,
+						"text":"node12",
+						"is_leaf":true
+					},
+					{
+						"id":13,
+						"text":"node13",
+						"is_leaf":true
+					}
+				]
+			},
+			{
+				"id":2,
+				"text":"node2",
+				"is_leaf":false,
+				"children":[
+					{
+						"id":21,
+						"text":"node21",
+						"is_leaf":true
+					},
+					{
+						"id":22,
+						"text":"node22",
+						"is_leaf":true
+					},
+					{
+						"id":23,
+						"text":"node23",
+						"is_leaf":true
+					}
+				]
+			},
+			{
+				"id":3,
+				"text":"node3",
+				"is_leaf":true
+			}
+		]
+	}
+}
diff --git a/examples/fileupload.html b/examples/fileupload.html
deleted file mode 100755
index b266316..0000000
--- a/examples/fileupload.html
+++ /dev/null
@@ -1,64 +0,0 @@
-  <html>
-  <head>
-  </head>
-  <body>
-<div>
-<button onclick="f()">uoload</button>
-</div>
-  <script src="../bricks/bricks.js"></script>
-	<script>
-		const opts = 
-{
-	"widget": {
-			"widgettype":"VBox",
-			"options":{
-			},
-			"subwidgets":[
-				{
-					"id":"file1",
-					"widgettype":"UtFile",
-					"options":{
-						"name":"file1",
-						"label":"File 1"
-					}
-				},
-				{
-					"widgettype":"Text",
-					"options":{
-						"text":"upload"
-					},
-					"binds":[
-						{
-							"wid":"self",
-							"event":"clcik",
-							"action":{
-								"rfname":"do_upload"
-							}
-						}
-					]
-				}
-			]
-		}
-}
-
-		;
-		var f = async function(){
-			console.log('it work');
-			var b = new Bricks();
-			var w = b.getWidgetById('file1', bricks_app.root);
-			var file = w.files[0];
-			var fd = new FormData();
-			fd.append('file1', file);
-			var resp = await jcall('http://192.168.1.10/examples/fileupload.dspy',{
-				method:'POST',
-				params:fd
-			})
-			console.log('resp=', resp);
-		}
-		rf = new RegisterFunction();
-		rf.register('do_upload', f);
-		const app = new BricksApp(opts);
-		app.run();
-	</script>
-</body>
-</html>
diff --git a/examples/fileupload.ui b/examples/fileupload.ui
new file mode 100644
index 0000000..7e316cf
--- /dev/null
+++ b/examples/fileupload.ui
@@ -0,0 +1,32 @@
+
+{
+	"widgettype":"VBox",
+	"options":{
+	},
+	"subwidgets":[
+		{
+			"id":"file1",
+			"widgettype":"UtFile",
+			"options":{
+				"name":"file1",
+				"label":"File 1"
+			}
+		},
+		{
+			"widgettype":"Text",
+			"options":{
+				"text":"upload"
+			},
+		}
+	],
+
+	"binds":[
+		{
+			"wid":"self",
+			"event":"clcik",
+			"action":{
+				"rfname":"do_upload"
+			}
+		}
+	]
+}
diff --git a/examples/footer.html b/examples/footer.html
deleted file mode 100755
index 55d5d50..0000000
--- a/examples/footer.html
+++ /dev/null
@@ -1,4 +0,0 @@
-		;
-		const app = BricksApp(opts);
-		app.run();
-	</script>
diff --git a/examples/form.html b/examples/form.html
deleted file mode 100644
index 007b637..0000000
--- a/examples/form.html
+++ /dev/null
@@ -1,167 +0,0 @@
-  <html>
-  <head>
-<link rel="stylesheet" href="/bricks/css/bricks.css">
-  </head>
-  <body>
-  <script src="/bricks/bricks.js"></script>
-	<script>
-		const opts = 
-{
-	"widget": {
-		"widgettype":"VBox",
-		"options":{"height":"100%"},
-		"subwidgets":[
-			{
-				"widgettype":"HBox",
-				"options":{"height":"auto"},
-				"subwidgets":[
-					{
-						"widgettype":"Text",
-						"options":{
-							"otext":"Please change Font size",
-							"i18n":true
-						}
-					},
-				   {
-						"widgettype":"Button",
-						"options":{
-							"label":"A",
-							"width":"auto",
-							"item_rate":1.4
-						},
-						"binds":[
-							{
-								"wid":"self",
-								"event":"click",
-								"actiontype":"script",
-								"target":"app",
-								"script":"bricks_app.textsize_bigger()"
-							}
-						]
-					},
-					{
-						"widgettype":"Button",
-						"options":{
-							"label":"A",
-							"width":"auto",
-							"item_rate":0.8
-						},
-						"binds":[
-							{
-								"wid":"self",
-								"event":"click",
-								"actiontype":"script",
-								"target":"app",
-								"script":"bricks_app.textsize_smaller()"
-							}
-						]
-					}
-				]
-			},
-			{
-				"widgettype":"Form",
-				"options":{
-					"submit_url":"/ttt/ttt.dspy",
-					"title":"Test hahah  Form",
-					"description":"test input implemented",
-					"fields":[
-						{
-							"uitype":"email",
-							"name":"email",
-							"label":"Email",
-							'required':true
-						},
-						{
-							"uitype":"tel",
-							"name":"tel",
-							"pattern":"{\d}3-{\d}4-{\d}4",
-							"label":"Tel",
-							'required':true
-						},
-						{
-							"uitype":"file",
-							"name":"file",
-							"label":"File",
-							'required':true
-						},
-						{
-							"uitype":"str",
-							"minlength":3,
-							"length":30,
-							"value":"tlegre",
-							"name":"name",
-							"label":"Name",
-							'required':true
-						},
-						{
-							"uitype":"int",
-							"minlength":3,
-							"length":30,
-							"value":12432,
-							"name":"integer",
-							"label":"Integer",
-							'required':true
-						},
-						{
-							"uitype":"float",
-							"dec_length":3,
-							"length":25,
-							"name":"float",
-							"label":"Float"
-						},
-						{
-							"uitype":"date",
-							"name":"date",
-							"label":"Date",
-							'required':true
-						},
-						{
-							"uitype":"password",
-							"minlength":3,
-							"length":30,
-							"name":"password",
-							"label":"Password",
-							'required':true
-						},
-						{
-							"uitype":"checkbox",
-							"name":"checkbox",
-							"label":"CheckBox",
-							"value":2,
-							"dataurl":"test_code.json",
-							'required':true
-						},
-						{
-							"uitype":"audio",
-							"name":"audio",
-							"label":"Audio",
-							'required':true
-						},
-						{
-							"uitype":"code",
-							"name":"code",
-							"label":"Code",
-							"value":2,
-							"dataurl":"test_code.json",
-							'required':true
-						},
-						{
-							"uitype":"text",
-							"name":"text",
-							"value":"This is a test",
-							"label":"Text",
-							'required':true
-						}
-					]
-				}
-			}
-		]
-	}
-}
-
-		;
-		const app = new BricksApp(opts);
-		app.run();
-	</script>
-</body>
-</html>
diff --git a/examples/form.ui b/examples/form.ui
new file mode 100644
index 0000000..a0c8d96
--- /dev/null
+++ b/examples/form.ui
@@ -0,0 +1,151 @@
+
+{
+	"widgettype":"VBox",
+	"options":{"height":"100%"},
+	"subwidgets":[
+		{
+			"widgettype":"HBox",
+			"options":{"height":"auto"},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"otext":"Please change Font size",
+						"i18n":true
+					}
+				},
+			   {
+					"widgettype":"Button",
+					"options":{
+						"label":"A",
+						"width":"auto",
+						"item_rate":1.4
+					},
+					"binds":[
+						{
+							"wid":"self",
+							"event":"click",
+							"actiontype":"script",
+							"target":"app",
+							"script":"bricks_app.textsize_bigger()"
+						}
+					]
+				},
+				{
+					"widgettype":"Button",
+					"options":{
+						"label":"A",
+						"width":"auto",
+						"item_rate":0.8
+					},
+					"binds":[
+						{
+							"wid":"self",
+							"event":"click",
+							"actiontype":"script",
+							"target":"app",
+							"script":"bricks_app.textsize_smaller()"
+						}
+					]
+				}
+			]
+		},
+		{
+			"widgettype":"Form",
+			"options":{
+				"submit_url":"/ttt/ttt.dspy",
+				"title":"Test hahah  Form",
+				"description":"test input implemented",
+				"fields":[
+					{
+						"uitype":"email",
+						"name":"email",
+						"label":"Email",
+						'required':true
+					},
+					{
+						"uitype":"tel",
+						"name":"tel",
+						"pattern":"{\d}3-{\d}4-{\d}4",
+						"label":"Tel",
+						'required':true
+					},
+					{
+						"uitype":"file",
+						"name":"file",
+						"label":"File",
+						'required':true
+					},
+					{
+						"uitype":"str",
+						"minlength":3,
+						"length":30,
+						"value":"tlegre",
+						"name":"name",
+						"label":"Name",
+						'required':true
+					},
+					{
+						"uitype":"int",
+						"minlength":3,
+						"length":30,
+						"value":12432,
+						"name":"integer",
+						"label":"Integer",
+						'required':true
+					},
+					{
+						"uitype":"float",
+						"dec_length":3,
+						"length":25,
+						"name":"float",
+						"label":"Float"
+					},
+					{
+						"uitype":"date",
+						"name":"date",
+						"label":"Date",
+						'required':true
+					},
+					{
+						"uitype":"password",
+						"minlength":3,
+						"length":30,
+						"name":"password",
+						"label":"Password",
+						'required':true
+					},
+					{
+						"uitype":"checkbox",
+						"name":"checkbox",
+						"label":"CheckBox",
+						"value":2,
+						"dataurl":"test_code.json",
+						'required':true
+					},
+					{
+						"uitype":"audio",
+						"name":"audio",
+						"label":"Audio",
+						'required':true
+					},
+					{
+						"uitype":"code",
+						"name":"code",
+						"label":"Code",
+						"value":2,
+						"dataurl":"test_code.json",
+						'required':true
+					},
+					{
+						"uitype":"text",
+						"name":"text",
+						"value":"This is a test",
+						"label":"Text",
+						'required':true
+					}
+				]
+			}
+		}
+	]
+}
diff --git a/examples/hbox.html b/examples/hbox.html
deleted file mode 100755
index 2e8d26c..0000000
--- a/examples/hbox.html
+++ /dev/null
@@ -1,65 +0,0 @@
-  <html>
-  <head>
-  </head>
-  <body>
-  <script src="http://kimird.com/bricks/bricks.js"></script>
-	<script>
-		const opts = 
-{
-	"widget": {
-			"widgettype":"HBox",
-			"options":{
-			},
-			"subwidgets":[
-				{
-					"widgettype":"Title1",
-					"options":{
-						"text":"Pic Viewer",
-						"i18n":true
-					},
-					"binds":[
-						{
-							"wid":"self",
-							"target":"self",
-							"event":"click",
-							"actiontype":"script",
-							"script":"alert('hahahahahah');"
-						}
-					]
-				},
-				{
-					"widgettype":"urlwidget",
-					"options":{
-						"url":"/bricks/image.tmpl",
-						"i18n":true
-					}
-				},
-				{
-					"id":"mymodal",
-					"widgettype":"Modal",
-					"options":{
-						"auto_close":true,
-						"auto_open":false,
-						"width":"700px",
-						"height":"400px",
-						"archor":"cl",
-					},
-					"subwidgets":[
-						{
-							"widgettype":"Text",
-							"options":{
-								"text":"This is a test"
-							}
-						}
-					]
-				}
-			]
-		}
-}
-
-		;
-		const app = new BricksApp(opts);
-		app.run();
-	</script>
-</body>
-</html>
diff --git a/examples/hbox.ui b/examples/hbox.ui
new file mode 100644
index 0000000..de1835f
--- /dev/null
+++ b/examples/hbox.ui
@@ -0,0 +1,50 @@
+
+{
+	"widgettype":"HBox",
+	"options":{
+	},
+	"subwidgets":[
+		{
+			"widgettype":"Title1",
+			"options":{
+				"text":"Pic Viewer",
+				"i18n":true
+			},
+			"binds":[
+				{
+					"wid":"self",
+					"target":"self",
+					"event":"click",
+					"actiontype":"script",
+					"script":"alert('hahahahahah');"
+				}
+			]
+		},
+		{
+			"widgettype":"urlwidget",
+			"options":{
+				"url":"/bricks/image.tmpl",
+				"i18n":true
+			}
+		},
+		{
+			"id":"mymodal",
+			"widgettype":"Modal",
+			"options":{
+				"auto_close":true,
+				"auto_open":false,
+				"width":"700px",
+				"height":"400px",
+				"archor":"cl",
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"text":"This is a test"
+					}
+				}
+			]
+		}
+	]
+}
diff --git a/examples/header.html b/examples/header.html
deleted file mode 100755
index 99f1be7..0000000
--- a/examples/header.html
+++ /dev/null
@@ -1,8 +0,0 @@
-  <script type="text/javascript" src="https://unpkg.com/vis-timeline/standalone/umd/vis-timeline-graph2d.min.js"></script>
-  <script
-      type="text/javascript"
-      src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js" ></script>
-  <script defer src="http://kimird.com/bricks/bricks.js"></script>
-	<script>
-		const opts =
-
diff --git a/examples/image.html b/examples/image.html
deleted file mode 100755
index 1e7b5d0..0000000
--- a/examples/image.html
+++ /dev/null
@@ -1,27 +0,0 @@
-  <html>
-  <head>
-  <link rel="stylesheet" href="http://kimird.com/bricks/css/bricks.css">
-  </head>
-  <body>
-  <script src="http://kimird.com/bricks/bricks.js"></script>
-
-	<script>
-		const opts = 
-{
-	"widget": {
-		"widgettype":"Image",
-		"options":{
-			"url":"https://cdn.pixabay.com/photo/2018/04/26/16/31/marine-3352341_960_720.jpg",
-			"height":"100%",
-			"width":"100%"
-		}
-
-	}
-}
-
-		;
-		const app = new BricksApp(opts);
-		app.run();
-	</script>
-</body>
-</html>
diff --git a/examples/image.ui b/examples/image.ui
new file mode 100644
index 0000000..2ef10de
--- /dev/null
+++ b/examples/image.ui
@@ -0,0 +1,9 @@
+
+{
+	"widgettype":"Image",
+	"options":{
+		"url":"https://cdn.pixabay.com/photo/2018/04/26/16/31/marine-3352341_960_720.jpg",
+		"height":"100%",
+		"width":"100%"
+	}
+}
diff --git a/examples/m3u8.html b/examples/m3u8.html
deleted file mode 100755
index 46a8e0f..0000000
--- a/examples/m3u8.html
+++ /dev/null
@@ -1,29 +0,0 @@
-  <html>
-  <head>
-  </head>
-  <body>
-  <script src="http://kimird.com/bricks/bricks.js"></script>
-	<script>
-	/*
-	https://abc-iview-mediapackagestreams-2.akamaized.net/out/v1/6e1cc6d25ec0480ea099a5399d73bc4b/index.m3u8
-	https://cbcnewshd-f.akamaihd.net/i/cbcnews_1@8981/index_2500_av-p.m3u8
-	*/
-		const opts = 
-{
-	"widget": {
-		"id":"videoplayer",
-		"widgettype":"VideoPlayer",
-		"options":{
-			"autoplay":true,
-			"url":"https://abc-iview-mediapackagestreams-2.akamaized.net/out/v1/6e1cc6d25ec0480ea099a5399d73bc4b/index.m3u8",
-			"type":"hls"
-		}
-	}
-}
-
-		;
-		const app = new BricksApp(opts);
-		app.run();
-	</script>
-</body>
-</html>
diff --git a/examples/m3u8.ui b/examples/m3u8.ui
new file mode 100644
index 0000000..0b3dce6
--- /dev/null
+++ b/examples/m3u8.ui
@@ -0,0 +1,10 @@
+
+{
+	"id":"videoplayer",
+	"widgettype":"VideoPlayer",
+	"options":{
+		"autoplay":true,
+		"url":"https://abc-iview-mediapackagestreams-2.akamaized.net/out/v1/6e1cc6d25ec0480ea099a5399d73bc4b/index.m3u8",
+		"type":"hls"
+	}
+}
diff --git a/examples/markdonw.html b/examples/markdonw.html
deleted file mode 100755
index e69de29..0000000
diff --git a/examples/markdown.html b/examples/markdown.html
deleted file mode 100755
index 51c125e..0000000
--- a/examples/markdown.html
+++ /dev/null
@@ -1,38 +0,0 @@
-  <html>
-  <head>
-  </head>
-  <body>
-  <div>
-  <script src="/marked.min.js"></script>
-  <script src="http://kimird.com/bricks/bricks.js"></script>
-	<script>
-		const opts = 
-{
-	"widget": {
-			"widgettype":"VBox",
-			"options":{
-			},
-			"subwidgets":[
-				{
-					"widgettype":"Title1",
-					"options":{
-						"text":"Pic Viewer",
-						"i18n":true
-					}
-				},
-				{
-					"widgettype":"MarkdownViewer",
-					"options":{
-						"md_url":"test1.md"
-					}
-				}
-			]
-		}
-}
-
-		;
-		const app = new BricksApp(opts);
-		app.run();
-	</script>
-</body>
-</html>
diff --git a/examples/markdown.ui b/examples/markdown.ui
new file mode 100644
index 0000000..68e6439
--- /dev/null
+++ b/examples/markdown.ui
@@ -0,0 +1,21 @@
+
+{
+	"widgettype":"VBox",
+	"options":{
+	},
+	"subwidgets":[
+		{
+			"widgettype":"Title1",
+			"options":{
+				"text":"Pic Viewer",
+				"i18n":true
+			}
+		},
+		{
+			"widgettype":"MarkdownViewer",
+			"options":{
+				"md_url":"test1.md"
+			}
+		}
+	]
+}
diff --git a/examples/message.html b/examples/message.html
deleted file mode 100644
index b4b8ae2..0000000
--- a/examples/message.html
+++ /dev/null
@@ -1,107 +0,0 @@
-
-
-  <html>
-  <head>
-<link rel="stylesheet" href="/bricks/css/bricks.css">
-  </head>
-  <body>
-  <script src="/bricks/bricks.js"></script>
-	<script>
-		const opts = 
-{
-	"widget": {
-		"widgettype":"Tree",
-		"options":{
-			"idField":"id",
-			"textField":"text",
-			"data":[
-				{
-					"id":1,
-					"text":"node1",
-					"is_leaf":false,
-					"children":[
-						{
-							"id":11,
-							"text":"node11",
-							"is_leaf":false,
-							"children":[
-								{
-									"id":112,
-									"text":"node.12",
-									"is_leaf":false,
-									"children":[
-										{
-											"id":1112,
-											"text":"node1112",
-											"is_leaf":true
-										},
-										{
-											"id":1113,
-											"text":"node113",
-											"is_leaf":true
-										}
-									]
-								},
-								{
-									"id":113,
-									"text":"node113",
-									"is_leaf":true
-								}
-							]
-						},
-						{
-							"id":12,
-							"text":"node12",
-							"is_leaf":true
-						},
-						{
-							"id":13,
-							"text":"node13",
-							"is_leaf":true
-						}
-					]
-				},
-				{
-					"id":2,
-					"text":"node2",
-					"is_leaf":false,
-					"children":[
-						{
-							"id":21,
-							"text":"node21",
-							"is_leaf":true
-						},
-						{
-							"id":22,
-							"text":"node22",
-							"is_leaf":true
-						},
-						{
-							"id":23,
-							"text":"node23",
-							"is_leaf":true
-						}
-					]
-				},
-				{
-					"id":3,
-					"text":"node3",
-					"is_leaf":true
-				}
-			]
-		}
-	}
-}
-
-		;
-		const app = new BricksApp(opts);
-		app.run();
-		var m = new Message({
-			"title":"TEst Message",
-			"message":"This is a test message",
-			"auto_open":true,
-			"timeout":3
-		})
-	</script>
-</body>
-</html>
diff --git a/examples/message.ui b/examples/message.ui
new file mode 100644
index 0000000..cebeeeb
--- /dev/null
+++ b/examples/message.ui
@@ -0,0 +1,83 @@
+
+{
+	"widgettype":"Tree",
+	"options":{
+		"idField":"id",
+		"textField":"text",
+		"data":[
+			{
+				"id":1,
+				"text":"node1",
+				"is_leaf":false,
+				"children":[
+					{
+						"id":11,
+						"text":"node11",
+						"is_leaf":false,
+						"children":[
+							{
+								"id":112,
+								"text":"node.12",
+								"is_leaf":false,
+								"children":[
+									{
+										"id":1112,
+										"text":"node1112",
+										"is_leaf":true
+									},
+									{
+										"id":1113,
+										"text":"node113",
+										"is_leaf":true
+									}
+								]
+							},
+							{
+								"id":113,
+								"text":"node113",
+								"is_leaf":true
+							}
+						]
+					},
+					{
+						"id":12,
+						"text":"node12",
+						"is_leaf":true
+					},
+					{
+						"id":13,
+						"text":"node13",
+						"is_leaf":true
+					}
+				]
+			},
+			{
+				"id":2,
+				"text":"node2",
+				"is_leaf":false,
+				"children":[
+					{
+						"id":21,
+						"text":"node21",
+						"is_leaf":true
+					},
+					{
+						"id":22,
+						"text":"node22",
+						"is_leaf":true
+					},
+					{
+						"id":23,
+						"text":"node23",
+						"is_leaf":true
+					}
+				]
+			},
+			{
+				"id":3,
+				"text":"node3",
+				"is_leaf":true
+			}
+		]
+	}
+}
diff --git a/examples/miniform.html b/examples/miniform.html
deleted file mode 100644
index ed36207..0000000
--- a/examples/miniform.html
+++ /dev/null
@@ -1,24 +0,0 @@
-
-  <html>
-  <head>
-<link rel="stylesheet" href="/bricks/css/bricks.css">
-  </head>
-  <body>
-  <script src="/bricks/bricks.js"></script>
-	<script>
-		const opts = 
-{
-	"widget": {
-		"widgettype":"urlwidget",
-		"options":{
-			"url":"miniform.json"
-		}
-	}
-}
-
-		;
-		const app = new BricksApp(opts);
-		app.run();
-	</script>
-</body>
-</html>
diff --git a/examples/miniform.ui b/examples/miniform.ui
new file mode 100644
index 0000000..2414d43
--- /dev/null
+++ b/examples/miniform.ui
@@ -0,0 +1,7 @@
+
+{
+	"widgettype":"urlwidget",
+	"options":{
+		"url":"miniform.json"
+	}
+}
diff --git a/examples/modal.html b/examples/modal.html
deleted file mode 100755
index e6a31c9..0000000
--- a/examples/modal.html
+++ /dev/null
@@ -1,22 +0,0 @@
-  <html>
-  <head>
-  </head>
-  <body>
-  <script src="/bricks/bricks.js"></script>
-	<script>
-		const opts = 
-{
-	"widget": {
-		"widgettype":"urlwidget",
-		"options":{
-			"url":"modal.json"
-		}
-	}
-}
-
-		;
-		const app = new BricksApp(opts);
-		app.run();
-	</script>
-</body>
-</html>
diff --git a/examples/model.ui b/examples/model.ui
new file mode 100644
index 0000000..d1794df
--- /dev/null
+++ b/examples/model.ui
@@ -0,0 +1,7 @@
+
+{
+	"widgettype":"urlwidget",
+	"options":{
+		"url":"modal.json"
+	}
+}
diff --git a/examples/recorder.html b/examples/recorder.html
deleted file mode 100644
index e1e53e0..0000000
--- a/examples/recorder.html
+++ /dev/null
@@ -1,26 +0,0 @@
-  <html>
-  <head>
-  </head>
-  <body>
-  <script src="/bricks/bricks.js"></script>
-	<script>
-		const opts = 
-{
-	"widget": {
-		"id":"recorder",
-		"widgettype":"AudioRecorder",
-		"options":{
-			"height":"40px",
-			"start_icon":"/bricks/imgs/start_recording.png"
-		}
-	}
-}
-
-		;
-		const app = new BricksApp(opts);
-		console.log('here ..........');
-		app.run();
-		console.log('here 1..........');
-	</script>
-</body>
-</html>
diff --git a/examples/recorder.ui b/examples/recorder.ui
new file mode 100644
index 0000000..d1c0614
--- /dev/null
+++ b/examples/recorder.ui
@@ -0,0 +1,17 @@
+{
+	"id":"recorder",
+	"widgettype":"AudioRecorder",
+	"options":{
+		"height":"40px",
+		"upload_url":"{{entire_url('stt.dspy')}}",
+		"start_icon":"/bricks/imgs/start_recording.png"
+	},
+	"binds":[
+		{
+			"wid":"self",
+			"event":"uploaded",
+			"actiontype":"script",
+			"script":"alert('kwargs', kwargs, args)"
+		}
+	]
+}
diff --git a/examples/scroll.html b/examples/scroll.html
deleted file mode 100644
index 8af9d9a..0000000
--- a/examples/scroll.html
+++ /dev/null
@@ -1,24 +0,0 @@
-
-  <html>
-  <head>
-<link rel="stylesheet" href="/bricks/css/bricks.css">
-  </head>
-  <body>
-  <script src="/bricks/bricks.js"></script>
-	<script>
-		const opts = 
-{
-	"widget": {
-		"widgettype":"urlwidget",
-		"options":{
-			"url":"scroll.json"
-		}
-	}
-}
-
-		;
-		const app = new BricksApp(opts);
-		app.run();
-	</script>
-</body>
-</html>
diff --git a/examples/scroll.ui b/examples/scroll.ui
new file mode 100644
index 0000000..93ce80b
--- /dev/null
+++ b/examples/scroll.ui
@@ -0,0 +1,7 @@
+
+{
+	"widgettype":"urlwidget",
+	"options":{
+		"url":"scroll.json"
+	}
+}
diff --git a/examples/t1.html b/examples/t1.html
deleted file mode 100755
index 72104ee..0000000
--- a/examples/t1.html
+++ /dev/null
@@ -1,69 +0,0 @@
-<html>
-  <head>
-    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css" rel="stylesheet" type="text/css" />
-  </head>
-  <body>
-    <div id="mynetwork"></div>
-    <script type="text/javascript">
-      // create an array with nodes
-      var nodes = new vis.DataSet([
-        { id: 1, label: 'Node 1' },
-        { id: 2, label: 'Node 2' },
-        { id: 3, label: 'Node 3' }
-      ]);
-
-      // create an array with edges
-      var edges = new vis.DataSet([
-        { from: 1, to: 2 },
-        { from: 2, to: 3 }
-      ]);
-
-var container = document.getElementById('mynetwork');
-var data = {
-  nodes: nodes,
-  edges: edges
-};
-var options = {
-  interaction: {
-    navigationButtons: true,
-    keyboard: true,
-    hover: true,
-    multiselect: true,
-    hideEdgesOnDrag: false,
-    hideNodesOnDrag: false,
-    dragView: true,
-    zoomView: true
-  },
-  manipulation: {
-    enabled: true,
-    initiallyActive: true,
-    addNode: function(nodeData, callback) {
-      nodeData.id = (Math.random() * 1000000).toFixed(0);
-      nodeData.label = 'Node ' + nodeData.id;
-      nodes.add(nodeData);
-      callback(nodeData);
-    },
-    editNode: function(nodeData, callback) {
-      nodeData.label = 'Node ' + nodeData.id;
-      nodes.update(nodeData);
-      callback(nodeData);
-    },
-    deleteNode: function(nodeData, callback) {
-      nodes.remove(nodeData.id);
-      callback(nodeData);
-    }
-  }
-};
-var network = new vis.Network(container, data, options);
-
-network.on('oncontext', function(properties) {
-  var nodeId = properties.nodes[0];
-  var node = nodes.get(nodeId);
-
-  // display context menu
-  // ...
-});
-</script>
-  </body>
-</html>
diff --git a/examples/tab.html b/examples/tab.html
deleted file mode 100755
index adf510f..0000000
--- a/examples/tab.html
+++ /dev/null
@@ -1,75 +0,0 @@
-  <html>
-  <head>
-  <link rel="stylesheet" href="/bricks/css/bricks.css">
-  </head>
-  <body>
-  <script src="/bricks/bricks.js"></script>
-
-	<script>
-		const opts = 
-{
-	"widget": {
-		"widgettype":"TabPanel",
-		"options":{
-			"tab_wide":"auto",
-			"height":"100%",
-			"tab_long":"70%",
-			"tab_pos":"top",
-			"items":[
-				{
-					"name":"c",
-					"label":"C",
-					"content":{
-						"widgettype":"Text",
-						"options":{
-							"text":"This is a C language documents"
-						}
-					},
-					"icon":null
-
-				},
-				{
-					"name":"javascript",
-					"removable":true,
-					"label":"JavaScript",
-					"content":{
-						"widgettype":"Text",
-						"options":{
-							"text":"This is JavaScript language documents"
-						}
-					},
-					"icon":null
-				},
-				{
-					"name":"php",
-					"label":"PHP",
-					"content":{
-						"widgettype":"Text",
-						"options":{
-							"text":"This is PHP language documents"
-						}
-					},
-					"icon":null
-				},
-				{
-					"name":"python",
-					"label":"Python",
-					"content":{
-						"widgettype":"Text",
-						"options":{
-							"text":"This is Python language documents"
-						}
-					},
-					"icon":null
-				},
-			]
-		}
-	}
-}
-
-		;
-		const app = new BricksApp(opts);
-		app.run();
-	</script>
-</body>
-</html>
diff --git a/examples/tab.ui b/examples/tab.ui
new file mode 100644
index 0000000..f4a1e3c
--- /dev/null
+++ b/examples/tab.ui
@@ -0,0 +1,58 @@
+
+{
+	"widgettype":"TabPanel",
+	"options":{
+		"tab_wide":"auto",
+		"height":"100%",
+		"tab_long":"70%",
+		"tab_pos":"top",
+		"items":[
+			{
+				"name":"c",
+				"label":"C",
+				"content":{
+					"widgettype":"Text",
+					"options":{
+						"text":"This is a C language documents"
+					}
+				},
+				"icon":null
+
+			},
+			{
+				"name":"javascript",
+				"removable":true,
+				"label":"JavaScript",
+				"content":{
+					"widgettype":"Text",
+					"options":{
+						"text":"This is JavaScript language documents"
+					}
+				},
+				"icon":null
+			},
+			{
+				"name":"php",
+				"label":"PHP",
+				"content":{
+					"widgettype":"Text",
+					"options":{
+						"text":"This is PHP language documents"
+					}
+				},
+				"icon":null
+			},
+			{
+				"name":"python",
+				"label":"Python",
+				"content":{
+					"widgettype":"Text",
+					"options":{
+						"text":"This is Python language documents"
+					}
+				},
+				"icon":null
+			},
+		]
+	}
+}
diff --git a/examples/table.ui b/examples/table.ui
new file mode 100644
index 0000000..236ebee
--- /dev/null
+++ b/examples/table.ui
@@ -0,0 +1,7 @@
+
+{
+	"widgettype":"urlwidget",
+	"options":{
+		"url":"tables.json"
+	}
+}
diff --git a/examples/tables.html b/examples/tables.html
deleted file mode 100644
index 83df085..0000000
--- a/examples/tables.html
+++ /dev/null
@@ -1,25 +0,0 @@
-
-  <html>
-  <head>
-  <link rel="stylesheet" href="/bricks/css/bricks.css">
-  </head>
-  <body>
-  <script src="/bricks/bricks.js"></script>
-
-	<script>
-		const opts = 
-{
-	"widget": {
-		"widgettype":"urlwidget",
-		"options":{
-			"url":"tables.json"
-		}
-	}
-}
-
-		;
-		const app = new BricksApp(opts);
-		app.run();
-	</script>
-</body>
-</html>
diff --git a/examples/terminal.html b/examples/terminal.html
deleted file mode 100644
index ed3bd6e..0000000
--- a/examples/terminal.html
+++ /dev/null
@@ -1,39 +0,0 @@
-  <html>
-  <head>
-   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@4.19.0/css/xterm.css" />
-  <script src="https://cdn.jsdelivr.net/npm/xterm@4.19.0/lib/xterm.js"></script>
-  </head>
-  <body>
-  	<div id="terminal"></div>
-	<script>
-	var term = new Terminal();
-	term.open(document.getElementById('terminal'));
-	var ws = new WebSocket("ws://localhost/test/dev.xterm");
-	console.log('term=', term);
-	var curr_line = "";
-	var entries = [];
-
-	term.prompt = () => {
-		if (curr_line) {
-			let data = { method: "command", command: curr_line };
-			ws.send(JSON.stringify(data));
-		}
-	};
-	term.prompt();
-
-	// Receive data from socket
-	ws.onmessage = msg => {
-		term.write(JSON.parse(msg.data).data);
-	};
-
-	term.onData(function(key) {
-		//Enter
-		let msg = {
-			data:{data:key},
-			type:1
-		}
-		ws.send(key);
-	});
-	</script>
-</body>
-</html>
diff --git a/examples/test11.html b/examples/test11.html
deleted file mode 100644
index b9fd7dd..0000000
--- a/examples/test11.html
+++ /dev/null
@@ -1,144 +0,0 @@
-  <html>
-  <head>
-<style>
-.grid-container {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 8px;
-}
-
-.header-cell,
-.data-cell {
-  padding: 8px;
-  text-align: left;
-  border: 1px solid #ddd;
-}
-@media screen and (max-width: 600px) {
-  .grid-container {
-    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-  }
-}
-</style>
-
-  </head>
-  <body>
-  <div>Test Grid table </div>
-  <div id="grid-container">
-  </div>
-	<script>
-class GridData {
-  constructor(data, container) {
-    this.data = data;
-    this.container = container;
-    this.columns = Object.keys(data[0]).length;
-    this.rows = data.length;
-    this.minColumnWidth = 100; // minimum column width in pixels
-  }
-
-  render() {
-    // Create a grid container element
-    const gridContainer = document.createElement('div');
-    gridContainer.classList.add('grid-container');
-
-    // Create the header cells
-    for (let i = 0; i < this.columns; i++) {
-      const headerCell = document.createElement('div');
-      headerCell.classList.add('header-cell');
-      headerCell.textContent = Object.keys(this.data[0])[i];
-      headerCell.setAttribute('data-col', i);
-      headerCell.style.gridArea = `1 / ${i + 1} / 2 / ${i + 2}`;
-      headerCell.addEventListener('mousedown', this.startResize.bind(this));
-      gridContainer.appendChild(headerCell);
-    }
-
-    // Create the data cells
-    for (let i = 0; i < this.rows; i++) {
-      for (let j = 0; j < this.columns; j++) {
-        const dataCell = document.createElement('div');
-        dataCell.classList.add('data-cell');
-        dataCell.setAttribute('data-col', j);
-        dataCell.textContent = Object.values(this.data[i])[j];
-        dataCell.style.gridArea = `${i + 2} / ${j + 1} / ${i + 3} / ${j + 2}`;
-        gridContainer.appendChild(dataCell);
-      }
-    }
-
-    // Add the grid container to the container element
-    this.container.appendChild(gridContainer);
-  }
-
-  startResize(e) {
-    this.resizing = true;
-    this.currentCol = e.target.getAttribute('data-col');
-    this.initialX = e.clientX;
-    this.currentWidth = parseInt(
-      document.defaultView.getComputedStyle(e.target).width,
-      10
-    );
-    document.documentElement.addEventListener('mousemove', this.resize.bind(this));
-    document.documentElement.addEventListener('mouseup', this.stopResize.bind(this));
-  }
-
-  /*
-  resize(e) {
-    if (this.resizing) {
-      const deltaX = e.clientX - this.initialX;
-      const newWidth = this.currentWidth + deltaX;
-      if (newWidth > this.minColumnWidth) {
-        document
-          .querySelectorAll(`[data-col="${this.currentCol}"]`)
-          .forEach((cell) => (cell.style.width = `${newWidth}px`));
-      }
-    }
-  }
-  */
-  resize(e) {
-  if (this.resizing) {
-    const deltaX = e.clientX - this.initialX;
-    const newWidth = this.currentWidth + deltaX;
-    if (newWidth > this.minColumnWidth) {
-      // Set the width of the current column
-      document
-        .querySelectorAll(`[data-col="${this.currentCol}"]`)
-        .forEach((cell) => (cell.style.width = `${newWidth}px`));
-
-      // Calculate the total width of all the columns
-      let totalWidth = 0;
-      document
-        .querySelectorAll('.header-cell')
-        .forEach((cell) => (totalWidth += parseInt(cell.style.width)));
-
-      // Calculate the width of each column based on the total width
-      const columnWidths = Array.from(
-        document.querySelectorAll('.header-cell')
-      ).map((cell) => `minmax(${this.minColumnWidth}px, ${cell.style.width})`);
-      const gridTemplateColumns = columnWidths.join(' ');
-
-      // Set the grid-template-columns property on the grid container
-      document.querySelector('.grid-container').style.gridTemplateColumns =
-        gridTemplateColumns;
-    }
-  }
-}
-
-
-  stopResize(e) {
-    this.resizing = false;
-    document.documentElement.removeEventListener('mousemove', this.resize);
-    document.documentElement.removeEventListener('mouseup', this.stopResize);
-  }
-}
-
-const data = [
-  { name: 'John', age: 25, city: 'New York' },
-  { name: 'Mary', age: 30, city: 'London' },
-  { name: 'Bob', age: 35, city: 'Paris' },
-];
-
-const container = document.getElementById('grid-container');
-
-const grid = new GridData(data, container);
-grid.render();
-	</script>
-</body>
-</html>
diff --git a/examples/testlogin.html b/examples/testlogin.html
deleted file mode 100644
index bd54065..0000000
--- a/examples/testlogin.html
+++ /dev/null
@@ -1,24 +0,0 @@
-  <html>
-  <head>
-<link rel="stylesheet" href="/bricks/css/bricks.css" />
-  </head>
-  <body>
-  <script src="/bricks/bricks.js"></script>
-	<script>
-		const opts = 
-{
-	"widget": {
-		"widgettype":"Text",
-		"options":{
-			"text":"This is a test"
-		}
-	}
-}
-
-		;
-		const app = new BricksApp(opts);
-		app.run();
-		await fetch('http://localhost/
-	</script>
-</body>
-</html>
diff --git a/examples/text.html b/examples/text.html
deleted file mode 100755
index 7d1b3cf..0000000
--- a/examples/text.html
+++ /dev/null
@@ -1,117 +0,0 @@
-
-<html>
-  <head>
-    <link href="/bricks/css/bricks.css" rel="stylesheet" type="text/css" />
-  </head>
-  <body>
-  
-  <script src="/bricks/bricks.js"></script>
-    <script type="text/javascript">
-		const opts = 
-{
-	"widget": {
-			"widgettype":"VBox",
-			"options":{
-			},
-			"subwidgets":[
-				{
-					"widgettype":"Title1",
-					"options":{
-						"text":"Pic Viewer",
-						"i18n":true
-					}
-				},
-				{
-					"widgettype":"Title2",
-					"options":{
-						"text":"Pic Viewer",
-						"i18n":true
-					}
-				},
-				{
-					"widgettype":"Title3",
-					"options":{
-						"text":"Pic Viewer",
-						"i18n":true
-					}
-				},
-				{
-					"widgettype":"Title4",
-					"options":{
-						"text":"Pic Viewer",
-						"i18n":true
-					}
-				},
-				{
-					"widgettype":"Title5",
-					"options":{
-						"text":"Pic Viewer",
-						"i18n":true
-					}
-				},
-				{
-					"widgettype":"Title6",
-					"options":{
-						"text":"Pic Viewer",
-						"i18n":true
-					}
-				},
-				{
-					"widgettype":"Text",
-					"options":{
-						"text":"Pic Viewer",
-						"i18n":true
-					}
-				},
-				{
-					"widgettype":"HBox",
-					"options":{
-					},
-					"subwidgets":[
-						{
-							"widgettype":"Button",
-							"options":{
-								"label":"A",
-								"item_rate":1.4
-							},
-							"binds":[
-								{
-									"wid":"self",
-									"event":"click",
-									"actiontype":"script",
-									"target":"app",
-									"script":"bricks_app.textsize_bigger()"
-								}
-							]
-						},
-						{
-							"widgettype":"Button",
-							"options":{
-								"label":"A",
-								"item_rate":0.7,
-								"item_size":"20px"
-							},
-							"binds":[
-								{
-									"wid":"self",
-									"event":"click",
-									"actiontype":"script",
-									"target":"app",
-									"script":"bricks_app.textsize_smaller()"
-								}
-							]
-						}
-					]
-				}
-			]
-		}
-}
-
-		;
-		const app = new BricksApp(opts);
-		app.run();
-
-
-</script>
-  </body>
-</html>
diff --git a/examples/toolbar.html b/examples/toolbar.html
deleted file mode 100755
index c8b8549..0000000
--- a/examples/toolbar.html
+++ /dev/null
@@ -1,48 +0,0 @@
-  <html>
-  <head>
-  <link rel="stylesheet" href="http://kimird.com/bricks/css/bricks.css">
-  </head>
-  <body>
-  <script src="http://kimird.com/bricks/bricks.js"></script>
-
-	<script>
-		const opts = 
-{
-	"widget": {
-		"widgettype":"Toolbar",
-		"options":{
-			"target":null,
-			"orientation":"horizontal",
-			"tool_margin":"15px",
-			"tools":[
-				{
-					"name":"c",
-					"Label":"C",
-					"icon":null
-				},
-				{
-					"name":"javascript",
-					"Label":"JavaScript",
-					"icon":null
-				},
-				{
-					"name":"php",
-					"Label":"PHP",
-					"icon":null
-				},
-				{
-					"name":"python",
-					"Label":"Python",
-					"icon":null
-				},
-			]
-		}
-	}
-}
-
-		;
-		const app = new BricksApp(opts);
-		app.run();
-	</script>
-</body>
-</html>
diff --git a/examples/toolbar.ui b/examples/toolbar.ui
new file mode 100644
index 0000000..07089a7
--- /dev/null
+++ b/examples/toolbar.ui
@@ -0,0 +1,31 @@
+
+{
+	"widgettype":"Toolbar",
+	"options":{
+		"target":null,
+		"orientation":"horizontal",
+		"tool_margin":"15px",
+		"tools":[
+			{
+				"name":"c",
+				"Label":"C",
+				"icon":null
+			},
+			{
+				"name":"javascript",
+				"Label":"JavaScript",
+				"icon":null
+			},
+			{
+				"name":"php",
+				"Label":"PHP",
+				"icon":null
+			},
+			{
+				"name":"python",
+				"Label":"Python",
+				"icon":null
+			},
+		]
+	}
+}
diff --git a/examples/tree.html b/examples/tree.html
deleted file mode 100644
index d8af8b8..0000000
--- a/examples/tree.html
+++ /dev/null
@@ -1,24 +0,0 @@
-
-  <html>
-  <head>
-<link rel="stylesheet" href="/bricks/css/bricks.css" />
-  </head>
-  <body>
-  <script src="/bricks/bricks.js"></script>
-	<script>
-		const opts = 
-{
-	"widget": {
-		"widgettype":"urlwidget",
-		"options":{
-			"url":"tree.json"
-		}
-	}
-}
-
-		;
-		const app = new BricksApp(opts);
-		app.run();
-	</script>
-</body>
-</html>
diff --git a/examples/tree.ui b/examples/tree.ui
new file mode 100644
index 0000000..54c6615
--- /dev/null
+++ b/examples/tree.ui
@@ -0,0 +1,7 @@
+
+{
+	"widgettype":"urlwidget",
+	"options":{
+		"url":"tree.json"
+	}
+}
diff --git a/examples/vbox.html b/examples/vbox.html
deleted file mode 100755
index aa359df..0000000
--- a/examples/vbox.html
+++ /dev/null
@@ -1,70 +0,0 @@
-  <html>
-  <head>
-  </head>
-  <body>
-
-  <script src="http://kimird.com/bricks/bricks.js"></script>
-	<script>
-		const opts = 
-{
-	"widget": {
-			"widgettype":"VBox",
-			"options":{
-			},
-			"subwidgets":[
-				{
-					"widgettype":"Title1",
-					"options":{
-						"text":"Pic Viewer",
-						"i18n":true
-					}
-				},
-				{
-					"widgettype":"urlwidget",
-					"options":{
-						"url":"/bricks/image.tmpl"
-					}
-				},
-				{
-					"id":"mymodal",
-					"widgettype":"Modal",
-					"options":{
-						"auto_close":true,
-						"auto_open":false,
-						"width":"700px",
-						"height":"400px",
-						"archor":"cl",
-					},
-					"subwidgets":[
-						{
-							"widgettype":"Text",
-							"options":{
-								"text":"This is a test"
-							}
-						}
-					]
-				}
-			]
-		}
-}
-
-		;
-		var o = {
-			'name':'john',
-			'age':12
-		}
-		console.log('fmtstr=', obj_fmtstr(o, 'name=${name} ${age:}'));
-		const app = new BricksApp(opts);
-		app.run();
-		var btn = document.getElementById('btn')
-		btn.innerText = 'ShowModal';
-		var showModal = function(){
-			var m = document.getElementById('mymodal');
-			m.style.display = 'block';
-			console.log('clicked');
-		}
-		btn['HDHDHD'] = o;
-		console.log('btn new data=', btn['HDHDHD']);
-	</script>
-</body>
-</html>
diff --git a/examples/vbox.ui b/examples/vbox.ui
new file mode 100644
index 0000000..ba251b6
--- /dev/null
+++ b/examples/vbox.ui
@@ -0,0 +1,97 @@
+
+{
+	"widgettype":"VBox",
+	"options":{
+	},
+	"subwidgets":[
+		{
+			"widgettype":"Title1",
+			"options":{
+				"text":"Pic Viewer",
+				"i18n":true
+			}
+		},
+		{
+			"widgettype":"Title2",
+			"options":{
+				"text":"Pic Viewer",
+				"i18n":true
+			}
+		},
+		{
+			"widgettype":"Title3",
+			"options":{
+				"text":"Pic Viewer",
+				"i18n":true
+			}
+		},
+		{
+			"widgettype":"Title4",
+			"options":{
+				"text":"Pic Viewer",
+				"i18n":true
+			}
+		},
+		{
+			"widgettype":"Title5",
+			"options":{
+				"text":"Pic Viewer",
+				"i18n":true
+			}
+		},
+		{
+			"widgettype":"Title6",
+			"options":{
+				"text":"Pic Viewer",
+				"i18n":true
+			}
+		},
+		{
+			"widgettype":"Text",
+			"options":{
+				"text":"Pic Viewer",
+				"i18n":true
+			}
+		},
+		{
+			"widgettype":"HBox",
+			"options":{
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Button",
+					"options":{
+						"label":"A",
+						"item_rate":1.4
+					},
+					"binds":[
+						{
+							"wid":"self",
+							"event":"click",
+							"actiontype":"script",
+							"target":"app",
+							"script":"bricks_app.textsize_bigger()"
+						}
+					]
+				},
+				{
+					"widgettype":"Button",
+					"options":{
+						"label":"A",
+						"item_rate":0.7,
+						"item_size":"20px"
+					},
+					"binds":[
+						{
+							"wid":"self",
+							"event":"click",
+							"actiontype":"script",
+							"target":"app",
+							"script":"bricks_app.textsize_smaller()"
+						}
+					]
+				}
+			]
+		}
+	]
+}
diff --git a/examples/vbox1.ui b/examples/vbox1.ui
new file mode 100644
index 0000000..3c67e98
--- /dev/null
+++ b/examples/vbox1.ui
@@ -0,0 +1,40 @@
+
+{
+	"widgettype":"VBox",
+	"options":{
+	},
+	"subwidgets":[
+		{
+			"widgettype":"Title1",
+			"options":{
+				"text":"Pic Viewer",
+				"i18n":true
+			}
+		},
+		{
+			"widgettype":"urlwidget",
+			"options":{
+				"url":"/bricks/image.tmpl"
+			}
+		},
+		{
+			"id":"mymodal",
+			"widgettype":"Modal",
+			"options":{
+				"auto_close":true,
+				"auto_open":false,
+				"width":"700px",
+				"height":"400px",
+				"archor":"cl",
+			},
+			"subwidgets":[
+				{
+					"widgettype":"Text",
+					"options":{
+						"text":"This is a test"
+					}
+				}
+			]
+		}
+	]
+}
diff --git a/examples/video.html b/examples/video.html
deleted file mode 100755
index 1ed16ac..0000000
--- a/examples/video.html
+++ /dev/null
@@ -1,25 +0,0 @@
-  <html>
-  <head>
-  </head>
-  <body>
-  <script src="/bricks/bricks.js"></script>
-	<script>
-		const opts = 
-{
-	"widget": {
-		"id":"videoplayer",
-		"widgettype":"VideoPlayer",
-		"options":{
-			"autoplay":true,
-			"url":"http://kimird.com/video/sample-mp4-file.mp4",
-			"type":"mp4"
-		}
-	}
-}
-
-		;
-		const app = new BricksApp(opts);
-		app.run();
-	</script>
-</body>
-</html>
diff --git a/examples/video.ui b/examples/video.ui
new file mode 100644
index 0000000..a55618c
--- /dev/null
+++ b/examples/video.ui
@@ -0,0 +1,10 @@
+
+{
+	"id":"videoplayer",
+	"widgettype":"VideoPlayer",
+	"options":{
+		"autoplay":true,
+		"url":"http://kimird.com/video/sample-mp4-file.mp4",
+		"type":"mp4"
+	}
+}