在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都很简单。