& o  i. G8 Z  j7 A! D% O, S, P
, a3 K+ }# m& b9 A2 A6 S/ [特别说明：完整STemWin的1-60期教程和配套实例下载地址：链接
6 @! {; K. g/ ?  Q+ C4 w

第46章 HEADER-标题控件

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

    46. 1 标题控件介绍

    46. 2 官方WIDGET_Header实例

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

    46. 4 总结

46.1 标题控件介绍

    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
   . D( a  o! ]2 O6 d/ ?) m; z7 ^$ U3 F
4. ---------------------------END-OF-HEADER------------------------------
   
5. */
   
6. 
   + q: y/ `- b5 F  D! E
7. #include <stddef.h>
   / t# u& y2 X5 ~0 ?
8. #include <string.h>
   
9. #include "GUI.h"
   ; x4 |* ?7 }2 S$ k
10. #include "HEADER.h"
    . i( {% T/ q1 z: x
11. #include "FRAMEWIN.h"
    
12. 
    ( h' ?2 T/ N2 p
13. /*********************************************************************
    4 r6 |! ?8 I* |4 ]7 U, B% ^( Q
14. *
    1 n! X  M3 G1 o% y
15. *       Defines
    6 d: d+ P: l8 x7 i# C& j7 J
16. *
    0 K. a# T4 Z8 V: X4 H
17. **********************************************************************
    , \2 J  t8 _' T! s: i( w: e$ r
18. */
    
19. 
    ( I, z8 J$ o0 M' g; s& b
20. /* 自定义回调函数的消息类型 */
    - `; B3 i& [5 {
21. #define MSG_CHANGE_MAIN_TEXT (WM_USER + 0)
    9 ?7 U$ x: G, b# u; {6 K
22. #define MSG_CHANGE_INFO_TEXT (WM_USER + 1)
    9 ]% h8 T1 s5 H( _; u
23. 
    
24. /*********************************************************************
    - i' i' F$ D" j/ @, ]1 F
25. *
    1 [4 [2 p  \2 p8 Z: x( V
26. *       Static data
    6 ?6 T# D( Z5 U
27. *
    
28. **********************************************************************
    
29. */
    0 V& a( X6 r1 y
30. 
    - H% `/ Y0 @" E: B
31. static HEADER_Handle _hHeader;
    1 i% I: Y# H" _3 V9 Q5 Y
32. static char _acMainText[100];
    , x" i+ y1 n6 a4 o
33. static char _acInfoText[100];
    
34. 
    
35. /*********************************************************************
    ; |9 G9 }- |& L& x
36. *
    8 ~" o! X+ I5 B2 h2 c. ~
37. *       Static code
    
38. *
    5 Y* n5 j" b, \$ z* R
39. **********************************************************************
      ], l& w; F8 F, F* l
40. */
    & @$ k$ V0 M' t# X  J( p
41. 
    
42. /*******************************************************************
    ( w  Y3 e3 I  k7 y7 N0 ?
43. *
    7 I- T2 S( ]. q6 N
44. *       _ChangeMainText
    
45. *
    4 g- F6 ], R& m, N: ]6 `3 B7 Q
46. *  给背景窗口发送消息，然后使其无效，这样就可以执行桌面窗口的回调函数的WM_PAINT消息
    
47. */
    
48. static void _ChangeMainText(char* pStr) {
    
49.   WM_MESSAGE Message;
    
50.   Message.MsgId  = MSG_CHANGE_MAIN_TEXT;
    & [1 V" d9 h3 T+ C
51.   Message.Data.p = pStr;
    7 l4 i0 J  ~. F! n# h7 H
52.   /* 向桌面窗口发送消息 */
    
53.   WM_SendMessage(WM_HBKWIN, &Message);
    
54.   /* 使桌面窗口无效 */
    $ P6 |$ A$ ^1 p, _
55.   WM_InvalidateWindow(WM_HBKWIN);
    
56. }
    
57. 
    6 J1 T7 `- g3 Y" Y1 W
58. /*******************************************************************
    0 c; Q% @, w& ^2 C  R- s
59. *
    
60. *       _ChangeInfoText
    
61. *
    
62. *  给背景窗口发送消息，然后使其无效，这样就可以执行桌面窗口的回调函数的WM_PAINT消息
    7 r" P. Y5 W& l7 c  U3 v
63. */
    
64. static void _ChangeInfoText(char* pStr) {
    
65.   WM_MESSAGE Message;
    2 A0 Y' O$ W# G% L
66.   Message.MsgId  = MSG_CHANGE_INFO_TEXT;
    
67.   Message.Data.p = pStr;
    
68.   /* 向桌面窗口发送消息 */
    * Z7 I+ v0 I$ ~8 ^
69.   WM_SendMessage(WM_HBKWIN, &Message);
    
70.   /* 使桌面窗口无效 */
    
71.   WM_InvalidateWindow(WM_HBKWIN);
    
72. }
    ) o, m9 \; r1 u2 [8 g! ?
73. 
    
74. /*******************************************************************
    + [3 \$ _1 h! Q# R8 a. V
75. *
    
76. *       _cbBkWindow
    
77. *     桌面窗口的回调函数
    
78. */
    
79. static void _cbBkWindow(WM_MESSAGE* pMsg) {
    / _) t* b5 _! A! ?5 H# W
80.   switch (pMsg->MsgId) {
    # m8 N  F- J- o# o7 N! Q  G
81. 
    
82.     case MSG_CHANGE_MAIN_TEXT:
    0 C' l3 j3 R" l, T! O- w
83.       strcpy(_acMainText, pMsg->Data.p);
    5 T& {, _3 u% G9 ]
84.       /* 使其无效，从而得到重绘 */
    
85.       WM_InvalidateWindow(pMsg->hWin);
    0 F0 d/ V2 C3 O4 H0 p4 R6 |
86.       break;
    
87. 
    * W. Z0 x0 n% i0 s+ p6 H
88.     case MSG_CHANGE_INFO_TEXT:
    ) E4 V6 k. l' c
89.       strcpy(_acInfoText, pMsg->Data.p);
    % I' E- n& q' Z+ s& t6 v4 b
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);
    # Q+ P8 P$ a4 W4 R
99.       GUI_DispStringHCenterAt("HEADER Widget - Sample", 160, 5);
    
100.       GUI_SetFont(&GUI_Font8x16);
     
101.       GUI_DispStringAt(_acMainText, 5, 40);
     " e6 s. @# P$ _5 }2 \$ N* D1 w
102.       GUI_SetFont(&GUI_Font8x8);
     
103.       GUI_DispStringAt(_acInfoText, 5, 60);
     
104.       break;
     
105. 
     
106.     default:
     
107.       WM_DefaultProc(pMsg);
     
108.   }
     ( l1 D' h: I8 [+ I: v- M, B
109. }
     
110. 
     ' v6 k! ]! K/ I9 G& }' F( A9 {
111. /*********************************************************************
     * ~  g7 ^* c6 f9 j- {9 k* n# g
112. *
     
113. *       _OnPaint
     
114. */
     
115. static void _OnPaint(void) {
     
116.   int xPos = 0;
     
117.   GUI_RECT Rect;
     
118. 
     4 }; ]$ L# L7 O$ I0 c: i
119.   /* 设置背景颜色 */
     
120.   GUI_SetBkColor(GUI_GRAY);
     
121.   GUI_Clear();
     
122. 
     ( p8 E) T# m, J
123.   /* 得到用户区 */
     
124.   WM_GetClientRect(&Rect);
     
125. 
     % K  _+ q# g$ I5 g# j
126.   /* 得到第一个HEADER的宽度和下面区域的颜色 */
     
127.   Rect.x1 = HEADER_GetItemWidth(_hHeader, 0);
     0 o% ^/ O; u; ?0 O0 i6 ]1 O
128.   GUI_SetColor(GUI_RED);
     
129.   GUI_FillRect(Rect.x0, Rect.y0, Rect.x1, Rect.y1);
     9 n) g  f$ j7 Z! y
130. 
     
131.   /* 得到第二个HEADER的宽度和下面区域的颜色 */
     
132.   Rect.x0 = Rect.x1;
     ) k, ?; `/ y- X( c/ S: [
133.   Rect.x1 += HEADER_GetItemWidth(_hHeader, 1);
     
134.   GUI_SetColor(GUI_GREEN);
     $ ^' Q# n9 t+ Z4 Z- ^
135.   GUI_FillRect(Rect.x0, Rect.y0, Rect.x1, Rect.y1);
     
136. 
     . F; R3 h- L$ }! G
137.   /* 得到第三个HEADER的宽度和下面区域的颜色 */
     # e& V2 a- e) o' Y% y. R) l7 y
138.   Rect.x0 = Rect.x1;
     ' I8 Y% q" A, Z$ U0 C: V. a+ @
139.   Rect.x1 += HEADER_GetItemWidth(_hHeader, 2);
     / ]8 {3 M" i7 g+ j( S
140.   GUI_SetColor(GUI_BLUE);
     2 ]) l6 }) J0 w
141.   GUI_FillRect(Rect.x0, Rect.y0, Rect.x1, Rect.y1);
     
142. }
     
