Creating a First VB .NET Solution

1
Chapter 2

• Creating a First VB .NET Solution

2
Objectives

• Explore the role of the developer
• Examine the steps in creating and saving a
  solution
• Understand how to design a user interface
• Set properties at design time
• Understand the Label, Button, and PictureBox
  controls
• Understand the purpose of the Code Editor
• Create an event handler
• Understand programming errors and assignment
  statements

3
The Role of Author and Developer

• As a programmer you use existing tools called
  components
• Components include the controls found in the
  Toolbox
• As the developer, you use components created by
  others
• In this chapter, you will work in the role of the
  developer
• As the author, you create components designed for
  use by developers

4
Creating a New Solution

• Every program you create is called a solution
• Solution file as a suffix of .sln
• Each solution is created in its own unique folder
• When you create a solution, VB .NET creates the
  solution folder. It must not already exist
• Solution folder contains other folders and all of
  the files comprising the solution
• To copy a solution to another computer, copy the
  solution folder and all of its contents

5
Files in The Solution

• Chapter.02\Startup02 contains all folders and
  files comprising solution
• Startup02.vbproj is the project file
• Startup02.sln is the solution file
• Startup02.suo is the solution configuration file
• frmMain.vb is the form module
• frmmain.resx contains form configuration
  information
• This file is called a resource file
• The folders bin and obj contain executable files
  and debugging information
• Note that the structure of a solution differs
  significantly between VB 6 and VB .NET

6
Types of Projects

• Windows Application template creates desktop
  applications
• You will create a Windows Application in this
  chapter
• Class Library template creates components used by
  other applications
• Windows Control Library template creates controls
  to supplement those provided by VB .NET
• ASP.NET Web Applications create dynamic Web pages
  that execute on a Web server

7
Creating a New Solution

• New Project dialog box allows you to define the
• solution type in the Project Types pane
• project template
• Select Windows Application to create a desktop
  application
• location of the solution
• The solution is created in a new folder
• Remember that the folder must not already exist
• solution name

8
New Project dialog box
Select Windows Application project template
Set project name
Project created in this folder
9
Designing the User Interface (1)

• Principles of a Good User Interface
• Control The user should control the program not
  the other way around
• User-friendliness The interface should help the
  user accomplish tasks and not call attention to
  itself
• Avoid using too many fonts or images
• Intuitiveness The interface should follow a
  direct style that proceeds logically
• Consistency Use consistent fonts and other
  elements

10
Designing the User Interface (2)

• Clarity Visual elements should be readily
  comprehensible
• Feedback Provide immediate and clear feedback
  to the user
• Advise the user of errors and provide suggestions
  to correct errors
• Graphics Avoid unnecessary graphics that serve
  no useful purpose
• Use graphics as intuitive metaphors such as a
  stop sign
• Input Minimize transitions from keyboard to
  mouse

11
Visual Elements of Control Instances

• Align control instances vertically or
  horizontally
• Distribute control instances evenly about the
  form
• Group control instances together functionally
• Control instances should have a similar size
• Be aware of screen resolution and size
• Minimize use of bright colors
• Use bright colors only for emphasis
• Provide adequate contrast between foreground and
  background colors
• Similar objects should have similar colors
• For example, use the same text and background
  color for labels

12
Setting Properties at Design Time

• Use the Properties window to set properties for
  the form and the control instances created on the
  form
• You only use the Properties window to set
  properties at design time
• Form properties
• BackColor specifies the forms background color
• FormBorderStyle defines the appearance of the
  forms border
• Icon defines the icon appearing in the forms
  title bar
• Width and Height define size of the form or
  control instance
• X and Y define position of the form or control
  instance

13
Setting Properties

• Enter or select data in value column
• Value column operates differently depending on
  the type of data stored in the property
• For some properties you edit text
• Set colors using a color palette
• Use a dialog box to set properties involving
  fonts
• For properties such as FormBorderStyle, select
  predefined values from a drop-down list

14
Properties window
Use the list box to select form or control
instances (Form1 selected)
Size property expandedClick button to expand or
collapse property
15
Setting the Name Property

• All forms and control instances have a Name
  property
• Name must adhere to the following rules
• First character must be a letter
• Subsequent characters can contain letters and
  numbers
• Name must be less than 255 characters long
• Cannot contains special characters other than an
  underscore
• Name cannot contain spaces
• Name must be unique

16
Naming Conventions

