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

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

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

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

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

// 自定义菜单项
typedefstruct
... {
constAECHAR*pText;//Text
IImage*pImage;//Image

constchar*pszResImage;
constchar*pszResText;
uint16wText;
uint16wImage;

uint16wItemID;
uint32dwData;

} GMenuItem;
typedefstruct
... {
RGBVALcText;
RGBVALcSelText;
} GMenuColors;

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

struct _IGMenuCtl ... {

constAEEVTBL(IGMenuCtl)*pvt;

uint32m_nRefs;
IShell*m_pIShell;
IDisplay*m_pIDisplay;
IModule*m_pIModule;

IImage*m_pImageBk;
IImage*m_pImageSe;

TQueueList*m_pDataList;

intm_Index;
intm_startIndex;
intm_pageSize;

intm_textPos;

booleanm_isActive;

AEERectm_Rect;
GMenuColorsm_Colors;

uint32m_Properties;

} ;

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

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

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

DECLARE_ICONTROL(IGMenuCtl)

boolean(*AddItem)(IGMenuCtl*po,constchar*pszResFile,uint16wResID,uint16nItemID,AECHAR*pText,uint32lData);
boolean(*AddItemEx)(IGMenuCtl*po,GMenuItem*pai);
boolean(*GetItemData)(IGMenuCtl*po,uint16nItemID,uint32*plData);

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

int(*GetItemCount)(IGMenuCtl*po);
uint16(*GetItemID)(IGMenuCtl*po,intnIdx);
boolean(*GetItem)(IGMenuCtl*po,uint16wID,GMenuItem*pai);
boolean(*SetItem)(IGMenuCtl*po,uint16wID,uint16wFlags,GMenuItem*pai);
void(*SetItemText)(IGMenuCtl*po,uint16wID,constchar*pszResFile,uint16wResID,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 booleanIGMenuCtl_Redraw(IGMenuCtl * pMe)
... {
inti,j,height,h,a,b;
AEEImageInfoinfSe,infIc;
AEERectrec;
intxx,yy,dxx,dyy;
RGBVALoldColor;

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);
returnTRUE;
}

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

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