基础组件
一些可以直接内嵌到页面的常用站点UI组件
站点内容相关的特有组件,都封装在 ui.portlets ,方便使用。
提供企业应用的 乐高积木, 方便自由组合,产生新的玩法。
1 通用
1.1 附件内容的展示 attachments
包括文件、文件夹、表单、表单库等各种内容类型:
ui.portlets.attachments(objs, request, show_image=True)
其中:
- objs:需要展示的内容对象,或者uid的列表
- show_image:如果是图片,是否直接显示图片的预览效果
1.2 路径 path
站点内容的路径:
ui.path(context=obj, enable=True, show_current=False, onclick=None)
其中:
- context是当前对象
- enable:是否可点击
- show_current:是否显示当前对象
- onclick: 点击行为,默认是全屏刷新,也可以传递 'inline' 内嵌刷新
1.3 删除确认组件 zopen.views:delete
这是一个载入式组件,可以绑定到其他组件上:
button = ui.button('delete') ui_delete = button.load_on('click', context, request, 'zopen.views:delete')
会抛出删除完成事件:
ui_delete.on('deleted', context, request, 'xxx.xxx:xxx')
1.4 评注区域 zopen.views:comments
root.call_script('zopen.views:comments', context, request) # 评注组件
1.5 二维码展示 zopen.views:qrcode
使用示例:
ui.link('二维码').on('click', context, request, 'zopen.views:qrcode', text="http://qq.com")
参数:
- text: 文本内容
1.6 标签组面板 tag_groups
展示标签组,点击之后提交到指定的表单(formid):
ui.portlets.tag_groups(context, request, formid='', expand=False) # 标签组面板
1.7 地址复制框 url_clipboard
显示内容的地址,可点击复制:
ui.portlets.url_clipboard(context, request, url, qrcode=True)
其中qrcode,表示是否显示二维码
1.9 团队人员 team
ui.portlets.team(context, request)
2 站点框架
2.2 站点搜索框 ui search_box
ui.portlets.search_box(context, request)
2.5 容器操作条 actions_bar
根据context的类型,渲染标准的头部区域(比如设置权限、视图切换)
ui.portlets.actions_bar(context, request, title, actions=None)
context可以是文件夹、表单夹,栏目 actions用于替换整个右侧按钮部分,可以传入ui组件,例::
btn = ui.button('test').on('click', '@somewhere') ui.portlets.actions_bar(context,request, title, actions=btn)
3 功能按钮
3.1 关注按钮
ui.portlets.subscribe(context, request)
3.2 授权按钮
ui.portlets.permission(context, request)
3.3 收藏按钮
ui.portlets.favorite(context, request, show_text=True) # 收藏按钮(参数show_text默认True)
3.4 新建流程
ui.portlets.new_dataitem(datacontainer, request, title='发起新流程')
3.6 插件选择组件
调用方法:
ui.link('test').on('click', context, request, 'zopen.site_config:run_setup', title='插件列表', prefix='plugs_', callback='xxx.xxx:xxx', callback_args={'aaa':1})
参数:
- title: 插件选择组件面板的标题;
- prefix: 组件将在应用软件包中搜索以prefix的值为前缀的脚本, 然后渲染为插件组件的选项;
- callback: 选择组件之后,回调的脚本,如果为空则直接调用所选脚本。
- callback_args: 回调脚本的参数,实际调用的时候,会附加一个 selected_script 参数,值为选中的插件代号
4 功能模块
4.1 会话组件 ui.message.conversation
会话组件可以用于聊天或通知。
打开与指定用户的聊天界面:
ui.message.conversation(pid, type='private')
打开指定的群聊界面:
ui.message.conversation(group_id, type='group')
打开一个通知的分类:
ui.message.conversation('sendme', type='notify')
4.2 会话列表组件 ui.message.conversation_list
会话列表组件,只显示会话标题和未读数等信息,会随着消息推送动态更新,但是本身没有更多功能,只能抛出一些事件,通过响应这些事件,可以实现一些联动效果。
初始化一个会话列表组件:
convs = ui.message.conversation_list(allowed_types=['notify'], init_channels=None)
其中 allowed_types 可以指定这个列表可以管理哪些类型的会话,例如传入 ['notify'] 则只管理通知会话。 通知会话不能关闭,聊天会话会在右侧显示一个关闭按钮,点击可以关闭,会抛出相应事件。
添加一个会话:
convs.add('users.admin', type=None)
会话的类型一般可以从会话 ID 自动推算,无需传入。如果初始化时列表组件 allowed_types 中没有这种类型,会自动扩展。 例如初始化时列表只能管理通知会话,但因为这里添加了一个私聊会话,所以这个列表最后也可以管理私聊类型的会话。
会话列表会抛出这些事件:
- channel:opened 在用户点击切换当前会话时触发,带有数据是 channel_name 和 channel_type
- channel:closed 在用户关闭一个会话时触发,携带数据与上面相同
会话列表组件响应这些事件:
- channel:opened 会动态切换当前会话
- channel:closed 会关闭指定会话
- mark_read 这个事件携带的数据与上述事件一致。收到这个事件后会话列表中如果有这个会话,其界面上显示的未读数会清零
4.3 会话管理器组件 ui.message.conversation_manager
会话管理器组件用于管理多个会话,实际上是个窗口管理器,现在的实现只能同时显示一个会话,并能根据事件不同,切换显示或动态创建不同会话。
初始化一个会话管理器:
manager = ui.message.conversation_manager(init_channels=None, allowed_types=['notify'])
参数及其含义与会话列表组件一致。
添加一些会话:
convs.add('users.admin', type=None) convs.add('sendme', type=None)
现在会话管理器中管理了两个会话,并且可以动态创建和管理私聊和通知类型的会话。
会话管理器会抛出这些事件:
- mark_read 指定的会话未读数已被清空
会话管理器会响应这些事件,并动态切换/创建/删除对应的会话界面:
- channel:opened
- channel:closed