bugfix

bricks/floaticonbar.js

@@ -10,21 +10,20 @@ bricks.IconBar = class extends bricks.HBox {
 				name:
 				icon:
 				rate:
+				dynsize:
 				tip
 			}
 		]
 	}
 	*/	
 	constructor(opts){
+		opts.height = opts.height || 'auto';
 		super(opts);
+		this.set_style('height', 'auto');
 		var tools = this.opts.tools;
+		this.height_int = 0;
 		for (var i=0;i<tools.length;i++){
-			var rate = this.opts.rate || 1;
-			var w = new bricks.Icon({
-				url:tools[i].icon,
-				rate:tools[i].rate || rate,
-				tip:tools[i].tip
-			});
+			var w = this.build_item(tools[i]);
 			w.set_style('margin', this.opts.margin || '10px');
 			if (tools[i].name){
 				w.widget_id = tools[i].name;
@@ -33,6 +32,22 @@ bricks.IconBar = class extends bricks.HBox {
 			w.bind('click', this.regen_event.bind(this,tools[i]))
 			this.add_widget(w);
 		}
+		this.set_style('height', this.height_int + 'px');
+	}
+	build_item(opts){
+		var rate = this.opts.rate || 1;
+		var desc = {
+			url:opts.icon,
+			rate:opts.rate || rate,
+			dynsize:opts.dynsize||true,
+			tip:opts.tip
+		};
+		var h = bricks.app.charsize * rate;
+		if (this.height_int < h){
+			this.height_int = h;
+		}
+		var w = new bricks.Icon(desc);
+		return w;
 	}
 	regen_event(desc, event){
 		this.dispatch(desc.name, desc);
@@ -41,17 +56,62 @@ bricks.IconBar = class extends bricks.HBox {
 	}
 }
 
+bricks.IconTextBar = class extends bricks.IconBar {
+	build_item(opts){
+		var rate = opts.rate || this.opts.rate || 1;
+		var o = {
+			width:'auto',
+			height:'auto',
+			cheight:1.3 * rate
+		};
+		if (opts.tip){
+			o.tip = opts.tip;
+		}
+		var box = new bricks.HBox(o);
+		if (opts.icon){
+			var desc = {
+				url:opts.icon,
+				rate:opts.rate || rate,
+				dynsize:opts.dynsize||true
+			};
+			var w = new bricks.Icon(desc);
+			box.add_widget(w);
+		}
+		if (opts.label){
+			var desc = {
+				otext:opts.label,
+				i18n:true,
+				wrap:true,
+				haligh:'left',
+				rate:opts.rate || rate,
+				dynsize:opts.dynsize||true
+			};
+			var w = new bricks.Text(desc);
+			box.add_widget(w);
+		}
+		var h = bricks.app.charsize * rate;
+		if (this.height_int < h){
+			this.height_int = h;
+		}
+		return box;
+	}
+}
 bricks.FloatIconBar = class extends bricks.HBox {
 	constructor(opts){
-		opts.height = opts.height || "auto";
 		super(opts);
 		this.float_w = new bricks.Icon({url:bricks_resource('imgs/float-out.png')});
 		this.float_w.set_style('margin', '10px');
 		this.float_w.bind('mousemove', this.show_icons.bind(this));
 		this.add_widget(this.float_w);
-		this.icons_box = new bricks.IconBar(opts);
+		this.icons_box = this.build_bar(opts);
+		this.add_widget(this.icons_box);
+		this.hide_icons()
+		this.set_style('height', this.icons_box.height_int + 'px')
 		bricks.Body.bind('click', this.hide_icons.bind(this));
 	}
+	build_bar(opts){
+		return new bricks.IconBar(opts);
+	}
 	show_icons(){
 		this.icons_box.set_style('display', 'flex');
 	}
@@ -60,5 +120,13 @@ bricks.FloatIconBar = class extends bricks.HBox {
 	}
 }
 
+bricks.FloatIconTextBar = class extends bricks.FloatIconBar {
+	build_bar(opts){
+		return new bricks.IconTextBar(opts);
+	}
+}
+
 bricks.Factory.register('IconBar', bricks.IconBar);
+bricks.Factory.register('IconTextBar', bricks.IconTextBar);
 bricks.Factory.register('FloatIconBar', bricks.FloatIconBar);
+bricks.Factory.register('FloatIconTextBar', bricks.FloatIconTextBar);

bricks/image.js

@@ -34,7 +34,7 @@ bricks.Image = class oops extends bricks.JsWidget {
 	}
 }
 
-bricks.Icon = class oops extends bricks.Image {
+bricks.Icon = class extends bricks.Image {
 	constructor(opts){
 		var rate = opts.rate || 1;
 		var siz = bricks.app.charsize * rate + 'px';

dist/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
+					}
+				}
+			}
+		]
+	}
+}