143. 
     ; U$ Y! I) V- e" S6 A( m
144. /*********************************************************************
     
145. *
     
146. *       cbWindow
     
147. */
     0 K$ m) J5 I7 x- m2 Q* f+ |
148. static void _cbWindow(WM_MESSAGE * pMsg) {
     
149.   WM_HWIN hWin = pMsg->hWin;
     5 H5 ?' H4 k; k  P# u. V4 J
150.   switch (pMsg->MsgId) {
     
151.     case WM_PAINT:
     * N6 ]  `/ W' `( q) l: b
152.       _OnPaint();
     " C( E  G7 i& Y3 @9 A% ?; }( D
153.       break;
     
154.   }
     
155.   WM_DefaultProc(pMsg);
     4 d. C# {" `6 Z# U
156. }
     & J# I# D+ |- O. G/ U
157. 
     " g/ Z1 J. H1 R$ U" N
158. /*********************************************************************
     
159. *
     % i" V2 q" Z; j. m: C) s1 v
160. *       _Demo
     . V6 ?( t5 I3 ^7 m
161. */
     
162. static void _Demo(void) {
     9 w  D0 X" P* p, I( y6 v0 |
163. 
     ' w" \' l6 k6 W& P' Y0 m3 m
164.   int Key = 0;
     ; o' r$ `: \4 |3 a
165.   int Cnt = 10;
     6 Y6 q0 c  P) T  ~
