Week 2 Program and GUI Design PDF

Preview

Summary

supplementary notes for lectures week 2...

Description

IS122 INFORMATION SYSTEMS II ONLINE WEEK 2 PROGRAM AND

GRAPHICAL USER INTERFACE 1 DESIGN

1

Content of this reading were adapted from Shelly & Hoisington, Microsoft Visual Basic 2010 for Windows, Web, Office, and Database applications, Chapter 2 Program and Graphical user interface Design.

TABLE OF CONTENTS Objectives ..................................................................................................................................................... 1 1

Introduction .......................................................................................................................................... 2

2

Using Visual Studio 2010....................................................................................................................... 4

3

2.1

Open Visual Basic 2010 Express .................................................................................................... 4

2.2

Create a New Visual Basic 2010 Windows Application Project .................................................... 5

2.3

Display the Toolbox..................................................................................................................... 10

2.4

Permanently Display the Toolbox ............................................................................................... 13

2.5

View Object Properties ............................................................................................................... 14

2.6

Name the Windows Form Object ............................................................................................... 14

2.7

Resize a Windows Form Object .................................................................................................. 15

2.8

Add a Label Object ...................................................................................................................... 16

2.9

Name the Label Object ............................................................................................................... 17

2.10

Change the Text in a Label Object .............................................................................................. 18

2.11

Enter multiple lines in a Label Object ......................................................................................... 19

2.12

Change the Label Font, Font Style, and Font Size ....................................................................... 19

2.13

Center a Label Object in the Windows Form Object .................................................................. 21

2.14

Delete GUI Objects...................................................................................................................... 22

2.15

Use the Undo Button on the Standard Toolbar .......................................................................... 22

2.16

Add a PictureBox Object ............................................................................................................. 23

2.17

Name a PictureBox Object .......................................................................................................... 24

2.18

Resize a PictureBox Object.......................................................................................................... 25

2.19

Add and Name a Second PictureBox Object ............................................................................... 25

2.20

Make Objects the Same Size ....................................................................................................... 25

2.21

Align the PictureBox Objects....................................................................................................... 26

2.22

Center Multiple Objects Horizontally in the Window................................................................. 27

2.23

Add a Button Object.................................................................................................................... 28

2.24

Name and Set Text for a Button Object ...................................................................................... 29

2.25

Change the Button Object Size ................................................................................................... 30

2.26

Add and Align a Second Button Object Size ................................................................................ 30

2.27

Align Objects Vertically ............................................................................................................... 32

2.28

Save a Visual Basic Project .......................................................................................................... 32

2.29

Close Visual Basic ........................................................................................................................ 33

2.30

Open a Visual Basic Project ......................................................................................................... 33

Program Development Life Cycle........................................................................................................ 34

Week 2 – Program and GUI Design

IS122 Online

i

4

3.1

Phase I: Gather and Analyze the Program Requirements .......................................................... 35

3.2

Phase 2: Design the User Interface ............................................................................................. 37

Sample Program.................................................................................................................................. 38

Summary ..................................................................................................................................................... 40 Glossary of Key Terms................................................................................................................................. 41

Week 2 – Program and GUI Design

IS122 Online

ii

Objectives At the end of this week, you should be able to:  Open and close Visual Studio 2010  Create a Visual Basic 2010 Windows Application project  Name and set the title bar text in a Windows Form object; 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; change the Font properties of the text in the Label object  Add a PictureBox object to the Windows Form object; name the PictureBox object; resize the PictureBox object  Add a Button object to the Windows Form object; name the Button object; set the text in the Button object; change the Button object size  Align objects on the Windows Form object  Save and open Visual Basic projects  Understand and implement graphical user interface design principles  Understand and implement the first two phases of the program development life cycle

Week 2: Program and Graphical User Interface Design

IS122 ONLINE

Page 1

1 Introduction Before a program actually can be coded, it must be designed. Designing can be compared to constructing a building. Before cement slabs are poured, steel beams are put in place, and walls are built, architect and engineers must design a building to ensure it will perform as required and be safe and reliable. The same holds true with a computer program. Once a program is designed, it can then be implemented in a programming language such as Visual Basic. You will be using Visual Studio 2010 Express, an integrated development environment (IDE), to design and implement a computer program in Visual Basic. Example: Hotel Progra Program m Selection  Program provides instructions that tell the user to choose a room type; o Click the Standard Room, a picture of the standard room will be displayed; o Click the Deluxe Room button, a picture of the deluxe room will be displayed;  After selection of room type, user click the Select Room button; o Program informs the user the room selection is completed.  To close the window and exit the program, user can click the Exit Window button after making a room selection

