Menubar

The menu in the Vision client is configured and customized through the Client Event Scripts dialog box in the Designer. Just like customizing the runtime client for how a user navigates between different windows, you can also customize what menu items are in the Menubar, and how they are activated. Let's get started.

images/download/attachments/6047093/Menubar_-_NewProject_Client_1A.png

  1. The Menubar uses Client Event Scripts to customize and execute navigation actions.
    In Designer, go to the Project Browser, and double click on Client Event Scripts.

    images/download/thumbnails/6047093/Menubar_-_Project_Browser_Client_Scripts_2.png

  2. This opens the Client Event Scripts dialog box. The structure of the Menubar is represented as a tree. Each item in the Menubar that does not have children executes a script when the user presses it.

    images/download/attachments/6047093/Menubar_-_Menu_Structure_3.png

    These scripts typically execute navigation actions such as opening, or swapping a window in the client.

    images/download/attachments/6047093/Menubar_-_Menu_Item_Client_11.png

  3. Menu items that have children are typically shown as nested items in the Menubar Structure and the Menubar of the client.

    images/download/attachments/6047093/Menubar_-_Menu_Structure_Child_12.png

    images/download/attachments/6047093/Menubar_-_Add_Item_Child_10.png

  4. Let’s add a new menu item that pops up a Welcome Message in the client. In this example, select the last menu item in the Menu Structure called Overview, then click on Add Sibling.

    Enter the Name: Welcome Message. You have the option of associating your menu item with an icon by selecting an icon from the built-in icons folder or uploading your own.

    Next, create the script for your message. If you enter the word “system.” and hit “CRTL Space,” all the available system functions to choose from will be displayed. The script used in this example is shown below:

    Message Script
    system.gui.messageBox("Welcome to your New Project!”, “Message”)

    You also have the option of adding a Mnemonic Character to a menu item. A mnemonic is the first letter in the menu item’s name. In this example, the ‘w’ is the Mnemonic Character for your Welcome Message. You will notice that the ‘w’ is bold and underlined in the “Welcome Message.” The Mnemonic Character only executes when all the menu items are displayed under Navigation menu.

    When you’re finished, click OK.

    images/download/attachments/6047093/Menubar_-_Add_Item_Welcome_Message_5.png

  5. Save and Publish your project.

    images/download/attachments/6047093/Menubar_-_Save_and_Publish_6.png

  6. Go to your Client, and click update on the yellow bar and then dialogue box.

    images/download/attachments/6047093/Menubar_-_Update_Client_7A.png

  7. Under the Navigation window, click on the Welcome Message or type the Mnemonic "w." This menu item runs the script that creates your Welcome Message in the window.

    images/download/attachments/6047093/Menubar_-_Welcome_Message_8.png

  8. Lets look at the script for the User Management menu item. Go to the Project Browser > Client Event Scripts. This script swaps from the current window to the User Management window.

    You also have the option of setting up Accelerator keys for menu items. An Accelerator key associates a keystroke with executing an action. In this example, the 'F1' key is defined as the Accelerator key and is listed to the right of User Management menu item.

    images/download/attachments/6047093/Menubar_-_User_Managment_Accelerator_Key_13.png

    When the 'F1' key is pressed while the Navigation window is open, the User Management window will open in the client.

    images/download/attachments/6047093/Menubar_-_User_Mgmt_Client_F1_14.png

  9. In the Client, there are two additional menu items, Windows and Help. These menu items are added by the Ignition client itself.

    You can hide the Windows Menu by going the Project Browser > Project Properties > User Interface and check Hide Windows Menu box, or you can hide the entire menu bar clicking the Hide Menu Bar.

    images/download/attachments/6047093/Menubar_-_Hide_Menu_Bar_9.png

See also: Navigation Strategies , Client/User Interface Properties


Similar Topics ...