home *** CD-ROM | disk | FTP | other *** search
/ Piper's Pit BBS/FTP: ibm 0040 - 0049 / ibm0040-0049 / ibm0040.tar / ibm0040 / BCPPOWL1.ZIP / OWLDOC.ZIP / BWCCSTYL.DOC < prev    next >
Encoding:
Text File  |  1991-08-28  |  11.1 KB  |  319 lines
  1. Borland Dialog Box Layout Guide
  2. ===============================
  3.  
  4. This guide presents style considerations you can follow when designing
  5. Borland Windows Custom Control (BWCC) dialog boxes for Borland's
  6. Windows-based software. 
  7.  
  8.  
  9. LAYOUT ISSUES
  10. -------------
  11.  
  12. Before you begin designing your dialogs, you should be aware of
  13. some basic design considerations.
  14.  
  15.  
  16. Panels
  17. ------
  18.  
  19. Each dialog box has two panels: a Main panel and an Action panel.
  20. The Main panel contains all the elements that are read or modified
  21. when the dialog box is open. The Action panel contains the
  22. push buttons, usually OK, Cancel, and Help.
  23.  
  24.  
  25. Fonts
  26. -----
  27.  
  28. Borland dialogs use 8 point Helvetica Bold. The BWCC dialog
  29. controls look best when you use this font. An 8 point font is
  30. small; using it keeps the size of the your dialogs from growing too
  31. big. Of course, you can use other fonts for other custom controls.
  32.  
  33.  
  34. Group Boxes
  35. -----------
  36.  
  37. Collect all options that appear in the Main panel into BWCC group
  38. boxes. For example, place a group of related check boxes in a group
  39. box. You should place each single control, such as a file name text
  40. box or combo box, in a group box also. You won't have to do this
  41. with a Borland list box because a list box draws its own group box.
  42.  
  43.  
  44. Push buttons
  45. ------------
  46.  
  47. The following are style considerations for push buttons:
  48.  
  49. - Borland's push buttons use glyphs (small bitmapped images). For
  50.   example, a question-mark glyph is used on the Help push button.
  51.   Place the glyph inside the button on the left side.
  52.  
  53. - Use Helvetica (normal, not bold) for the button's text and justify 
  54.   it to the right.
  55.  
  56. - Make each push button 39 pixels high for VGA resolution and 30
  57.   pixels high for EGA resolution.
  58.  
  59. - Most push buttons are 63 pixels wide in both VGA and EGA
  60.   resolution. Although you can make a button wider to prevent the
  61.   text and image from overlapping or looking too crowded, you should
  62.   try to restrict the width to 63 pixels if possible.
  63.  
  64.  
  65. DIMENSION AND ALIGNMENT GUIDELINES
  66. -----------------------------------
  67.  
  68. The following sections present guidelines for laying out the controls
  69. in a BWCC dialog box.
  70.  
  71.  
  72. Arranging the Panels
  73. --------------------
  74.  
  75. The Main panel of your dialog should be as large as necessary to
  76. contain all the required controls. The Action panel should be just
  77. big enough to contain the push buttons; you can place it either at
  78. the bottom or the right side of the dialog.
  79.  
  80. Your finished dialog should be relatively square. If the Main panel
  81. is wider than it is tall, put the Action panel along the bottom of
  82. your dialog. If the Main panel is taller than it is wide, put the
  83. Action panel on the right side.
  84.  
  85.  
  86. Main Panel
  87. ----------
  88.  
  89. You may arrange the group boxes on the Main panel in either a
  90. single column or row, or in an array. Here are some guidelines to
  91. arranging group boxes on the Main panel. You should treat group
  92. titles as part of the group boxes.
  93.  
  94. - Space group boxes 8 dialog units apart, both vertically and
  95.   horizontally. 
  96.  
  97. - Leave a margin of 8 dialog units from all edges of the dialog to
  98.   the nearest group box. 
  99.  
  100. - In a column of group boxes, make all group boxes the same width.
  101.   The width should accommodate the widest item or title. Widen the
  102.   other group boxes to match.
  103.  
  104. - In a row of group boxes, you may vary the group box heights. Align
  105.   the tops of the group boxes and let the bottoms of the group boxes
  106.   vary.
  107.  
  108. - If some of the group boxes you want to align in a row have titles
  109.   and some don't, align the top of the recessed group boxes with each
  110.   other, not with the title rectangles. For these mixed groups of boxes,
  111.   the margin above group boxes without titles should include the space
  112.   for a title.
  113.  
  114. - If some of the group boxes you want to align in a row are taller
  115.   than others, compute the bottom margin using the tallest group box.
  116.  
  117.  
  118. Horizontal Action Panel
  119. -----------------------
  120.  
  121. An Action panel that appears at the bottom of a dialog is a
  122. horizontal Action panel. It extends the full width of the dialog.
  123. Here are the guidelines:
  124.  
  125. - Make the Action panel tall enough to contain the push buttons while
  126.   leaving a margin of 8 dialog units above and 8 dialog units below
  127.   the push buttons.
  128.  
  129. - Distribute the push buttons evenly along the Action panel, leaving
  130.   a minimum of 8 dialog units between the buttons themselves and between 
  131.   the buttons and the left and right edges of the dialog. 
  132.  
  133.   Try to use the same number of dialog units between each button
  134.   and between the buttons and the left and right edges of the
  135.   dialog. You may put more space between the buttons than between
  136.   the buttons and the edges of the dialog, if necessary, but the
  137.   two margin spaces should be equal and the spaces between the
  138.   buttons should be equal.
  139.  
  140.  
  141. Vertical Action Panel
  142. ---------------------
  143.  
  144. An Action panel that appears at the right side of a dialog is a
  145. vertical Action panel. It extends the full height of the dialog.
  146. Here are the guidelines:
  147.  
  148. - Make the Action panel wide enough to contain the push buttons while
  149.   leaving a margin of 8 dialog units to right and 8 dialog units to
  150.   the left of the push buttons.
  151.  
  152. - Distribute the push buttons evenly along the Action panel, leaving
  153.   a minimum of 8 dialog units between the buttons themselves and between 
  154.   the buttons and the top and bottom edges of the dialog. 
  155.  
  156.   Try to use the same number of dialog units between each button
  157.   and between the buttons and the top and bottom edges of the
  158.   dialog. You may put more space between the buttons than between
  159.   the buttons and the edges of the dialog, if necessary, but the
  160.   two margin spaces must be equal and the spaces between the
  161.   buttons must be equal.
  162.  
  163.  
  164.  
  165. Group Box Titles
  166. ----------------
  167.  
  168. A group box title identifies what a group box contains. By default,
  169. a group box title in a Borland dialog has a gray background. The following
  170. are the guidelines for group boxes:
  171.  
  172. - If a group box contains multiple controls, place the group box
  173.   title just above and touching the top edge of the group box. 
  174.  
  175. - If a group box contains a single check box, place the group box
  176.   title just above and touching the top edge of the group box.
  177.  
  178. - If a group box contains a single text box or combo box control, either
  179.   put the title to the left of the control and 4 units from the
  180.   edge of the group box or put it above the control, whichever you
  181.   prefer.
  182.  
  183. - If a group box contains two or more editable text fields or combo
  184.   boxes or both, precede each with a short label.
  185.  
  186. - Align group box titles above the recessed group boxes.
  187.  
  188. - Make all group box titles 9 units high.
  189.  
  190. - Make the titles the same width as the group boxes, including the
  191.   beveled sides.
  192.  
  193.  
  194. Group Box Elements
  195. ------------------
  196.  
  197. These suggestions will help you arrange the elements within a group
  198. box:
  199.  
  200. - Distribute controls within a group box vertically every 13 units
  201.   from the bottom of one line of text to the bottom of the next.
  202.  
  203. - Justify the controls to the left.
  204.  
  205. - Make the left and right margins between the edges of the group box
  206.   and the widest control within it all 4 dialog units wide.
  207.  
  208. - Make the margin between the top of the group box and the first
  209.   control in the group 4 dialog units.
  210.  
  211. - Make the margin between the bottom of the group box and the last
  212.   control in the group 4 dialog units.
  213.  
  214. - If a group box contains two or more editable text fields or combo
  215.   boxes or both, make them the same width. Space them so that the
  216.   bottom of one is 13 units apart from the bottom of the next one.
  217.   Right-justify these controls in the group box 4 units from the
  218.   right edge. Left-justify the titles, leaving a 4 unit margin. Make
  219.   the group box wide enough to leave 4 units between the longest
  220.   title and its control.
  221.  
  222.  
  223. Message Boxes
  224. -------------
  225.  
  226. Like dialog boxes, messages boxes have two panels: a Main panel and
  227. an Action panel.
  228.  
  229. The Main panel of the message box is filled with a single group
  230. box. The group box contains a message glyph and a text region.
  231.  
  232. Here are the guidelines for designing a message box:
  233.  
  234. - Put the glyph on the left side of the group box.
  235.  
  236. - Leave a margin of 8 dialog units on all four sides of the group
  237.   box.
  238.  
  239. - Space the message glyph and the text region 8 dialog units apart.
  240.  
  241. - Center the text region vertically, leaving at least 8 dialog units
  242.   between the top and bottom of the text region and the top and
  243.   bottom edges of the dialog.
  244.  
  245. - Place the Action panel at the bottom of your dialog.
  246.  
  247. - Test this layout using your longest message string. If necessary,
  248.   resize the text region accordingly.
  249.  
  250.  
  251. Examining Your Dialog
  252. ---------------------
  253.  
  254. When Windows calculates dialog units, it rounds the computation.
  255. Rounding errors may affect the appearance of your dialog. Examine
  256. your dialog carefully. These problems have been noted:
  257.  
  258. - A crack between the title text and the top of a gray group box
  259.  
  260. - Obvious uneven spacing in a vertical group of radio buttons or
  261.   check boxes
  262.  
  263. - An inconsistent border width in exposed panel areas
  264.  
  265. Usually, making an adjustment of 1 dialog unit will fix these
  266. problems. Occasionally in a large group of repeating controls, two
  267. or more rounding errors can occur. Sometimes making an adjustment
  268. can improve the layout of your dialog; at other times you may
  269. decide not to make any changes. Use your best judgment.
  270.  
  271. You can't tell how text in controls will appear when you are
  272. designing your dialog. Editable text, large static text fields, and
  273. combo boxes fall into this category. You may have to modify your
  274. original design to be sure text appears correctly without being
  275. clipped at run time.
  276.  
  277.  
  278. Using Standard Push Buttons
  279. ---------------------------
  280.  
  281. The Action panel push buttons usually indicate the end of a user's
  282. work with a dialog, but can also serve as a major departure from the
  283. function of the dialog, such as bringing up Help with the Help
  284. button.
  285.  
  286. An application can also have push buttons that don't result in closure.
  287. With these buttons, the user wants to perform specific actions but
  288. continue working with the dialog. Groups of these buttons often have 
  289. related functions.
  290.  
  291. For example, a Search dialog box could have Action panel buttons for 
  292. Find Next and Replace.
  293.  
  294. The guidelines for standard buttons are as follows:
  295.  
  296. - Put these push buttons on the Main panel rather than the Action
  297.   panel.
  298.  
  299. - Don't put these push buttons in a group box. Place them directly on
  300.   the surface of the Main panel.
  301.  
  302. - Make all push buttons in a group the same width. They should be
  303.   just wide enough to accommodate the widest text string.
  304.  
  305. - Make the buttons 14 dialog units in height.
  306.  
  307. - Try to restrict text to 20 characters or less.
  308.  
  309. - Lay the buttons out in either a row or a column, depending on what
  310.   looks best in your dialog.
  311.  
  312. - Leave 8 dialog units to the left and right of a column of push
  313.   buttons. The vertical space between the buttons and any other
  314.   controls or borders above or below the buttons should be equal.
  315.  
  316. - Leave 8 dialog units above and below a row of push buttons. The
  317.   horizontal space between the buttons and any other controls or
  318.   borders to the left or right of them should be equal.
  319.