第46章 HEADER-标题控件

第46章 HEADER-标题控件

    本期教程讲解STemWin支持的标题控件。

    46. 1 标题控件介绍

    46. 2 官方WIDGET_Header实例

    46. 3 使用官方GUIBulder建立HEADER控件

    46. 4 总结

     HEADER控件用于标记表格的列：

如果使用了指针输入设备 （PID），可通过使用PID拖动分隔线来调节标题项目的宽度。

使用鼠标时的特性

     如果鼠标支持已启用，则光标出现并且PID在分隔线附近移动时，光标就会变成信号，可以在当前位置拖动分隔线。

使用触屏时的特性

      如果在分隔线附近按下该小工具，光标出现并变成信号，此时即可拖动分隔线。

可拖动分隔线的屏幕截图

预定义的光标

      2种预定义光标如下所示：

在使用HEADER小工具的时候，也可以创建并使用自己的光标。

如果设置皮肤的话，显示效果如下：

46.2  官方WIDGET_Header实例

    官方的这个实例很好的演示了Header的使用，这个例子在模拟器中的位置：

源代码如下（在程序中进行了详细的注释）：

1. ----------------------------------------------------------------------
   
2. File        : WIDGET_Header.c
   
3. Purpose     : Demonstrates the use of header widgets
   
4. ---------------------------END-OF-HEADER------------------------------
   
5. */
   
6. 
   
7. #include <stddef.h>
   
8. #include <string.h>
   
9. #include "GUI.h"
   
10. #include "HEADER.h"
    
11. #include "FRAMEWIN.h"
    
12. 
    
13. /*********************************************************************
    
14. *
    
15. *       Defines
    
16. *
    
17. **********************************************************************
    
18. */
    
19. 
    
20. /* 自定义回调函数的消息类型 */
    
21. #define MSG_CHANGE_MAIN_TEXT (WM_USER + 0)
    
22. #define MSG_CHANGE_INFO_TEXT (WM_USER + 1)
    
23. 
    
24. /*********************************************************************
    
25. *
    
26. *       Static data
    
27. *
    
28. **********************************************************************
    
29. */
    
30. 
    
31. static HEADER_Handle _hHeader;
    
32. static char _acMainText[100];
    
33. static char _acInfoText[100];
    
34. 
    
35. /*********************************************************************
    
36. *
    
37. *       Static code
    
38. *
    
39. **********************************************************************
    
40. */
    
41. 
    
42. /*******************************************************************
    
43. *
    
44. *       _ChangeMainText
    
45. *
    
46. *  给背景窗口发送消息，然后使其无效，这样就可以执行桌面窗口的回调函数的WM_PAINT消息
    
47. */
    
48. static void _ChangeMainText(char* pStr) {
    
49.   WM_MESSAGE Message;
    
50.   Message.MsgId  = MSG_CHANGE_MAIN_TEXT;
    
51.   Message.Data.p = pStr;
    
52.   /* 向桌面窗口发送消息 */
    
53.   WM_SendMessage(WM_HBKWIN, &Message);
    
54.   /* 使桌面窗口无效 */
    
55.   WM_InvalidateWindow(WM_HBKWIN);
    
56. }
    
57. 
    
58. /*******************************************************************
    
59. *
    
60. *       _ChangeInfoText
    
61. *
    
62. *  给背景窗口发送消息，然后使其无效，这样就可以执行桌面窗口的回调函数的WM_PAINT消息
    
63. */
    
64. static void _ChangeInfoText(char* pStr) {
    
65.   WM_MESSAGE Message;
    
66.   Message.MsgId  = MSG_CHANGE_INFO_TEXT;
    
67.   Message.Data.p = pStr;
    
68.   /* 向桌面窗口发送消息 */
    
69.   WM_SendMessage(WM_HBKWIN, &Message);
    
70.   /* 使桌面窗口无效 */
    
71.   WM_InvalidateWindow(WM_HBKWIN);
    
72. }
    
