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>