【安富莱原创】【STemWin教程】第43章 EDIT-编辑控件

`第43章 EDIT-编辑控件

      本期教程讲解STemWin支持的编辑控件。

    43. 1 编辑控件介绍

    43. 2 官方WIDGET_Edit实例

    43. 3 对话框上使用编辑框控件

    43. 4 总结

43.1 编辑控件介绍

    编辑字段通常用作输入文本的主要用户界面：

    也可使用编辑字段以二进制、十进制或十六进制模式输入值。十进制模式编辑字段的外观与下表所列类似。与复选框类似，编辑字段在禁用时显示为灰色：

开启皮肤设置后，编辑框的显示效果如下：

43.1.1 编辑框支持的通知代码

    以下事件是编辑框控件作为WM_NOtiFY_PARENT消息的一部分发送给其父窗口的：

消息	描述
WM_NOTIFICATION_CLICKED	已被点击。
WM_NOTIFICATION_RELEASED	已被释放。
WM_NOTIFICATION_MOVED_OUT	已被点击，且指针已移出控件，但没有释放。
WM_NOTIFICATION_VALUE_CHANGED	编辑小工具的值 （内容）已更改。

43.1.2 编辑框支持的键盘反应

    如果控件具有输入焦点，则它将对下列各键做出反应：

按键	反应
GUI_KEY_UP	上升当前字符。例如，如果当前字符 （光标下的字符）为 “A”， 则 变 为 “B”。
GUI_KEY_DOWN	下降当前字符。例如，如果当前字符为为 “B”，则变为 “A”。
GUI_KEY_RIGHT	将光标向右移动一个字符。
GUI_KEY_LEFT	将光标向左移动一个字符。
GUI_KEY_BACKSPACE	如果小工具在文本模式下操作，则删除光标前的字符。
GUI_KEY_DELETE	如果小工具在文本模式下操作，则删除当前字符。
GUI_KEY_INSERT	如果小工具在文本模式下操作，则此键在GUI_EDIT_MODE_OVERWRITE 和GUI_EDIT_MODE_INSERT之间切换编辑模式。

`

43.2 官方WIDGET_Edit实例

    官方的这个例子演示了部分EDIT控件API的使用。这个例子在模拟器中的位置：

源代码如下（官方的这个例子有BUG，下面是修改前的，也就是源代码）：

1. #include "GUI.h"
   
2. #include "EDIT.h"
   
3. 
   
4. /*********************************************************************
   
5. *
   
6. *       Defines
   
7. *
   
8. **********************************************************************
   
9. */
   
10. #define WM_APP_SHOW_TEXT (WM_USER + 0)                                                              （1）
    
11. #define TEXT_MAXLEN      40                                                                         （2）
    
12. 
    
13. /*********************************************************************
    
14. *
    
15. *       Static code
    
16. *
    
17. **********************************************************************
    
18. */
    
19. /*********************************************************************
    
20. *
    
21. *       _cbBk
    
22. */
    
23. static void _cbBk(WM_MESSAGE * pMsg) {
    
24.   static WM_HWIN hEdit;
    
25.   static U8      ShowText;
    
26.   char           aBuffer[TEXT_MAXLEN];
    
27. 
    
28.   hEdit    = 0;
    
29.   ShowText = 0;
    
30.   switch (pMsg->MsgId) {
    
31.   case WM_PAINT:
    
32.     GUI_SetBkColor(GUI_DARKGRAY);
    
33.     GUI_Clear();
    
34.     GUI_SetFont(&GUI_Font24_ASCII);
    
35.     GUI_DispStringHCenterAt("WIDGET_Edit - Sample", 160, 5);
    
36.     GUI_SetFont(&GUI_Font8x16);
    
37.     if (ShowText) {
    
38.       GUI_DispStringHCenterAt("The string you have modified is:", 160, 90);
    
39.       EDIT_GetText(hEdit, aBuffer, TEXT_MAXLEN);
    
40.       GUI_DispStringHCenterAt(aBuffer, 160, 110);
    
41.     } else {
    
42.       GUI_DispStringHCenterAt("Use keyboard to modify string...", 160, 90);
    
43.     }
    
44.     break;
    
45.   case WM_APP_SHOW_TEXT:
    
46.     if (hEdit == 0) {
    
47.       hEdit = pMsg->hWinSrc;
    
48.     }
    
49.     WM_HideWindow(hEdit);
    
50.     ShowText = 1;
    
51.     WM_InvalidateWindow(WM_HBKWIN);
    
52.     WM_CreateTimer(WM_HBKWIN, 0, 3000, 0);
    
53.     break;
    
54.   case WM_TIMER:
    
55.     ShowText = 0;
    
56.     WM_InvalidateWindow(WM_HBKWIN);
    
57.     WM_ShowWindow(hEdit);
    
58.     break;
    
59.   default:
    
60.     WM_DefaultProc(pMsg);
    
61.   }
    
62. }
    
