Dorado 9 : ControlTab(DCUG)

基本特性

作为TabBar或VerticalTabControl的Tab对象,ControlTab包括的基本的特性有:

支持标题设定,通过设定caption实现标题设定

xml范例:

    <TabControl>
      <ControlTab>
        <Property name="caption">标签1</Property>
      </ControlTab>
      <ControlTab>
        <Property name="caption">标签2</Property>
      </ControlTab>
      <ControlTab>
        <Property name="caption">标签3</Property>
      </ControlTab>
      <IFrameTab>
        <Property name="caption">标签4</Property>
      </IFrameTab>
    </TabControl>

页面效果:

IDE设计视图:

支持关闭快捷图标,通过closeable属性设定

xml范例:

    <TabControl>
      <ControlTab>
        <Property name="caption">标签1</Property>
      </ControlTab>
      <ControlTab>
        <Property name="caption">标签2</Property>
        <Property name="closeable">true</Property>
      </ControlTab>
      <ControlTab>
        <Property name="caption">标签3</Property>
        <Property name="closeable">true</Property>
      </ControlTab>
      <IFrameTab>
        <Property name="caption">标签4</Property>
      </IFrameTab>
    </TabControl>

如上我们将第二和第三个ControlTab的closeable属性设置为true

页面效果:

在页面中可以看到标签2和标签3中都有一个关闭图标,鼠标单击的时候就会自动关闭当前标签页,如上图,如果我们单击标签2的关闭标签页后的效果:

IDE设计视图:

支持禁用设定,通过disabled属性设置实现

xml范例:

    <TabControl>
      <ControlTab>
        <Property name="caption">标签1</Property>
      </ControlTab>
      <ControlTab>
        <Property name="caption">标签2</Property>
        <Property name="closeable">true</Property>
        <Property name="disabled">true</Property>
      </ControlTab>
      <ControlTab>
        <Property name="caption">标签3</Property>
        <Property name="closeable">true</Property>
      </ControlTab>
      <IFrameTab>
        <Property name="caption">标签4</Property>
      </IFrameTab>
    </TabControl>

如上我们将第二ControlTab的disabled属性设置为true

页面效果:

可以看到标签页2有一个很明显的灰化效果,这个时候单击标签页2是没有反应的,TabBar不会切换到标签页2上。

IDE设计视图:

支持隐藏设置,通过visible属性设置可见还是隐藏

xml范例:

    <TabControl>
      <ControlTab>
        <Property name="caption">标签1</Property>
      </ControlTab>
      <ControlTab>
        <Property name="caption">标签2</Property>
        <Property name="closeable">true</Property>
        <Property name="disabled">true</Property>
      </ControlTab>
      <ControlTab>
        <Property name="caption">标签3</Property>
        <Property name="closeable">true</Property>
      </ControlTab>
      <IFrameTab>
        <Property name="caption">标签4</Property>
        <Property name="visible">false</Property>
      </IFrameTab>
    </TabControl>

如上我们将第四ControlTab的visible属性设置为false

页面效果:

可以看到标签页4已经不可见了

IDE设计视图:

支持图标设定,通过icon属性设置

xml范例:

    <TabControl>
      <ControlTab>
        <Property name="caption">标签1</Property>
        <Property name="icon">url(skin>common/icons.gif) -220px -60px</Property>
      </ControlTab>
      <ControlTab>
        <Property name="caption">标签2</Property>
        <Property name="icon">url(skin>common/icons.gif) -40px -40px</Property>
      </ControlTab>
      <ControlTab>
        <Property name="caption">标签3</Property>
        <Property name="icon">url(skin>common/icons.gif) -200px -120px</Property>
      </ControlTab>
      <IFrameTab>
        <Property name="caption">标签4</Property>
        <Property name="icon">url(images/anchor.gif)</Property>
      </IFrameTab>
    </TabControl>

其中icon的属性设定,我们用了两种格式:

  • 格式1:url(skin>common/*.*  用于获取dorado自带的系统图标(定义办法参考基础教程的04. 常用技巧和API(SEFC)中的使用偏移量来定义图标)
  • 格式2:url(xxx/xxx/xxx.gif)  这是获取webcontent目录下的图片资源,根据相对路径设置

页面效果:

IDE设计视图:

支持标签页系统提示设置,通过tip属性设定

xml范例:

    <TabControl>
      <ControlTab>
        <Property name="caption">标签1</Property>
        <Property name="icon">url(skin>common/icons.gif) -220px -60px</Property>
        <Property name="tip">这是标签页1的系统提示</Property>
      </ControlTab>
      <ControlTab>
        <Property name="caption">标签2</Property>
        <Property name="icon">url(skin>common/icons.gif) -40px -40px</Property>
        <Property name="tip">这是标签页2的系统提示</Property>
      </ControlTab>
      <ControlTab>
        <Property name="caption">标签3</Property>
        <Property name="icon">url(skin>common/icons.gif) -200px -120px</Property>
      </ControlTab>
      <IFrameTab>
        <Property name="caption">标签4</Property>
        <Property name="icon">url(images/anchor.gif)</Property>
      </IFrameTab>
    </TabControl>

页面效果:

IDE设计视图:

特有特性

ControlTab可以在内部添加子控件,如果是单个控件,一般来说自己在ControlTab中添加子节点就可以,如:

XML格式:

    <TabControl>
      <ControlTab>
        <Property name="caption">标签1</Property>
      </ControlTab>
      <ControlTab>
        <Property name="caption">标签2</Property>
        <Grid id="grid1"/>
      </ControlTab>
      <ControlTab>
        <Property name="caption">标签3</Property>
        <AutoForm id="form1"/>
      </ControlTab>
      <IFrameTab>
        <Property name="caption">标签4</Property>
      </IFrameTab>
    </TabControl>

但是如果希望在一个标签页下展示多个控件,那么这些控件的布局控制我们就需要通过布局管理器辅助实现了,由于ControlTab本身没有布局管理概念,则我们需要在ControlTab中添加一个支持布局管理的控件容器,如Container:

XML代码如下:

    <TabControl>
      <ControlTab>
        <Property name="caption">标签1</Property>
        <Container>
          <ToolBar layoutConstraint="top"/>
          <AutoForm layoutConstraint="top"/>
          <Grid layoutConstraint="center"/>
        </Container>
      </ControlTab>
      <ControlTab>
        <Property name="caption">标签2</Property>
      </ControlTab>
      <ControlTab>
        <Property name="caption">标签3</Property>
      </ControlTab>
      <IFrameTab>
        <Property name="caption">标签4</Property>
      </IFrameTab>
    </TabControl>