Step 6: Create the User Interface
The specific details involved in creating the user interface for a DNA application will undoubtedly vary from application to application, depending on the individual application, and how the user interface will ultimately be generated (for example, dynamic HTML, Win32, HTML 3.2, and so on). However, the process typically involves:
- Designing each form.
- Providing controlled interaction between emissaries and the various form elements.
Design Each Form
Nowadays, users typically interact with applications using a variety of visual elements, including command buttons, text boxes, and option buttons that are part of a single form, although an application may have any number of forms. Developers design forms by adding and positioning the various visual elements that users will use to interact with their application. Because most users view the user interface as the entire application, form design is extremely important.
To design the forms used by the DNA PurchaseOrder application
- Start Visual Basic if it's not already running.
- From the File menu, select New Project and choose new Standard EXE.
- Rename the project to POVBClient by selecting Project1 Properties from the Project menu, and typing POVBClient in the Project Name text box.
- Include a reference to POEmissaries by selecting References from the Project menu, and placing a check mark next to POEmissaries in the Available References list box.
- Select Components from the Project menu, and place a check mark next to Microsoft Windows Common Controls 6.0 (c:\winnt\system32\mscomctl.ocx) in the list box on the Controls tab.
- Create six additional forms (for a total of seven) and name them frmPurchaseOrderManagement, frmPurchaseOrderDetailed, frmInventorySelection, frmInventoryManagement, frmInventoryDetailed, frmAccountDetailed, and frmAccountManagement.
- Design each form as follows.
frmPurchaseOrderManagement

Figure 18. The design of the frmPurchaseOrderManagement form
The frmPurchaseOrderManagement form allows users to perform purchase order management functions, and is configured as shown in Table 19.
Table 19. The frmPurchaseOrderManagement Form Configuration
Object |
Property |
Setting |
Form |
BorderStyle |
1 – Fixed Single |
|
Caption |
DNA Purchase Order |
|
MaxButton |
0 - False |
|
StartUpPosition |
1 – CenterOwner |
CommandButton |
Name |
cmdCancel |
|
Caption |
Cancel Order |
|
Enabled |
0 - False |
CommandButton |
Name |
cmdCreate |
|
Caption |
Create... |
CommandButton |
Name |
cmdDestroy |
|
Caption |
Destroy |
|
Enabled |
0 - False |
CommandButton |
Name |
cmdModify |
|
Caption |
Modify |
|
Default |
-1 - True |
|
Enabled |
0 - False |
ListView |
Name |
lvInventory |
|
View |
3 – lvwReport |
|
LabelEdit |
1 – Manual |
|
FullRowSelect |
-1 – True |
|
ColumnHeader(1) |
Order # |
|
ColumnHeader(2) |
Account # |
|
ColumnHeader(3) |
Date Ordered |
Menu |
Name |
mnuFile |
|
Caption |
&File |
Menu |
Name |
MnuFileExit |
|
Caption |
E&xit |
Menu |
Name |
MnuManage |
|
Caption |
&Manage |
Menu |
Name |
MnuManageAccounts |
|
Caption |
&Accounts... |
Menu |
Name |
MnuManageInventory |
|
Caption |
&Inventory... |
Menu |
Name |
MnuView |
|
Caption |
&View |
Menu |
Name |
MnuViewOptions |
|
Caption |
&Options... |
frmPurchaseOrderDetailed

