Step 2 Create an Employee Image Component

Step 2. Create an Employee Image Component

VFW104 – Simple Keyed Collections

In the following steps you will enhance the functionality of the Employee Images for Section command handler. You will do this as follows:

• Create an Employee Image reusable part which displays the employee image in a Group Box, with a Caption showing the employee surname

• The Employee Images for Section command handler will be changed to create a collection of the new Employee Image components.

• In a later step, the Employee Images for Section command handler will be enhanced to use the Framework's switch service when an image is double clicked or when a pop-up menu is used, to display the Employee Details command handler for the selected employee.

1.  Create a new Reusable Part / Panel:

     Name: iiiVFW29

     Description: Employee Image

2.  On the Design tab, resize the panel as shown.

a.  Drag and drop a Group Box onto the panel.

b.  Drag and drop an Image component onto the Group Box.

     Your design should now look like the following:

3.  Drop a Pop-Up Menu component onto the image and define one menu item as Show Employee Details

4.  Save the new reusable part.

5.  Switch to the Source tab, and define the following properties:

Define_Pty Name(uCaption) Set(SetCaption)
Define_Pty Name(uEmpNum) Get(*auto #empno) Set(*auto #empno)
Define_Pty Name(uFileName) Set(SetFileName)

     Ignore the errors for the property routines which you will shortly create.

     The Employee Images for Section command handler needs to set these properties to set up the image to be displayed.

6.  Add the following event definition, which passes employee number:

Define_Evt Name(uShowEmpDetails)
Define_Map For(*input) Class(#empno) Name(#uEmpNum)

     The event will be signaled when an image is double clicked, or the pop-up menu item is clicked.

7.  Complete the Employee Image component definition with the following code:

* Set Group Box Caption to Surname
Ptyroutine Name(SetCaption)
Define_Map For(*input) Class(#surname) Name(#i_Caption)
#GPBX_1.caption := #i_Caption
Endroutine
* Set image path/filename
Ptyroutine Name(SetFileName)
Define_Map For(*input) Class(#std_strng) Name(#i_filename)
#IMGE_1.fileName := #i_filename
Endroutine
* Signal uShowEmpDetails
Evtroutine Handling(#IMGE_1.DoubleClick #MITM_1.Click) Options(*NOCLEARMESSAGES *NOCLEARERRORS)
Signal Event(uShowEmpDetails) Uempnum(#empno)
Endroutine

8.  Review the code which you just added.

a.  The SetCaption property routine sets the Group Box caption. The property is passed employee surname.

b.  The SetFileName property routine sets the Image filename property. The property uFileName is passed the image file name.

c.  An event routine for Image DoubleClick and Menu Item 1 Click signals the uShowEmpDetails event and passes employee number. The uEmpNum property automatically sets and gets the value of employee number (EMPNO).

9.  Compile the Employee Image component.