63. 
    
64. /*********************************************************************
    
65. *
    
66. *       _cbEdit
    
67. */
    
68. static void _cbEdit(WM_MESSAGE * pMsg) {                                                            （3）
    
69.   const WM_KEY_INFO * pInfo;
    
70.   WM_MESSAGE          Msg;
    
71. 
    
72.   switch (pMsg->MsgId) {
    
73.   case WM_KEY:                                                                                      （4）
    
74.     pInfo = (WM_KEY_INFO *)pMsg->Data.p;
    
75.     if (pInfo->Key == GUI_KEY_ENTER) {
    
76.       if (pInfo->PressedCnt == 0) {
    
77.         Msg.MsgId   = WM_APP_SHOW_TEXT;
    
78.         Msg.hWinSrc = pMsg->hWin;
    
79.         WM_SendMessage(WM_HBKWIN, &Msg);
    
80.         return;
    
81.       }
    
82.     }
    
83.   }
    
84.   EDIT_Callback(pMsg);                                                                              （5）
    
85. }
    
86. 
    
87. /*********************************************************************
    
88. *
    
89. *       Public code
    
90. *
    
91. **********************************************************************
    
92. */
    
93. /*********************************************************************
    
94. *
    
95. *       MainTask
    
96. */
    
97. void MainTask(void) {
    
98.   EDIT_Handle hEdit;
    
99. 
    
100.   GUI_Init();
     
101.   WM_SetCallback(WM_HBKWIN, _cbBk);                                                                   （6）
     
102.   hEdit = EDIT_CreateEx(50, 110, 220, 25, WM_HBKWIN, WM_CF_SHOW, 0, GUI_ID_EDIT0, TEXT_MAXLEN);       （7）
     
103.   WM_SetCallback(hEdit, _cbEdit);                                                                     （8）
     
104.   EDIT_SetText(hEdit, "Press when done...");
     
105.   EDIT_SetFont(hEdit, &GUI_Font8x16);
     
106.   EDIT_SetTextColor(hEdit, 0, GUI_RED);
     
107.   EDIT_EnableBlink(hEdit, 300, 1);                                                                    （9）
     
108.   while (1) {
     
109.     GUI_Delay(10);
     
110.   }
     
111. }

复制代码

这个实例中函数static void _cbBk(WM_MESSAGE * pMsg)存在问题，需要做如下修改：

1. static void _cbBk(WM_MESSAGE * pMsg) {
   
2.   static WM_HWIN hEdit = 0;（10）
   
3.   static U8      ShowText = 0;
   
4.   char           aBuffer[TEXT_MAXLEN];
   
5. 
   
6.   //hEdit    = 0;
   
7.   //ShowText = 0;
   
8.   switch (pMsg->MsgId) {
   
9.   case WM_PAINT:                                                                                     （11）
   
10.     GUI_SetBkColor(GUI_DARKGRAY);
    
11.     GUI_Clear();
    
12.     GUI_SetFont(&GUI_Font24_ASCII);
    
13.     GUI_DispStringHCenterAt("WIDGET_Edit - Sample", 160, 5);
    
14.     GUI_SetFont(&GUI_Font8x16);
    
15.     if (ShowText) {
    
16.       GUI_DispStringHCenterAt("The string you have modified is:", 160, 90);
    
17.       EDIT_GetText(hEdit, aBuffer, TEXT_MAXLEN);
    
18.       GUI_DispStringHCenterAt(aBuffer, 160, 110);
    
19.     } else {
    
20.       GUI_DispStringHCenterAt("Use keyboard to modify string...", 160, 90);
    
21.     }
    
22.     break;
    
23.   case WM_APP_SHOW_TEXT:                                                                            （12）
    
24.     if (hEdit == 0) {
    
25.       hEdit = pMsg->hWinSrc;
    
26.     }
    
27.     WM_HideWindow(hEdit);
    
28.     ShowText = 1;
    
29.     WM_InvalidateWindow(WM_HBKWIN);
    
30.     WM_CreateTimer(WM_HBKWIN, 0, 3000, 0);
    
31.     break;
    
32.   case WM_TIMER:                                                                                    （13）
    
33.     ShowText = 0;
    
34.     WM_InvalidateWindow(WM_HBKWIN);
    
35.     WM_ShowWindow(hEdit);
    
36.     break;
    
37.   default:
    
38.     WM_DefaultProc(pMsg);
    
39.   }
    
40. }

