Notes for Chapter 2: Program and Graphical User Interface Design (Latte Selection GUI)

Objectives and Scope

• Create a Visual Basic 2017 Windows Desktop Application project
• Name and set the Title Bar text in a Windows Form object and resize a Windows Form object
• Add a Label object to a Windows Form object, name the Label object, set the text in the Label object, and change the Font properties of the text in the Label object
• Add a PictureBox object to the Windows Form object, name the PictureBox object, and resize the PictureBox object
• Add a Button object to the Windows Form object, name the Button object, set the text in the Button object, and change the Button object’s size
• Align objects on the Windows Form object
• Save, close, and open Visual Basic projects
• Understand and implement design principles of the graphical user interface
• Understand and implement the first two phases of the program development life cycle

Introduction to the Latte Selection Program Concept

• The application is designed to illustrate GUI design and development in Visual Basic 2017 within an integrated development environment (IDE).
• The Latte Selection window is the starting point of a larger coffee-order scenario (e.g., latte flavors).
• User interactions described in the content include clicking latte flavor buttons to display corresponding images and clicking a Select Latte button to confirm a selection.
• Examples of latte flavors used: Pumpkin Spice and Mocha; selecting a latte flavor displays the corresponding image and then confirms the selection.
• After a latte flavor is chosen and the selection is confirmed, the program informs the user that a flavored latte has been selected.

Visual Studio 2017 and VB 2017 RAD Concepts

• When designing a GUI-driven program, design the user interface after defining the program’s purpose.
• Use Visual Studio and VB rapid application development (RAD) tools in the design process.
• The design process is part of the larger design-to-implementation workflow for GUI applications.

Create a New Visual Basic 2017 Windows Desktop Project (1 of 4)

• A project is equivalent to a single program created with Visual Studio.
• A Windows Classic Desktop project is a program that includes a user interface whose windows are created using the Windows operating system.
• When the program runs, the user interacts with the program via its windows and components (the user interface).

Create a New Visual Basic 2017 Windows Desktop Project (2 of 4)

• Tap or click the New Project button on the Standard toolbar.
• If necessary, select Windows Desktop in the left pane.
• If necessary, select Windows Forms Application in the middle pane.
• Type the project name.
• Tap or click the OK button in the New Project window.

Create a New Visual Basic 2017 Windows Desktop Project (3 of 4)

• The Visual Studio window contains several important features.
• In the work area, a tabbed page named Form1.vb [Design] contains a Windows Form object called Form1.
• A Windows Form object is the window you will use to build the program and then display when you execute the program.

Create a New Visual Basic 2017 Windows Desktop Project (4 of 4)

• The Visual Studio window includes the work area with Form1.vb [Design] and other project components.

Display the Toolbox

• If the Toolbox window is not visible, tap or click the Toolbox button in the left margin.
• If necessary, tap or click Common Controls to display the Common Controls tab.

Permanently Display the Toolbox

• If necessary, tap or click the Toolbox button in the left margin to display the Toolbox.
• Then, tap or click the Auto Hide button (Pushpin icon) on the Toolbox title bar to keep it visible.

View Object Properties (1 of 2)

• Properties describe many characteristics of an object (color, size, name, position, etc.).
• In the Properties window, property names in the left list appear in Alphabetical view.
• Many developers find the Alphabetical view easiest for searching properties.

View Object Properties (2 of 2)

• See subsequent details in the Properties window for each object you select.

Name the Windows Form Object (1 of 2)

• Select the Windows Form object, then go to View > Solution Explorer to display the Solution Explorer.
• In Solution Explorer, right-click Form1.vb and choose Rename.
• Rename to: frmLatteSelection.vb and press ENTER.

Name the Windows Form Object (2 of 2)

• The renamed form now appears as frmLatteSelection.vb in Solution Explorer.

Set the Title Bar Text in a Windows Form Object (1 of 2)

• The Text property in the Properties window controls the value displayed in the window’s title bar.
• Select the Windows Form object, locate the Text property, and double-click the Text property in the right column.
• Type: Latte Selection and press ENTER.

Set the Title Bar Text in a Windows Form Object (2 of 2)

• The title bar now reads Latte Selection.

Resize a Form

• With the Windows Form object selected, double-click the Size property in the right column.
• Type the desired size: $730 imes 700$ and press ENTER.

Add a Label Object (1 of 2)

• Drag the Label .NET component from the Common Controls tab in the Toolbox onto the Windows Form object.
• Place the Label at the approximate location you want it.

Add a Label Object (2 of 2)

• The Label object will be used to display text on the form.

Name the Label Object (1 of 2)

• With the Label object selected, scroll to the (Name) property in the Properties window.
• Double-click the (Name) property, type the new name, and press ENTER.

