探讨页面按键管理的各种方式

本文链接：https://blog.youkuaiyun.com/crazyultimate/article/details/6886752

以一个简单的播控页面（机顶盒上的播控页面）为例来探讨页面的按键管理方式（没有鼠标，不考虑组合键）。

简单的播控页面：
这个播控页面由2个子页面组成：
1）播放页面
2）信息面板MINIEPG

这2个页面的按键责任如下：
1）播放页面：
·up：调出MINIEPG，在其中显示下一个频道的信息；
·down：调出MINIEPG，在其中显示上一个频道的信息；
·CH+：切台，播放下一个频道，并显示当前频道当前节目单的MINIEPG
·CH-：切台，播放上一个频道，并显示当前频道当前节目单的MINIEPG
·OK：显示miniepg
·vol+/-：音量加减

2）MINIEPG：
·up：在其中显示下一个频道的信息；
·down：在其中显示上一个频道的信息；
·CH+：切台，播放下一个频道，并展示当前播放的频道和节目单的信息
·CH-：切台，播放上一个频道，并展示当前播放的频道和节目单的信息
·OK：隐藏MINIEPG，焦点到了“播放页面”
·vol+/-：音量加减

//====页面层次关系
可以有两种看法：
·MINIEPG是“播放页面”的子页面；
·MINIEPG和“播放页面”的同等级页面；

//====按键责任分配
情景介绍完了，下面就是对每个页面实际的按键分工进行分析了：

1）“MINIEPG”上的up/down、CH+/-、vol+/-其实是“播放页面”在实际起作用，也就是说，这些按键是传递给“播放页面”来执行的；
//同样的道理：“SUBMENU”上的up、down、CH+/-、left/right、vol+/-也是最终传递给“播放页面”来执行的；

当然，也可以换一个角度来分析。
up/down、CH+/-实际是“MINIEPG”页面在起作用：“播放页面”实际只是调出了“MINIEPG”，然后由“MINIEPG”来真正执行；

2）“MINIEPG”上的OK等按键却将“播放页面”的OK给屏蔽了；
同理如“SUBMENU”对“MINIEPG”；

3）在执行CH+/-的时候，“播放页面”需要播放新频道，同一时刻，“MINIEPG”需要展示新频道的信息；

//====按键责任分配总结
到目前为止就可以总结出以下几种页面按键责任分配的情况：
1、焦点在某个页面上，并响应某个按键；
2、两个页面要同时响应某个按键；
3、两个页面都有需要对某个按键有响应，但是同一时刻却只能在当前页面有响应；
4、某一个按键只有某个页面有响应，但是当前焦点在别的页面上；
又有两种情况：
1)响应了这个按键之后，焦点会移动到这个响应焦点的页面
2)响应了这个按键之后，焦点不变

这其中，比较困难的是后面3种情况；

//====按键管理方式
我在实际中总结出以下几种按键管理的方式：
1、状态模式；----按键独占方式
2、责任链模式；----按键捕获和透传方式
3、观察者模式；----按键广播方式

//====状态模式按键管理方式的代码演示

页面层次关系：MINIEPG和“播放页面”的同等级页面；

可以解决所有的情况；

    Java代码  
  
 interface org.ideamarker.as2.keyhandle.example.state.IKeyCodeHandle {  
       
     function onUp():Void;  
       
     function onDown():Void;  
       
     function onChanUp():Void;  
       
     function onChanDown():Void;  
       
     function onOk():Void;  
       
     function onVolUp():Void;  
       
 }

    As2代码  
  
 class org.ideamarker.as2.keyhandle.example.state.LiveContext {  
       
     private var m_currFocus:IKeyCodeHandle;  
       
     private var m_livePlayUI:LivePlayUI;  
       
     private var m_liveMiniEpgUI:LiveMiniEpgUI;  
   
     public function getCurrFocus():IKeyCodeHandle {  
         return m_currFocus;  
     }  
       
     public function getLivePlayUI():IKeyCodeHandle {  
         return m_livePlayUI;  
     }  
       
     public function getLiveMiniEpgUI():IKeyCodeHandle {  
         return m_liveMiniEpgUI;  
     }  
   
     public function setCurrFocus(_focusUI:IKeyCodeHandle):Void {  
         m_currFocus = _focusUI;  
     }  
       
     public function onOk():Void {  
         m_currFocus.onOk();  
     }  
       
     public function onUp():Void {  
         m_currFocus.onUp();  
     }  
       
     public function onDown():Void {  
         m_currFocus.onDown();  
     }  
       
     public function onChanUp():Void {  
         //  TODO：“‘按键责任分配总结’中的第1种情况”；  
         m_livePlayUI.onChanUp();  
         m_liveMiniEpgUI.onChanUp();  
           
         // 焦点移动到了liveMiniEpgUI上；  
         m_currFocus = m_liveMiniEpgUI;  
     }  
   
     public function onChanDown():Void {  
         //  TODO：“‘按键责任分配总结’中的第1种情况”；  
         m_livePlayUI.onChanDown();  
         m_liveMiniEpgUI.onChanDown();  
           
         // 焦点移动到了liveMiniEpgUI上；  
         m_currFocus = m_liveMiniEpgUI;  
     }  
   
     public function onVolUp():Void {  
         m_currFocus.onVolUp();  
           
         // 或者直接在此处调用m_livePlayUI的onVolUp()；  
         // m_livePlayUI.onVolUp();  
     }  
 }  