Figure 2-1 HotelRoomSelection Windows Application – Part 12

2

Source: “Microsoft Visual Basic 2010 for Windows, Web, Office, and Database Applications – Comprehensive”, by Gary B. Shelly and Corinne Hoisington, 2011, ISBN10: 0-538-46847 -5; ISBN13: 978-0-538-46847-3

Week 2: Program and Graphical User Interface Design

IS122 ONLINE

Page 2

Figure 2-2 HotelRoomSelection program - part 23

The above program, Figures 2-1 and 2-2, might be part of a larger computer application used to make hotel reservations. During week 2 (this week) and week 3, this reading will guide you to create the Hotel Room Selection Windows application. This week, we will be going through the design and implementation and at the same time introduce some of the features and tools that come with Visual Basic 2010 Express integrated development environment (IDE).

3

Source: “Microsoft Visual Basic 2010 for Windows, Web, Office, and Database Applications – Comprehensive”, by Gary B. Shelly and Corinne Hoisington, 2011, ISBN10: 0-538-46847 -5; ISBN13: 978-0-538-46847-3

Week 2: Program and Graphical User Interface Design

IS122 ONLINE

Page 3

2 Using Visual Studio 2010 When designing an event-driven program that uses a graphical user interface (GUI), one of the first steps is to design the user interface itself. Recall that the user interface is the window that is displayed on the screen when the program is running, together with the variety of objects such as buttons, labels and so on. Before designing the user interface, you should know how to use the Visual Studio, hence Visual Basic rapid application devel development opment (RAD RAD RAD) tools because these tools are used in the design process. For example, you use the Visual Basic tool to place a buttons and text boxes on the window.

2.1

Open Visual Basic 2010 Express In Windows 7,  click the Start button on the Windows taskbar, point to All Programs on the Start menu, and then point to Microsoft Visual Studio 2010 Express on the All Programs submenu;  then click Microsoft Visual Basic 2010 Express; In Windows 8 or later,  click the Start Button, click the down arrow (under the Desktop icon) to display all applications, look for the Visual Studio 2010 Express category;  click Microsoft Visual Basic 2010 Express; You may be asked for a Registration key if your copy of Visual Basic 2010 Express has not been registered. Simply click the ‘Obtain a registration key online’ button to get a registration key or product key.

Figure 2-3 Main Microsoft Visual Basic 2010 Express window

As shown in figure 2-3 above, Visual Basic 2010 Express has a number of key elements which includes the menu bar, Standard toolbar, and Solution explorer.

Week 2: Program and Graphical User Interface Design

IS122 ONLINE

Page 4

2.2

Create a New Visual Basic 2010 Windows Application Project A Visual Basic project is equivalent to a single program created using Visual Basic. A Windows Application project is a program that will include, as the user interface, a window (also called a form) that will appear on computer’s screen when being run or executed, provided your computer has the Microsoft Windows operating system. Visual Basic 2010 Express can be run even on Windows 8. In Microsoft Visual B Basic asic 2010 Express Express, you can create 5 types of Applications. To create a new Visual Basic Windows Application, follow the following steps: 1. Click the New Project button (left-most) on the Standard toolbar Alternatives: Click the New Project… link on the Start Page, or Click File on the Menu bar, point to New sub-menu item, and then click Project, or Use the key combination, CTRL+SHI CTRL+SHIFT+N FT+N Visual Basic 2010 Express opens the New Project window as shown in the Figure 2-4 below.

Figure 2-4 New Project dialog box

Week 2: Program and Graphical User Interface Design

IS122 ONLINE

Page 5

2. If necessary, click to select Windows F Forms orms Application in the middle pane By making this selection, you have specified to create a program that will run under the Windows operating system using Windows graphical user interface. By default, Visual Basic 2010 Express always selects the Wind Windows ows Forms Application in the middle pane. 3. Double-click on the text, WindowsApplication1, in the Name text box, to select the text, as figure 2-5 below.

Figure 2-5 Project Name changed

Type the new project name. In this example, type HotelRoomSelection as the name. This is the application I mentioned at the beginning on page 2. Note that program names can contain spaces and some special characters, but by convention most developers use a name with capital letters at the beginning of each word in the name with no space. This naming convention is called camel case case. It is really important that you enter a meaningful name for the project. There is a need for standards and naming conventions in any program development. Most companies have established standards and naming conventions that are used in all of their program development. As you type the application name, the same name will also appear in the Solution name text box.

