What's the difference between frame,window and dialog

    This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

    • What's the difference between frame,window and dialog

      When I design UI with emwin, I find that I can implement my interface with either frame, window or dialog, so my question is what's the difference between these three types? What is the application scenario for each type? Thank you.

    • Hi,

      Basically all of them (FRAMEWIN, WINDOW, and Dialog) are windows. The FRAMEWIN and WINDOW are widgets (some special kind of windows). Widgets are predefiend to some point and can make life easier (although the WINDOW widget is not that special).

      A dialog is a bunch of widgets combined into "one" element. A dialog has always one main element (a FRAMEWIN or a WINDOW widget) and several child widgets like buttons, text, etc.

      A dialog is pretty handy when you have a lot of different views in your application.

      It is up to you or your requirements which widget you choose. A FRAMEWIN is like a window on a Desktop PC with frame and title, but to be honest it is pretty outdated on smaller devices (imagine your mobile devivce with lots of windows open..).

      You could also work only with "pure" Window Manager windows (the FRAMEWIN and WINDOW widget are just derived from WM-windows) and manage everything on your own.

      Regards,
      Sven
      Please read the forum rules before posting.

      Keep in mind, this is *not* a support forum.
      Our engineers will try to answer your questions between their projects if possible but this can be delayed by longer periods of time.
      Should you be entitled to support you can contact us via our support system: segger.com/ticket/
      Or you can contact us via e-mail.

    • Ross Lee wrote:

      When I design UI with emwin, I find that I can implement my interface with either frame, window or dialog, so my question is what's the difference between these three types? What is the application scenario for each type? Thank you.
      From my own experience:

      WINDOW - simple rectangle window for placing widgets or graphics on it. It has background, but does not have a border or title.

      FRAMEWIN - object, that has a frame (border and on top a horizontal place for title-string, for Close-, Max-, Min- buttons, ...) and the FRAMEWIN also contains internal Client-window, which is above mentioned WINDOW. But FRAMEWIN has own API, also for manipulate its Client-window (i.e. background-coloring etc). If you create FRAMEWIN and would like to add some widgets to it, you can use for it its Client-window (function WM_GetClientWindow) if you need traversing between widgets by key "TAB". If you add the widgets directly to FRAMEWIN, they will be not traversible. If you create FRAMEWIN, you can move it by mouse, dragging it by its title-zone.

      DIALOG - special API (GUI_CreateDialogBox), for simplifying the creating process through array of widgets. The tool GUIBuilder.exe simplifies this process, it makes c-file for further editing.
      Best regards,
      Volodymyr.

    • If I want to implement a mobile like interface, which has several views. Each view has a bunch of fixed widgets(like status bar) and changable widgets. According to your explaination, my idea is to design 2 windows in 1 dialog, one window is for the fixed part and the other window is for the changable part. Is it a feasible solution or is there a common solution for this scenario?

    • Hi,

      If you want a fixed status bar just create 3 windows/dialogs. The status bar is at the top and never changes. The other two dialogs will change and are lower about the height of the status bar.

      Here is a quick example with two views (you can change the view by pressing the buttons) and a status bar:

      C Source Code

      1. #include "DIALOG.h"
      3. /*********************************************************************
      4. *
      5. * Externals
      6. *
      7. **********************************************************************
      8. */
      10. /*********************************************************************
      11. *
      12. * Types
      13. *
      14. **********************************************************************
      15. */
      17. /*********************************************************************
      18. *
      19. * Defines
      20. *
      21. **********************************************************************
      22. */
      23. //
      24. // View 1
      25. //
      26. #define ID_WINDOW_00 (GUI_ID_USER + 0x00)
      27. #define ID_BUTTON_00 (GUI_ID_USER + 0x01)
      28. #define ID_TEXT_00 (GUI_ID_USER + 0x02)
      30. //
      31. // View 2
      32. //
      33. #define ID_WINDOW_10 (GUI_ID_USER + 0x10)
      34. #define ID_BUTTON_10 (GUI_ID_USER + 0x11)
      35. #define ID_TEXT_10 (GUI_ID_USER + 0x12)
      37. //
      38. // Fixed status bar
      39. //
      40. #define ID_WINDOW_20 (GUI_ID_USER + 0x20)
      41. #define ID_TEXT_20 (GUI_ID_USER + 0x21)
      42. #define ID_PROGBAR_20 (GUI_ID_USER + 0x22)
      43. #define ID_TEXT_21 (GUI_ID_USER + 0x23)
      45. /*********************************************************************
      46. *
      47. * Static data
      48. *
      49. **********************************************************************
      50. */
      51. /*********************************************************************
      52. *
      53. * _aView1Create
      54. */
      55. static const GUI_WIDGET_CREATE_INFO _aView1Create[] = {
      56. { WINDOW_CreateIndirect, "View1", ID_WINDOW_00, 0, 0, 480, 222, 0, 0x0, 0 },
      57. { BUTTON_CreateIndirect, ">", ID_BUTTON_00, 400, 81, 60, 60, 0, 0x0, 0 },
      58. { TEXT_CreateIndirect, "View 1", ID_TEXT_00, 20, 20, 80, 20, 0, 0x0, 0 },
      59. };
      61. /*********************************************************************
      62. *
      63. * _aView2Create
      64. */
      65. static const GUI_WIDGET_CREATE_INFO _aView2Create[] = {
      66. { WINDOW_CreateIndirect, "View2", ID_WINDOW_10, 0, 0, 480, 222, 0, 0x0, 0 },
      67. { BUTTON_CreateIndirect, "<", ID_BUTTON_10, 20, 81, 60, 60, 0, 0x0, 0 },
      68. { TEXT_CreateIndirect, "View 2", ID_TEXT_10, 20, 20, 80, 20, 0, 0x0, 0 },
      69. };
      71. /*********************************************************************
      72. *
      73. * _aStatusBarCreate
      74. */
      75. static const GUI_WIDGET_CREATE_INFO _aStatusBarCreate[] = {
      76. { WINDOW_CreateIndirect, "Window", ID_WINDOW_20, 0, 0, 480, 50, 0, 0x0, 0 },
      77. { TEXT_CreateIndirect, "12:53", ID_TEXT_20, 400, 15, 80, 20, 0, 0x0, 0 },
      78. { PROGBAR_CreateIndirect, "Progbar", ID_PROGBAR_20, 320, 15, 80, 20, 0, 0x0, 0 },
      79. { TEXT_CreateIndirect, "Fixed status bar", ID_TEXT_21, 10, 15, 120, 20, 0, 0x0, 0 },
      80. };
      82. /*********************************************************************
      83. *
      84. * Forward declaration
      85. *
      86. **********************************************************************
      87. */
      88. static void _cbView1(WM_MESSAGE * pMsg);
      89. static void _cbView2(WM_MESSAGE * pMsg);
      91. /*********************************************************************
      92. *
      93. * Static code
      94. *
      95. **********************************************************************
      96. */
      97. /*********************************************************************
      98. *
      99. * _cbStatusbar
      100. */
      101. static void _cbStatusbar(WM_MESSAGE * pMsg) {
      102. WM_HWIN hItem;
      104. switch (pMsg->MsgId) {
      105. case WM_INIT_DIALOG:
      106. //
      107. // Initialization of 'Window'
      108. //
      109. hItem = pMsg->hWin;
      110. WINDOW_SetBkColor(hItem, GUI_MAKE_COLOR(0x00464655));
      111. //
      112. // Initialization of '12:53'
      113. //
      114. hItem = WM_GetDialogItem(pMsg->hWin, ID_TEXT_20);
      115. TEXT_SetFont(hItem, GUI_FONT_16B_1);
      116. TEXT_SetTextAlign(hItem, GUI_TA_HCENTER | GUI_TA_VCENTER);
      117. TEXT_SetTextColor(hItem, GUI_MAKE_COLOR(0x00FFFFFF));
      118. //
      119. // Initialization of 'Static status bar'
      120. //
      121. hItem = WM_GetDialogItem(pMsg->hWin, ID_TEXT_21);
      122. TEXT_SetFont(hItem, GUI_FONT_16B_1);
      123. TEXT_SetTextAlign(hItem, GUI_TA_LEFT | GUI_TA_VCENTER);
      124. TEXT_SetTextColor(hItem, GUI_MAKE_COLOR(0x00FFFFFF));
      125. //
      126. // Initialization of 'Progbar'
      127. //
      128. hItem = WM_GetDialogItem(pMsg->hWin, ID_PROGBAR_20);
      129. PROGBAR_SetValue(hItem, 93);
      130. break;
      131. default:
      132. WM_DefaultProc(pMsg);
      133. break;
      134. }
      135. }
      137. /*********************************************************************
      138. *
      139. * _cbView2
      140. */
      141. static void _cbView2(WM_MESSAGE * pMsg) {
      142. WM_HWIN hItem;
      143. int NCode;
      144. int Id;
      146. switch (pMsg->MsgId) {
      147. case WM_INIT_DIALOG:
      148. //
      149. // Initialization of 'Window'
      150. //
      151. hItem = pMsg->hWin;
      152. WINDOW_SetBkColor(hItem, GUI_MAKE_COLOR(0x00282B31));
      153. //
      154. // Initialization of 'View 2'
      155. //
      156. hItem = WM_GetDialogItem(pMsg->hWin, ID_TEXT_10);
      157. TEXT_SetFont(hItem, GUI_FONT_20B_1);
      158. TEXT_SetTextColor(hItem, GUI_MAKE_COLOR(0x00FFFFFF));
      159. break;
      160. case WM_NOTIFY_PARENT:
      161. Id = WM_GetId(pMsg->hWinSrc);
      162. NCode = pMsg->Data.v;
      163. switch(Id) {
      164. case ID_BUTTON_10: // Notifications sent by '<'
      165. switch(NCode) {
      166. case WM_NOTIFICATION_RELEASED:
      167. //
      168. // On button press create view 1
      169. //
      170. GUI_CreateDialogBox(_aView1Create, GUI_COUNTOF(_aView1Create), _cbView1, WM_HBKWIN, 0, 50);
      171. //
      172. // Delete current view, this window
      173. //
      174. WM_DeleteWindow(pMsg->hWin);
      175. break;
      176. }
      177. break;
      178. }
      179. break;
      180. default:
      181. WM_DefaultProc(pMsg);
      182. break;
      183. }
      184. }
      186. /*********************************************************************
      187. *
      188. * _cbView1
      189. */
      190. static void _cbView1(WM_MESSAGE * pMsg) {
      191. WM_HWIN hItem;
      192. int NCode;
      193. int Id;
      195. switch (pMsg->MsgId) {
      196. case WM_INIT_DIALOG:
      197. //
      198. // Initialization of 'Window'
      199. //
      200. hItem = pMsg->hWin;
      201. WINDOW_SetBkColor(hItem, GUI_MAKE_COLOR(0x00282B31));
      202. //
      203. // Initialization of 'View 1'
      204. //
      205. hItem = WM_GetDialogItem(pMsg->hWin, ID_TEXT_00);
      206. TEXT_SetFont(hItem, GUI_FONT_20B_1);
      207. TEXT_SetTextColor(hItem, GUI_MAKE_COLOR(0x00FFFFFF));
      208. break;
      209. case WM_NOTIFY_PARENT:
      210. Id = WM_GetId(pMsg->hWinSrc);
      211. NCode = pMsg->Data.v;
      212. switch(Id) {
      213. case ID_BUTTON_00: // Notifications sent by '>'
      214. switch(NCode) {
      215. case WM_NOTIFICATION_RELEASED:
      216. //
      217. // On button press create view 2
      218. //
      219. GUI_CreateDialogBox(_aView2Create, GUI_COUNTOF(_aView2Create), _cbView2, WM_HBKWIN, 0, 50);
      220. //
      221. // Delete current view, this window
      222. //
      223. WM_DeleteWindow(pMsg->hWin);
      224. break;
      225. }
      226. break;
      227. }
      228. break;
      229. default:
      230. WM_DefaultProc(pMsg);
      231. break;
      232. }
      233. }
      235. /*********************************************************************
      236. *
      237. * _cbBk
      238. */
      239. static void _cbBk(WM_MESSAGE * pMsg) {
      240. switch (pMsg->MsgId) {
      241. case WM_PAINT:
      242. GUI_SetBkColor(GUI_BLACK);
      243. GUI_Clear();
      244. break;
      245. default:
      246. WM_DefaultProc(pMsg);
      247. break;
      248. }
      249. }
      251. /*********************************************************************
      252. *
      253. * Public code
      254. *
      255. **********************************************************************
      256. */
      257. /*********************************************************************
      258. *
      259. * MainTask
      260. */
      261. void MainTask(void) {
      262. GUI_Init();
      263. WM_MULTIBUF_Enable(1);
      264. WM_SetCallback(WM_HBKWIN, _cbBk);
      265. //
      266. // Create a fixed status bar, never changes
      267. //
      268. GUI_CreateDialogBox(_aStatusBarCreate, GUI_COUNTOF(_aStatusBarCreate), _cbStatusbar, WM_HBKWIN, 0, 0);
      269. //
      270. // Initially create view 1
      271. //
      272. GUI_CreateDialogBox(_aView1Create, GUI_COUNTOF(_aView1Create), _cbView1, WM_HBKWIN, 0, 50);
      273. while (1) {
      274. GUI_Delay(100);
      275. }
      276. }
      278. /*************************** End of file ****************************/
      Display All
      Regards,
      Sven
      Please read the forum rules before posting.

      Keep in mind, this is *not* a support forum.
      Our engineers will try to answer your questions between their projects if possible but this can be delayed by longer periods of time.
      Should you be entitled to support you can contact us via our support system: segger.com/ticket/
      Or you can contact us via e-mail.