166. 
     1 r4 d9 X. {9 C/ B* L7 M
167.   char acInfoText[] = "-- sec to play with header control";
     
168. 
     / d1 w6 o7 H, J  e
169. 
     0 H" h6 H+ n1 a- J8 G! \
170.   _ChangeInfoText("HEADER_AddItem");
     , O0 H& Z4 \- [: o2 q
171.   /*
     
172. The Width-parameter can be 0. If  Width = 0 the width
     # U2 n5 p5 ^* W5 |  j- \
173.   of the new item will be calcu-lated by the given text and by the default
     4 _0 o% N3 ]9 ]1 o
174.   value of the horizontal spacing.
     
175. */
     5 E3 G5 c1 r. ~' k  P1 |
176.   /* 注意宽度的设置 */
     * q: M9 [/ g4 k& k2 T
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);
     - o& g% N& i; ]  {
180.   GUI_Delay(750);
     
181. 
     ! z# I) e& J. E( E0 e7 I9 h: I# a
182.   /* 设置第二的宽度  60*/
     
183.   _ChangeInfoText("HEADER_SetItemWidth");
     3 H! x' r3 ~2 r( c4 s1 a- G
184.   HEADER_SetItemWidth(_hHeader, 1, 60);
     ; }4 w  X1 L% z6 s' @# o
185. 
     7 b, v; s0 u! ^" N" B
186.   /* 设置第三的宽度  100*/
     7 N( b  G& f. F5 {" _5 K
187.   _ChangeInfoText("HEADER_SetItemText");
     " D7 k+ [& s% Q$ M) k0 M$ @
188.   HEADER_SetItemWidth(_hHeader, 2, 100);
     
189.   HEADER_SetItemText(_hHeader, 2, "Blue");
     / A& U% Q7 \, E, S4 ]  |  n
190.   GUI_Delay(750);
     ; e1 \4 r' ?6 n3 [0 w5 }8 B* [
191. 
     
192.   /* 设置字体 */
     
193.   _ChangeInfoText("HEADER_SetFont");
     + q1 u5 y5 G1 h% q' R4 {. f& J! }
194.   HEADER_SetFont(_hHeader, &GUI_Font8x8);
     
195.   GUI_Delay(750);
     3 j" A9 d. @3 y5 s9 U) ?7 a
196. 
     
197.   /* 设置已有Header的高度 */
     ( W. P4 F( |; |8 \# m
198.   _ChangeInfoText("HEADER_SetHeight");
     5 S/ W; {! a1 _( V
199.   HEADER_SetHeight(_hHeader, 50);
     , @1 Z. {3 z8 G$ c; Z$ u
200.   GUI_Delay(750);
     / ^8 C/ {6 |8 e6 O* h
201. 
     - H: [+ ?9 Z/ R% E  }
202.   /* 设置字体颜色 */
     
203.   _ChangeInfoText("HEADER_SetTextColor");
     # j, G( ~4 D1 X5 y; O
204.   HEADER_SetTextColor(_hHeader, GUI_YELLOW);
     7 q: V& o9 ?8 d
205.   GUI_Delay(750);
     ) U( \" H4 _8 C9 c( B3 W, b. f
206. 
     
207.   /* 设置背景颜色 */
     
208.   _ChangeInfoText("HEADER_SetBkColor");
     
209.   HEADER_SetBkColor(_hHeader, GUI_DARKGRAY);
     . C2 T. ^7 C( i. Y0 I5 A- W9 O
210.   GUI_Delay(750);
     
211. 
     
212. 
     
213.   /* 设置对齐方式 */
     
214.   /* 等待有按键按下 */
     & U# X6 t9 J' c% G) e
215.   _ChangeInfoText("HEADER_SetTextAlign");
     
216.   HEADER_SetTextAlign(_hHeader, 0, GUI_TA_HCENTER);
     7 b( w' L; B. O) r. i* L+ _( N
217.   while (!Key && (Cnt > 0)) {
     
218.     acInfoText[0] = '0' + (Cnt / 10);
     3 n" ^" D) V4 u! ~+ J1 B, X
219.     acInfoText[1] = '0' + (Cnt-- % 10);
     4 S4 h6 Z/ [0 d3 x
220.     _ChangeInfoText(acInfoText);
     : ~5 A" {1 ], ?% u
221.     GUI_Delay(1000);
     9 a7 P& U+ j7 g- \$ ?6 J) E
222.     Key = GUI_GetKey();
     
223.   }
     
224. }
     % V7 e) y! X3 }( P3 \, [5 s
225. 
     " y! Z. k9 Q% V) T6 x* e
226. /*********************************************************************
     ! [+ p5 l) X6 J9 u4 a
227. *
     9 b5 K4 |+ d* L/ G5 b9 l2 P
228. *       _DemoHeaderFrameWin
       t7 o: X* F6 g! L: m0 ~! A/ ?: I
229. */
     
230. static void _DemoHeaderFrameWin(void) {
     
231.   FRAMEWIN_Handle hFrameWin;
     1 T0 L" g$ I/ l7 y
232.   _ChangeMainText("HEADER control inside a FRAMEWIN");
     5 e+ I4 \# n' g+ W: h
233.   /* 创建框架窗口 */
     
234.   hFrameWin = FRAMEWIN_Create("Title", _cbWindow, WM_CF_SHOW, 10, 80, 300, 140);
     * L5 |& a$ t! u, `2 B
235.   /* 激活框架窗口 */
     8 }) |1 ]+ H1 F, I
236.   FRAMEWIN_SetActive(hFrameWin, 1);
     5 ]/ \$ V7 ^4 R
237.   /* 将标题控件添加到框架窗口中 */
     
238.   _hHeader = HEADER_CreateAttached(WM_GetClientWindow(hFrameWin), 1234, 0);
     5 r$ P% M, `: a3 k
239.   _Demo();
     
240. 
       a2 {. a" H' a/ J( M, E; I$ F! F% x
241.   /* 删除 */
     
242.   FRAMEWIN_Delete(hFrameWin);
     
243.   while (1)
     2 s6 T$ o9 I' M; G! k6 H/ T
244.   {
     
245.   }
     1 \* P; m% D7 [  }. S0 a( f; N
246. }
     ; I) n% g* o! W- c# G' ?
247. 
     0 T( ^: v6 H! |) M5 _" Y
248. /*********************************************************************
     " @& M1 M' F4 k; n/ G
249. *
     
250. *       _DemoHeaderWin
     
251. */
     $ N4 O8 h$ E9 K6 Z
252. static void _DemoHeaderWin(void) {
     
253.   WM_HWIN hWin;
     
254. 
     8 I! x6 W* R+ z
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. */
     6 b" I: m0 h+ K8 D
264.   /* 中间的是ID号，后面的一个参数是保留的 */
     $ L0 R! v* U# @
265.   _hHeader = HEADER_CreateAttached(hWin, 1234, 0);
     
266.   _Demo();
     5 l% q0 W4 C+ v, M" ~6 m( Z1 v. `
267. 
     2 b/ i+ ?  ]: ?& A) d! I' u
268.   /* 删除 */
     
269.   WM_DeleteWindow(hWin);
     $ L7 w% a! a, y; b( f4 W! Q
270. }
     # J0 c" O! P% L) d0 k# D& |
271. 
     " l( C- V  W- Q% N4 u
272. /*********************************************************************
     
273. *
     . j8 B( X7 g+ ]* C) R
274. *       _DemoHeader
     " @) U/ U) Z4 }& M7 g* c* M
275. */
     , L) q9 S$ C! H' i% p+ P7 g
276. static void _DemoHeader(void) {
     : |$ w0 E( Z# Z2 G) X; m
277.   _ChangeMainText("HEADER control without parent");
     : f" m& w- v& S5 u: l. t
278.    /* 创建标题控件 */
     
279.   _hHeader = HEADER_Create(10, 80, 300, 0, 0, 1234, WM_CF_SHOW, 0);
     
280.   _Demo();
     $ V6 `+ e1 r, Q- y
281.   HEADER_Delete(_hHeader);
     , G6 p( e. ^# @6 ~
282. }
     
283. 
     
284. /*********************************************************************
     & ?) _7 \7 Y. P- N+ c& v8 T
285. *
     
286. *       MainTask
     : O0 U8 w- H) X7 P: ~
287. *
     
288. **********************************************************************
     
289. */
     4 h( B% Z( }1 b% C8 g
290. void MainTask(void) {
     
291.   GUI_Init();
     
292. 
     ' J2 }4 T0 \& {- |* C1 t
293.   /* 主要是在重绘的时候 使用存储设备 */
       ^+ n* E" A7 K! @6 S! r# q
294.   WM_EnableMemdev(WM_HBKWIN);
     
295. 
     
296.   WM_SetCreateFlags(WM_CF_MEMDEV);
     
297. 
     . h5 M2 f- ^0 u1 \7 J
298.   /* 设置桌面函数的回调 */
     / e6 L( i" B/ A' l
299.   WM_SetCallback(WM_HBKWIN, _cbBkWindow);
     
300. 
     8 |% q# x8 k' i
301.   GUI_CURSOR_Show();
     2 Z$ \9 o, [7 t1 P+ {
302.   while(1) {
     0 L; b$ p3 i6 G
303.     _DemoHeaderFrameWin();
     
304.     _DemoHeaderWin();
     & W; G4 h% P6 {, C# y) f
305.     _DemoHeader();
     6 \' E- A4 b/ f# O
306.   }
     - {9 h& ?! S2 f6 A, r# ?& P
307. }

复制代码

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

实际显示效果如下：

46.3 使用官方GUIBulder建立HEADER控件

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

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

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

46.4 总结

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

很好的教程