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

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

基础组件

一些可以直接内嵌到页面的常用站点UI组件

docutils document without title

站点内容相关的特有组件,都封装在 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.8   标签 tags

某个内容的标签设置:

ui.portlets.tags(context, request)

1.9   团队人员 team

ui.portlets.team(context, request)

2   站点框架

2.4   应用导航条 app_navbar

ui.portlets.app_navbar(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_namechannel_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