yumoqing/bricks

Fork 0

yumoqing 2d8e72a5d6 bugfix

2025-11-19 12:30:39 +08:00

3.3 KiB

Raw Blame History

bricks框架简介

bricks目标

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

bricks概念

控件与控件继承
事件以及事件处理
控件嵌套和页面组装

控件与控件继承

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

基本控件

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

容器控件

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

bricks已实现的控件请参看控件清单

控件扩展

如果现有的控件没法满足系统要求，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字典需要遵守事件要求

容器控件特有属性

subwidgets

数组属性，定义容器控件的子控件，每个元素定义一个子控件，子控件遵守控件的数据要素要求

应用开发开发

使用存放在服务器后台的.ui后缀的json格式文件来开发，每个.ui文件定义一个控件，支持基本控件和容器空间。

关于如何书写ui文件请参考UI文件格式

调试

ui文件可以直接调试，如在服务器根目录下的test目录下有一个hello.ui文件，就可以在浏览器中用url：https://sername/test/hello.ui调试

3.3 KiB Raw Blame History Unescape Escape