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:

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

  1. Start Visual Basic if it's not already running.

  2. From the File menu, select New Project and choose new Standard EXE.

  3. Rename the project to POVBClient by selecting Project1 Properties from the Project menu, and typing POVBClient in the Project Name text box.

  4. 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.

  5. 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.

  6. Create six additional forms (for a total of seven) and name them frmPurchaseOrderManagement, frmPurchaseOrderDetailed, frmInventorySelection, frmInventoryManagement, frmInventoryDetailed, frmAccountDetailed, and frmAccountManagement.

  7. 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

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.