class org.ideamarker.as2.keyhandle.example.state.LivePlayUI implements IKeyCodeHandle {

    As2代码  
  
     private var m_context:LiveContext;  
       
     private var m_currPlayChannel:String;  
       
     public function LivePlayUI(_context:LiveContext) {  
         m_context = _context;  
     }  
   
     public function onUp():Void {  
         // 调出MINIEPG，在其中显示下一个频道的信息；  
           
         // TODO：“‘按键责任分配总结’的第4种的第1种情况”，并且当前焦点被移动到LiveMiniEpgUI上  
         m_context.setCurrFocus(m_context.getLiveMiniEpgUI());  
         m_context.getCurrFocus().onUp();  
     }  
       
     public function onDown():Void {  
         // 调出MINIEPG，在其中显示上一个频道的信息；  
           
         //  TODO：“‘按键责任分配总结’的第4种的第1种情况”，并且当前焦点被移动到LiveMiniEpgUI上  
         m_context.setCurrFocus(m_context.getLiveMiniEpgUI());  
         m_context.getCurrFocus().onDown();  
     }  
       
     public function onChanUp():Void {  
         // 切台，播放下一个频道；  
         m_currPlayChannel = "play the next channel";  
     }  
       
     public function onChanDown():Void {  
         // 切台，播放上一个频道；  
         m_currPlayChannel = "play the pervious channel";  
     }  
       
     public function onOk():Void {  
         // 显示miniepg  
           
         // TODO：“‘按键责任分配总结’中的第4种的第1种情况”；  
         m_context.setCurrFocus(m_context.getLiveMiniEpgUI());  
     }  
       
     public function onInfo():Void {  
         // 显示miniepg, 同onOk()  
           
         // TODO：“‘按键责任分配总结’中的第4种的第1种情况”；  
         m_context.setCurrFocus(m_context.getLiveMiniEpgUI());  
     }  
       
     public function onVolUp():Void {  
         // 音量加  
     }  
 }  

class org.ideamarker.as2.keyhandle.example.state.LiveMiniEpgUI implements IKeyCodeHandle {

    As2代码  
  
     private var m_context:LiveContext;  
       
     private var m_info:String;  
       
     public function LiveMiniEpgUI(_context:LiveContext) {  
         m_context = _context;  
     }  
   
     public function onUp():Void {  
         // 在其中显示下一个频道的信息；  
         m_info = "the next channel info";  
     }  
       
     public function onDown():Void {  
         // 在其中显示上一个频道的信息；  
         m_info = "the previous channel info";  
     }  
       
     public function onChanUp():Void {  
         // 展示下一个播放的频道和节目单的信息；  
         m_info = "the next channel info";  
     }  
       
     public function onChanDown():Void {  
         // 展示上一个播放的频道和节目单的信息；  
         m_info = "the next channel info";  
     }  
       
     public function onOk():Void {  
         // ·OK/Info/back：隐藏MINIEPG，焦点到了“播放页面”  
           
         //  TODO：“‘按键责任分配总结’中的第2种情况”；  
         m_context.setCurrFocus(m_context.getLivePlayUI());  
     }  
       
     public function onVolUp():Void {  
         // 音量加，按键责任要传递给LivePlayUI  
           
         // TODO：“‘按键责任分配总结’中的第4种的第2种情况”；  
         // 其实在这种情况，完全无需要抽象出接口方法，只需要直接在LiveContext中调用LivePlayUI的onVolUp()方法即可  
         m_context.getLivePlayUI().onVolUp();  
     }  
 }  

