User Tools

Site Tools


koda:en:documentation:create_menu

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

koda:en:documentation:create_menu [2014/07/10 10:48] (current)
Line 1: Line 1:
 +====== Creating a menu control ======
 +
 +Creating a (main) Menu, ContextMenu or TrayMenu requires a special approach, so we provide a tutorial. It assumes that you have already created the form to which you will add a Menu control.
 +
 +//This tutorial begins by telling you how to create a Menu. The procedures for all three kinds of menus  are the same except that a ContextMenu requires extra steps: attaching it to a control (or to the form). Near the end, this tutorial describes these extra steps.//
 +
 +First, click on the Menu icon on the controls palette:
 +
 +{{ create_menu_step_1.png }}
 +
 +Click anywhere on the form, that is anywhere there won't be a control. You will see a copy of the Menu icon. (The Menu control is a [[substitute_control|substitute control]] in Koda terminology.) The Object Inspector shows the properties of the Menu as a whole.
 +
 +{{ create_menu_step_2.png }}
 +
 +Now, double-click this copy of the icon  (or click to the right of Items in Object Inspector). [[proped_menu_builder]] opens. The blue rectangle is a //slot// Koda has created for the first top-level menu item.
 +
 +Right-click on this rectangle. You will see that there are three choices: **Insert**, **Delete** and **Create Submenu**. (At this point, Create Submenu does nothing.) ​
 +
 +To create the first top-level item, choose Insert (or press <​key>​Ins</​key>​). The rectangle now says //​MenuItem1//​. You have created your first menu item. Its properties show in Object Inspector. ​
 +
 +In Object Inspector, change the Caption to //File// and and the Name to //​mnuFile//​. You can change other properties of this menu item, but for now we will leave them as they are.
 +
 +Right-click on //File// and choose **Create Submenu**. A gray button appears. ​
 +
 +Click on the gray button. It turns blue. (The color shows that it is selected.) ​
 +
 +Press the <​key>​Ins</​key>​ key. //​MenuItem//​ appears, both in the blue rectangle and in Object Inspector. Change the Caption to //Open// and the Name to //​mnuOpen//​.
 +
 +Now that we know how to create sub-menu items, let's add a second top-level menu item, Help.
 +
 +In Menu Designer, click in the dotted frame to the right of //File//. The rectangle changes to blue.
 +
 +Press <​key>​Ins</​key>​. //​MenuItem1//​ appears to the right of //File//, and Object Inspector shows the Caption and Name as //​MenuItem1//​. Change them to //Help// and //mnuHelp// respectively.
 +
 +Click on //File//, then on the gray rectangle below it. 
 +
 +Press <​key>​Ins</​key>​. //​MenuItem1//​ appears below //Open//.
 +
 +In Object Inspector, change the Caption to //Save// and the Name to //​mnuSave//​.
 +
 +Click on the gray rectangle below //Save//. Press <​key>​Ins</​key>​. In Object Inspector, change the Caption to - and delete the Name. You have just created a horizontal separator.
 +
 +Click on the gray rectangle. ​ Press <​key>​Ins</​key>​. Change the Caption to //Exit// and the Name to //​mnuExit//​.
 +
 +The screen should now look like:
 +
 +{{ create_menu_step_3.png }}
 +
 +You may now wish to change the properties of a menu item. To do so, click on its Caption in Menu Designer. Help for each of the properties is [[control_menuitem|here]].
 +
 +To exit Menu Designer, activate the Menu Designer (if it isn't already active), then simply close it.
 +
 +We suggest that you give the menu you just created a distinctive name (in case you create another menu later). To do so, click on the Menu icon on the form. Object Inspector shows //​Menu1 ​ TAMenu//. Click on Name to change the name of the menu.
 +
 +For a **Context Menu** to be active, it must be attached either to the form or to a //real// control. In our example, we attach it to Button1 (which we assume you created earlier). ​
 +
 +Click on the Button1 control. Object Inspector shows //​Button1 ​  ​TAButton//​.
 +
 +In Object Inspector, click on Context Menu and choose the name of the context menu in the drop-down box:
 +
 +{{ create_menu_step_4.png }}
 +
 +Try running the form: on Koda's menu, click on Tools, then on Run Form. When you right-click on Button1, your context menu appears.
 +
 +<color darkgreen>​**How do I insert a //slot// for a menu item __before__ an existing menu item?​**</​color>​
 +
 +Select the existing menu item, then press the <​key>​Ins</​key>​ key.
 +
 +For example, to insert an Edit menu item between File and Help, click on Help, then press the <​key>​Ins</​key>​ key.
 +
 +<color darkgreen>​**How do I move a menu item?​**</​color>​
 +
 +Drag and drop it. 
  
koda/en/documentation/create_menu.txt ยท Last modified: 2014/07/10 10:48 (external edit)