Dorado 9 : ControlTab(DCUG)

This page last changed on Dec 06, 2012 by william.jiang@bstek.com.

基本特性

作为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>

Attachments:

ControlTab.PNG (image/png)
ControlTabCaption.PNG (image/png)
ControlTabCloseablePreview.png (image/png)
ControlTabCloseablePreview2.png (image/png)
ControlTabCloseableDesign.png (image/png)
ControlTabDisablePreview.png (image/png)
ControlTabDisabledDesign.png (image/png)
ControlTabVisiblePreview.png (image/png)
ControlTabVisiblePreview.png (image/png)
ControlTabVisibleDesign.png (image/png)
ControlTabSubControl1.PNG (image/png)
ControlTabSubControl2.PNG (image/png)
ControlTabIconPreview.png (image/png)
ControlTabIconDesign.png (image/png)
ControlTabTipPreview.png (image/png)
ControlTabTipDesign.png (image/png)