复制代码

1. 自定义回调函数的消息。

2. 定义编辑框中可以显示字符的个数。

3. 编辑框的回调函数，默认情况下，编辑框的回调函数是在emWin库函数中自带执行的，不需要用户专门的做一个回调函数，如果用户需要在编辑框的回调函数中加入处理代码的话，可以通过函数WM_SetCallback来指定编辑框的回调函数。

4. 编辑框回调函数中的WM_KEY消息。如果用户在键盘上按下Enter回车键，那么就会给桌面窗口发送前面自定义的消息。

5. emWin库中自带的编辑框回调函数EDIT_Callback(pMsg);

6. 设置桌面窗口的回调函数。

7. 创建编辑框。

8. 设置编辑框的回调函数。

9. 这个函数用于使能或者禁止光标闪烁。

10. 这个函数是桌面窗口的回调函数，由于官方的提供的这个函数是存在问题的，这里专门的做了修改，注意红体字。

11. 桌面窗口的WM_PAINT消息。根据ShowText变量来改变不同的显示值。

12. 桌面窗口中自定义的消息，如果收到这个消息后，隐藏编辑框，设置ShowText = 1，然后将桌面窗口设置为无效，从而会执行桌面窗口的WM_PAINT消息，最后给桌面窗口建立一个定时器，时间是3000ms。

13. 定时器消息，3000ms的时间到了以后设置ShowText = 1，将桌面窗口无效，从而执行重绘消息，并将编辑框显示出来。

实际显示效果如下：

43.3 对话框上使用编辑框控件

    用uCGUIBulder4.0建立一个如下的界面（分辨率480*272）：

通过这个例子主要是显示一下编辑框支持的五种显示方式，设置的位置如下：

源代码如下（可以直接复制到模拟器或者开发板上面显示）：

1. #include
   
2. #include "GUI.h"
   
3. #include "DIALOG.h"
   
4. #include "WM.h"
   
5. #include "BUTTON.h"
   
6. #include "CHECKBOX.h"
   
7. #include "DROPDOWN.h"
   
8. #include "EDIT.h"
   
9. #include "FRAMEWIN.h"
   
10. #include "LISTBOX.h"
    
11. #include "MULTIEDIT.h"
    
12. #include "RADIO.h"
    
13. #include "SLIDER.h"
    
14. #include "TEXT.h"
    
15. #include "PROGBAR.h"
    
16. #include "SCROLLBAR.h"
    
17. #include "LISTVIEW.h"
    
18. 
    
19. /*********************************************************************
    
20. *
    
21. *       Dialog resource
    
22. *
    
23. * This table conatins the info required to create the dialog.
    
24. * It has been created by ucGUIbuilder.
    
25. */
    
26. static const GUI_WIDGET_CREATE_INFO _aDialogCreate[] = {
    
27.     { FRAMEWIN_CreateIndirect,  "armfly",            0,                       0,  0,  480,272,FRAMEWIN_CF_MOVEABLE,0},
    
28.     { EDIT_CreateIndirect,      "armfly",            GUI_ID_EDIT0,            239,36, 100,21, 0,0},
    
29.     { TEXT_CreateIndirect,      "TextMode",          GUI_ID_TEXT0,            81, 36, 106,24, 0,0},
    
30.     { TEXT_CreateIndirect,      "FloatMode",         GUI_ID_TEXT4,            81, 199,118,24, 0,0},
    
31.     { TEXT_CreateIndirect,      "DecMode",           GUI_ID_TEXT3,            81, 158,94, 24, 0,0},
    
32.     { TEXT_CreateIndirect,      "BinMode",           GUI_ID_TEXT2,            81, 117,94, 24, 0,0},
    
33.     { TEXT_CreateIndirect,      "HexMode",           GUI_ID_TEXT1,            81, 73, 94, 24, 0,0},
    
34.     { EDIT_CreateIndirect,      "FFFF",              GUI_ID_EDIT1,            239,73, 100,21, 0,0},
    
35.     { EDIT_CreateIndirect,      "11110000",          GUI_ID_EDIT2,            239,120,100,21, 0,0},
    
36.     { EDIT_CreateIndirect,      "128",               GUI_ID_EDIT3,            239,163,100,21, 0,0},
    
37.     { EDIT_CreateIndirect,      "12.123456",         GUI_ID_EDIT4,            239,199,100,21, 0,0}
    
38. };
    
