大道至简，新一代企业应用无栈开发

平台之上，一种语言，可视化、脚本化、全端一体化开发

开发平台
Location: 开发平台 开发参考 前端框架

前端组件

在应用中开发UI组件，包括渲染、方法、事件

docutils document without title

前端组件是指通过扩展应用开发的组件，包含如下3要素：

  • 渲染组件：在web上展示这个组件
  • 组件事件：响应组件触发的事件
  • 组件方法：控制组件的方法

1   直接展示组件

1.1   展示自定义组件

通过脚本来定义一个组件:

result = ui.component('zopen.datacontainer:create_form',
    context, request, view, id="xxx")

其实类似于:

result = root.call_script(script_name,
    context=context, view=view, id='xxxx', *args, **kw)

id参数可选，用于调用方法和响应事件.

优势：

  1. 不会直接渲染，在最终使用的地方渲染
  2. 方便绑定事件，代码更可阅读

1.2   事件绑定

每个组件，可以定义自己的输出事件，调用方可以捕获处理方法:

component = ui.component('zopen.views:confirm', context, request, view)\
                     .on('ok', context, request, 'zopen.test:yes')\
                     .on('cancel', context, request, 'zopen.test:no')

1.3   调用组件方法

每个组件可以定义一组方法，可以直接通过python来调用。

组件的方法，目前内部也是通过事件实现。

可以通过主动触发组件的内部事件，触发组件调用方法:

view.select('#xxxx').trigger('my-method', **kw)

其中 kw 是调用传递的参数

2   事件载入组件

这是指并不直接展示，而是等用户点击某个按钮链接之后，再加载使用的组件。

比如：在用户点击链接按钮的时候，才去加载一个组件

让一个按钮在点击之后加载一个组件:

button = ui.button()
my_lazy_component = button.load_on('click', context, request,
    'xxx.xxx:xxx',
    id='my-com',
    **kw
    )
print button

load_on: 点击之后会加载组件。类似 on 方法：

  • 多了可选的id参数，如果没有id会自动生成id
  • 返回 滞后加载组件 my_lazy_component，他是button对象的一个子组件

和普通组件一样，通过可设置载入式组件事件捕获:

my_lazy_component.on('pasted', context, request, 'xxx.xxx:xxx', aaa='xxx', bbb='xxx')
my_lazy_component.on('xxx', ...)

3   开发自定义UI组件

通过应用软件包编写的扩展组件。

3.1   渲染展示组件

和标准 call_script 的界面输出组件类似，注意：

  1. 通常需要传入一个 id=None 参数，之后用这个参数：
    • 调用组件的方法
    • 捕获载入式组件事件
  2. 如果是按需加载的组件，通常需要通过 view.modal 来遮罩输出。

3.2   对外触发事件

扩展组件自身在发生事件的时候，通过组件的id向外触发事件:

view.select('#' + id).trigger(event_name, data)

3.3   对外提供调用方法

上面介绍，扩展组件也可以自定义一组方法，供外部调用（通过trigger方式调用）:

view.select('#test').trigger('save', {"text": "123"})

3.3.1   用后端事件处理脚本定义 on

也可以自定义一个组件特有的事件处理脚本和这个方法绑定:

view.select('#xxx').on('my-method', context, request, 'xxx.xxx:xxx', **kw)

3.3.2   用前端JavaScript来定义 method

将一个 前端js方法和一个方法名绑定:

view.select('#xxx').method('save', js_script)

这个method方法有2个参数：

  • name: 方法名
  • js_script: 一段JavaScript代码

这个js_script，可以使用event和data两个参数:

// 定义方法 view.select('#test').method('save', 'console.log(event, data)')

其中：

易开发，新一代企业应用开发平台

注册开发账号