Chapter4 - Chapter 4 Introduction to Visual Programming 1...

Info iconThis preview shows pages 1–42. Sign up to view the full content.

View Full Document Right Arrow Icon
1 Chapter 4 Introduction to Visual Programming
Background image of page 1

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
2 Overview Graphical User Interface Sample Programs Increment Color Change Distance Calculator Shapes
Background image of page 2
3 Introduction In the previous two chapters we learned how to create console applications As you may have noticed, those programs look and run quite differently from the Windows applications to which you are accustomed In this chapter we will learn how to create Windows Applications
Background image of page 3

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
4 User Interface Console vs. Windows Application Windows Application Interactive Buttons Labels Text boxes Etc… Professional Looking Console Limited user interaction Primitive window
Background image of page 4
5 User Interface Windows Application Console vs. Windows Application Console Label Button Text Box
Background image of page 5

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
6 Program Flow Console vs. Windows Application Console Program controls the flow and dictates user input Windows Application User controls the flow; Program responds to user action ( Event Driven Programming )
Background image of page 6
7 Console vs. Windows Application User may enter speed and time in any order. User is forced to enter speed first and then time. Program Flow Windows Application Console
Background image of page 7

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
8 Graphical User Interface (GUI) A Form is a window that allows the programmer to add visual components The “Distance Calculator” Program has a form that contains 5 labels, 2 text boxes, and 1 button. Label Button Text Box Label
Background image of page 8
9 GUI Controls in Chapter 4 Label Button Text Box Picture Box There are many more … We will discuss them later.
Background image of page 9

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
10 Label Control Displays static text, such as, message, prompts, explanations, warnings, etc. In the next few slides we will develop a simple window application that displays the form below.
Background image of page 10
11 Click on File
Background image of page 11

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
12 Create New Project
Background image of page 12
13 Project Location Project Name Application Type
Background image of page 13

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
14 Type “Welcome” Click Ok Select Windows Application
Background image of page 14
15 Empty Form Click on View
Background image of page 15

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
16 Click on Solution Explorer
Background image of page 16
17 Click on View Project Name
Background image of page 17

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
18 Click On Properties Window
Background image of page 18
19 Click on View
Background image of page 19

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
20 Click on Task List
Background image of page 20
21 Click on View
Background image of page 21

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
22 Click on Toolbox
Background image of page 22
23 Click on Label
Background image of page 23

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
24 Drag mouse to indicate the size of the label
Background image of page 24
25 To change the text inside the label go to Properties
Background image of page 25

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
26 Change the text properties of Label1 to “Welcome to Visual Programming” Click on the Label1
Background image of page 26