dist/examples/add_widget.ui

@@ -0,0 +1,67 @@
+{
+	"widgettype":"VBox",
+	"options":{
+		"width":"100%",
+		"height":"100%"
+	},
+	"subwidgets":[
+		{
+			"widgettype":"HBox",
+			"options":{
+				"height":"40px"
+			},
+			"subwidgets":[
+				{
+					"id":"insert",
+					"widgettype":"Button",
+					"options":{
+						"width":"80px",
+						"i18n":true,
+						"label":"insert"
+					}
+				},
+				{
+					"id":"append",
+					"widgettype":"Button",
+					"options":{
+						"width":"80px",
+						"i18n":true,
+						"label":"append"
+					}
+				}
+			]
+		},
+		{
+			"id":"main",
+			"widgettype":"Filler"
+		}
+	],
+	"binds":[
+		{
+			"wid":"insert",
+			"event":"click",
+			"actiontype":"urlwidget",
+			"target":"main",
+			"options":{
+				"url":"{{entire_url('subtext.ui')}}",
+				"params":{
+					"text":"Insert before"
+				}
+			},
+			"mode":"insert"
+		},
+		{
+			"wid":"append",
+			"event":"click",
+			"actiontype":"urlwidget",
+			"target":"main",
+			"options":{
+				"url":"{{entire_url('subtext.ui')}}",
+				"params":{
+					"text":"Append After"
+				}
+			},
+			"mode":"append"
+		}
+	]
+}

dist/examples/audio.ui

@@ -0,0 +1,9 @@
+
+{
+	"id":"audioplayer",
+	"widgettype":"AudioPlayer",
+	"options":{
+		"autoplay":true,
+		"url":"http://kimird.com/songs/sample-mp3-file.mp3"
+	}
+}

dist/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');"
+		}
+	]
+}

dist/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
+	}
+}

dist/examples/datagrid.ui

@@ -0,0 +1,7 @@
+
+{
+	"widgettype":"urlwidget",
+	"options":{
+		"url":"users.bcrud"
+	}
+}

dist/examples/docs.ui

@@ -0,0 +1,10 @@
+
+{
+	"widgettype":"MarkdownViewer",
+	"options":{
+		"width":"100%",
+		"height":"100%",
+		"navigator":true,
+		"md_url":"../docs/README.md"
+	}
+}

dist/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
+	}
+}

dist/examples/editabletree.ui

@@ -0,0 +1,7 @@
+
+{
+	"widgettype":"urlwidget",
+	"options":{
+		"url":"editabletree.json"
+	}
+}

dist/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
+			}
+		]
+	}
+}

dist/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"
+			}
+		}
+	]
+}

dist/examples/floaticonbar.ui

@@ -0,0 +1,18 @@
+{
+	"widgettype":"FloatIconBar",
+	"options":{
+		"tools":[
+		{
+			"icon":"{{entire_url('../imgs/add.png')}}",
+			"name":"add",
+			"rate":1.5,
+			"tip":"add a record"
+		},
+		{
+			"icon":"{{entire_url('../imgs/delete.png')}}",
+			"name":"delete",
+			"tip":"delete a record"
+		}],
+	}
+}
+	

dist/examples/floaticontextbar.ui

@@ -0,0 +1,19 @@
+{
+	"widgettype":"FloatIconTextBar",
+	"options":{
+		"tools":[
+		{
+			"name":"add",
+			"icon":"{{entire_url('../imgs/add.png')}}",
+			"label":"add",
+			"tip":"add a record"
+		},
+		{
+			"icon":"{{entire_url('../imgs/delete.png')}}",
+			"name":"delete",
+			"label":"delete",
+			"tip":"delete a record"
+		}],
+	}
+}
+	

dist/examples/footer.ui

@@ -0,0 +1,6 @@
+{
+	"widgettype":"Text",
+	"options":{
+		"text":"Bricks module, make front end coding easier"
+	}
+}

dist/examples/form.ui

@@ -0,0 +1,157 @@
+
+{
+	"widgettype":"VBox",
+	"options":{"height":"100%", "width":"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":"Filler",
+			"options":{"overflow":"auto"},
+			"subwidgets":[
+		{
+			"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
+					}
+				]
+			}
+		}
+			]
+		}
+	]
+}

dist/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"
+					}
+				}
+			]
+		}
+	]
+}

dist/examples/iconbar.ui

@@ -0,0 +1,20 @@
+{
+	"widgettype":"IconBar",
+	"options":{
+		"tools":[
+		{
+			"icon":"{{entire_url('../imgs/add.png')}}",
+			"name":"add",
+			"rate":1.5,
+			"label":"add",
+			"tip":"add a record"
+		},
+		{
+			"icon":"{{entire_url('../imgs/delete.png')}}",
+			"name":"delete",
+			"label":"delete",
+			"tip":"delete a record"
+		}],
+	}
+}
+	

