home *** CD-ROM | disk | FTP | other *** search
/ Shareware Overload / ShartewareOverload.cdr / windows / kpwdemo.zip / DESIGN.HYP < prev    next >
Text File  |  1990-06-28  |  15KB  |  399 lines
  1. //DESIGN  a screen
  2.  
  3.   DESIGN lets you interactively design screen interfaces.  
  4.  
  5.   Point and click the mouse to select a help subject:
  6.  
  7.      #mDesign the interface#m
  8.      #mCreate the code#m
  9.      #mUsing the code#m
  10.      #mSave the interface design#m
  11.      #mMove screen objects or the window#m
  12.      #mEdit screen objects or the window#m
  13.      #mWindow styles#m
  14.      #mText#m
  15.      #mExample of a common interface#m
  16.      #mHandling radio buttons#m
  17.      #mChecking radio buttons and check boxes#m
  18.  
  19. //Design the interface
  20.  
  21.   Here are the steps to create a screen interface:
  22.  
  23.   Position and size the window by dragging on the title bar and frame.  
  24.   This is an initial approximation which can be redefined later.
  25.      
  26.   Select the style of the window using the Window/Style option.
  27.  
  28.   For each screen object in your interface:
  29.  
  30.    1] Select the screen object from the Objects menu option.
  31.    2] Provide the information requested about the screen object.
  32.    3] After the screen object is created, point and click the mouse at 
  33.       the approximate location of the object.
  34.    4] Use CTRL HOME to place  the object on the closest column and row.
  35.       This makes it easier to line objects up with each other and with 
  36.       text prompts.
  37.    5] Use CTRL ARROW to move objects 1 row or column up, down, left or 
  38.       right.  CTRL SHIFT ARROW moves objects .25 of a row or column.
  39.  
  40.   The window size and position can be changed as needed from 
  41.   Window/Position and Size option on the menu.  
  42.  
  43.   When the interface is finished you can generate the code for the 
  44.   interface by selecting one of the Code options as described in 
  45.   #mCreate the code#m. 
  46.  
  47. //Create the code
  48.  
  49.   When your interface looks just right you are ready to generate the 
  50.   code which will create the interface.
  51.  
  52.   The code can be either copied to the Windows clipboard or to a text 
  53.   file.  When you copy the code to the clipboard, you can press ALT F6 
  54.   to go to the development environment and immediately paste the code 
  55.   into an edit window.
  56.  
  57.   When you save to a file you can include it into your application by 
  58.   selecting Edit/Include from the development environment window.
  59.  
  60.   Once you have copied the code into your application, you need to link 
  61.   it into the structure of the application.  This is described in 
  62.   #mUsing the code#m.
  63.  
  64. //Using the code
  65.  
  66.   There are two ways that screen objects can pass the user's selection 
  67.   along to the knowledge base.  The object can be directly linked to a 
  68.   topic which is called when the user responds to the object or, a 
  69.   reference to the object, called a handle, can be saved in a topic and 
  70.   then used to retrieve the value of the object.
  71.  
  72.   Examples of each of these techniques are shown in:
  73.  
  74.      #mLinking an object to an event topic#m and 
  75.      #mRetrieving the value of an object#m
  76.      
  77.   The best technique to use depends on the type of screen object and 
  78.   whether you want an action to occur immediately or only after a 
  79.   Continue or an Ok button is selected.  Since buttons always cause 
  80.   actions to occur, they are always linked to an event topic. 
  81.   Radio buttons are also almost always linked to an event topic because 
  82.   they are easier to handle this way (See: #mHandling radio buttons#m).
  83.   Generally, the values of the other screen objects are retrieved by 
  84.   referring to the handles unless an object is the only one on the screen.
  85.  
  86.   See:  #mExample of a common interface#m
  87.  
  88. //Linking an object to an event topic
  89.  
  90.   Buttons and radio buttons are the objects most commonly linked to an 
  91.   event topic.  When other objects are the only ones to appear on the 
  92.   screen, they are also usually linked to an event topic.
  93.  
  94.   To link an object to an event topic, just change the text   (* eventTopic *)
  95.   in the code created for the topic with the name of the topic to be linked
  96.   to the object.
  97.  
  98.   If no specific events are named to trigger the event, the event topic
  99.   is called when the default event occurs.  The default events are:
  100.  
  101.   button, radio button or check box  - the object is selected
  102.   list box - double click or ENTER on a list box item
  103.   edit line - the edit line loses the focus
  104.   edit box - the edit box is closed
  105.   scroll bar - the scroll bar is closed
  106.  
  107.   The events that call the event topic can be changed in each object. This
  108.   is described in Appendix D of the manual and in the on-line help system.
  109.  
  110.   See also:  
  111.     #mExample of a common interface#m, 
  112.     #mHandling radio buttons#m
  113.  
  114. //Retrieving the value of an object
  115.  
  116.   The most common Windows interface displays a group of screen objects 
  117.   along with two buttons at the bottom of the screen which either 
  118.   accept the user input or cancel it.  In this type of interface the 
  119.   handle of each of the screen objects is assigned to a topic and the 
  120.   values of the objects are retrieved in the topic which is linked to 
  121.   the Ok button.
  122.  
  123.   To save the handle of a screen object, just assign the value returned
  124.   by the command that created the object to a topic. For example, a 
  125.   line of code generated by DESIGN might be:
  126.  
  127.     check_box (Backups,(*EventTopic*),10,5).
  128.  
  129.   Once this code is pasted into your edit window in the development 
  130.   environment you can edit it to save the handle:
  131.  
  132.     cb1 is check_box (Backups,(*EventTopic*),10,5).
  133.  
  134.   Now you can find out if the check box is checked (true) or not (false)
  135.   by referring to the handle.  For example:
  136.  
  137.     if get_check_box (?cb1)
  138.        then makeBackups is yes.
  139.  
  140.   Similarly, you use get_text to find the values of edit objects, 
  141.   get_scroll_bar to get the value of scroll bars and get_list_box to 
  142.   find the value of list boxes.  Since radio buttons come in sets, they 
  143.   are a bit more complicated and are usually linked to an event topic.  
  144.   A radio button example is shown in #mHandling radio buttons#m.
  145.  
  146. //Example of a common interface
  147.  
  148.   A common Windows interface window contains several objects and an Ok 
  149.   and Cancel button.  The example below shows some code generated by 
  150.   DESIGN to display this type of interface:
  151.  
  152.   This is a long example so you may want to select PRINT from the menu 
  153.   to print it.
  154.  
  155.     window (,15,2,39.25,17.3,,[popup,thickFrame,
  156.       visible,titleBar,showChildren,siblings]).
  157.     text ('
  158.       Width:            Height:
  159.      
  160.      
  161.       Special:          Font:
  162.     ').
  163.     check_box ('Bold',,3,7).
  164.     check_box ('Underline',,3,9).
  165.     edit_line (,,10,1.8,5).
  166.     edit_line (,,29,1.8,5).
  167.     list_box (['Roman','Script','Helvetica'],,22,7,12,3).
  168.     button ('Ok',,10,12,9).
  169.     button ('Cancel',,22,12,9).
  170.  
  171.   Once this code is copied into the knowledge base, it must be linked 
  172.   into the structure of the knowledge base.  Here is an example of how 
  173.   this code may be edited:
  174.  
  175.     window (,15,2,39.25,17.3,,[popup,thickFrame,
  176.       visible,titleBar,showChildren,siblings]).
  177.     text ('
  178.       Width:            Height:
  179.  
  180.  
  181.       Special:          Font:
  182.      ').
  183.     cb1 is check_box ('Bold',,3,7).
  184.     cb2 is check_box ('Underline',,3,9).
  185.     ed1 is edit_line (,,10,1.8,5).
  186.     ed2 is edit_line (,,29,1.8,5).
  187.     lb1 is list_box (['Roman','Script','Helvetica'],,22,7,12,3).
  188.     button ('Ok',ok,10,12,9).
  189.     button ('Cancel',cancel,22,12,9).
  190.  
  191.     topic ok.
  192.       if ?cb1 
  193.          then bold is true 
  194.          else bold is false.
  195.  
  196.       if ?cb2 
  197.          then underLine is true 
  198.          else underline is false.
  199.  
  200.       width is get_text (?ed1).
  201.       height is get_text (?ed2).
  202.       font is get_list_box (?lb1).
  203.       close_window ().
  204.     end.
  205.  
  206.     topic Cancel.
  207.       close_window ().
  208.     end.
  209.  
  210.    For an example using radio buttons see #mHandling radio buttons#m.
  211.  
  212. //Handling radio buttons
  213.  
  214.   Radio buttons are almost always linked to an event topic because it 
  215.   greatly simplifies their use.  If a group of radio buttons is assigned
  216.   an initial value (see #mChecking radio buttons and check boxes#m)
  217.   it's important to remember to restore that value if the Cancel button 
  218.   is selected.  
  219.  
  220.   Here's an example which shows the code generated by DESIGN and how 
  221.   the code is used to create an effective interface.   This is a long example 
  222.   so you may want to select PRINT from the menu  to print it.
  223.  
  224.  
  225.  window ((* eventTopic*),17.71,2,34,15,,[popup,thickFrame,visible,
  226.                       titleBar,showChildren,siblings]).
  227.  text ('
  228.                 Monitor type:
  229.  ').
  230.  radio_button ([['VGA',13,4],['EGA',13,'5.5'],['CGA',13,'7'],
  231.                      ['Mono',13,'8.5']], (* eventTopic *)).
  232.  button ('Ok',(* eventTopic *),8,11,8).
  233.  button ('Cancel',(* eventTopic *),20,11,).
  234.  
  235.   Here is the edited code:
  236.  
  237.   window (,17.71,2,34,15,,[popup,thickFrame,visible,
  238.                        titleBar,showChildren,siblings]).
  239.   text ('
  240.                 Monitor type:
  241.  ').
  242.   radio_button ([['VGA',13,4,t],['EGA',13,'5.5'],['CGA',13,'7'],
  243.                       ['Mono',13,'8.5']], monitorType).
  244.   button ('Ok',done,8,11,8).
  245.   button ('Cancel',done,20,11,).
  246.  
  247.   topic monitorType (item).
  248.     monitorType is ?item.    
  249.   end.
  250.  
  251.   topic done (item).
  252.     if ?item is Cancel
  253.        then monitorType is VGA.
  254.     close_window ().
  255.   end.
  256.  
  257.   When a radio button is selected, the topic monitorType is
  258.   called and is passed the name of the radio button selected.
  259.   This name is assigned as the value of monitorType.  When
  260.   either of the buttons is selected, the topic done is called and
  261.   is passed the name of the button selected.  If the CANCEL
  262.   button is selected, monitorType is set to its initial value which
  263.   is VGA. Notice in the definitions of the radio buttons that the 
  264.   value T was assigned to the VGA radio button to select it on
  265.   the display.
  266.  
  267. //Save the interface design
  268.  
  269.   Whenever you create a screen interface which is not complete or may 
  270.   serve as the basis of another screen, you should save the interface.
  271.   This is NOT the same as generating the code.
  272.  
  273.   Once a setup has been saved from either File/Save or File/Save As,
  274.   it can be re-loaded and modified.  
  275.  
  276.   Remember,
  277.  
  278.        ***  If you don't save the setup 
  279.          you will have to start from scratch  ***
  280.  
  281. //Move screen objects or the window
  282.  
  283.   When an object is created it has the focus.  If it does not have the 
  284.   focus, click on it to make it the current object.  To move it just 
  285.   point and click the mouse at the desired location.  To fine tune the 
  286.   location use CTRL + HOME to move to the nearest whole numbered 
  287.   column and row. CTRL + ARROW moves the objects one whole row
  288.   or column up, down, left or right.  CTRL + SHIFT + ARROW moves 1/4 
  289.   of a row or column up, down, left or right.
  290.  
  291.   Objects can also be moved from Edit/Position on the DESIGN menu. 
  292.  
  293.   Windows with title bars can be moved by clicking and dragging on the 
  294.   titlebar.  Windows can also be moved from the Window/Position and 
  295.   Size options on the DESIGN menu.
  296.  
  297. //Window styles
  298.  
  299.   When the interface window is first created it is a standard popup 
  300.   window with a titlebar and a thick frame.  Use these to approximately
  301.   size and position the window before changing the style.
  302.  
  303.   To change the style select Window/Style from the DESIGN menu.  The 
  304.   styles which are available are those which affect the size of the 
  305.   display area of the window.  You can also include a menu in the 
  306.   window if your interface will contain a menu.
  307.  
  308.   ADDITIONAL STYLES
  309.  
  310.   If you want to add additional styles such as MaximizeBox, ControlMenu,
  311.   and MinimizeBox to your window, they can be added into the code 
  312.   generated by  DESIGN.
  313.  
  314.   CHILD WINDOWS
  315.  
  316.   If the window you create is going to be a child window of another 
  317.   window you will have to make some changes to the code generated to 
  318.   create the window.
  319.  
  320.   You will have to change the style from Popup to Child, add the value 
  321.   of the topic containing the parents handle immediately following the 
  322.   style and change the position co-ordinates.  The position change must
  323.   be made because a child's co-ordinates are measured from the upper 
  324.   left corner of the parent, not the screen.
  325.  
  326.   Here's an example of the changes needed to turn a window code 
  327.   generated by  DESIGN into code for a child window.
  328.  
  329.    DESIGN code:
  330.     window (,10,5,20,10,,[PopUp, ThickFrame, TitleBar, Sibling, 
  331.        ShowChildren]).
  332.  
  333.   Edited code:
  334.      w1 is window (,20,3,40,15).
  335.      window (,1,1,20,10,,[Child, ThickFrame, TitleBar, Sibling,
  336.        ShowChildren],?w1).
  337.  
  338.   Here we created a parent window and saved its handle in the topic w1.
  339.   The child is placed at row 1, column 1 of the parent.  The style Popup 
  340.   is changed to Child and the window handle of the parent is provided.
  341.  
  342.   When an interface screen contains a simple child window with no frame
  343.   or a thin frame you can create an edit box in the interface to get 
  344.   the size and position co-ordinates for the child window.
  345.  
  346. //Text
  347.  
  348.   Text can be typed into the window or copied from a file or the 
  349.   clipboard.  Select the option from  Text on  the  DESIGN menu.
  350.  
  351.   To edit text already on the screen select Text/Type from the menu.
  352.  
  353.   To align edit lines with a line of text, point and click on the edit 
  354.   line and then press CTRL + HOME.
  355.  
  356.   If your text contains single quotes or # signs which you want to
  357.   display, be sure to double them after you paste the code into 
  358.   your application.  
  359.  
  360. //Checking radio buttons and check boxes
  361.  
  362.   The code created for check boxes and radio buttons does not create any
  363.   of those objects with a check no matter how they appear on the screen.
  364.   Checks must be added to the code.  An object can be checked when it 
  365.   is created as in these example:
  366.  
  367.    DESIGN code:
  368.  
  369.     check_box ('Send output to the printer',(*EventTopic*),10,3).
  370.  
  371.     radio_button ([EGA,10,8],[VGA,10,10],[MONO,10,12]],(*EventTopic*)).
  372.  
  373.   Edited code:
  374.  
  375.     check_box ('Send output to the printer',(*EventTopic*),10,3,t).
  376.  
  377.     radio_button ([EGA,10,8],[VGA,10,10,t],[MONO,10,12]],MonitorType).
  378.  
  379.   The value t in an object displays a check in the object.  An f or no 
  380.   value leaves the object unchecked.
  381.  
  382.   Objects can also be checked and unchecked using set_radio_button or 
  383.   set_check_box with the handle of the object as in this example:
  384.  
  385.   set_check_box (?cb1,t).
  386.   set_radio_button (element (?rb1,2),t).
  387.  
  388.   Since radio_button returns a list of handles, we must specify which 
  389.   radio button on the list is checked.
  390.  
  391. //Edit screen objects or the window
  392.  
  393.   The text and size of screen objects size can be edited from 
  394.   Edit/Name and Edit/Size on the  DESIGN menu.
  395.  
  396.   Window size can be changed by pointing and dragging on a window with 
  397.   a ThickFrame or selecting Window/Position and Size from the  DESIGN 
  398.   menu.  Windows with title bars can be positioned with a point and drag
  399.   on the title bar.