39. 
    
40. /*****************************************************************
    
41. **      FunctionName:void PaintDialog(WM_MESSAGE * pMsg)
    
42. **      Function: to initialize the Dialog items
    
43. **                                                      
    
44. **      call this function in _cbCallback --> WM_PAINT
    
45. *****************************************************************/
    
46. 
    
47. void PaintDialog(WM_MESSAGE * pMsg)
    
48. {
    
49.     WM_HWIN hWin = pMsg->hWin;
    
50. 
    
51. }
    
52. 
    
53. /*****************************************************************
    
54. **      FunctionName:void InitDialog(WM_MESSAGE * pMsg)
    
55. **      Function: to initialize the Dialog items
    
56. **                                                      
    
57. **      call this function in _cbCallback --> WM_INIT_DIALOG
    
58. *****************************************************************/
    
59. 
    
60. void InitDialog(WM_MESSAGE * pMsg)
    
61. {
    
62.     WM_HWIN hWin = pMsg->hWin;
    
63.     //
    
64.     //FRAMEWIN
    
65.     //
    
66.     FRAMEWIN_SetFont(hWin,&GUI_Font32B_ASCII);
    
67.     FRAMEWIN_AddCloseButton(hWin, FRAMEWIN_BUTTON_RIGHT, 0);
    
68.     FRAMEWIN_AddMaxButton(hWin, FRAMEWIN_BUTTON_RIGHT, 1);
    
69.     FRAMEWIN_AddMinButton(hWin, FRAMEWIN_BUTTON_RIGHT, 2);
    
70.     FRAMEWIN_SetTitleHeight(hWin,35);
    
71.     //
    
72.     //GUI_ID_EDIT0
    
73.     //
    
74.     EDIT_SetFont(WM_GetDialogItem(hWin,GUI_ID_EDIT0),&GUI_Font16B_ASCII);
    
75.     EDIT_SetText(WM_GetDialogItem(hWin,GUI_ID_EDIT0),"armfly");
    
76.     //
    
77.     //GUI_ID_TEXT0
    
78.     //
    
79.     TEXT_SetFont(WM_GetDialogItem(hWin,GUI_ID_TEXT0),&GUI_Font24B_ASCII);
    
80.     //
    
81.     //GUI_ID_TEXT4
    
82.     //
    
83.     TEXT_SetFont(WM_GetDialogItem(hWin,GUI_ID_TEXT4),&GUI_Font24B_ASCII);
    
84.     //
    
85.     //GUI_ID_TEXT3
    
86.     //
    
87.     TEXT_SetFont(WM_GetDialogItem(hWin,GUI_ID_TEXT3),&GUI_Font24B_ASCII);
    
88.     //
    
89.     //GUI_ID_TEXT2
    
90.     //
    
91.     TEXT_SetFont(WM_GetDialogItem(hWin,GUI_ID_TEXT2),&GUI_Font24B_ASCII);
    
92.     //
    
93.     //GUI_ID_TEXT1
    
94.     //
    
95.     TEXT_SetFont(WM_GetDialogItem(hWin,GUI_ID_TEXT1),&GUI_Font24B_ASCII);
    
96.     //
    
97.     //GUI_ID_EDIT1
    
98.     //
    
99.     EDIT_SetFont(WM_GetDialogItem(hWin,GUI_ID_EDIT1),&GUI_Font16B_ASCII);
    
100.     EDIT_SetHexMode(WM_GetDialogItem(hWin,GUI_ID_EDIT1),65535,0,255);（1）
     
101.     //
     
102.     //GUI_ID_EDIT2
     
103.     //
     
104.     EDIT_SetFont(WM_GetDialogItem(hWin,GUI_ID_EDIT2),&GUI_Font16B_ASCII);
     
105.     EDIT_SetBinMode(WM_GetDialogItem(hWin,GUI_ID_EDIT2),240,0,255);（2）
     
106.     //
     
107.     //GUI_ID_EDIT3
     
108.     //
     
109.     EDIT_SetFont(WM_GetDialogItem(hWin,GUI_ID_EDIT3),&GUI_Font16B_ASCII);
     
110.     EDIT_SetDecMode(WM_GetDialogItem(hWin,GUI_ID_EDIT3),128,0,255,0,0);  （3）
     
111.     //
     
112.     //GUI_ID_EDIT4
     
113.     //
     
114.     EDIT_SetFont(WM_GetDialogItem(hWin,GUI_ID_EDIT4),&GUI_Font16B_ASCII);
     
115.     EDIT_SetFloatMode(WM_GetDialogItem(hWin,GUI_ID_EDIT4),12.12346,0,255,6,0);   （4）
     
116. 
     
117. }
     