优点：
·状态模式可以解决“按键责任分配总结”中的所有情况。但是入门有门槛，没有明显的固定的套路，在情况较为复杂的情况必须要coder有一定的分析能力；
缺点：
·所有具有对相同按键有响应的方法都需要抽象成相同的接口名称；
·如果可以将状态模式再进一步抽象，总结出一个工具类来，那就更加好了----这是我一直在思考的问题；

//====责任链模式按键管理方式的代码演示
页面层次关系：MINIEPG是“播放页面”的子页面；

    As2代码  
  
 interface org.ideamarker.as2.keyhandle.example.cor.IKeyControlItem {  
   
     /**  
      * 该受控单元的按键处理函数;  
      */  
     public function keyHandle(_keyCode:String):Void;  
       
     /**  
      * 获取该受控单元需要处理的按键列表;  
      */  
     public function getInterestingKeys():Array;  
       
 }  

class org.ideamarker.as2.keyhandle.example.cor.KeyControlManager {

    As2代码  
  
     private var itemList:Array;  
   
     public function KeyControlManager() {  
         itemList = new Array();  
     }  
   
     /**  
      * 向按键状态管理器里面添加一个受控单元;  
      * 如果一个受控单元被重复添加，则其优先级以最后一次添加的为准;  
      * @param item 要添加的按键受控单元;  
      */  
     public function regItem(_item:IKeyControlItem):Void {  
         unRegItem(_item);  
         itemList.unshift(_item);  
     }  
   
     /**  
      * 从按键状态管理器里面移除一个受控单元;  
      * @param item 要移除的按键受控单元;  
      */  
     public function unRegItem(_item:IKeyControlItem):Void {  
         for(var i:Number = 0;i < itemList.length;i++) {  
             if(itemList[i] == _item) {  
                 itemList.splice(i, 1);  
                   
                 return ;  
             }  
         }  
     }  
   
