高级选项卡（win.ui.tabs）使用指南

aardio 有两种不同的选项卡：

简单选项卡控件（ classic tab control ）

简单选项卡是由 win.ui.ctrl.tab 类库基于系统 SysTabControl32 控件实现的选项卡。可在窗体可视化设计器上直接拖放添加选项卡控件，控件创建参数中指定的 cls 类名为 "tab"。

关于简单选项卡的用法请参考: 简单选项卡使用指南
高级选项卡（ tab plus ）

高级选项卡由 win.ui.tabs 类库实现。高级选项卡并不是一个控件，而是用于管理 plus 控件（ win.ui.ctrl.plus ）组成的按钮列表（ tab list ）以实现选项卡效果的管理组件，并由 custom 控件（ win.ui.ctrl.custom ）创建的容器控件（ tab panel ）加载并管理一组显示内容的子窗口（ tab forms ）。

下面介绍高级选项卡的用法。

创建高级选项卡的步骤

创建高级选项卡。

要点：
- 在窗体上添加两个 plus 控件 mainForm.tabPlus1, mainForm.tabPlus2 ，这些 plus 控件显示在选项卡头部（ header ）位置作为切换页面的按钮，并且这被指指的 plus 控件将被用于确定选项卡的外观与排列方向。如果后继用代码添加更多选项卡则会根据 mainForm.tabPlus1, mainForm.tabPlus2 获取的控件属性与样式作为模板创建新的 plus 控件。
- 在窗体上添加一个 custom 控件 mainForm.tabPanel 作为页面容器，用于在选项卡的客户区（ client area ）加载子窗口以显示不同的页面内容。
示例代码：
```
import win.ui;
import win.ui.tabs;
/*DSG{{*/
var mainForm = win.form(text="多标签页窗口示例";right=600;bottom=400)
mainForm.add( 
tabPlus1={cls="plus";text="标签页 1";left=149;top=2;right=265;bottom=36;align="left";color=32768;dl=1;dt=1;font=LOGFONT(h=-16);iconStyle={align="left";font=LOGFONT(h=-19;name='FontAwesome');padding={left=12;top=4}};iconText='\uF00A';notify=1;paddingLeft=1;paddingRight=1;paddingTop=3;textPadding={left=39;bottom=1};x=0.5;y=0.2;z=2};
tabPlus2={cls="plus";text="标签页 2";left=14;top=2;right=148;bottom=36;align="left";color=32768;dl=1;dt=1;font=LOGFONT(h=-16);iconStyle={align="left";font=LOGFONT(h=-19;name='FontAwesome');padding={left=12;top=4}};iconText='\uF11C ';notify=1;paddingLeft=1;paddingRight=1;paddingTop=3;textPadding={left=39;bottom=1};x=0.5;y=0.2;z=3};
tabPanel={cls="custom";left=2;top=37;right=600;bottom=401;bgcolor=16777215;db=1;dl=1;dr=1;dt=1;z=1};
)
/*}}*/

//创建高级选项卡，参数指定两个选项卡按钮并用以确定选项卡头部（ header ）按钮的外观样式与排列方向。
var tabs = win.ui.tabs( 
    mainForm.tabPlus1,//选项卡头部按钮1
    mainForm.tabPlus2,//选项卡头部按钮2
);
```
参数中的 mainForm.tabPlus1， mainForm.tabPlus2 指定选项卡最初的 2 个按钮，这 2 个按钮将作为模板控件用于确定选项卡按钮的排列方向、间距、默认外观样式。可以通过 tabs.tabList 属性访问包含所有选项卡按钮的数组。

高级选项卡会自动查找紧贴在选项卡按钮（ mainForm.tabPlus1， mainForm.tabPlus2 ）一侧的 custom 控件（优先选择未禁用、未隐藏、未设置透明的 custom 控件，上面的示例会 mainForm.tabPanel ）作为页面容器（ tab panel ）。可以通过 tab.panel 属性访问页面容器控件。tabs.panel 用于确定选项卡的内容区域（ client area ）。
设置选项卡交互样式

创建高级选项卡对象 tabs 以后，我们可以如下设置 tabs 的外观样式。
```
tabs.skin({
    background={
        active=0xFFFFFFFF;
        default=0x00FFFFFF;
        hover=0x38FFFFFF
    };
    color={
        default=0xFF0F0000; 
    };
    checked={
        background={default=0xFFFFFFFF;};
        color={default=0xFF42A875;};
    }
})
```
这个 skin 函数的用法与 plus 控件的 skin 函数完全相同，win.ui.tabs 会将上面的样式逐一应用到每一个选项卡按钮。

相关文档:
- plus 控件使用指南
- plus 控件参考手册

添加选项卡与加载子窗口 #

创建高级选项卡对象 tabs 以后，我们可以如下使用 tabs 对象创建新的选项卡按钮，并为每个选项卡按钮绑定一个子窗口用于显示选项卡内容。

示例：

// 添加新的选项卡按钮。
var tabIndex = tabs.add({
    text="标签页3";
    iconText='\uF0E0';//选项卡字体图标
})

// 添加新的子页面，第一个参数指定要绑定的选项卡按钮索引。
var formPage1  = tabs.loadForm(1)