73. 
    
74. /*******************************************************************
    
75. *
    
76. *       _cbBkWindow
    
77. *     桌面窗口的回调函数
    
78. */
    
79. static void _cbBkWindow(WM_MESSAGE* pMsg) {
    
80.   switch (pMsg->MsgId) {
    
81. 
    
82.     case MSG_CHANGE_MAIN_TEXT:
    
83.       strcpy(_acMainText, pMsg->Data.p);
    
84.       /* 使其无效，从而得到重绘 */
    
85.       WM_InvalidateWindow(pMsg->hWin);
    
86.       break;
    
87. 
    
88.     case MSG_CHANGE_INFO_TEXT:
    
89.       strcpy(_acInfoText, pMsg->Data.p);
    
90.       WM_InvalidateWindow(pMsg->hWin);
    
91.       break;
    
92. 
    
93. /* 重绘消息 */
    
94.     case WM_PAINT:
    
95.       GUI_SetBkColor(GUI_BLACK);
    
96.       GUI_Clear();
    
97.       GUI_SetColor(GUI_WHITE);
    
98.       GUI_SetFont(&GUI_Font24_ASCII);
    
99.       GUI_DispStringHCenterAt("HEADER Widget - Sample", 160, 5);
    
100.       GUI_SetFont(&GUI_Font8x16);
     
101.       GUI_DispStringAt(_acMainText, 5, 40);
     
102.       GUI_SetFont(&GUI_Font8x8);
     
103.       GUI_DispStringAt(_acInfoText, 5, 60);
     
104.       break;
     
105. 
     
106.     default:
     
107.       WM_DefaultProc(pMsg);
     
108.   }
     
109. }
     
110. 
     
111. /*********************************************************************
     
112. *
     
113. *       _OnPaint
     
114. */
     
115. static void _OnPaint(void) {
     
116.   int xPos = 0;
     
117.   GUI_RECT Rect;
     
118. 
     
119.   /* 设置背景颜色 */
     
120.   GUI_SetBkColor(GUI_GRAY);
     
121.   GUI_Clear();
     
122. 
     
123.   /* 得到用户区 */
     
124.   WM_GetClientRect(&Rect);
     
125. 
     
126.   /* 得到第一个HEADER的宽度和下面区域的颜色 */
     
127.   Rect.x1 = HEADER_GetItemWidth(_hHeader, 0);
     
128.   GUI_SetColor(GUI_RED);
     
129.   GUI_FillRect(Rect.x0, Rect.y0, Rect.x1, Rect.y1);
     
130. 
     
131.   /* 得到第二个HEADER的宽度和下面区域的颜色 */
     
132.   Rect.x0 = Rect.x1;
     
133.   Rect.x1 += HEADER_GetItemWidth(_hHeader, 1);
     
134.   GUI_SetColor(GUI_GREEN);
     
135.   GUI_FillRect(Rect.x0, Rect.y0, Rect.x1, Rect.y1);
     
136. 
     
137.   /* 得到第三个HEADER的宽度和下面区域的颜色 */
     
138.   Rect.x0 = Rect.x1;
     
139.   Rect.x1 += HEADER_GetItemWidth(_hHeader, 2);
     
140.   GUI_SetColor(GUI_BLUE);
     
141.   GUI_FillRect(Rect.x0, Rect.y0, Rect.x1, Rect.y1);
     
142. }
     
143. 
     
144. /*********************************************************************
     
145. *
     
146. *       cbWindow
     
147. */
     
148. static void _cbWindow(WM_MESSAGE * pMsg) {
     
149.   WM_HWIN hWin = pMsg->hWin;
     
150.   switch (pMsg->MsgId) {
     
151.     case WM_PAINT:
     
152.       _OnPaint();
     
153.       break;
     
154.   }
     
155.   WM_DefaultProc(pMsg);
     
156. }
     
