Step 2 Make the Menus Useful

Step 2. Make the Menus Useful

VFW082 – Toolbars, Menus and Pop–up Menus

1.  Add a Status bar to the form.

2.  Add a List view component, resize it as shown. Leave space below the menu bar, where you will be adding a toolbar.

3.  On the Repository tab, find the file DEPTAB and add columns to the list view for DEPTMENT and DEPTDESC. Resize the columns to use all the space available. Note that the DEPTDESC column can be given a WidthType property of Remainder.

4.  In the Design view, position the cursor in the File menu item and press Enter to display the sub menu.

5.  On the Details tab, select the Events tab and create a Click event routine.

6.  Create Click events for the Clear List and Exit menu items.

7.  Switch to the Source tab and complete the Click event for the Fill List menu item based on the following:

• Clear the List view.

• Populate the List View with all records from the file DEPTAB.

• Add an image component to each list item.

• Set menu item 2 checked to true, if not checked.

• Set menu item 3 to checked false

Note:

• List items (CurrentItem) have an Image property. This may have an Image component associated with them. The image could be set dynamically dependent on the data in each row.

• An Icon component VI_CHECK which already exists in the Repository should be used for this exercise.

• Feature Help (F2) is available for any component for you to investigate its Properties, Events and Methods in detail.

     Your code should look like the following:

* Fill List
Evtroutine Handling(#MITM_2.Click)
Clr_List Named(#LTVW_1)
Select Fields(#LTVW_1) From_File(deptab)
Add_Entry To_List(#LTVW_1)
* Set a reference from VI_CHECK image component to list item image property
#LTVW_1.CURRENTITEM.IMAGE <= #VI_CHECK
Endselect
#MITM_2.checked := *Not #MITM_2.checked
#MITM_3.checked := false
Endroutine

8.  Add the basic code for the Click event for the Clear List and Exit menu items.

     Your code should look like the following:

* Clear List
Evtroutine Handling(#MITM_3.Click)
Clr_List Named(#LTVW_1)
Endroutine
* Exit
Evtroutine Handling(#MITM_5.Click)
#com_owner.closeForm
Endroutine

9.  The Clear List and Fill List Checked property should be handled similarly to step 7.

     Add logic to check Clear List (MITM_3) and uncheck Fill List ( MITM_2) to the MITM_3.Click event. Changes are highlighted in red.

Evtroutine Handling(#MITM_3.Click)
Clr_List Named(#LTVW_1)
#MITM_3.checked := *Not #MITM_3.checked
#MITM_2.checked := false
Endroutine

10.  Compile and test your form. Your list should look like the following:

11. In the next few steps you will add logic to handle the View menu items. The List View component has a ViewStyle property. Select the List View and on the Details tab review the list of values available for the ViewStyle property:

     The View menu items will control the List View ViewStyle property.

12. This time, use the Outline tab to access and select the menu items. This tab is usually open, but if necessary select it from the Home ribbon, Views menu.

     On the Outline tab, expand sub-menu items and note that the appropriate menu is opened in the Design view.

13. Select the View menu items and create a Click event for each item. You can use the context menu on the Outline tab to create the Click events.

14. Add logic to each new click event routine to set the List View.ViewStyle property as required. Your finished code should look like the following:

* Icon
Evtroutine Handling(#MITM_11.Click)
#LTVW_1.viewstyle := icon
Endroutine
* List
Evtroutine Handling(#MITM_12.Click)
#LTVW_1.viewstyle := list
Endroutine
* Report
Evtroutine Handling(#MITM_13.Click)
#LTVW_1.viewstyle := report
Endroutine
* Small Icons
Evtroutine Handling(#MITM_14.Click)
#LTVW_1.viewstyle := smallIcon
Endroutine

15. Compile and test your form. Use the View menu options to change the appearance of the list.

16. In the next few steps you will add a Toolbar to the top of your form and implement a number of toolbar buttons.

a.  Drag and drop a Group Box component to the top of the form below the Menu Bar and resize it:

b.  Give the Group Box a ThemeDrawStyle property of Toolbar.

c.  Set the Group Box Height property to 48 pixels.

Note: Remember you can move components accurately using the Ctrl+Cursor keys.

17. Use the Design ribbon to add a FlowAcross manager to the Group Box.

18. Use the Layout Helper / Layout Manager Details tab to set the Margins Category. Use All to set the value to 3 pixels.

19. Add four Toolbar buttons to the Group Box. Use the Shift + Left Mouse to select all the toolbar buttons and set their ButtonStyle property to FlatButton.

     When you focus elsewhere the toolbar buttons will not be visible. You can still click on their position to select one. Select the third button and change its ButtonStyle to Separator.

20. Select each Toolbar button and set the Image and Hint properties as follows:

21. Since the toolbar duplicates some of the menu options, you should add the new toolbar button click events to the existing logic. Your completed code should look like the following. Changes are highlighted in red.

Evtroutine Handling(#MITM_2.Click #SPBN_1.click)
Clr_List Named(#LTVW_1)
Select Fields(#LTVW_1) From_File(deptab)
Add_Entry To_List(#LTVW_1)
#LTVW_1.CURRENTITEM.IMAGE <= #VI_CHECK
Endselect
#MITM_2.checked := *Not #MITM_2.checked
#MITM_3.checked := false
Endroutine
Evtroutine Handling(#MITM_3.Click #SPBN_2.click)
Clr_List Named(#LTVW_1)
#MITM_3.checked := *Not #MITM_3.checked
#MITM_2.checked := false
Endroutine
Evtroutine Handling(#MITM_5.Click #SPBN_4.click)
#com_owner.closeForm
Endroutine
 

22. Compile your form.

23. Test your form, especially the menu options and toolbar buttons.