Week 2: Program and Graphical User Interface Design

IS122 ONLINE

Page 6

Note: Leave the ‘Create Create directory for solution solution’ check box checked or ticked. By default, Visual Basic 2010 will save new projects in the folder ‘Documents\Visual Studio 2010\Projects’.

You may want to change to another location by clicking on the Browse button. It is important that you organize your Visual Basic projects using appropriate folders in any storage of your choice such as in a USB flash drive or portable hard drive so that it will be easy to locate projects later when needed. Do note in some installation you may not see the Browse button discussed in the previous paragraph. Don’t worry, you type in the project name and start working on your application. After making a lot of changes to your project or application you want to save these changes. To do this, simply click the Save All button on Standard button or the key combination Ctrl+Shift+S. You also find the Save All button in the File Menu (Figure 2-6 below).

Figure 2-6 Visual Basic File Menu

After clicking the Save Al Alll button, the Save Pr Project oject dialog box opens (Figure 2-7, next page). You can now see the Browse button discussed earlier. You may now use the Browse button to select an appropriate location for your project.

Week 2: Program and Graphical User Interface Design

IS122 ONLINE

Page 7

Figure 2-7 The Save Project dialog box

4. Click the OK button in the New Project window to complete, see Figure 2-5 on page 6. Visual Basic 2010 Express creates a new project as in the figure 2-8, next page. Note that I have to resize the actual Visual Basic 2010 Express window as well as the Solution Explorer window to fully display all its contents. Note Note: a. The main window inside the New project is known as the work area area, and it is identified by a tabbed page named Form1.vb[Design], which contains another window with the name Form1 in the title bar. Form1 is a type of Windows For Form m object with the default name as Form1 in the title bar. This is the window or form you will use to build your program. It will be also the window that will be displayed on your computer screen when you run or execute your program. The Windows Form object is the fundamental object in the graphical user interface your will create. b. The file name Form1.vb also appears in the Solutions Explorer window. c. The Layout Toolbar now appears below the Standard toolbar. d. The Properties window appears beneath the Solutions Explorer window.

Week 2: Program and Graphical User Interface Design

IS122 ONLINE

Page 8

Figure 2-8 A newly created project in Visual Basic

As in figure 2-8 above the default Windows Form object created with a new project exhibits standard Windows features such as the title bar, and Minimize, Maximize, and Close buttons. The Windows Form object has a number of properties and this is similar to all .NET objects, elements or components.  You can even change a property such as the form’s background color, try this out.  Any GUI object placed on a form is given a default name in Visual Basic, but as a developer should give each object a meaningful name.  There are videos available which demonstrate some of the actions.  At this point it is important to start making your program “user-friendly.” With the Form1 window selected, go to the Properties window and type Hotel Room Selection in the Text property, spaces allowed. This will change the text in the title bar from Form1 to Hotel Room Selection as in figure 2-9, next page.

Week 2: Program and Graphical User Interface Design

IS122 ONLINE

Page 9

Figure 2-9 Text in the title bar now changed

2.3

Display the Toolbox You can use the Toolbox button to display the Toolbox. The Toolbox is the primary tool you will use to place object(s) such as button, text box on a Windows Form object. To display the Toolbox, you can take the following steps: 1. If the window does not already display the Toolbox, point to the Toolbox button on the left margin of the Microsoft Visual Basic 2010 Express window This will display the Toolbox as long as the pointer points to the Toolbox button. The Toolbox hides part of the Windows Form object. If you move the pointer away from the Toolbox button, the Toolbox disappears.

Week 2: Program and Graphical User Interface Design

IS122 ONLINE

Page 10

Figure 2-10 Toolbox window appears

Alternatives:  Click the Toolbox button on the Standard Toolbar, or  Click Toolbox in the View menu, or  Use CTRL+ALT+X In figure 2-10 above, the Toolbox by default opens with the Common Controls category expanded displaying all controls controls, objects or .NET components components. If the Common Controls category is not open, a triangle is placed to the left of the category header. Simply click the expand triangle, to open the category.

Week 2: Program and Graphical User Interface Design

IS122 ONLINE

Page 11

Note that the Toolbox contains, among other things, many graphical elements called .NET components (organized into many categories) that you place on the Windows Form object as graphical user interface objects. Figures 2-11 and 2-12 below shows several views of the Toolbox.

Figure 2-11 Toolbox - .NET components `

Week 2: Program and Graphical User Interface Design

Figure 2-12 Toolbox categories

IS122 ONLINE

Page 12

2.4

Permanently Display the Toolbox When designing the graphical use...