// formPage1 就是一个 winform，用法与 winform.add 相同
formPage1.add({
    button1 = { 
            cls="button";
            text="按钮1";
            left=20;top=20;right=120;bottom=50;
    };
})

//设置当前选项卡索引为 1 。
tabs.selIndex = 1;

我们使用 tabs.add 函数增加新的选项卡。要特别注意 tabs.add() 的返回值是一个表示新选项索引的数值，也就是说 tabs.add 返回的是 tabIndex 。

并且使用 tabs.loadForm 函数增加新的子窗口，这个函数的原型如下：

tabs.loadForm( tabIndex,formOrFormPathOrFormPropertiesTableOrNull ) tabs.loadForm( formOrFormPathOrFormPropertiesTableOrNull )

这个函数非常特别，省略 tabIndex 参数时可以同时省略参数占位。aardio 中其他函数省略的参数如果不是最后一个参数一般仍然需要写一个逗号以保持参数位置不变。

tabIndex 参数指定了子窗口要绑定的选项卡按钮索引。如果不指定索引，则会自动跳过已绑定子窗体的选项卡，添加到下一个还没有绑定子窗体的选项卡。也就是说省略索引则索引参数将被默认设为 #tabs.forms + 1 。

@formOrFormPathOrFormPropertiesTableOrNull 这个参数允许指定不同类型的参数：

form: 指定一个创建好的 win.form 窗口对象。
formPath: 指定一个加载并返回 win.form 窗口对象的 aardio 代码文件路径。
formPropertiesTable: 直接指定一个表对象（table）作为创建 win.form 窗口对象的属性表参数。
null: 不指定参数，保持 null 值则默认创建一个窗口。

tabs.loadForm( tabIndex ) 返回的是 win.form 窗体对象。

tabs.loadForm 函数返回 winform（ win.form 对象）窗口对象。

tabs 加载的所有子窗口被放在 tabs.forms 这个数组对象中。

用户点击选项卡按钮时，高级选项卡会在 tab.panel 这个页面容器中显示对应的子窗口。具体来说用户点击并切换到 tabs.tabList[1] 则会在 tab.panel 显示 tabs.forms[1] 这个子窗口。

高级选项卡完整示例

创建与使用高级选项卡的完整示例代码如下：

import win.ui;
import win.ui.tabs;
/*DSG{{*/
var mainForm = win.form(text="多标签页窗口示例";right=600;bottom=400)
mainForm.add( 
tabPlus1={cls="plus";text="标签页 1";left=149;top=2;right=265;bottom=36;align="left";color=32768;dl=1;dt=1;font=LOGFONT(h=-16);iconStyle={align="left";font=LOGFONT(h=-19;name='FontAwesome');padding={left=12;top=4}};iconText='\uF00A';notify=1;paddingLeft=1;paddingRight=1;paddingTop=3;textPadding={left=39;bottom=1};x=0.5;y=0.2;z=2};
tabPlus2={cls="plus";text="标签页 2";left=14;top=2;right=148;bottom=36;align="left";color=32768;dl=1;dt=1;font=LOGFONT(h=-16);iconStyle={align="left";font=LOGFONT(h=-19;name='FontAwesome');padding={left=12;top=4}};iconText='\uF11C ';notify=1;paddingLeft=1;paddingRight=1;paddingTop=3;textPadding={left=39;bottom=1};x=0.5;y=0.2;z=3};
tabPanel={cls="custom";left=2;top=37;right=600;bottom=401;bgcolor=16777215;db=1;dl=1;dr=1;dt=1;z=1};
)
/*}}*/

//创建高级选项卡，参数指定两个选项卡按钮并用以确定选项卡头部按钮的外观样式与排列方向。
var tabs = win.ui.tabs( 
    mainForm.tabPlus1,//选项卡头部按钮1
    mainForm.tabPlus2,//选项卡头部按钮2
);

// 配置选项卡外观样式风格
tabs.skin({
    background={
        active=0xFFFFFFFF;
        default=0x00FFFFFF;
        hover=0x38FFFFFF
    };
    color={
        default=0xFF0F0000; 
    };
    checked={
        background={default=0xFFFFFFFF;};
        color={default=0xFF42A875;};
    }
})


// 添加新的选项卡按钮。
var tabIndex = tabs.add({
    text="标签页3";
    iconText='\uF0E0';//选项卡字体图标
})

// 添加新的子页面，第一个参数指定要绑定的选项卡按钮索引。
var formPage1  = tabs.loadForm(1)

// formPage1 就是一个 winform，用法与 winform.add 相同
formPage1.add({
   button1 = { 
        cls="button";
        text="按钮1";
        left=20;top=20;right=120;bottom=50;
   };
})

// 响应子窗体的按钮事件
formPage1.button1.oncommand = function(){
    formPage1 .msgbox("hello")
}


// 添加新的子页面，第一个参数指定要绑定的选项卡按钮索引。
var formPage2  = tabs.loadForm(2)

// formPage2 就是一个 winform，用法与 winform.add 相同。
formPage2.add({
   edit2 = { 
        cls="edit"; 
        left=20;top=20;right=580;bottom=350;
   }
})

//设置当前选项卡索引为 1 。
tabs.selIndex = 1;

// 显示窗口
mainForm.show();

// 运行消息循环
win.loopMessage();

Markdown 格式