我的想法是在做仓库管理方面的FIORI APP，特别是WM方面的功能时，需要使到RF设备，手持设备，这样操作时为了操作方便快捷，会需要使用键盘快捷键，例如：使用TAB标签页，向下/向上翻页，箭头按钮，F1,F2,CART+,ALT+等，所以在网络上收集整理了一些相关的资料，现先收集了解一下，方便使用到时查找，但我没有实际验证使用。
1.业务需求
以下以实现如下业务需求为例子说明开发SAPUI5 的过程。
- 使用Alt +功能键组合快速关注过滤器栏搜索字段，例如：Alt + F1
- 单击F8键发布文档-我们有一个发布按钮，但单击F8键，则应该发布文档。
- 可以提供更多选项，例如选项卡栏导航（使用功能键组合更改选定的选项卡）等。
2.1.创建热键接口JS
在项目的WEBAPP 目录下建立util.hotkeyInterface.js文件
并定入如下JS代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
sap.ui.define([ "sap/ui/base/Object" ], function(ui5Object) { "use strict"; var HotkeyInterface = ui5Object.extend("sap.test.listreport.util.hotkeyInterface", { constructor: function() { // Nothing }, bindHotKeys: function(combinations) { // remove the old key combinations that are buffered if(this.tempCombinations){ this.tempCombinations.forEach(function(mItem) { this.unBindHotKey(mItem.keyCombination); }, this); } // Buffer the combinations for removing later this.tempCombinations = combinations; combinations.forEach(function(mItem) { // Now call the actual binding this.bindHotKey(mItem.keyCombination, mItem.control, mItem.fnHandler, mItem.hanlder); }, this); }, bindHotKey: function(keyCombination, control, fnHandler, hanlder) { $(document).bind("keydown." + this.getNameSpace(keyCombination), keyCombination, function(oEvent) { if (control && control.getDomRef() && control.getDomRef().getBoundingClientRect()) { // Check if the control is visible in DOM currently, // sometimes,the control might be hidden becuase of a tab change or view change var aMargin = control.getDomRef().getBoundingClientRect(); if (aMargin.width) {// If the width is availble, then it is visible fnHandler.call(this, oEvent, control); } } }.bind(hanlder)); }, unBindHotKeys: function(keyCombinations) { // Remove the hotkeys keyCombinations.forEach(function(mItem) { this.unBindHotKey(mItem.keyCombination); }, this); }, unBindHotKey: function(keyCombination) { $(document).unbind("keydown." + this.getNameSpace(keyCombination)); }, getNameSpace: function(keyCombination) { // Create a unique key for the hotkey we are using return "pocApplication_" + keyCombination.replace("+", "_"); } }); return { getInstance: function() { // Singleton if (!this.instance) { this.instance = new HotkeyInterface(); } return this.instance; } }; }); |
在清单文件manifest.json中包含util/hotkeyInterface.js这个API:
3.在页面的JS中使用热键
我们的视图控制器中引入API：
在Init方法中，创建一个具有热键和事件处理程序方法的对象：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
//热键 this.hotKeyHanlders = [{ keyCombination: "F3", control: this.getView().byId("searchField"), fnHandler: this.focusOnSearchFields, hanlder: this }, { keyCombination: "F8", control: this.getView().byId("gr_migo"), fnHandler: this.handleHotKeyPost, hanlder: this } ]; //现在实例化API并注册我们的热键： hotkeyInterface.getInstance().bindHotKeys(this.hotKeyHanlders);//注册热键： |
在JS中注册事务：
|
1 2 3 4 5 6 7 8 9 |
focusOnSearchFields: function(oEvent, oControl) { oEvent.preventDefault(); oControl.focus(); }, handleHotKeyPost: function(oEvent, oControl) { oEvent.preventDefault(); oControl.firePress(); }, |
对于取消绑定热键，我们也可以单独取消绑定热键。将在onexit事件中完成。
|
1 2 3 |
unBindAllHotKeys: function() { hotkeyInterface.getInstance().unBindHotKeys(this.hotKeyHanlders); }, |
我们已经实例化了热键API，并使用事件处理函数注册了热键。
加载Fiori应用程序后，按上述功能键组合，将触发相应的事件处理程序。
注意：分配热键时要小心，通过我提到的插件URL，存在一些限制，因为在少数情况下，浏览器快捷方式的优先级高于我们分配的快捷方式。
4.问题
我测试了一下，还是有些问题，
- 1.在运行时，发现任何按键操作都会触发所有的下定义了的函数过程，并不只是定义的那个快捷键，虽然我们，这个可应该可以有函数中通过oEvent.data = oEvent.key来判断，oEvent.key中才是真正的按键。
- 2.发现启动此快捷键功能后，屏幕上的输入都不起作用了，就是说我在输入框中，输入值，也会触发快捷键功能，而不是输入值，
- 所以我觉得应该是基础接口类有些问题，上面两个其实都是不能准确判断的设置的快捷键的原因，
原文地址https://blogs.sap.com/2017/06/14/hotkeys-keyboard-shortcuts-in-sap-ui5-using-open-source-plugin/
5.修正
我修改了一下hotkeyInterface.js，这样时可以正常判断到快捷键了，但组合键还是有问题，应该是其中的$(document).bind(“keydown.”中的keydown引起的，所以我修改为keyup,keypress，但测试发现直接就不会触发了，但学是觉得应该是这里的问题，后面在试试，
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
sap.ui.define([ "sap/ui/base/Object" ], function(ui5Object) { "use strict"; var HotkeyInterface = ui5Object.extend("zsap.mm.migo.util.hotkeyInterface", { constructor: function() { // Nothing }, bindHotKeys: function(combinations) { // remove the old key combinations that are buffered if(this.tempCombinations){ this.tempCombinations.forEach(function(mItem) { this.unBindHotKey(mItem.keyCombination); }, this); } // Buffer the combinations for removing later this.tempCombinations = combinations; combinations.forEach(function(mItem) { // Now call the actual binding this.bindHotKey(mItem.keyCombination, mItem.control, mItem.fnHandler, mItem.hanlder); }, this); }, bindHotKey: function(keyCombination, control, fnHandler, hanlder) { $(document).bind("keydown." + this.getNameSpace(keyCombination), keyCombination, function(oEvent) { if (control && control.getDomRef() && control.getDomRef().getBoundingClientRect() && oEvent.data === oEvent.key ) { // Check if the control is visible in DOM currently, // sometimes,the control might be hidden becuase of a tab change or view change var aMargin = control.getDomRef().getBoundingClientRect(); if (aMargin.width) {// If the width is availble, then it is visible fnHandler.call(this, oEvent, control); } } }.bind(hanlder)); }, unBindHotKeys: function(keyCombinations) { // Remove the hotkeys keyCombinations.forEach(function(mItem) { this.unBindHotKey(mItem.keyCombination); }, this); }, unBindHotKey: function(keyCombination) { $(document).unbind("keydown." + this.getNameSpace(keyCombination)); }, getNameSpace: function(keyCombination) { // Create a unique key for the hotkey we are using return "pocApplication_" + keyCombination.replace("+", "_"); } }); return { getInstance: function() { // Singleton if (!this.instance) { this.instance = new HotkeyInterface(); } return this.instance; } }; }); |