Name the Label Object (2 of 2)

• Ensure the Label has a descriptive name for future reference in code.

Change the Text in a Label Object (1 of 2)

• With the Label object selected, locate the Text property in the Properties window.
• Double-click the Text property and type the new text, then press ENTER.

Change the Text in a Label Object (2 of 2)

• The label now displays the new text.

Enter Multiple Lines of Text in a Label Object

• With the Label object selected, click the Text property in the left column, then click the arrow in the right column to reveal multiline editing options.

Change the Label Font, Font Style, and Font Size (1 of 2)

• Select the Label object; locate the Font property in the Properties window.
• Click the Font property and then click the ellipsis button to open the Font dialog.
• In the Font dialog, choose the desired font, style, and size, then click OK.

Change the Label Font, Font Style, and Font Size (2 of 2)

• The Label font, style, and size are updated on the form.

Center a Label Object in the Windows Form Object (1 of 2)

• With the Label object selected, go to Format > Center in Form > Horizontally.

Center a Label Object in the Windows Form Object (2 of 2)

• The Label is centered horizontally within the form.

Delete GUI Objects

• To delete an object, select it on the Windows Form, then press the DELETE key.

Use the Undo Button on the Standard Toolbar

• If you delete something by mistake, click the Undo button on the Standard toolbar to revert.

Add a PictureBox Object (1 of 2)

• With the Toolbox visible, drag the PictureBox control from the Toolbox onto the Windows Form object at the desired location.
• Release the left mouse button when the pointer is in the correct location.

Add a PictureBox Object (2 of 2)

• A PictureBox is an object similar to a label but used for displaying images.

Name a PictureBox Object

• Select the PictureBox, locate the (Name) property in the Properties window, double-click its value, type the name, and press ENTER.

Resize a PictureBox Object

• Double-click the right edge of the PictureBox Size property (or edit Size directly) to specify the desired width and height.

Add a Second PictureBox Object

• Drag another PictureBox from the Toolbox to a location on the Windows Form, then release.

Make Objects the Same Size (1 of 2)

• Select the object whose size you want to duplicate, hold down CTRL, and click the other object(s) to select multiple objects.
• On the Format menu, choose Make Same Size > Both.

Make Objects the Same Size (2 of 2)

• Both PictureBox objects now share the same size.

Align the PictureBox Objects

• With both PictureBox objects selected, go to Format > Align > Bottoms.

Center Multiple Objects Horizontally in the Window

• With both PictureBox objects selected, go to Format > Center in Form > Horizontally.

Add a Button Object (1 of 2)

• With the Toolbox visible, drag the Button control onto the Windows Form object to place the button.
• Release the mouse when positioned.

Add a Button Object (2 of 2)

• A Button control was added; you can then configure properties such as Text and Size.

Name and Set Text for a Button Object

• Select the Button, locate the Text property in the Properties window, double-click the Text value, type the desired text, and press ENTER.

Change a Button Object’s Size

• Place the pointer over the right edge of the Button until the resize handle appears, drag to increase width, and release.

Add and Align a Second Button (1 of 2)

• Drag a second Button from the Toolbox to the form.
• Align the top edges with the first button using alignment guides (a red line appears when aligned).

Add and Align a Second Button (2 of 2)

• Release when properly aligned; adjust spacing as needed.

Aligning Objects Vertically (1 of 2)

• Deselect other objects if needed.
• Slowly drag the Mocha button below the Pumpkin Spice button until vertical blue snap lines appear, indicating alignment.
• When blue lines appear, adjust vertical spacing and release.

Aligning Objects Vertically (2 of 2)

• The two buttons remain aligned vertically with proper spacing.

Saving, Closing, and Opening a Visual Basic Project

• To save your work, click the Save All button on the Standard toolbar.
• The first time you save a project, Save All saves your program in the same location with the same name.

Close Visual Studio 2017

• To close Visual Studio, click the Close button on the right of the title bar in the Visual Studio window.

Open a Visual Studio Project

• Method 1: Double-tap or double-click the solution file in its folder.
• Method 2: In Visual Studio, click Open File on the Standard toolbar, locate the solution file, and open it.
• Method 3: In Visual Studio, click File > Recent Projects and Solutions, then select the project.

Program Development Life Cycle

• A set of phases and steps that developers follow to design, create, and maintain a computer program:
  • Gather and analyze the program requirements
  • Design the user interface
  • Design the program processing objects
  • Code the program
  • Test the program
  • Document the program/system
  • Maintain the program/system

Phase 1: Gather and Analyze the Program Requirements (1 of 7)

• Gather project requirements by interviewing users, reviewing current procedures, and other fact-gathering tasks.
• Two types of requirements documentation:
  • Requirements document
  • Use Case Definition

