【STemWin教程】第51章 MULTIPAGE-多页控件

席萌0209

特别说明：完整STemWin的1-60期教程和配套实例下载地址：链接

第51章 MULTIPAGE-多页控件

    本期教程讲解STemWin支持的多页控件。
    51. 1 多页控件介绍
    51. 2 官方WIDGET_Multipage实例
    51. 3 使用GUIBulder建立多页控件
    51. 4 总结

51.1 多页控件介绍
    MULTIPAGE类似于笔记本中的分隔卡或文件柜中的标签。通过使用MULTIPAGE控件，应用程序可为窗口或对话框的相同区域定义多个页面。每个页面包含特定类型的信息或用户选择相应页面时应用程序会显示的一组控件。如果要选择一个页面，则必须单击该页面的选项卡。如果无法显示所有选项卡，则MULTIPAGE控件会自动在边缘处显示一个小滚动条以滚动页面。下表显示MULTIPAGE控件的外观：

MULTIPAGE控件的结构
    包含n个页面的MULTIPAGE小工具由n+2个
窗口组成：
  l 1个MULTIPAGE窗口
  l 1个客户端窗口
  l N个页面窗口
    页面窗口将被添加到小工具的客户端窗口。右图显示了控件的结构。

51.1.1 多页支持的通知代码
    以下事件是编辑框控件作为WM_NOTIFY_PARENT消息的一部分发送给其父窗口的：

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

51.1.2 多页支持的键盘反应
    如果控件具有输入焦点，则它将对下列各键做出反应

按键	反应
GUI_KEY_PGUP	切换到下一页。
GUI_KEY_PGDOWN	切换到上一页。

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

‘

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