• Using meaningful names improves code readability
• Meaninful names help you the developer. VB .NET
  does not care about these naming prefixes
• This book uses a prefix (usually three
  characters) for forms, controls and other objects
• Form "frm"
• Button "btn"
• Label "lbl"
• OpenFileDialog "ofd"
• PictureBox "pic"

17
Renaming a Form (1)

• Use Solution Explorer to change the disk file
  name
• Do not change the file extension
• Do not rename files using Windows Explorer. Use
  the Solution Explorer
• Use Properties window to set Name property
• Apply standard prefix of "frm" followed by a
  descriptive name
• Set startup form as necessary using projects
  Property Pages
• Note that disk file name and the value of the
  Name property may be different

18
Renaming a Form (2)
File name of form (frmMain.vb) appears in
Solution Explorer
19
Setting the Startup Object
Activate the Property Pages by right clicking
project in the Solution Explorer and selecting
Property Pages
Startup object set to frmMain
20
Controlling the Forms Border Style

• The FormBorderStyle property controls whether
  user can resize the form, and the appearance of
  the forms border
• None no border
• FixedSingle flat border not resizable
• Fixed3D 3D border not resizable
• FixedDialog for dialog boxes
• Sizable user can resize the form by dragging
  the border
• FixedToolWindow, SizableToolWindow appears with
  a shorter title bar

21
Setting the FormBorderStyle Property
Select the desired border style from the
drop-down list
22
Setting the BackColor Property
Set BackColor using the color palette
23
Setting the Font property
Set the Font property using the Font dialog box
24
Setting the TextAlign Property
Set the TextAlign property visually
25
The Control Box

• Control box appears at the upper-right corner of
  the forms title bar
• The control box has three buttons
• Left button - Minimize button hides the form
• Middle button Maximizes or restores the window
• Right button Closes the form

26
Properties Applicable to the Control Box

• ControlBox property determines whether the
  control box appears on the title bar
• MaximizeBox property enables or disables the
  maximize / restore buttons
• MinimizeBox enables or disables the minimize
  button
• All of these properties store the value True or
  False

27
The Label Control

• Used to identify other control instances on a
  form or display output
• User cannot enter text in a label
• The standard prefix for the Label control is
  "lbl"

28
The Label Control (Properties)

• BorderStyle - defines the border surrounding the
  label
• Font - defines the typeface and font size
• ForeColor, BackColor defines the text and
  background colors respectively
• Set these properties using the color palette
• Name - defines name of control instance. Must be
  unique
• Remember to use the prefix "lbl"
• Text - appears in the visible region of control
  instance
• TextAlign - property defines alignment of text
• Visible - determines whether control instance is
  visible or not.
• Possible values are True and False

29
Creating a Control Instance
Toolbox is typically autohidden
Select the Label control
Create the control instance by drawing it on the
form
30
Moving a Control Instance
First, click the control instance to activate it
(sizing handles appear)
Drag the control instance to its new position
31
Resizing a Control Instance
First, click the control instance to select it
Drag the control instance to its new position
32
Deleting a Control Instance

• Click the control instance appearing on the form
  to select it
• Press the Delete key

33
The Button Control

• Create a button that the user clicks
• The standard prefix is "btn"
• Button control instance fires a Click event when
  clicked by the user
• More on events later in the chapter
• The positional properties are the same as the
  Label control

34
Button Control (Properties)

• Enabled - controls whether button will generate
  events
• Valid values are True and False
• FlatStyle - controls visual appearance
• Valid values are Flat, Popup, Standard, or System
• Image - contains image that appears in button
• ImageAlign - defines position of image if an
  image appears
• Text - property contains Button text
• Precede a character with an ampersand () to
  define a hot key

35
Selecting Multiple Control Instances (1)

• Useful to set properties for multiple control
  instances at the same time
• Selecting multiple control instances allows you
  to align them
• Two techniques exist to select multiple control
  instances
• Hold down the Shift key, and then click on the
  desired control instances
• Drag a region with the pointer tool
• Even if only part of a control instance is in the
  region, the control instance will be selected
• Properties window displays a limited set of
  properties. No object appears in the Object list
  box

36
Selecting Multiple Control Instances (2)
Active control instance surrounded with black
sizing handles
Sizing handles surround three selected control
instances
37
Aligning Multiple Control Instances

• Format menu contains menu items to align control
  instances (selected control instances are
  aligned)
