# bricks框架简介
## 目录
* bricks目标
* bricks概念
* bricks开发方法
* bricks运行

## bricks目标
* 无前端代码或极少代码
* 降低前端开发技术难度
* 数据驱动
* 常用控件包装
* 纯json开发

## bricks概念
* 控件与控件继承
* 事件以及事件处理
* 控件嵌套和页面组装

### 控件与控件继承
bricks采用控件这一概念来描述web GUI的显示部件，每个控件均映射到一个html
的标签类型的一个javascript类。每个控件均可以实例化，并可在页面显示。
控件分为：基本控件，容器控件。控件有内置方法，也能触发事件。

* 基本控件

基本控件是一个原子控件，不能有子控件。

* 容器控件

容器控件可以有子控件，bricks通过在容器控件添加子控件，以及在子容器控件中
在添加子子控件的方式来构造复杂的web页面。

bricks已实现的控件请参看[控件清单](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调试