Phase 1: Gather and Analyze the Program Requirements (2 of 7)

• REQUIREMENTS DOCUMENT
  • Date Submitted: January 23, 2019
  • Application Title: Latte Selection
  • Purpose: The Latte Selection Program will allow a user to select a type of latte.
  • Program Procedures: From a window on the screen, the user should view two different latte types and then make a latte selection.

Phase 1: Gather and Analyze the Program Requirements (3 of 7)

• Algorithms, Processing, and Conditions:
  • The user must be able to view choices for a pumpkin spice and mocha latte until the user selects a latte type.
  • When the user chooses a latte type, a picture of the selected type should appear in the window.
  • Only one picture should be displayed at a time, so if a user chooses pumpkin spice latte, only its picture should be displayed. If a user then chooses mocha latte, its picture should be displayed instead of pumpkin spice latte.

Phase 1: Gather and Analyze the Program Requirements (4 of 7)

• When the user makes a latte selection, a confirming message should be displayed. In addition, the user should be prevented from identifying a latte flavor after making the latte selection.
• After the user makes a latte selection, the only allowable action is to exit the window.
• Notes and Restrictions: The user should be able to make latte selection only after choosing a latte type.

Phase 1: Gather and Analyze the Program Requirements (5 of 7)

• Comments: The pictures shown in the window should be selected from pictures available on the web.

Phase 1: Gather and Analyze the Program Requirements (6 of 7)

• A use case is a sequence of actions a user will perform when using the program.
• The Use Case Definition specifies each of these sequences by describing what the user will do and how the program will respond.

Phase 1: Gather and Analyze the Program Requirements (7 of 7)

• Use Case Definition example:
  • User clicks Pumpkin Spice or Mocha button.
  • Program displays a picture of the latte chosen by the user and enables the latte selection button.
  • User clicks latte flavor buttons to view the flavors of latte as desired. Program displays the picture of the chosen latte flavor.
  • User clicks the Select Latte button.
  • Program displays a latte selection confirmation message, and disables both latte flavor buttons and the Select Latte button. The Exit Window button becomes active.
  • User exits the program by clicking the Exit Window button.

Phase 2: Design the User Interface (1 of 3)

• Developers sometimes spend 25 to 40 percent of program design on the user interface – Presentation layer.
• Use Visual Studio to create the user interface.
• Interface designs are often called mock-ups.

Phase 2: Design the User Interface (2 of 3)

• Principles of User Interface Design:
  • The GUI should be easy to use and follow.
  • Users will not be satisfied if the user interface is not easy to use.
  • Four primary means of interacting with a user interface are the keyboard, a pointing device (mouse), a touch interface, and voice input.
  • Use of the interface should feel natural and normal.
  • Provide the most appropriate object for each requirement.

Phase 2: Design the User Interface (3 of 3)

• Once an object is used for a particular requirement, that object should be used for the same requirement throughout the program interface.
• Objects must be arranged in the sequence in which they are used.
• The interface should be kept as simple as possible, while containing all required functionality.
• The user interface should be intuitive.

Sample Program — Phase 2: Design the User Interface (1 of 3)

• The application will be presented in a window on the screen, so a Windows Forms App using a Windows Form object is appropriate.
• The user will review the choices — a pumpkin spice or a mocha latte — and then make a selection.
• Two pictures must be displayed in the user interface — a pumpkin spice picture and a mocha picture.

Sample Program — Phase 2: Design the User Interface (2 of 3)

• When the user makes a latte selection by clicking the Select Latte button, a message must be displayed to confirm the latte selection.
• After the latte selection, the only action available is to exit the window, so an Exit Window button is required.
• Include simple instructions in the window so that the user is not confused while using the interface.
• The user interface should include the following items:
  • A Windows Form object that will contain all the other objects
  • Two PictureBox objects to contain pictures of pumpkin spice and mocha lattes
  • Four Button objects
  • Three Label objects

Sample Program — Phase 2: Design the User Interface (3 of 3)

• (Continuation of the items listed above, detailing the required UI components.)

Summary

• Completed the steps to create the GUI mock-up for the Latte Selection program.
• Many of the required steps are repetitive; the same technique is used repeatedly to accomplish similar tasks.
• When you master these techniques and other principles of user interface design, you will be able to design user interfaces for a variety of programs.

Formulas and Key Numbers (for quick reference)

• Form size: $730 imes 700$
• Phase 2 design effort range: $25 ext{ to }40 ext{ percent}$ of program design
• Objects in sample UI: $2$ PictureBox objects, $4$ Button objects, $3$ Label objects
• Latte selection flow: multiple steps including showing pictures, enabling selection, and disabling options after choice