dist/examples/icontextbar.ui

@@ -0,0 +1,20 @@
+{
+	"widgettype":"IconTextBar",
+	"options":{
+		"tools":[
+		{
+			"icon":"{{entire_url('../imgs/add.png')}}",
+			"name":"add",
+			"rate":1.5,
+			"label":"add",
+			"tip":"add a record"
+		},
+		{
+			"icon":"{{entire_url('../imgs/delete.png')}}",
+			"name":"delete",
+			"label":"delete",
+			"tip":"delete a record"
+		}],
+	}
+}
+	

dist/examples/iframe.ui

@@ -0,0 +1,8 @@
+{
+	"id":"videoplayer",
+	"widgettype":"Iframe",
+	"options":{
+		"width":"100%",
+		"url":"{{params_kw.url}}"
+	}   
+}

dist/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%"
+	}
+}

dist/examples/m3u8.ui

@@ -0,0 +1,10 @@
+
+{
+	"id":"videoplayer",
+	"widgettype":"VideoPlayer",
+	"options":{
+		"autoplay":true,
+		"url":"{{params_kw.get('url')}}",
+		"type":"hls"
+	}
+}

dist/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"
+			}
+		}
+	]
+}

dist/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
+			}
+		]
+	}
+}

dist/examples/miniform.ui

@@ -0,0 +1,7 @@
+
+{
+	"widgettype":"urlwidget",
+	"options":{
+		"url":"miniform.json"
+	}
+}

dist/examples/model.ui

@@ -0,0 +1,7 @@
+
+{
+	"widgettype":"urlwidget",
+	"options":{
+		"url":"modal.json"
+	}
+}

dist/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)"
+		}
+	]
+}

dist/examples/scroll.ui

@@ -0,0 +1,27 @@
+{
+	"widgettype":"VBox",
+	"options":{
+		"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')}}"
+			}
+		}
+	]
+}

dist/examples/subtext.ui

@@ -0,0 +1,6 @@
+{
+	"widgettype":"Text",
+	"options":{
+		"text":"{{params_kw.get('text') or 'default text'}}"
+	}
+}

dist/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"
+			}
+		}
+	]
+}

dist/examples/tab.ui

@@ -0,0 +1,59 @@
+
+{
+	"widgettype":"TabPanel",
+	"options":{
+		"tab_wide":"auto",
+		"height":"100%",
+		"width":"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
+			},
+		]
+	}
+}

dist/examples/table.ui

@@ -0,0 +1,7 @@
+
+{
+	"widgettype":"urlwidget",
+	"options":{
+		"url":"tables.json"
+	}
+}

dist/examples/text.ui

@@ -0,0 +1,104 @@
+
+{
+	"widgettype":"VBox",
+	"options":{
+	},
+	"subwidgets":[
+		{
+			"widgettype":"Title1",
+			"options":{
+				"text":"Pic Viewer",
+				"dynsize":true,
+				"i18n":true
+			}
+		},
+		{
+			"widgettype":"Title2",
+			"options":{
+				"text":"Pic Viewer",
+				"dynsize":true,
+				"i18n":true
+			}
+		},
+		{
+			"widgettype":"Title3",
+			"options":{
+				"text":"Pic Viewer",
+				"dynsize":true,
+				"i18n":true
+			}
+		},
+		{
+			"widgettype":"Title4",
+			"options":{
+				"text":"Pic Viewer",
+				"dynsize":true,
+				"i18n":true
+			}
+		},
+		{
+			"widgettype":"Title5",
+			"options":{
+				"text":"Pic Viewer",
+				"dynsize":true,
+				"i18n":true
+			}
+		},
+		{
+			"widgettype":"Title6",
+			"options":{
+				"text":"Pic Viewer",
+				"dynsize":true,
+				"i18n":true
+			}
+		},
+		{
+			"widgettype":"Text",
+			"options":{
+				"text":"Pic Viewer",
+				"dynsize":true,
+				"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()"
+						}
+					]
+				}
+			]
+		}
+	]
+}

dist/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
+			},
+		]
+	}
+}

dist/examples/tree.ui

@@ -0,0 +1,7 @@
+
+{
+	"widgettype":"urlwidget",
+	"options":{
+		"url":"tree.json"
+	}
+}

dist/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"
+			}
+		}
+	]
+}

dist/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()"
+						}
+					]
+				}
+			]
+		}
+	]
+}

dist/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"
+					}
+				}
+			]
+		}
+	]
+}

dist/examples/video.ui

@@ -0,0 +1,10 @@
+
+{
+	"id":"videoplayer",
+	"widgettype":"Video",
+	"options":{
+		"autoplay":true,
+		"url":"http://kimird.com/video/sample-mp4-file.mp4",
+		"type":"video/mp4"
+	}
+}