• Align Align margins with one another
• Make Same Size Make control instances the same
  size
• Horizontal Spacing Set horizontal spacing
  between control instances
• Vertical Spacing Set vertical spacing between
  control instances
• Center in Form Center control instances between
  the form margins

38
The PictureBox control

• Displays graphical images of varying types
• Bitmaps, Gif, and others
• Images will stretch and resize based on property
  settings
• Standard prefix is "pic"

39
The PictureBox Control (Properties)

• BorderStyle - controls appearance of surrounding
  border
• Image - contains picture appearing in visible
  region
• SizeMode - controls how image will be resized
• Normal Image size is fixed
• StretchImage Image will resize to fit in the
  control instances visible region
• AutoSize Control instance resizes to fit image
• CenterImage Center image in visible region of
  control instance

40
Effect of the SizeMode Property
StretchImage
Normal
AutoSize
CenterImage
41
The OpenFileDialog Control

• The purpose is to allow the user to select a file
  from a standard dialog box
• Note that the control just gets file name. It
  does not open the file
• Not visible to the user at run time
• Appears in a resizable tray at the bottom of the
  Win Form Designer
• Standard prefix is "ofd"
• ShowDialog method displays the dialog box to the
  user
• FileName property contains the name of the file
  selected by the user

42
The Code Editor

• Formally known as the Code and Text Editor Window
• Intelligent text editor used to edit VB .NET and
  other code
• Plus () and minus (-) signs appear to expand or
  collapse code segments
• Intellisense technology helps to complete
  statements by displaying tooltips

43
Anatomy of the Code Editor
Select form or control instance in the Class Name
list box
Select event in Method Name list box
Expand or collapse procedure
44
Printing the Code for the Solution

• You may want to print code for a solution for
  reference
• To print code
• Activate the Code Editor for a module
• Click File and then click Print on the VB .NET
  menu bar

45
Event Handlers

• Event handlers contain one or more VB .NET
  statements that execute when a user performs an
  action such as clicking a button

User clicks button to exit the solution
Windows generates Click event for Exit button
Click event (handler) executes for the button
Private Sub btnExit_Click(. . .) Handles
btnExit.Click Me.Close() End Sub
46
Creating an Event Handler (1)
Select control instance in Class Name list box
47
Creating an Event Handler (2)
Select Event name in Method Name list box
48
Creating an Event Handler (3)
VB .NET creates the event handler
49
IntelliSense Technology
Intellisense technology displays ToolTips and
drop-down lists as you type a statement
50
Type of Programming Errors

• Errors classified into 3 types
• Syntax errors occur when a statement violates
  language rules
• Run-time errors occur when a program runs
• A dialog box appears describing the error
• Click Break to highlight the offending statement
  in the Code Editor
• Logic errors occur because of a design or coding
  problem
• A logic error may or may not cause a run-time
  error

51
Detecting Syntax Errors
Statement with syntax error appears underlined
Error description appears in Task List
52
Run-Time Errors
Dialog appears as a result of a run-time error
Error description
Click break to activate the Code Editor and
display the offending line
53
Logic Errors

• Logic errors occur when a design problem causes
  incorrect results
• To fix logic errors, you apply a process known as
  debugging
• Refer to Appendix A to learn how to debug
  programs
• Logic errors may or may not cause run-time errors

54
Introduction to Assignment Statements

• Assignment statements are executable statements
• They appear inside of an event handler
• All assignment statements have the same
  characteristics
• Left side contains result of the assignment
• Right side contains expression to be evaluated
• Left side and right side are separated by an
  equals sign ()

55
Assignment Statement Syntax

• ObjectName.PropertyName Value
• ObjectName contains the name of a control
  instance (Name property)
• PropertyName contains the name of a supported
  property
• Value is assigned to property
• lblFileName.Text "C\Demo.jpg"

56
Anatomy of an Assignment Statement
Copy value
lblFileName.Text "C\Demo.jpg"
Right side
Left side
57
More on Assignment Statements

• Assignment statements may contain the values of
  properties
• Copy the Text property of a button to a label
• lblFileName.Text btnExit.Text

58
Calling a Method

• Methods apply to an object
• Call the ShowDialog method of the
  OpenFileDialogofdImages.ShowDialog()
• Call the FromFile method of the
  System.Drawing.Image classpicCurrent.Image
  System.Drawing.Image.FromFile(ofdImages.FileName)