布局ui.layout (网格布局)

一个布局容器包括多个组件横排, 每行12网格宽进行布局排列， 可以通过add来增加元素，设置宽度:

ui.layout()\
     .add(text, width=8)\
     .add(button, width=4)

面板ui.panel (增强的div)

一个面包包括多个组件，默认竖排:

panel = ui.panel(ui.text())

可将面板做成可折叠的:

panel.collapse(True)  # True表示初始折叠

可以动态展开一个面板内容:

panel.on('expand', context, request, 'zopen.aaa:ddd') # 展开一个面板的时候触发服务端请求

# 服务端脚本:zopen.aaa:ddd
view.closest('panel').get_body().set_content(....)

可以增加head, 参看 bootstrap章节

panel.header(ui.text('面板示例'))

可以在head右侧增加一个toolbox:

panel.toolbox(ui.botton('设置').on('click', context, request', 'zopen.seals:ad')) # 一个按钮
panel.toolbox(menu) # 增加一个menu

也可以增加一个footer:

panel.footer(ui.link('sss', url))

可以通过view定位和操作panel：

   # 填充body区域
  view.select('panel#xxx').get_body().set_content(....)
   # 填充header区域
  view.select('panel#xxx').get_header().set_content(....)
   # 填充footer区域
  view.select('panel#xxx').get_footer().set_content(....)
   # 填充toolbox区域
  view.select('panel#xxx').get_toolbox().set_content(....)

表格ui.grid (html: table)

创建应该2X3的表格，逐个单元设置内容:

ui.grid(2, 3)\
      .set(0,0,'2323')
      .set(0,1, ui.button('添加'))
      .set(0,2, ui.button('娃娃'))
      .set(1,0,'2323')
      .set(1,1, ui.button('添加'))
      .set(1,3, ui.button('娃娃'))

填充表头:

ui.grid(2, 3)\
      .set_header(0, ui.text('序号'))
      .set_header(1, ui.text('操作'))
      .set_header(2, ui.text('名称'))

如果需要设置表头样式，比如列宽等:

ui.grid(2,3).set_header(0, '序号', style="white-space: nowrap")

可以让grid可调整宽度的，方法为:

    ui.grid(2, 3, resizable=True)

如同希望调整的宽度，能在浏览器上保存下来，方法为:

     ui.grid(2, 3, resizable=True, store_key=MY_GRID_SETTING_KEY)

其中MY_GRID_SETTING_KEY是存放早浏览器上的设置key，需要保持唯一，通常直接用所在脚本的名字。

如果行数预先不确定，可以设置为0，根据实际行数自动增长:

ui.grid(0, 2)

设置手工拖放排序:

ui.grid(2, 3).dnd().on('drop', context, request, "zopen.test:test_dnd")

其中 test_dnd 会接受拖动前后的位置变化:

• from: 原始位置
• to: 结果的位置

典型处理脚本:

from_index = int(request['from'])
to_index = int(request['to'])

keys = list(container.ordered_keys())
value = keys[from_index]

keys.remove(value)
keys.insert(to_index, value)
container.set_order(keys)

可以保留文本中的html内容::

     ui.grid(2,0).set_header(0, '<a>aa</a>', escape=False)
                       .set(0, 0, '<font size="12">me</font>', escape=False)

按钮组ui.button_group

btns = ui.button_group(ui.button('A'), ui.button('A'))
btns.virtical().justify()

btns = ui.button_group()
btns.add(ui.button('A'))
btns.add(ui.button('B'))

下拉菜单ui.menu

直接让一个按钮成为下拉菜单:

menu = ui.menu(ui.link('aaa', url='google.com').on('click', context, request, 'zopen.test:tt').active(),
                 ui.separator(),
                 ui.link('bbb', url='google.com').on('click', context, request, 'zopen.test:tt'))

button.dropdown(menu)
button.dropup(menu)

也可以让按钮附加一个下拉菜单，成为一个split按钮:

button.on('click', context, request, 'xopn.xxx:asdfa').dropdown(menu)

列表组ui.list_group

列表组包括一组对象, 每个对象占一行，鼠标经过会高亮，选中行业可加亮。 参看 bootstrap章节

ui.list_group(ui.link('abc', href='').on('click', context, request, 'zopen.test:test').active(),
             ui.link('dd', href=''),
             )

可以做出比较复杂的列表组:

ui.list_group(
   ui.link('', href='#')\
         .add(ui.text('大标题'))\
         .add(ui.text('一些描述信息').discreet())\
         .on('click', context, request, 'zopen.test:testt')\
         .active(),

   ui.link('abc', href='').on('click', context, request, 'zopen.test:test'),
             )

对于2组链接，link2支持拖放:

links = [ui.link('item %s' % x, id="item-%s" % x) for x in range(1, 6)

links2 = [ui.link('item %s' % x, id="item-%s" % x).draggable(sort_group='xxxx')) for x in range(1, 6)]

list_group可以拖放排序，相见 事件机制中的 sort 事件

导航筛选 ui.nav

ui.nav(ui.link('title', url).on('click', context, request, 'zopen.test:tt').active(),
       ui.link('title 2', url).on('click', context, request, 'zopen.test:tt'),
      )

可以加上标题区:

ui.nav().title(ui.h1('易度工作平台'))

二级导航:

ui.nav(ui.link('title', url).on('click', context, request, 'zopen.test:tt').active(),
       ui.link('title 2', url).on('click', context, request, 'zopen.test:tt'),
      )\
      .title('过滤:')\
      .sub()

标签页ui.tabs

带切换页面的tab也导航:

ui.tabs()\
      .tab(ui.link('title', url="").active(), ui.panel())\
      .tab(ui.link('title', url="").on('click', context, request, 'zopen.test:tt'), ui.panel(), id='calendar')

可以换样式:

ui.tabs().style('light').align('right')

其中 on 用于动态加载页面内容，动态加载脚本可以这样写:

text = ui.text('this is page from server. :-)')
view.closest('tabs').active_panel().set_content(text)

其中：

• view.closest('tabs') 找到最近的一个tabs组件；
• .active_panel() 找到tabs当前活动的panel
• set_content(text) 设置panel的内容

可以看到每个组件包括ui方法来构建组件，和view命令来操作组件

也可以切换到另外的tab页:

view.closest('tabs').toggle_active(id='calendar')
view.closest('tabs').active_panel().set_content(text)

可以关闭某个tab页面:

view.select('tabs#tabs_id').remove_tab(tab_id)

也可以新增某个tab页面:

view.select('tabs#tabs_id').add_tab(
  ui.link('title', url=""), ui.panel(), id='calendar')

路径ui.breadcrumb

ui.breadcrumb(
      ui.link('node 2', url='').on('click', context, request, 'zopen.test:tt')
      ui.link('node 1', url='').active().on('click', context, request, 'zopen.test:tt'),
              )

树ui.tree

tree = ui.tree(ui.link('level1_root').icon('home').on('click', context, request, 'zopen.sales:aa')\
                     .add( ui.link('level1', id='aa').on('click', context, request, 'zopen.sael:bb').on('expand', context, request, 'zopen.test:aaa'))\
                     .add( ui.link('level2').on('click', context, request, 'zopen.sael:bb')\
                                .add(ui.link('level2 1').on('click', context, request, 'zopen.sales:cc'))
                           )
               )

默认tree是收缩的，可以将整个树都展开:

tree.expand()

对于动态展开的，在处理 on('expand', ``脚本的时候，需要附加展开的处理方法 ``on('expand', ，这里可以动态为该节点增加子节点:

tree = view.closest('tree')
tree.add_child('aa', uilink('level1', id="uid").on('click', context, request, 'zopen.sael:bb') )
tree.add_child('aa', uilink('level1', id="uid").on('click', context, request, 'zopen.sael:bb').on('expand', context, request, 'zopen.aa:ff') )

注意：如果某个节点设置了on expand，那么这个节点对上面的tree.expand就无效了。

展开子树:

tree = view.closest('tree').expand_child(‘tree_id’)