Step 2 Create the Find Employee Image Form

Step 2. Create the Find Employee Image Form

VFW080 – Using an Explorer Component

1.  Create a new / Basic Form:

     Name: iiiVFW15

     Description: Find Image

2.  With the Design view selected, use the Design ribbon to add New Layout / Attachment manager to the form.

3.  Drop a Panel onto the right hand side, and change its Name to IMAGE_PANL. Change its Width to approximately 125.

4.  Drop another Panel onto the centre of the form and change its Name to SEARCH_PANL.

     If necessary, with the form selected, open the Layout Helper tab and use the Child Details tab to ensure the IMAGE_PANL is attached to the Right. SEARCH_PANL should be attached to the Center.

5.  As you are designing, save the component regularly.

6.  Select the IMAGE_PANL, and use the Design ribbon to add a Flow down manager.

a.  Add two Push buttons to the IMAGE_PANL.

b.  Add a Group Box and resize it as shown. Give the Group Box a Caption of Selected Image.

c.  Drop an Image component into the Group Box and resize the Image to fill the Group Box as shown:

d.  Select the IMAGE_PANL. On the Layout Helper tab select Layout Manager Details tab tab. Select Margins / Category. Set the Left margin to 15 and the Top margin to 12.

7.  Set up the Push Buttons:

a.  Set up the first push button properties as follows:

Property Value Caption OK Name PHBN_OK

b.  Create a Click event for PHBN_OK.

c.  Set up the second Push button as follows:

Property  Value Caption Cancel Name PHBN_CANCL

d.  Create a Click event for PHBN_CANCL

8.  Select the SEARCH_PANL and use the Design ribbon, to add a Split Vertical manager.

     On the Layout Helper tab, select the Layout Manager Details tab, select the Category / Divider Style and select the Raised option.

9.  Change the left hand Panel's Name to FOLDERS.

10. Change the right hand Panel's Name to FILES.

11. Select the FOLDERS panel. On the Layout Helper tab, add an Attachment manager by selecting ATLM_1 in the Layout drop down.

12. On the Controls tab, select All Controls and add an Explorer component into the center of the FOLDERS panel.

     If necessary, use the Layout Helper tab / Child Details tab to ensure that it is attached in the Center.

     Your design should look like the following:

13. Select the FILES panel and on the Layout tab, give it the ATLM_1 Attachment manager, by selecting it in the Layouts drop down.

     Drop an Explorer component into the center of the FILES panel. With the FILES panel selected, on the Layout Helper tab, use the Child Details tab to check the explorer (DCBX_2) is attached in the Center.

14. Save your form design.

15. Select the left hand Explorer component (DCBX_1) and use the Details tab to set up its properties:

Property Value Display Style DirectoryTreeView PathType Desktop NotifyComponent DCBX_2

16. Select the right hand Explorer component (DCBX_2) and set its properties:

Property Value DisplayStyle GeneralListView FileIncludeMask ""*.bmp,*.jpg,*.jpeg,*.gif,*.tif,*.tiff""

     The Explorer DBCX_2 will display the defined file types only.

17. Save your changes.