在BREW中打造自己的GUI（1）－图形化菜单的实现

在很多时间，我们并不满足于BREW API提供那个简单的IMenuCtl控件，其实自己做一个标准菜单是很方便的一件事情。今天我们就来讨论一下。

要实现的菜单比较简单，只支持列表视图，也就是IMenuCtl中的AEECLSID_MENUCTL 模式。
但是我们需要考虑两个要求：

1.菜单需要一个背景图，并且在每一个选中项的背景不仅仅是简单地填充色，而应该是一个图片（这样我们就可以方便地实现渐变、光晕、立体等效果了）。
2.它应该在调用接口方面与原有的IMenuCtl基本一致，这样便于我们移植原来的代码。

首先，在h文件中对菜单各个实体先做个定义如下：

//自定义菜单项
typedef struct
...{
   const AECHAR * pText;         // Text
   IImage *       pImage;        // Image

   const char * pszResImage;
   const char * pszResText;
   uint16 wText;
   uint16 wImage;

   uint16         wItemID;
   uint32         dwData;

} GMenuItem;
typedef struct
...{
    RGBVAL        cText;
    RGBVAL        cSelText;
} GMenuColors;

GMenuItem很好理解，明显是模仿着CtlAddItem来作的，只是省掉了一些东西罢了。
另外，关键的问题在于整个菜单结构的定义，如下：

struct _IGMenuCtl ...{
    
    const AEEVTBL(IGMenuCtl) * pvt;

    uint32          m_nRefs;    
    IShell            *m_pIShell;
    IDisplay        *m_pIDisplay;
    IModule            *m_pIModule;

    IImage            *m_pImageBk;
    IImage            *m_pImageSe;

    TQueueList        *m_pDataList;

    int                m_Index;
    int                m_startIndex;
    int                m_pageSize;

    int                m_textPos;
    
    boolean            m_isActive;

    AEERect            m_Rect;
    GMenuColors        m_Colors;

    uint32            m_Properties;

};

前面的AEEVTBL就不说了，因为我们整个扩展GUI都是采用BREW的扩展类机制来实现的，具体方法可以参考相关资料。在这个菜单中，关键点是我们定义了一个背景图m_pImageBk和选中项的背景图m_pImageSe。其它几个字段象index/pagesize等等都是控制菜单行为的。用一个TQueueList来保存菜单项的链表（这个TQueueList也是自已实现的一个链表结构）。

好了，在实现中如何处理呢？先来看看看我们都需要些什么函数？

AEEINTERFACE(IGMenuCtl)
...{
    DECLARE_IBASE(IGMenuCtl)

    DECLARE_ICONTROL(IGMenuCtl)

    boolean        (*AddItem)        (IGMenuCtl * po,const char * pszResFile,uint16 wResID,uint16 nItemID,AECHAR * pText,uint32 lData);
    boolean     (*AddItemEx)    (IGMenuCtl * po, GMenuItem * pai);
    boolean     (*GetItemData)  (IGMenuCtl * po, uint16 nItemID, uint32 * plData);

    void        (*SetSel)       (IGMenuCtl * po, uint16 nItemID);
    uint16        (*GetSel)       (IGMenuCtl * po);
    int            (*CurrentIndex) (IGMenuCtl * po);

   int            (*GetItemCount) (IGMenuCtl * po);
   uint16        (*GetItemID)    (IGMenuCtl * po, int nIdx);
   boolean        (*GetItem)      (IGMenuCtl * po, uint16 wID, GMenuItem * pai);
   boolean        (*SetItem)        (IGMenuCtl * po, uint16 wID, uint16 wFlags,GMenuItem * pai);
   void            (*SetItemText)  (IGMenuCtl * po, uint16 wID,const char * pszResFile,uint16 wResID,AECHAR * pText);

   void            (*SetImageBk)    (IGMenuCtl * po,IImage * pImg);
   void            (*SetImageSe)    (IGMenuCtl * po,IImage * pImg);

   void         (*SetColors)    (IGMenuCtl * pIMenuCtl, GMenuColors  * pc);
    
};

大多数函数都是模仿着IMenuCtl来定义的，只有这样才可以方便地将原来的基于IMenuCtl的代码移植到我们的IGMenuCtl上来。

OK，剩下的事情就好办了。在HandleEvent中，处理几个键，用户按了上下方向键则修改m_Index来改变菜单的当前选中项索引，用户按了SELECT键则发送一个EVT_COMMAND事件即可，如：ISHELL_PostEvent(pMe->m_pIShell,0,EVT_COMMAND,0,0)。

而在Redraw中，就是我们实际的绘制过程了，步骤是先绘背景m_pImageBk，再循环m_pDataList绘制每一个项，如果是选中项则给他绘一个背景m_pImageSe。代码如下：

