107 lines
3.3 KiB
Markdown
107 lines
3.3 KiB
Markdown
# bricks框架简介
|
||
## 目录
|
||
* bricks目标
|
||
* bricks概念
|
||
* bricks开发方法
|
||
* bricks运行
|
||
|
||
## bricks目标
|
||
* 无前端代码或极少代码
|
||
* 降低前端开发技术难度
|
||
* 数据驱动
|
||
* 常用控件包装
|
||
* 纯json开发
|
||
|
||
## bricks概念
|
||
* 控件与控件继承
|
||
* 事件以及事件处理
|
||
* 控件嵌套和页面组装
|
||
|
||
### 控件与控件继承
|
||
bricks采用控件这一概念来描述web GUI的显示部件，每个控件均映射到一个html
|
||
的标签类型的一个javascript类。每个控件均可以实例化，并可在页面显示。
|
||
控件分为：基本控件，容器控件。
|
||
|
||
* 基本控件
|
||
基本控件是一个原子控件，不能有子控件。
|
||
* 容器控件
|
||
容器控件可以有子控件，bricks通过在容器控件添加子控件，以及在子容器控件中
|
||
在添加子子控件的方式来构造复杂的web页面。
|
||
|
||
控件的详细介绍请参看[控件说明](widgets.md)
|
||
|
||
### 控件扩展
|
||
如果现有的控件没法满足系统要求，bricks支持控件扩展，控件扩展需遵守：
|
||
* 控件class继承自某一个控件的class
|
||
|
||
* 按照需求实现控件逻辑
|
||
|
||
* 在需要的地方用this.dispatch触发此控件的事件
|
||
|
||
假设需要扩展一个名字叫ExtContainer的控件
|
||
```
|
||
bricks.ExtContainer = class extends bricks.VBox {
|
||
constructor(opts){
|
||
super(opts);
|
||
/* 新控件的创建代码 */
|
||
}
|
||
......
|
||
/* 对象的其他方法，在需要的时候，在某个方法中，使用this.dispatch('new_event', data)方法引发事件 */
|
||
}
|
||
bricks.register('ExtContainer', bricks.ExtContainer); /* 注册新控件 */
|
||
```
|
||
新控件的使用，example.ui
|
||
```
|
||
{
|
||
"widgettype":"ExtContainer",
|
||
"options":{
|
||
....
|
||
},
|
||
"subwidgets":[
|
||
...
|
||
],
|
||
"binds":[
|
||
{
|
||
"wid":"self",
|
||
"event":"new_event",
|
||
"actiontype":"urlwidget",
|
||
"target":"some_container",
|
||
"options":{
|
||
"url":"{{entire_url('./some_ui.ui')}}"
|
||
}
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
### 事件以及事件处理
|
||
每个控件都能触发所映射dom元素的事件，以及控件js类的成员函数以及祖先类的
|
||
成员函数中dispatch出的事件
|
||
|
||
所以bricks控件的事件来源于两类，dom元素原生事件以及控件类中创造的事件。
|
||
两类事件处理方式相同。
|
||
|
||
### 控件表达形式
|
||
在服务器的后台，以json文件的形式表达控件，每个ui文件定义一个控件，
|
||
对于容器控件，可以在ui文件中的subwidgets子属性中为此控件添加子控件
|
||
|
||
#### id属性
|
||
字符串属性，定义控件的id，让控件可以用getWidgetById找到，如果不给定，系统会自动生成一个id
|
||
#### options属性
|
||
字典属性，创建控件时的选项，每个控件可接受的选项请参看控件选项说明
|
||
#### binds属性
|
||
数组属性，定义零到多个事件响应，每个bind字典需要遵守[事件](event.md)要求
|
||
#### 容器控件特有属性
|
||
##### subwidgets
|
||
数组属性，定义容器控件的子控件，每个元素定义一个子控件，子控件遵守控件的数据要素要求
|
||
|
||
## 开发
|
||
使用存放在服务器后台的.ui后缀的json格式文件来开发，每个.ui文件定义一个控件， 支持基本控件和容器空间。
|
||
|
||
关于如何书写ui文件请参考[UI文件格式](descjson.md)
|
||
|
||
## 调试
|
||
ui文件可以直接调试，如在服务器根目录下的test目录下有一个hello.ui文件，
|
||
就可以在浏览器中用url：https://sername/test/hello.ui调试
|
||
|