Figure 19. The design of the frmPurchaseOrderDetailed form
The frmPurchaseOrderDetailed form allows users to display detailed purchase order information, and is configured as shown in Table 20.
Table 20. The frmPurchaseOrderDetailed Form Configuration
Object |
Property |
Setting |
Form |
BorderStyle |
3 – Fixed Dialog |
|
Caption |
Detailed Purchase Order Information |
|
StartUpPosition |
1 - CenterOwner |
Frame |
Caption |
Items Ordered |
Frame |
Caption |
Shipping Information |
Frame |
Caption |
Payment Information |
Label |
Name |
Label1 |
|
Caption |
Purchase Order |
|
Alignment |
2 - Center |
Label |
Caption |
FirstName |
Label |
Caption |
LastName |
Label |
Caption |
Address |
Label |
Caption |
City |
Label |
Caption |
State |
Label |
Caption |
ZIP |
Label |
Caption |
Phone |
Label |
Caption |
E-mail |
Label |
Caption |
SubTotal |
Label |
Caption |
Shipping |
Label |
Name |
lblTaxRate |
|
Caption |
Tax 000.000 % |
Label |
Caption |
Total |
Label |
Caption |
Charge Account # |
Label |
Caption |
|
|
Name |
lblSubTotal |
Label |
Caption |
|
|
Name |
lblShipping |
Label |
Caption |
|
|
Name |
lblTax |
Label |
Caption |
|
|
Name |
lblTotal |
TextBox |
Name |
txtAddressLine1 |
TextBox |
Name |
txtAddressLine2 |
TextBox |
Name |
txtCity |
TextBox |
Name |
txtEmail |
TextBox |
Name |
txtFirstName |
TextBox |
Name |
txtLastName |
TextBox |
Name |
txtPhone |
TextBox |
Name |
txtState |
TextBox |
Name |
txtZip |
TextBox |
Name |
txtAccountID |
CommandButton |
Name |
cmdCancel |
|
Caption |
Cancel |
|
CausesValidation |
0 - False |
|
Cancel |
-1 - True |
CommandButton |
Name |
cmdDone |
|
Caption |
Done |
|
CausesValidation |
0 - False |
CommandButton |
Name |
cmdAdd |
|
Caption |
Add... |
|
CausesValidation |
0 - False |
CommandButton |
Name |
cmdRemove |
|
Caption |
Remove |
|
CausesValidation |
0 - False |
|
Enabled |
0 - False |
ListView |
Name |
lvLineItems |
|
View |
3 – lvwReport |
|
LabelEdit |
1 – Manual |
|
FullRowSelect |
-1 – True |
|
ColumnHeader(1) |
Quantity |
|
ColumnHeader(2) |
Title |
|
ColumnHeader(3) |
Price |
frmInventorySelection

Figure 20. The design of the frmInventorySelection form
The frmInventorySelection form allows users to select inventory items for purchase, and is configured as shown in Table 21.
Table 21. The frmInventorySelection Form Configuration
Object |
Property |
Setting |
Form |
BorderStyle |
3 – Fixed Dialog |
|
Caption |
Inventory Selection |
|
StartUpPosition |
1 – CenterOwner |
CommandButton |
Name |
cmdCancel |
|
Caption |
Cancel |
|
Cancel |
-1 – True |
CommandButton |
Name |
cmdDone |
|
Caption |
Done |
|
Default |
-1 – True |
ListView |
Name |
lvInventory |
|
View |
3 – lvwReport |
|
LabelEdit |
1 – Manual |
|
FullRowSelect |
-1 – True |
|
ColumnHeader(1) |
Inventory # |
|
ColumnHeader(2) |
Description |
|
ColumnHeader(3) |
Price |
|
ColumnHeader(4) |
Quantity on Hand |
frmInventoryManagement

Figure 21. The design of the frmInventoryManagement form
The frmInventoryManagement form allows users to perform inventory management functions, and is configured as shown in Table 22.
Table 22. The frmInventoryManagement Form Configuration
Object |
Property |
Setting |
Form |
BorderStyle |
3 – Fixed Dialog |
|
Caption |
Inventory Management |
|
StartUpPosition |
1 – CenterOwner |
CommandButton |
Name |
cmdClose |
|
Caption |
Cancel |
|
Cancel |
-1 – True |
CommandButton |
Name |
cmdCreate |
|
Caption |
Create... |
CommandButton |
Name |
cmdDestroy |
|
Caption |
Destroy |
|
Enabled |
0 – False |
CommandButton |
Name |
cmdModify |
|
Caption |
Modify |
|
Default |
-1 – True |
|
Enabled |
0 – False |
ListView |
Name |
lvInventory |
|
View |
3 – lvwReport |
|
LabelEdit |
1 – Manual |
|
FullRowSelect |
-1 – True |
|
ColumnHeader(1) |
Inventory # |
|
ColumnHeader(2) |
Description |
|
ColumnHeader(3) |
Price |
|
ColumnHeader(4) |
Quantity on Hand |
frmInventoryDetailed

