main
yumoqing 2024-05-13 12:47:08 +08:00
parent 0ae53445e0
commit 4f5a391e03
12 changed files with 429 additions and 6 deletions

View File

@ -211,7 +211,7 @@ bricks.buildEventHandler = async function(w, desc, event){
return bricks.buildBricksHandler(w, target, rtdata, desc);
break;
case 'registerfunction':
return bricks.buildRegisterFunction(w, target, rtdata, desc);
return bricks.buildRegisterFunctionHandler(w, target, rtdata, desc);
break;
case 'method':
return bricks.buildMethodHandler(w, target, rtdata, desc);
@ -311,7 +311,7 @@ bricks.buildBricksHandler = function(w, target, rtdata, desc){
return _buildWidget.bind(w, target, target, desc.mode || 'replace', options);
}
bricks.buildRegisterFunctionHandler = function(w, target, rtdata, desc){
var f = objget(registerfunctions, desc.rfname);
var f = bricks.RF.get(desc.rfname);
if( ! f){
bricks.debug('rfname:', desc.rfname, 'not registed', desc);
return null;

View File

@ -1,11 +1,19 @@
var bricks = window.bricks || {};
class RegisterFunction {
constructor(){
this.rfs = {};
}
register(n, f){
bricks.extend(this.rfs, {n:f});
this.rfs[n] = f;
}
get(n){
return objget(this.rfs, n);
try {
return this.rfs[n];
} catch(e){
return null;
}
}
}
bricks.RF = new RegisterFunction();

View File

@ -1,12 +1,12 @@
# 创建控件的Json文件格式说明
Bricks在服务器端使用Json文件格式存储控件描述文件前端获得json文件后转化为json对象并用json对象调用widgetBuild函数创建Bricks控件。
Bricks在服务器端使用Json文件格式存储控件描述文件前端获得json文件后转化为json对象并用json对象调用widgetBuild函数创建Bricks控件。
控件描述json文件必须含有“widgettype” 和”options“两个属性。“subwidgets”属性用来定义此控件包含的子控件。“binds”用于定义此控件或其子控件的事件处理
## widgettype说明
widgettype是一个字符串属性。其值为Bricks中的所有控件类型或"urlwidget"
可用的控件类型可以在[控件类型清单](widgettypes.md)中查找
可用的控件类型可以在[控件类型清单](widgets.md)中查找
## options
对象类型每个控件有特定的options属性清参看每个控件的说明

38
examples/aaa.ui 100644
View File

@ -0,0 +1,38 @@
{
"widgettype":"VBox",
"options":{},
"subwidgets":[
{
"id":"btn1",
"widgettype":"Button",
"options":{
"label":"press me"
}
},
{
"id":"txt1",
"widgettype":"Text",
"options":{
"otext":"I will dispatch a event when btn1 pressed",
"i18n":true
}
}
],
"binds":[
{
"wid":"btn1",
"event":"click",
"actiontype":"script",
"target":"txt1",
"script":"this.set_text('estrdyfguihojkl')",
"dispatch_event":"gpc"
},
{
"wid":"txt1",
"event":"gpc",
"actiontype":"script",
"target":"self",
"script":"alert('yield');"
}
]
}

View File

@ -0,0 +1,37 @@
{
"widgettype":"VBox",
"options":{},
"subwidgets":[
{
"id":"btn1",
"widgettype":"Button",
"options":{
"label":"press me"
}
},
{
"id":"txt1",
"widgettype":"Text",
"options":{
"otext":"I will dispatch a event when btn1 pressed",
"i18n":true
}
}
],
"binds":[
{
"wid":"btn1",
"event":"click",
"actiontype":"event",
"target":"txt1",
"dispatch_event":"gpc"
},
{
"wid":"txt1",
"event":"gpc",
"actiontype":"script",
"target":"self",
"script":"alert('yield');"
}
]
}

View File

@ -0,0 +1,6 @@
{
"widgettype":"Text",
"options":{
"text":"urlwidget insert mode text"
}
}

View File

@ -0,0 +1,85 @@
{
"widgettype":"VBox",
"options":{
"width":"100%",
"height":"100%"
},
"subwidgets":[
{
"widgettype":"HBox",
"options":{
"height":"40px"
},
"subwidgets":[
{
"id":"changetext",
"widgettype":"Button",
"options":{
"dynsize":false,
"width":"80px",
"i18n":true,
"label":"Change text"
}
},
{
"id":"smaller",
"widgettype":"Button",
"options":{
"dynsize":false,
"width":"80px",
"i18n":true,
"label":"Small size"
}
},
{
"id":"larger",
"widgettype":"Button",
"options":{
"dynsize":false,
"width":"80px",
"i18n":true,
"label":"larger size"
}
}
]
},
{
"widgettype":"Filler",
"options":{},
"subwidgets":[
{
"id":"text_1",
"widgettype":"Text",
"options":{
"dynsize":true,
"text":"original text"
}
}
]
}
],
"binds":[
{
"wid":"changetext",
"event":"click",
"actiontype":"method",
"target":"text_1",
"params":"new text",
"method":"set_text"
},
{
"wid":"smaller",
"event":"click",
"actiontype":"method",
"target":"app",
"method":"textsize_smaller"
},
{
"wid":"larger",
"event":"click",
"actiontype":"method",
"target":"app",
"method":"textsize_bigger"
}
]
}

View File

@ -0,0 +1,6 @@
{
"widgettype":"Text",
"options":{
"text":"urlwidget replace mode text"
}
}

115
examples/rf.html 100644
View File

@ -0,0 +1,115 @@
<link rel="stylesheet" href="http://localhost:80/bricks/css/bricks.css">
<!-- support IE8 (for Video.js versions prior to v7) -->
<script src="http://localhost:80/bricks/3parties/videojs-ie8.min.js"></script>
</head>
<body>
<script src="http://localhost:80/bricks/3parties/marked.min.js"></script>
<script src="http://localhost:80/bricks/3parties/xterm.js"></script>
<script src="http://localhost:80/bricks/3parties/video.min.js"></script>
<script src="http://localhost:80/bricks/3parties/recorder.wav.min.js"></script>
<!--- <script src="http://localhost:80/bricks/3parties/videojs-contrib-hls.min.js"></script> --->
<script src="http://localhost:80/bricks/bricks.js"></script>
<script>
/*
if (bricks.is_mobile()){
alert('wh=' + window.innerWidth + ':' + window.innerHeight);
}
*/
var myfunc = function(params){
this.set_text(params.text);
}
bricks.RF.register('setText', myfunc);
const opts = {
"widget": {
"widgettype":"VBox",
"options":{
"width":"100%",
"height":"100%"
},
"subwidgets":[
{
"widgettype":"HBox",
"options":{
"height":"40px"
},
"subwidgets":[
{
"id":"changetext",
"widgettype":"Button",
"options":{
"dynsize":false,
"width":"80px",
"i18n":true,
"label":"Change text"
}
},
{
"id":"smaller",
"widgettype":"Button",
"options":{
"dynsize":false,
"width":"80px",
"i18n":true,
"label":"Small size"
}
},
{
"id":"larger",
"widgettype":"Button",
"options":{
"dynsize":false,
"width":"80px",
"i18n":true,
"label":"larger size"
}
}
]
},
{
"widgettype":"Filler",
"options":{},
"subwidgets":[
{
"id":"text_1",
"widgettype":"Text",
"options":{
"dynsize":true,
"text":"original text"
}
}
]
}
],
"binds":[
{
"wid":"changetext",
"event":"click",
"actiontype":"registerfunction",
"target":"text_1",
"params":{
"text":"new text"
},
"rfname":"setText"
},
{
"wid":"smaller",
"event":"click",
"actiontype":"method",
"target":"app",
"method":"textsize_smaller"
},
{
"wid":"larger",
"event":"click",
"actiontype":"method",
"target":"app",
"method":"textsize_bigger"
}
]
} };
const app = new bricks.App(opts);
app.run();
</script>
</body>
</html>

View File

@ -0,0 +1,38 @@
{
"widgettype":"VBox",
"options":{},
"subwidgets":[
{
"id":"btn1",
"widgettype":"Button",
"options":{
"label":"press me"
}
},
{
"id":"txt1",
"widgettype":"Text",
"options":{
"otext":"I will dispatch a event when btn1 pressed",
"i18n":true
}
}
],
"binds":[
{
"wid":"btn1",
"event":"click",
"actiontype":"script",
"target":"txt1",
"script":"this.set_text('estrdyfguihojkl')",
"dispatch_event":"gpc"
},
{
"wid":"txt1",
"event":"gpc",
"actiontype":"script",
"target":"self",
"script":"alert('yield');"
}
]
}

2
examples/test.ws 100644
View File

@ -0,0 +1,2 @@
resp = 'resp:' + ws_data
ws_pool.sendto(resp)

View File

@ -0,0 +1,88 @@
{
"widgettype":"VBox",
"options":{
"width":"100%",
"height":"100%"
},
"subwidgets":[
{
"widgettype":"HBox",
"options":{
"height":"40px"
},
"subwidgets":[
{
"id":"replace",
"widgettype":"Button",
"options":{
"width":"80px",
"i18n":true,
"label":"replace mode"
}
},
{
"id":"insert",
"widgettype":"Button",
"options":{
"width":"80px",
"i18n":true,
"label":"insert mode"
}
},
{
"id":"append",
"widgettype":"Button",
"options":{
"width":"80px",
"i18n":true,
"label":"append mode"
}
}
]
},
{
"id":"main",
"widgettype":"Filler"
}
],
"binds":[
{
"wid":"replace",
"event":"click",
"actiontype":"urlwidget",
"target":"main",
"options":{
"url":"{{entire_url('replace_text.ui')}}",
"params":{
"text":"Insert before"
}
}
},
{
"wid":"insert",
"event":"click",
"actiontype":"urlwidget",
"target":"main",
"options":{
"url":"{{entire_url('insert_text.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"
}
]
}