118. 
     
119. /*********************************************************************
     
120. *
     
121. *       Dialog callback routine
     
122. */
     
123. static void _cbCallback(WM_MESSAGE * pMsg)
     
124. {
     
125.     int NCode, Id;
     
126.     WM_HWIN hWin = pMsg->hWin;
     
127.     switch (pMsg->MsgId)
     
128.     {
     
129.         case WM_PAINT:
     
130.             PaintDialog(pMsg);
     
131.             break;
     
132.         case WM_INIT_DIALOG:
     
133.             InitDialog(pMsg);
     
134.             break;
     
135.         case WM_KEY:
     
136.             switch (((WM_KEY_INFO*)(pMsg->Data.p))->Key)
     
137.             {
     
138.                 case GUI_KEY_ESCAPE:
     
139.                     GUI_EndDialog(hWin, 1);
     
140.                     break;
     
141.                 case GUI_KEY_ENTER:
     
142.                     GUI_EndDialog(hWin, 0);
     
143.                     break;
     
144.             }
     
145.             break;
     
146.         case WM_NOTIFY_PARENT:
     
147.             Id = WM_GetId(pMsg->hWinSrc);
     
148.             NCode = pMsg->Data.v;        
     
149.             switch (Id)
     
150.             {
     
151.                 case GUI_ID_OK:
     
152.                     if(NCode==WM_NOTIFICATION_RELEASED)
     
153.                         GUI_EndDialog(hWin, 0);
     
154.                     break;
     
155.                 case GUI_ID_CANCEL:
     
156.                     if(NCode==WM_NOTIFICATION_RELEASED)
     
157.                         GUI_EndDialog(hWin, 0);
     
158.                     break;
     
159. 
     
160.             }
     
161.             break;
     
162.         default:
     
163.             WM_DefaultProc(pMsg);
     
164.     }
     
165. }
     
166. 
     
167. /*********************************************************************
     
168. *
     
169. *       MainTask
     
170. *
     
171. **********************************************************************
     
172. */
     
173. void MainTask(void)
     
174. {
     
175.     GUI_Init();
     
176.     WM_SetDesktopColor(GUI_WHITE);      /* Automacally update desktop window */
     
177.     WM_SetCreateFlags(WM_CF_MEMDEV);  /* Use memory devices on all windows to avoid flicker */
     
178. PROGBAR_SetDefaultSkin(PROGBAR_SKIN_FLEX);
     
179. FRAMEWIN_SetDefaultSkin(FRAMEWIN_SKIN_FLEX);
     
180. PROGBAR_SetDefaultSkin(PROGBAR_SKIN_FLEX);
     
181. BUTTON_SetDefaultSkin(BUTTON_SKIN_FLEX);
     
182. CHECKBOX_SetDefaultSkin(CHECKBOX_SKIN_FLEX);
     
183. DROPDOWN_SetDefaultSkin(DROPDOWN_SKIN_FLEX);
     
184. SCROLLBAR_SetDefaultSkin(SCROLLBAR_SKIN_FLEX);
     
185. SLIDER_SetDefaultSkin(SLIDER_SKIN_FLEX);
     
186. HEADER_SetDefaultSkin(HEADER_SKIN_FLEX);
     
187. RADIO_SetDefaultSkin(RADIO_SKIN_FLEX);
     
188.     GUI_ExecDialogBox(_aDialogCreate, GUI_COUNTOF(_aDialogCreate), &_cbCallback, 0, 0, 0);
     
189. }

复制代码

1. 设置16进制显示。

2. 设置2进制显示。

3. 设置10进制显示。

4. 设置浮点数显示。

实际的显示效果如下：

43.4 总结

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

好牛逼的样子，不懂