WPS表格加载项之CustomUI

WPS表格加载项开发笔记

CustomUI标准概述

CustomUI标准是一套基于XML的界面定制规范，主要用于微软Office、WPS等办公软件的功能区（Ribbon）界面开发，也延伸至WinForms、Web应用等领域。参考微软官网

最简UI讲解

<customUI xmlns="http://schemas.microsoft.com/office/2006/01/customui" onLoad="OnAddinLoad">
    <ribbon startFromScratch="false">
        <tabs>
            <tab id="Ui_001" label="示例功能区">
                <group id="Ui_002" >
                    <!-- 这是一个注释 -->
                    <button id="Ui_003" label="示例按钮" size="large" visible="true" imageMso="HappyFace" />
                </group>
            </tab>
        </tabs>
    </ribbon>
</customUI>

以上代码将在WPS最上方菜单的最右边显示示例功能区标题的功能区，其中包含一个图标为内置图标HappyFace的按钮

customUI标签中包含了命名空间和加载回调函数，这些都是在项目创建时配置好的
ribbon标签中startFromScratch属性表示是否隐藏内置功能区（从开始到视图以及会员专享）
tabs标签可包含多个功能区
tab标签为一个功能区
group标签包含了功能区中显示的所有控件
button标签为一个按钮，visible属性控制显示，size属性控制大小
<!-- 这是一个注释 -->标签包含注释信息，由<!--、注释内容、-->组成

常用控件

button

<button id="Ui_003" label="示例按钮" size="large" visible="true" imageMso="HappyFace" screentip="示例提示标题" supertip="示例提示内容"/>
<button id="Ui_004" label="示例按钮2" size="normal" visible="true" imageMso="HappyFace" screentip="示例提示标题" supertip="示例提示内容"/>
<button id="Ui_005" label="示例按钮3" size="normal" visible="false" imageMso="HappyFace" screentip="示例提示标题" supertip="示例提示内容"/>

button控件为一个按钮，包含以下属性

• id：按钮的唯一标识符
• label：按钮显示的文字
• visible：是否显示，false为隐藏，true为显示
• size：large为大，normal为正常
• screentip：提示内容的标题
• supertip：提示内容

checkBox

<checkBox id="checkBox_1" label="复选框" visible="true" supertip="示例提示内容" />
<checkBox id="checkBox_2" label="复选框2" visible="false" supertip="示例提示内容" />
<checkBox id="checkBox_3" label="复选框3" visible="true" supertip="示例提示内容" />

checkBox控件为一个复选框，包含如下属性

• id：复选框的唯一标识符
• label：复选框显示的文字
• visible：是否显示，false为隐藏，true为显示
• supertip：提示的内容

separator

<button id="Ui_003" label="示例按钮" size="large" visible="true" imageMso="HappyFace" screentip="示例提示标题" supertip="示例提示内容"/>

<separator id="separator_1" />

<checkBox id="checkBox_1" label="复选框" visible="true" supertip="示例提示内容" />

separator控件为一个分隔符，只有id属性作为分隔符的唯一标识符

comboBox

<comboBox id="comboBox_1" label="组合框" visible="true" supertip="示例提示内容">
    <item id="item1" label="选项1" />
    <item id="item2" label="选项2" />
</comboBox>

comboBox控件为一个组合框，有多个选项，内容不一定为选项，包含如下属性

• id：组合框或选项的唯一标识符
• label：组合框或选项显示的文字
• visible：是否显示，false为隐藏，true为显示
• supertip：提示的内容

dropDown

<dropDown id="dropDown_1" label="下拉列表" visible="true" supertip="示例提示内容">
    <item id="item1" label="选项1" />
    <item id="item2" label="选项2" />
    <item id="item3" label="选项3" />
</dropDown>

dropDown控件为一个下拉列表，有多个选项，内容一定为选项，包含如下属性

• id：下拉列表或选项的唯一标识符
• label：下拉列表或选项显示的文字
• visible：是否显示，false为隐藏，true为显示
• supertip：提示的内容

menu

<menu id="menu_1" label="菜单" visible="true" size="normal" screentip="示例提示标题" supertip="示例提示内容">
    <button id="button_1" label="按钮1" />
    <button id="button_2" label="按钮2" />
    <button id="button_3" label="按钮3" />
</menu>

menu控件为一个菜单，可以由多个按钮组成，包含如下属性

• id：菜单或按钮的唯一标识符
• label：菜单或按钮显示的文字
• visible：是否显示，false为隐藏，true为显示
• size：large为大，normal为正常
• screentip：提示内容的标题
• supertip：提示的内容

menuSeparator

<menu id="menu_1" label="菜单" visible="true" size="normal" screentip="示例提示标题" supertip="示例提示内容">
    <button id="button_1" label="按钮1" />
    <menuSeparator id="menuSeparator_1" />
    <button id="button_2" label="按钮2" />
    <button id="button_3" label="按钮3" />
</menu>

menuSeparator控件为一个菜单分隔符，只有id属性作为菜单分隔符的唯一标识符

toggleButton

<toggleButton id="toggleButton_1" label="切换按钮" visible="true" size="normal" screentip="示例提示标题" supertip="示例提示内容" />

图中为选中状态，toggleButton控件为一个切换按钮，具有选中和未选中两种状态，包含如下属性

• id：切换按钮的唯一标识符
• label：切换按钮显示的文字
• visible：是否显示，false为隐藏，true为显示
• size：large为大，normal为正常
• screentip：提示内容的标题
• supertip：提示的内容

editBox

<editBox id="editBo_1" label="编辑框：" visible="true" />

editBox控件为一个编辑框，包含如下属性

• id：编辑框的唯一标识符
• label：编辑框显示的文字
• visible：是否显示，false为隐藏，true为显示

常用容器

group

<group id="group_1" >
    <button id="button_1" label="示例按钮" size="large" visible="true" imageMso="HappyFace" />
</group>

group容器内可包含所有常用控件，且所有常用控件必须包含在group容器中，只有id属性作为group容器的唯一标识符

tabs与tab

<tabs>
    <tab id="tab_1" label="示例功能区">
        <group id="group_1" >
            <button id="button_1" label="示例按钮" size="large" visible="true" imageMso="HappyFace" screentip="示例提示标题" supertip="示例提示内容"/>
        </group>
    </tab>
    <tab id="tab_2" label="示例功能区2">
        <group id="group_2" >
            <button id="button_2" label="示例按钮" size="large" visible="true" imageMso="HappyFace" screentip="示例提示标题" supertip="示例提示内容"/>
        </group>
    </tab>
</tabs>

tabs容器内可包含多个tab容器
tab容器内只能有一个group容器，有如下属性

• id：tab容器的唯一标识符
• label：tab容器显示的文字

box

<box id="box_1" boxStyle="horizontal">
    <button id="button_1" label="按钮1" imageMso="HappyFace" />
    <button id="button_2" label="按钮2" imageMso="HappyFace" />
</box>
    <separator id="separator_1" />
<box id="box_2" boxStyle="vertical">
    <button id="button_3" label="按钮3" imageMso="HappyFace" />
    <button id="button_4" label="按钮4" imageMso="HappyFace" />
</box>

box容器内可可包含所有常用控件，有如下属性

• id：box容器的唯一标识符
• boxStyle：对齐方式，horizontal为水平对齐，vertical为垂直对齐