static boolean IGMenuCtl_Redraw(IGMenuCtl * pMe)
...{
    int i,j,height,h,a,b;
    AEEImageInfo infSe,infIc;
    AEERect rec;
    int xx,yy,dxx,dyy;
    RGBVAL oldColor;

    GMenuItem * pData=NULL;
    TQueueList * p = pMe->m_pDataList;

    ZEROAT(&infSe);    

    IDISPLAY_EraseRect(pMe->m_pIDisplay,&pMe->m_Rect);

    h=IDISPLAY_GetFontMetrics(pMe->m_pIDisplay,AEE_FONT_NORMAL,&a,&b);

    //绘制背景图
    if(pMe->m_pImageBk)
    ...{
        IIMAGE_SetDrawSize(pMe->m_pImageBk,pMe->m_Rect.dx,pMe->m_Rect.dy);
        IIMAGE_Draw(pMe->m_pImageBk,pMe->m_Rect.x,pMe->m_Rect.y);
    }
    //确定菜单高度
    if(pMe->m_pImageSe)
    ...{
        IIMAGE_GetInfo(pMe->m_pImageSe,&infSe);
        IIMAGE_SetDrawSize(pMe->m_pImageSe,pMe->m_Rect.dx,infSe.cy);
    }

    //绘制菜单项
    i=0;
    j=0;
    height=pMe->m_Rect.y;
    while(p)
    ...{
        if(i<pMe->m_startIndex)
        ...{
            p=p->pNext;
            i++;
            continue;
        }

        if(j>=pMe->m_pageSize)
        ...{
            break;
        }

        pData=(GMenuItem*)p->pData;
        if(i==pMe->m_Index)
        ...{

            IIMAGE_Draw(pMe->m_pImageSe,pMe->m_Rect.x,height);

            ZEROAT(&infIc);
            if(pData->pImage)
            ...{            
                IIMAGE_GetInfo(pData->pImage,&infIc);
                IIMAGE_Draw(pData->pImage,pMe->m_Rect.x,height+(infSe.cy-infIc.cy)/2);
            }
            xx=pMe->m_Rect.x+infIc.cx;
            yy=height+(infSe.cy-h)/2;
            dxx=pMe->m_Rect.x+pMe->m_Rect.dx-xx;
            dyy=h;
            SETAEERECT(&rec,xx,yy,dxx,dyy);

            oldColor = IDISPLAY_SetColor(pMe->m_pIDisplay,CLR_USER_TEXT,pMe->m_Colors.cSelText);
            if(pMe->m_Properties&0x02)
                IDISPLAY_DrawText(pMe->m_pIDisplay,AEE_FONT_NORMAL,pData->pText+pMe->m_textPos,-1,xx+1,yy,&rec,IDF_TEXT_TRANSPARENT);
            IDISPLAY_DrawText(pMe->m_pIDisplay,AEE_FONT_NORMAL,pData->pText+pMe->m_textPos,-1,xx,yy,&rec,IDF_TEXT_TRANSPARENT);

            if(pMe->m_isActive)
            ...{
                if(IDISPLAY_MeasureText(pMe->m_pIDisplay,AEE_FONT_NORMAL,pData->pText)>dxx)
                ...{
                    if(IDISPLAY_MeasureText(pMe->m_pIDisplay,AEE_FONT_NORMAL,pData->pText+pMe->m_textPos)>dxx)
                    ...{
                        pMe->m_textPos++;
                    }
                    else
                        pMe->m_textPos=0;

                    ISHELL_SetTimer(pMe->m_pIShell,300,(PFNNOTIFY)IGMenuCtl_Redraw,(void*)pMe);
                }
            }
            
            height+=infSe.cy;
            IDISPLAY_SetColor(pMe->m_pIDisplay,CLR_USER_TEXT,oldColor);
        }
        else
        ...{
            ZEROAT(&infIc);
            if(pData->pImage)
            ...{
                IIMAGE_GetInfo(pData->pImage,&infIc);
                IIMAGE_Draw(pData->pImage,pMe->m_Rect.x,height+(infSe.cy-infIc.cy)/2);
            }
        
            xx=pMe->m_Rect.x+infIc.cx;
            yy=height+(infSe.cy-h)/2;
            dxx=pMe->m_Rect.x+pMe->m_Rect.dx-xx;
            dyy=h;
            SETAEERECT(&rec,xx,yy,dxx,dyy);

            oldColor = IDISPLAY_SetColor(pMe->m_pIDisplay,CLR_USER_TEXT,pMe->m_Colors.cText);
            if(pMe->m_Properties&0x01)
                IDISPLAY_DrawText(pMe->m_pIDisplay,AEE_FONT_NORMAL,pData->pText,-1,xx+1,yy,&rec,IDF_TEXT_TRANSPARENT);
            IDISPLAY_DrawText(pMe->m_pIDisplay,AEE_FONT_NORMAL,pData->pText,-1,xx,yy,&rec,IDF_TEXT_TRANSPARENT);
            
            height+=infSe.cy;
            IDISPLAY_SetColor(pMe->m_pIDisplay,CLR_USER_TEXT,oldColor);
        }

        p=p->pNext;
        i++;
        j++;
    }

    IDISPLAY_Update(pMe->m_pIDisplay);
    return TRUE;
}

上面代码中稍要注意的一点是，如果这个选中项的文字比较长，则需要提供滚动效果（IMenuCtl是提供了的）。一句话，加一个定时器ISHELL_SetTimer(pMe->m_pIShell,300,(PFNNOTIFY)IGMenuCtl_Redraw,(void*)pMe);即可。m_textPos就是用来控制当前字串显示的截取位置。

至此，主要的功能就搞定了，那些AddItem、AddItemEx、SetImageBk和SetImageSe都很简单。