157. 
     
158. /*********************************************************************
     
159. *
     
160. *       _Demo
     
161. */
     
162. static void _Demo(void) {
     
163. 
     
164.   int Key = 0;
     
165.   int Cnt = 10;
     
166. 
     
167.   char acInfoText[] = "-- sec to play with header control";
     
168. 
     
169. 
     
170.   _ChangeInfoText("HEADER_AddItem");
     
171.   /*
     
172. The Width-parameter can be 0. If  Width = 0 the width
     
173.   of the new item will be calcu-lated by the given text and by the default
     
174.   value of the horizontal spacing.
     
175. */
     
176.   /* 注意宽度的设置 */
     
177.   HEADER_AddItem(_hHeader, 100, "Red"  , GUI_TA_VCENTER | GUI_TA_HCENTER);
     
178.   HEADER_AddItem(_hHeader,   0, "Green", GUI_TA_VCENTER | GUI_TA_HCENTER);
     
179.   HEADER_AddItem(_hHeader,   0, ":-)"  , GUI_TA_VCENTER | GUI_TA_HCENTER);
     
180.   GUI_Delay(750);
     
181. 
     
182.   /* 设置第二的宽度  60*/
     
183.   _ChangeInfoText("HEADER_SetItemWidth");
     
184.   HEADER_SetItemWidth(_hHeader, 1, 60);
     
185. 
     
186.   /* 设置第三的宽度  100*/
     
187.   _ChangeInfoText("HEADER_SetItemText");
     
188.   HEADER_SetItemWidth(_hHeader, 2, 100);
     
189.   HEADER_SetItemText(_hHeader, 2, "Blue");
     
190.   GUI_Delay(750);
     
191. 
     
192.   /* 设置字体 */
     
193.   _ChangeInfoText("HEADER_SetFont");
     
194.   HEADER_SetFont(_hHeader, &GUI_Font8x8);
     
195.   GUI_Delay(750);
     
196. 
     
197.   /* 设置已有Header的高度 */
     
198.   _ChangeInfoText("HEADER_SetHeight");
     
199.   HEADER_SetHeight(_hHeader, 50);
     
200.   GUI_Delay(750);
     
201. 
     
202.   /* 设置字体颜色 */
     
203.   _ChangeInfoText("HEADER_SetTextColor");
     
204.   HEADER_SetTextColor(_hHeader, GUI_YELLOW);
     
205.   GUI_Delay(750);
     
206. 
     
207.   /* 设置背景颜色 */
     
208.   _ChangeInfoText("HEADER_SetBkColor");
     
209.   HEADER_SetBkColor(_hHeader, GUI_DARKGRAY);
     
210.   GUI_Delay(750);
     
211. 
     
212. 
     
213.   /* 设置对齐方式 */
     
214.   /* 等待有按键按下 */
     
215.   _ChangeInfoText("HEADER_SetTextAlign");
     
216.   HEADER_SetTextAlign(_hHeader, 0, GUI_TA_HCENTER);
     
217.   while (！Key && (Cnt > 0)) {
     
218.     acInfoText[0] = '0' + (Cnt / 10);
     
219.     acInfoText[1] = '0' + (Cnt-- % 10);
     
220.     _ChangeInfoText(acInfoText);
     
221.     GUI_Delay(1000);
     
222.     Key = GUI_GetKey();
     
223.   }
     
224. }
     
225. 
     
226. /*********************************************************************
     
227. *
     
228. *       _DemoHeaderFrameWin
     
229. */
     