1. #include <stdlib.h>
3. #include "GUI.h"
4. #include "MULTIPAGE.h"
6. /*********************************************************************
7. *
8. *       Static data
9. *
10. **********************************************************************
11. */
12. /*********************************************************************
13. *
14. *       Dialog resource
15. *
16. *  These tables contain the information required to create the dialogs.
17. *  It has been created manually, but could also be created by the GUIBuilder.
18. */
19. static const GUI_WIDGET_CREATE_INFO _aDialogCreate1[] = {
20.   { WINDOW_CreateIndirect,    "Dialog 1", 0,                   0,   0, 260, 100, FRAMEWIN_CF_MOVEABLE },
21.   { BUTTON_CreateIndirect,    "Button",   GUI_ID_BUTTON0,      5,  30,  80,  20, 0},
22.   { TEXT_CreateIndirect,      "Dialog 1", 0,                   5,  10,  50,  20, TEXT_CF_LEFT }
23. };
25. static const GUI_WIDGET_CREATE_INFO _aDialogCreate2[] = {
26.   { WINDOW_CreateIndirect,    "Dialog 2", 0,                   0,   0, 260, 100, FRAMEWIN_CF_MOVEABLE },
27.   { CHECKBOX_CreateIndirect,  "",         GUI_ID_CHECK0,       5,  30,   0,   0, 0},
28.   { CHECKBOX_CreateIndirect,  "",         GUI_ID_CHECK1,       5,  50,   0,   0, 0},
29.   { TEXT_CreateIndirect,      "Select 0", GUI_ID_TEXT0,       25,  30,  50,  15, TEXT_CF_LEFT },
30.   { TEXT_CreateIndirect,      "Select 1", GUI_ID_TEXT1,       25,  50,  50,  15, TEXT_CF_LEFT },
31.   { TEXT_CreateIndirect,      "Dialog 2", 0,                   5,  10,  50,  20, TEXT_CF_LEFT }
32. };
34. static const GUI_WIDGET_CREATE_INFO _aDialogCreate3[] = {
35.   { WINDOW_CreateIndirect,    "Dialog 3", 0,                   0,   0, 260, 100, FRAMEWIN_CF_MOVEABLE },
36.   { RADIO_CreateIndirect,     "",         GUI_ID_RADIO0,       5,  30,   0,   0, 0, 3},
37.   { TEXT_CreateIndirect,      "Option 1", GUI_ID_TEXT0,       25,  30,  50,  15, TEXT_CF_LEFT },
38.   { TEXT_CreateIndirect,      "Option 2", GUI_ID_TEXT1,       25,  50,  50,  15, TEXT_CF_LEFT },
39.   { TEXT_CreateIndirect,      "Option 3", GUI_ID_TEXT2,       25,  70,  50,  15, TEXT_CF_LEFT },
40.   { TEXT_CreateIndirect,      "Dialog 3", 0,                   5,  10,  50,  20, TEXT_CF_LEFT }
41. };
43. static const GUI_WIDGET_CREATE_INFO _aDialogCreate4[] = {
44.   { WINDOW_CreateIndirect,    "Dialog 4", 0,                   0,   0, 260, 100, FRAMEWIN_CF_MOVEABLE },
45.   { MULTIEDIT_CreateIndirect, "Text",     GUI_ID_MULTIEDIT0,   5,  30, 200,  40  },
46.   { TEXT_CreateIndirect,      "Dialog 4", 0,                   5,  10,  50,  20, TEXT_CF_LEFT }
47. };
49. static const GUI_WIDGET_CREATE_INFO _aDialogCreate5[] = {
50.   { WINDOW_CreateIndirect,    "Dialog 5", 0,                   0,   0, 260, 100, FRAMEWIN_CF_MOVEABLE },
51.   { SLIDER_CreateIndirect,    "",         GUI_ID_SLIDER0,      5,  30, 200,  40  },
52.   { TEXT_CreateIndirect,      "Dialog 5", 0,                   5,  10,  50,  20, TEXT_CF_LEFT }
53. };
55. static const GUI_WIDGET_CREATE_INFO _aDialogCreate6[] = {
56.   { WINDOW_CreateIndirect,    "Dialog 6", 0,                   0,   0, 260, 100, FRAMEWIN_CF_MOVEABLE },
57.   { SCROLLBAR_CreateIndirect, "",         GUI_ID_SCROLLBAR0,   5,  30, 200,  40  },
58.   { TEXT_CreateIndirect,      "Dialog 6", 0,                   5,  10,  50,  20, TEXT_CF_LEFT }
59. };
61. /*********************************************************************
62. *
63. *       Static code
64. *
65. **********************************************************************
66. */
67. /*********************************************************************
68. *
69. *       _cbDialog4
70. */
71. static void _cbDialog4(WM_MESSAGE * pMsg) {
72.   WM_HWIN hItem;
73.   WM_HWIN hDlg;
75.   hDlg = pMsg->hWin;
76.   switch (pMsg->MsgId) {
77.   case WM_INIT_DIALOG:
78.     hItem = WM_GetDialogItem(hDlg, GUI_ID_MULTIEDIT0);
79.     MULTIEDIT_SetText(hItem, "MULTIEDIT widget");
80.     MULTIEDIT_SetInsertMode(hItem, 1);
81.     break;
82.   default:
83.     WM_DefaultProc(pMsg);
84.   }
85. }
87. /*********************************************************************
88. *
89. *       _cbBkWindow
90. *
91. *   桌面窗口的回调函数，主要是重绘部分
92. */
93. static void _cbBkWindow(WM_MESSAGE * pMsg) {
94.   switch (pMsg->MsgId) {
95.   case WM_PAINT:
96.     GUI_SetBkColor(GUI_BLUE);
97.     GUI_Clear();
98.     GUI_SetColor(GUI_WHITE);
99.     GUI_SetFont(&GUI_Font24_ASCII);
100.     GUI_DispStringHCenterAt("WIDGET_Multipage - Sample", 160, 5);
101.     break;
102.   default:
103.     WM_DefaultProc(pMsg);
104.   }
105. }
107. /*********************************************************************
108. *
109. *       Public code
110. *
111. **********************************************************************
112. */
113. /*********************************************************************
114. *
115. *       MainTask
116. */
117. void MainTask(void) {
118.   WM_HWIN hMultiPage;
119.   WM_HWIN hFrameWin;
120.   WM_HWIN hDialog;
122.   //
123.   // 使能窗口使用内存设备
124.   //
125.   WM_SetCreateFlags(WM_CF_MEMDEV);
126.   GUI_Init();
127.   /* 设置桌面窗口的回调函数 */
128.   WM_SetCallback(WM_HBKWIN, _cbBkWindow);
130.   //
131.   // 创建框架窗口
132.   //
133.   hFrameWin = FRAMEWIN_Create("FrameWindow", NULL, WM_CF_SHOW, 40, 44, 240, 152);
134.   /* 设置窗口的属性 */
135.   FRAMEWIN_SetClientColor(hFrameWin, GUI_GREEN);
136.   FRAMEWIN_SetActive(hFrameWin, 1);
137.   FRAMEWIN_SetMoveable(hFrameWin, 1);
139.   //
140.   // 在框架窗口上创建多页控件
141.   //
142.   hMultiPage = MULTIPAGE_CreateEx(7, 6, 220, 120, WM_GetClientWindow(hFrameWin), WM_CF_SHOW, 0, 0);
143.   GUI_Delay(500);
145.   //
146.   // 在多页控件的每页上面创建对话框，创建了对话框后，要通过函数MULTIPAGE_AddPage进行添加。
147.   //
148.   hDialog = GUI_CreateDialogBox(_aDialogCreate1, GUI_COUNTOF(_aDialogCreate1), NULL,       WM_UNATTACHED, 0, 0);
149.   MULTIPAGE_AddPage(hMultiPage, hDialog, "Page 1");
150.   GUI_Delay(500);
151.   hDialog = GUI_CreateDialogBox(_aDialogCreate2, GUI_COUNTOF(_aDialogCreate2), NULL,       WM_UNATTACHED, 0, 0);
152.   MULTIPAGE_AddPage(hMultiPage, hDialog, "Page 2");
153.   GUI_Delay(500);
154.   hDialog = GUI_CreateDialogBox(_aDialogCreate3, GUI_COUNTOF(_aDialogCreate3), NULL,       WM_UNATTACHED, 0, 0);
155.   MULTIPAGE_AddPage(hMultiPage, hDialog, "Page 3");
156.   GUI_Delay(500);
157.   hDialog = GUI_CreateDialogBox(_aDialogCreate4, GUI_COUNTOF(_aDialogCreate4), _cbDialog4, WM_UNATTACHED, 0, 0);
158.   MULTIPAGE_AddPage(hMultiPage, hDialog, "Page 4");
159.   GUI_Delay(500);
160.   hDialog = GUI_CreateDialogBox(_aDialogCreate5, GUI_COUNTOF(_aDialogCreate5), NULL,       WM_UNATTACHED, 0, 0);
161.   MULTIPAGE_AddPage(hMultiPage, hDialog, "Page 5");
162.   GUI_Delay(500);
163.   hDialog = GUI_CreateDialogBox(_aDialogCreate6, GUI_COUNTOF(_aDialogCreate6), NULL,       WM_UNATTACHED, 0, 0);
164.   MULTIPAGE_AddPage(hMultiPage, hDialog, "Page 6");
165.   GUI_Delay(500);
166.   //
167.   // 通过函数MULTIPAGE_SetAlign设置对齐
168.   //
169.   MULTIPAGE_SetAlign(hMultiPage, MULTIPAGE_ALIGN_RIGHT);
170.   GUI_Delay(500);
171.   MULTIPAGE_SetAlign(hMultiPage, MULTIPAGE_ALIGN_RIGHT | MULTIPAGE_ALIGN_BOTTOM);
172.   GUI_Delay(500);
173.   MULTIPAGE_SetAlign(hMultiPage, MULTIPAGE_ALIGN_LEFT | MULTIPAGE_ALIGN_BOTTOM);
174.   while (1) {
175.     GUI_Delay(100);
176.   }
177. }

复制代码

这个例子给出了多页控件的基本使用方法，如果想使用多页控件的话，这个例子很有参考价值。实际显示效果如下：

51.3 使用官方GUIBulder建立多页控件
    这里用GUIBulder5.22建立一个如下的界面（分辨率480*272）：

    多页控件中选项的添加也比较容易，在多页控件上右击鼠标，可以看到如下界面：

    添加后具体每个多页控件选项的名字左下角这里进行设置：

    设置好以后，将生成的代码复制到模拟器或者开发板上面并稍作修改（生成的代码在本期教程配套的例子中），显示效果如下：

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