     /**  
      * 按键按下的事件;  
      */  
     public function onKeyCodeHandle(_keyCode:String):Void {  
         for(var i:Number = 0;i < itemList.length;i++) {  
               
             var item:IKeyControlItem = IKeyControlItem(itemList[i]);  
             var interestKeys:Array = item.getInterestingKeys();  
             for(var j:Number = 0;j < interestKeys.length;j++) {  
                   
                 if(_keyCode == interestKeys[j]) {  
                     item.keyHandle(_keyCode);  
                     return ; // 因为这个return，让这个例子是责任链模式，而不是观察者模式  
                 }  
             }  
         }  
     }  
 }  

    As2代码  
  
 class org.ideamarker.as2.keyhandle.example.cor.LivePlayUI implements IKeyControlItem {  
     // 焦点管理工具  
     private var m_keyControlManager:KeyControlManager;  
     // keyCode组的集合  
     private var m_keyCodeGroup:Array;  
     // 当前key组的index  
     private var m_nowGroupIndex:Number;  
     // 子页面 miniepg  
     private var m_liveMiniEpgUI:LiveMiniEpgUI;  
   
     // private var m_currChannel:Object;  
   
     public function LivePlayUI() {  
         m_keyControlManager = new KeyControlManager();  
           
         this.regKeyItem();  
         this.regKeyCodeGroup();  
           
         m_liveMiniEpgUI.setKeyControlManager(m_keyControlManager);  
     }  
           
     /**  
      * 注册本页面  
      */  
     private function regKeyItem():Void {  
         m_keyControlManager.regItem(this);  
     }  
       
     /**  
      * 注册本页面感兴趣的键值  
      */  
     private function regKeyCodeGroup():Void {  
         // 注册键值  
         m_keyCodeGroup.push([Const.UP, Const.DOWN, Const.CHAN_UP, Const.CHAN_DOWN  
             , Const.OK, Const.BACK, Const.VOL_UP, Const.VOL_DOWN]);  
           
         // 当此例子改成观察者模式的时候放开注释  
         // m_keyCodeGroup.push([Const.CHAN_UP, Const.CHAN_DOWN, Const.VOL_UP, Const.VOL_DOWN]);  
           
         m_nowGroupIndex = 0;  
     }  
       
   
     public function keyHandle(_keyCode:String):Void {  
         switch (_keyCode) {  
             case (Const.UP):  
                 this.onUp();  
             break;  
             case (Const.DOWN):  
                 this.onDown();  
             break;  
             case (Const.CHAN_UP):  
                 this.onChanUp();  
             break;  
             case (Const.CHAN_DOWN):  
                 this.onChanDown();  
             break;  
             case (Const.OK):  
                 this.onOk();  
             break;  
             case (Const.VOL_UP):  
                 this.onVolUp();  
             break;  
         }  
     }  
       
     public function getInterestingKeys():Array {  
         return m_keyCodeGroup[m_nowGroupIndex];  
     }  
       
     private function onUp():Void {  
         // 1.获取下一个频道信息，在miniepg上展示  
         // 2.展示miniepg  
         m_liveMiniEpgUI.show("the next channel info");  
     }  
       
     private function onDown():Void {  
         // 1.获取上一个频道信息，在miniepg上展示  
         // 2.展示miniepg  
         m_liveMiniEpgUI.show("the previous channel info");  
     }  
       
     private function onChanUp():Void {  
         // 1.播放下一个频道  
         // 2.展示miniepg  
         m_liveMiniEpgUI.show("the next channel info");  
     }  
       
     private function onChanDown():Void {  
         // 1.播放上一个频道  
         // 2.展示miniepg  
         m_liveMiniEpgUI.show("the previous channel info");  
     }  
       
     private function onOk():Void {  
         // 1.展示miniepg  
         m_liveMiniEpgUI.show("the current channel info");  
     }  
       
     private function onVolUp():Void {  
         //   
     }  
 }  

    As2代码  
  
 class org.ideamarker.as2.keyhandle.example.cor.LiveMiniEpgUI implements IKeyControlItem {  
   
     private var m_keyControlManager:KeyControlManager;  
     // keyCode组的集合  
     private var m_keyCodeGroup:Array;  
     // 当前key组的index  
     private var m_nowGroupIndex:Number;  
   
     public function LiveMiniEpgUI() {  
     }  
       
     /**  
      * 注册本页面  
      */  
     private function regKeyItem():Void {  
         m_keyControlManager.regItem(this);  
     }  
       
     /**  
      * 注册本页面感兴趣的键值  
      */  
     private function regKeyCodeGroup():Void {  
         // 注册键值  
         m_keyCodeGroup.push([Const.UP, Const.DOWN, Const.OK]);  
           
         // 当此例子改成观察者模式的时候放开注释  
         // m_keyCodeGroup.push([Const.UP, Const.DOWN]);  
           
         m_nowGroupIndex = 0;  
     }  
       
     public function setKeyControlManager(_keyControlManager:KeyControlManager):Void {  
         m_keyControlManager = _keyControlManager;  
           
         regKeyItem();  
         regKeyCodeGroup();  
     }  
       
     public function show(_chanInfo:String):Void {  
           
     }  
       
     public function keyHandle(_keyCode:String):Void {  
         switch(_keyCode) {  
             case (Const.UP):  
                 this.onUp();  
             break;  
             case (Const.DOWN):  
                 this.onDown();  
             break;  
             case (Const.OK):  
                 this.onOk();  
             break;  
         }  
     }  
       
     public function getInterestingKeys():Array {  
         return m_keyCodeGroup[m_nowGroupIndex];  
     }  
       
     private function onUp():Void {  
         // do sth.  
     }  
       
     private function onDown():Void {  
         // do sth.  
     }  
       
     private function onOk():Void {  
         // 隐藏miniepg  
         m_keyControlManager.unRegItem(this);  
     }  
 }  

优点：
·抽象出了一个工具类，方便使用，易于理解；
缺点：
·无法实现“按键责任分配总结”中的第2种情况；

//====观察者模式按键管理方式的代码演示
因为多了一个return，上个例子就是责任链模式；
如果将这个return去掉，上个例子就可以变成观察者模式；但是，需要做点修改：
1）需要添加更多的可能情况的key组；
2）m_nowGroupIndex需要随着页面的跳转而改变；

疑惑：
1、总是觉得现在这样的状态模式还是不够抽象，能够抽象出像责任链模式例子中的KeyControlManager类就更加好了；
2、总是觉得这个责任链模式例子中的代码，不是那么和谐，尤其是keyHandle()方法中的内容（虽然可以使用map来关联keyCode和Function）；

有没有更加好的改进方法？

声明：

1、本文属于原创文章，历时一周思考得出的结论；

2、由于工作原因，本文代码由Actionscript2实现，语法和Java很类似，请不要对语言的优劣性有任何微词；