230. static void _DemoHeaderFrameWin(void) {
     
231.   FRAMEWIN_Handle hFrameWin;
     
232.   _ChangeMainText("HEADER control inside a FRAMEWIN");
     
233.   /* 创建框架窗口 */
     
234.   hFrameWin = FRAMEWIN_Create("Title", _cbWindow, WM_CF_SHOW, 10, 80, 300, 140);
     
235.   /* 激活框架窗口 */
     
236.   FRAMEWIN_SetActive(hFrameWin, 1);
     
237.   /* 将标题控件添加到框架窗口中 */
     
238.   _hHeader = HEADER_CreateAttached(WM_GetClientWindow(hFrameWin), 1234, 0);
     
239.   _Demo();
     
240. 
     
241.   /* 删除 */
     
242.   FRAMEWIN_Delete(hFrameWin);
     
243.   while (1)
     
244.   {
     
245.   }
     
246. }
     
247. 
     
248. /*********************************************************************
     
249. *
     
250. *       _DemoHeaderWin
     
251. */
     
252. static void _DemoHeaderWin(void) {
     
253.   WM_HWIN hWin;
     
254. 
     
255.   _ChangeMainText("HEADER control inside a window");
     
256.   /* 创建窗口 */
     
257.   hWin = WM_CreateWindow(10, 80, 300, 140, WM_CF_SHOW, _cbWindow, 0);
     
258. 
     
259.   /*
     
260. Creates a HEADER widget which is attached to an existing window.
     
261. An attached HEADER widget is essentially a  child window which will position itself on
     
262.      the parent window and operate accordingly
     
263. */
     
264.   /* 中间的是ID号，后面的一个参数是保留的 */
     
265.   _hHeader = HEADER_CreateAttached(hWin, 1234, 0);
     
266.   _Demo();
     
267. 
     
268.   /* 删除 */
     
269.   WM_DeleteWindow(hWin);
     
270. }
     
271. 
     
272. /*********************************************************************
     
273. *
     
274. *       _DemoHeader
     
275. */
     
276. static void _DemoHeader(void) {
     
277.   _ChangeMainText("HEADER control without parent");
     
278.    /* 创建标题控件 */
     
279.   _hHeader = HEADER_Create(10, 80, 300, 0, 0, 1234, WM_CF_SHOW, 0);
     
280.   _Demo();
     
281.   HEADER_Delete(_hHeader);
     
282. }
     
283. 
     
284. /*********************************************************************
     
285. *
     
286. *       MainTask
     
287. *
     
288. **********************************************************************
     
289. */
     
290. void MainTask(void) {
     
291.   GUI_Init();
     
292. 
     
293.   /* 主要是在重绘的时候 使用存储设备 */
     
294.   WM_EnableMemdev(WM_HBKWIN);
     
295. 
     
296.   WM_SetCreateFlags(WM_CF_MEMDEV);
     
297. 
     
298.   /* 设置桌面函数的回调 */
     
299.   WM_SetCallback(WM_HBKWIN, _cbBkWindow);
     
300. 
     
301.   GUI_CURSOR_Show();
     
302.   while(1) {
     
303.     _DemoHeaderFrameWin();
     
304.     _DemoHeaderWin();
     
305.     _DemoHeader();
     
306.   }
     
307. }

这个实例很好的演示了在框架窗口，普通窗口和桌面窗口上面创建标题控件，演示的方法是一样的，只是在三种窗口上分别进行了演示。

实际显示效果如下：

46.3 使用官方GUIBulder建立HEADER控件

    官方的GUIBulder5.22版本支持HEADER控件的建立，前面说的uCGUIBulder4.0不支持HEADER控件的建立，下面使用GUIBulder5.22建立一个如下效果的界面（480*272分辨率）：

HERDER控件参数的设置在这里：

下面我们将生成的源代码在模拟器或者开发板上面运行（生成的代码在本期教程配套的例子中），实际显示效果如下：

46.4  总结

    本期教程主要是跟大家讲解了标题控件的使用，希望大家可以把本期教程中讲的这两个例子跑跑，然后自己设计一个相关的例子进行试验学习。教程中只是使用了部分的标题控件API，其它的API大家都可以试试。

好教程啊,支持一下先

谢谢，欢迎关注~~~