WPS加载项深入开发代码ribbon解析

ribbon是什么
Ribbon是一种以面板及标签页为架构的用户界面，原先出现在Microsoft Office 2007后续版本的Word、Excel和PowerPoint等组件中，后来也被运用到Windows 7的一些附加组件等其它软件中，如画图和写字板，以及Windows 8中的资源管理器。
WPS利用ribbon做的是界面的定义，就是「标签选项卡」的这种界面。WPS加载项作为可以对WPS界面做自定义的一种扩展开发方式，也遵循ribbon的规范。以通过wpsjs创建的一个纯净的Demo为例，在Demo的根目录下有三个文件，作用如下说明：

index.html：入口文件，WPS启动后加载WPS加载项，就以这个文件为入口
main.js：index.html包含的，负责核心js的加载，开发者可以自主添加其他js文件
ribbon.xml：自定义功能区定义文件，遵循ribbon的CustomUI规范。
在ribbon.xml中，有几个常用的控件，之下用代码做个说明：

<customUI xmlns="http://schemas.microsoft.com/office/2006/01/customui" onLoad="OnWPSWorkTabLoad">
    <ribbon startFromScratch="false">        
        <tabs>
            <!-- OA菜单开启显隐处理， insertBeforeMso表示要在WPS自身某个tab之前显示，insertAfterMso表示在某个WPS自身tab之后显示-->
            <!--在如下的tab定义中，id是WPSWorkExtTab，显示标签是OA辅助，有控制显隐的事件设置getVisible，设置在「开始」(TabHome)页签之前-->
            <tab id="WPSWorkExtTab" label="OA辅助" getVisible="OnGetVisible" insertBeforeMso="TabHome">
                <group id="grpWPSClound" label="WPS云文档相关功能" getVisible="OnGetVisible">
                    <box id="boxBoxCloud1" boxStyle="horizontal" visible="true">
                        <button id="btnOpenWPSYUN" label="WPS云文档" getLabel="OnGetLabel" onAction="OnAction" getEnabled="OnGetEnabled" getVisible="OnGetVisible" getImage="GetImage" size="large"/>
                    </box>
                    <box id="boxBoxCloud1" boxStyle="horizontal" visible="true">
                        <button id="btnOpenLocalWPSYUN" label="导入文件" getLabel="OnGetLabel" onAction="OnAction" getEnabled="OnGetEnabled" getVisible="OnGetVisible" getImage="GetImage" size="large"/>
                    </box>
                    <separator id="sepWPSClound"/>
                </group>
                <group id="grpWPSWork" label="OA助手文档操作功能组" getVisible="OnGetVisible">
                    <button id="btnSaveToServer" label="保存到OA" onAction="OnAction" getEnabled="OnGetEnabled" getImage="GetImage" size="large"/>
                    <button id="btnSaveAsFile" label="保存本地" getLabel="OnGetLabel" onAction="OnAction" getEnabled="OnGetEnabled" getVisible="OnGetVisible" getImage="GetImage" size="large" />
                    <box id="boxWPSWorkEx" boxStyle="vertical" visible="true">
                        <button id="btnChangeToPDF" label="转PDF上传" getLabel="OnGetLabel" onAction="OnAction" getEnabled="OnGetEnabled" getVisible="OnGetVisible" getImage="GetImage" size="large"/>
                        <button id="btnChangeToUOT" label="转UOT上传" getLabel="OnGetLabel" onAction="OnAction" getEnabled="OnGetEnabled" getVisible="OnGetVisible" getImage="GetImage" size="large"/>
                        <button id="btnChangeToOFD" label="转OFD上传" getLabel="OnGetLabel" onAction="OnAction" getEnabled="OnGetEnabled" getVisible="OnGetVisible" getImage="GetImage" size="large"/>
                    </box>
                    <separator id="sepWPSWork" getVisible="OnGetVisible" />
                </group>
                
            </tab>
            <!-- 在这里可以定义WPS自身的tab页签的一些行为，页签的getEnabled和getVisible等效，无onAction事件-->
            <!-- 全集可以去open.wps.cn/docs/office的idMso列表查询-->
            <!--WPS自身功能常见tab的idMso如下-->
            <!--开始-->
            <tab idMso="TabHome" getEnabled="OnGetEnabled"/>
            <!--插入-->
            <tab idMso="TabInsert" getEnabled="OnGetEnabled"/>
            <!--页面布局-->
            <tab idMso="TabPageLayoutWord" getEnabled="OnGetEnabled"/>
            <!--引用-->
            <tab idMso="TabReferences" getEnabled="OnGetEnabled"/>
            <!--审阅-->
            <tab idMso="TabReviewWord" getEnabled="OnGetEnabled"/>
            <!--视图-->
            <tab idMso="TabView" getEnabled="OnGetEnabled"/>
            <!--开发工具-->
            <tab idMso="TabDeveloper" getEnabled="OnGetEnabled"/>
        </tabs>
    </ribbon>
    <commands>
        <!-- idMso支持getEnabled和onAction，不支持visible属性和事件-->
        <!-- 文档复制和剪切控制-->
        <command idMso="Copy" getEnabled="OnGetEnabled" />
        <command idMso="Cut" getEnabled="OnGetEnabled" />
        <!-- 文档保存和另存控制-->
        <command idMso="FileSave" getEnabled="OnGetEnabled" onAction="OnAction"/>
        <command idMso="SaveAll" getEnabled="OnGetEnabled" />
        <command idMso="FileSaveAsMenu" getEnabled="OnGetEnabled" onAction="OnAction"/>
        <command idMso="FileSaveAs" getEnabled="OnGetEnabled" onAction="OnAction"/>
        <command idMso="FileSaveAsPicture" getEnabled="OnGetEnabled" />
        <command idMso="SaveAsPicture" getEnabled="OnGetEnabled" />
        <command idMso="FileMenuSendMail" getEnabled="OnGetEnabled" />
        <!-- 输出PDF控制-->
        <command idMso="SaveAsPDF" getEnabled="OnGetEnabled"/>
        <command idMso="FileSaveAsPDF" getEnabled="OnGetEnabled"/>
        <command idMso="ExportToPDF" getEnabled="OnGetEnabled"/>
        <command idMso="FileSaveAsPdfOrXps" getEnabled="OnGetEnabled"/>
        <!-- 输出OFD控制-->
        <command idMso="SaveAsOfd" getEnabled="OnGetEnabled"/>
        <command idMso="FileSaveAsOfd" getEnabled="OnGetEnabled"/>
        <!--文档打印控制-->
        <command idMso="FilePrint" getEnabled="OnGetEnabled"/>
        <command idMso="FilePrintMenu" getEnabled="OnGetEnabled"/>
        <command idMso="FilePrintPreview" getEnabled="OnGetEnabled"/>
        <!--文档修订控制-->
        <command idMso="ReviewTrackChangesMenu" getEnabled="OnGetEnabled"/>
        <command idMso="ReviewRejectChangeMenu" getEnabled="OnGetEnabled"/>
        <command idMso="ReviewAcceptChangeMenu" getEnabled="OnGetEnabled"/>
        <!--文档新建控制-->
        <command idMso="FileNewMenu" getEnabled="OnGetEnabled" onAction="OnAction"/>
        <command idMso="FileNew" getEnabled="OnGetEnabled" onAction="OnAction"/>
        <command idMso="WindowNew" getEnabled="OnGetEnabled" onAction="OnAction"/>
        <command idMso="FileNewBlankDocument" getEnabled="OnGetEnabled" onAction="OnAction"/>
    </commands>
    <contextMenus>
        <contextMenu idMso="ContextMenuText">
            <menu id="Menu_ContextMenuText" label="测试右键" visible="true">
                <button id="ShowAlert_ContextMenuText" label="弹出一个警告框" onAction="OnAction" getImage="GetImage" visible="true"/>
            </menu>
        </contextMenu>
    </contextMenus>
</customUI>