Figure 22. The design of the frmInventoryDetailed form
The frmInventoryDetailed form allows users to display detailed inventory item information, and is configured as shown in Table 23.
Table 23. The frmInventoryDetailed Form Configuration
Object |
Property |
Setting |
Form |
BorderStyle |
3 – Fixed Dialog |
|
Caption |
Detailed Inventory Information |
|
StartUpPosition |
1 – CenterOwner |
Label |
Name |
Label1 |
|
Caption |
Inventory |
|
Alignment |
2 – Center |
Label |
Caption |
Description |
Label |
Caption |
Price |
Label |
Caption |
Quantity on Hand |
TextBox |
Name |
txtDescription |
TextBox |
Name |
txtPrice |
TextBox |
Name |
txtQOH |
CommandButton |
Name |
cmdCancel |
|
Caption |
Cancel |
|
CausesValidation |
0 – False |
|
Cancel |
-1 – True |
CommandButton |
Name |
cmdDone |
|
Caption |
Done |
|
CausesValidation |
0 – False |
frmAccountManagement

Figure 23. The design of the frmAccountManagement form
The frmAccountManagement form allows users to perform account management functions, and is configured as shown in Table 24.
Table 24. The frmAccountManagement Form Configuration
Object |
Property |
Setting |
Form |
BorderStyle |
3 – Fixed Dialog |
|
Caption |
Account Management |
|
StartUpPosition |
1 - CenterOwner |
CommandButton |
Name |
cmdClose |
|
Caption |
Close |
|
Cancel |
-1 - True |
CommandButton |
Name |
cmdCreate |
|
Caption |
Create... |
CommandButton |
Name |
cmdDestroy |
|
Caption |
Destroy |
|
Enabled |
0 - False |
CommandButton |
Name |
cmdModify |
|
Caption |
Modify |
|
Default |
-1 - True |
|
Enabled |
0 - False |
ListView |
Name |
lvAccounts |
|
View |
3 - lvwReport |
|
LabelEdit |
1 - Manual |
|
FullRowSelect |
-1 - True |
|
ColumnHeader(1) |
Account # |
|
ColumnHeader(2) |
Owner |
|
ColumnHeader(3) |
Balance |
|
ColumnHeader(4) |
Available Credit |
|
ColumnHeader(5) |
Credit Limit |
frmAccountDetailed

Figure 24. The design of the frmAccountDetailed form
The frmAccountDetailed form allows users to display detailed account information, and is configured as shown in Table 25.
Table 25. The frmAccountDetailed Form Configuration
Object |
Property |
Setting |
Form |
BorderStyle |
3 – Fixed Dialog |
|
Caption |
Detailed Account Information |
|
StartUpPosition |
1 - CenterOwner |
Label |
Name |
Label1 |
|
Caption |
Account |
|
Alignment |
2 - Center |
Label |
Caption |
FirstName |
Label |
Caption |
LastName |
Label |
Caption |
Address |
Label |
Caption |
City |
Label |
Caption |
State |
Label |
Caption |
ZIP |
Label |
Caption |
Phone |
Label |
Caption |
E-mail |
Label |
Caption |
Balance |
Label |
Caption |
Limit |
TextBox |
Name |
txtAddressLine1 |
TextBox |
Name |
txtAddressLine2 |
TextBox |
Name |
txtBalance |
TextBox |
Name |
txtCity |
TextBox |
Name |
txtEmail |
TextBox |
Name |
txtFirstName |
TextBox |
Name |
txtLastName |
TextBox |
Name |
txtLimit |
TextBox |
Name |
txtPhone |
TextBox |
Name |
txtState |
TextBox |
Name |
txtZIP |
CommandButton |
Name |
cmdCancel |
|
Caption |
Cancel |
|
CausesValidation |
0 - False |
|
Cancel |
-1 - True |
CommandButton |
Name |
cmdDone |
|
Caption |
Done |
|
CausesValidation |
0 - False |
Provide Controlled Interaction Between Emissaries and Form Elements
Once each form has been created, developers must provide the controlled interaction between emissaries and the various visual elements on each form. This is a process that typically involves writing code of some kind, whether it's Visual Basic, VBScript, C, C++, or Java.
To provide controlled interaction between the emissaries and the various form elements of the DNA PurchaseOrder application
- Open the code view of the frmPurchaseOrderManagement, frmPurchaseOrderDetailed, frmInventorySelection, frmInventoryManagement, frmInventoryDetailed, frmAccountManagement, and frmAccountDetailed forms, and insert the code in Listings 54-61.
Once each form has been completely implemented, save your work, identify the startup object for the POVBClient project by choosing POVBClient Properties from the Project menu and selecting frmPurchaseOrderManagement from the Startup Object drop-down list box, and compile the POVBClient project into POVBClient.exe.
|