Home > Articles > Data > MySQL

  • Print
  • + Share This
From the author of

User Interface

This section outlines the design layout of the user interface. Going through this step saves a lot of work later on.

The Customer Data Form: frm_main

Figure 6.1 shows the design of the initial screen the user will see when the application opens. This form allows the data entry clerk to select and display customer information or enter the information for a new customer.

Figure 6.1 frm_main is the initial form the user sees when he starts the application.

Following are some of the features and functions of frm_main:

The customer number drop-down box (Customer) contains all the customer numbers in the database, plus the word "New" as the first entry in the list. When the user selects New, all the text boxes are cleared, and the software generates a new customer number.

The Save Edits button is active only if changes have been made to one of the database fields. To avoid disrupting the work flow, the application will not prompt the user if he or she attempts to close the application or change customers while edits are in progress. The Save Edits button provides a visual key to indicate that the data has changed and action must be taken to save the changes.

There is no menu bar (this keeps the application simple).

The container layout for the form is shown in Figure 6.2. This is part of the GTK+ environment that must be planned for, and it is something that will be new to developers coming from the VB and VC++ environments. For a review of GTK+ and the concept of containers, refer to Chapter 2, specifically the sections titled "VB's 'Form' Reincarnated as GtkWindow Plus GtkFixed or GtkLayout" and "GTK+ Containers as Resizer Controls."

Figure 6.2 frm_main container layout.

As you can see from Figure 6.2, the first widget is a vertical packing box (vbox) with a space count of 2. Please note that in Figure 6.2 the shades of gray add to the visibility; they have nothing to do with the finished product. Initially, the window is a vertical packing box divided into two rows. The widget in the bottom half of that vbox widget is the status bar, and the top is for everything else. Inside the top half of that vbox widget, the first widget to be added is a 2-by-2 table. In the top left and right of that 2-by-2 table are vertical packing boxes, again with space for two widgets each. The bottom left of the 2-by-2 table contains a vertical button box because that vbox will have only command buttons. In the bottom right of the 2-by-2 table is a vertical packing box with space for six widgets. The first of these six widgets holds a 3-by-3 table, the second holds a 4-by-2 table, and the others have spaces for labels and text boxes. This fills out frm_main.

Selecting Items for the Order: frm_items_ordered

The other main form in the application is a window in which the user picks the individual items the caller has ordered and then tallies the totals. This makes up the line items on the invoice (see Figure 6.3).

Some of the functionality of frm_items_ordered is described here:

The user should be able to add items quickly using the widgets in the upper-left corner. That is, when the user enters the item number and the quantity and clicks Add, the added item shows in the 4 Column CList box. This is intended to be the primary means of order entry because the customer should know the item number she wants to purchase when she calls.

Alternatively, the user can select the item the customer wants to purchase and then click the Add button between the list boxes, and the item is added to the 4 Column CList box using the quantity from the spin box between the list boxes.

The Remove button removes only the selected item from the 4 ColumnCList box.

Figure 6.3 The frm_items_ordered layout diagram.

The Search Windows

Each of the windows covered previously has a Search for... button of some type. In frm_main, it is a search for customers. In frm_items_ordered, it is a search through the item master table. These buttons function very similarly: When the user clicks the Search button, a new modal window appears (see Figure 6.4). There, the user enters the search string and clicks the Find button, and the software returns a list of matching records. The search functions as a matching search with a wildcard both before and after the search string; that is, if the user searches for "eat", the list of returned items might include "treat," "eatery," and so on.

The application automatically searches all character columns. When doing a customer search, it attempts to find a match in all the character (non-numeric) fields: name, bill_to_addr1, bill_to_addr2, and so on. This minimizes the complexity presented to the user, and with this implementation (a small data set and all functions performed on the same machine), response time should be more than adequate.

In the Customer search form, the user types a text string into the text box and then clicks Find. The software searches all text fields and returns all records matching any part of the field text. If the desired customer record is found, the user can select it and close the search window, and the selected customer record data automatically appears in the widgets on frm_main.

Figure 6.4 The Search for Customer modal window design.

The Item search form works the same as the Customer search form, except that it searches and returns items and fills in the "items ordered" Clist window on frm_items_ordered (refer to Figure 6.3).

In both of the search forms, when the user finds the customer or item they are searching for, they select it and click Done. The software automatically places the data into the correct place on the form. For frm_main, it displays the customer selected by the find operation, and for frm_items_ordered, it selects and displays that item in the 3 Column CList box that displays all the items in the database.

  • + Share This
  • 🔖 Save To Your Account