Lecture Set 3

Lecture Set 3

Introduction to Visual Basic Concepts Part C – Design Mode Properties

In-Depth Look at Common Features of Controls

Slide 2

Objectives Sort out differences between namespace

imports in code and references in Solution Explorer

Understand better how windows properties are partitioned and how to navigate through properties for various controls

Gain an understanding about controls What they are and how they relate to each

other See generated code for controls Learn how to manipulate controls

The intelligent editor and intellisense8/2/2013 3:46

PM

Slide 3

Objectives (continued) Review key terminology: class, object,

instantiation, instance, property, method, event, and member.

Describe how an app responds to events.

Get first look at generated code (for controls) Aka Code Behind

Distinguish between a syntax (or build) error and a runtime error.

Explain how a data tip can help debug a runtime error. 8/2/2013 3:46

PM

Slide 4

Terminology Revisited An object is a self-contained unit that

combines code and data. Two examples of objects are forms and controls.

A class is the code that defines the characteristics of an object. You can think of a class as a template for an object.

An object is an instance of a class, and the process of creating an object from a class is called instantiation.

8/2/2013 3:46 PM

Slide 5

Terminology Revisited (continued)

More than one object instance can be created from a single class. For example, a form can have several

button objects, all instantiated from the same Button class.

Each is a separate object, but all share the characteristics of the Button class.

8/2/2013 3:46 PM

Slide 6

Property, Method, and Event Concepts Properties define the characteristics of an

object and the data associated with an object.

Methods are the operations that an object can perform.

Events are signals sent by an object to the application telling it that something has happened that can be responded to.

Properties, methods, and events can be referred to as members of an object.

8/2/2013 3:46 PM

Slide 7

Property, Method, and Event Concepts

If you instantiate two or more instances of the same class … All of the objects have the same

properties, methods, and events. However, the values assigned to the

properties can vary from one instance to another.

8/2/2013 3:46 PM

Slide 8

Using Classes in a Namespaces Namespaces may be designated for use in any

component for clarity and convenience Such a using designation can be used to shorten

identifier references However it is done, with using or not, the full

path reference to every identifier used in your program must be known to the compiler

Either you write the full path name preceding the identifier (using . notation) or you use the using namespace so that the compiler can “prefix” the designated path to the identifier wherever it is referenced.

Next slide 8/2/2013 3:46

PM

Slide 9

Namespaces (continued)

Without one of these two mechanisms the compiler cannot find the proper referenced assembly and associated information needed to do its job.

Result: syntax error Example: using System.Windows.Forms enables you to use any class in this namespace as if it were a part of your project

If ambiguities arise, you still need to prefix class member names with the full path name such as System.Windows.Forms.xxx

8/2/2013 3:46 PM

Slide 10

Assembly (Namespace) References

With or without the using statement, references must be complete

Assemblies must be referenced if you plan to program against the public types inside them

Every assembly you use must be explicitly referenced (in your list of references in the Solution Explorer)

If you look in the references list in the Solution Explorer window, you will see that you get a few references “for free”

Otherwise, if you fail to reference a library component explicitly in the list of references, neither the editor nor the compiler will know what to do with your class member references in that component and YOU WILL GET COMPILER ERRORS. 8/2/2013 3:46

PM

Slide 11

Assembly (Namespace) Reference List

8/2/2013 3:46 PM

Slide 12

Introduction to the Properties Window We view the properties of a form in

Design Mode (not in Code Mode) The Properties window is a tool window

Like any tool window, it can be docked, Auto Hidden, or appear as a floating window

It is used to set properties for a form or control instance at design time

All controls have properties (many have LOTS of properties) but different controls have different properties

8/2/2013 3:46 PM

Slide 13

Form Properties (a VB example)

Switch to Design Mode – see Properties

Slide 14

Properties Window (Sections) The Properties window is divided into

four sections The Object combo box lists the form and

control instances on the form The toolbar area contains buttons to

change the order in which properties are listed and to display properties or events

The List section contains two columns displaying property names and values

The Description section displays a property’s description

8/2/2013 3:46 PM

Slide 15

Hangman Example (from VB) Let’s look at a sample game and at a

few controls for that game (next 3) Look at one or two of the controls (such as

btnYes or lblOkay What three code segments to we see?

Declaration Instantiation of an object (of what data

type) Event handler

8/2/2013 3:46 PM

Slide 16

Sample Form for Hangman Game

8/2/2013 3:46 PM

Slide 17

Code-Behind When using the Form Designer, (VS)

generates C# code to creates a new class based on the Form class. Then, when you run the project, a form object is instantiated from the new class.

When you add a control to a form, VS automati-cally generates several snippets of C# code in that form’s class Code to define the type of the control Code to instantiate the control (of the defined

type) Code to handle an event on that control (if

appropriate) Code to redefine some of the object’s

attributes We saw examples of this code in Slide Set

3B

8/2/2013 3:46 PM

Slide 18

Code-Behind (continued) When you move and size a control,

Visual Studio automatically sets the properties that specify the location and size of the control.

8/2/2013 3:46 PM

Slide 19

Code Behind btnYes// Allow user another transactionprivate void btnYes_Click(object sender, EventArgs e){ this.Visible = false; GlobalData.TransactionEntryForm.ShowDialog();} // end btnYes Click

8/2/2013 3:46 PM

Slide 20

Generated Code Behind btnYes//Examples taken from the Designer.cs file for the indicated Form// Instantiation (creation) of the btnYes objectthis.btnYes = new System.Windows.Forms.Button();. . . // Initializing required btnYes attributes // btnYes this.btnYes.BackColor = System.Drawing.Color.Lime;this.btnYes.Font = new System.Drawing.Font("Arial Narrow", 12F,

System.Drawing.FontStyle.Bold, System.Drawing.GraphicsUnit.Point, ((byte)(0)));

this.btnYes.Location = new System.Drawing.Point(350, 331);this.btnYes.Name = "btnYes";this.btnYes.Size = new System.Drawing.Size(113, 33);this.btnYes.TabIndex = 23;this.btnYes.Text = "Yes";this.btnYes.UseVisualStyleBackColor = false;this.btnYes.Click += new System.EventHandler(this.btnYes_Click);. . .// Place btnYes on the Formthis.Controls.Add(this.btnYes);

8/2/2013 3:46 PM

Slide 21

Using the Code Editor It's an intelligent editor used to edit files

containing C# code The Code Editor always appears as a

document window Plus and minus signs allow procedures

to be expanded or collapsed Drop-down combo boxes appear to

select file elements including functions

8/2/2013 3:46 PM

Slide 22

Using the Code Editor It's an intelligent editor used to edit files

containing C# code The Code Editor always appears as a

document window Plus and minus signs allow procedures

to be expanded or collapsed Drop-down combo boxes appear to

select file elements including procedures

8/2/2013 3:46 PM

Slide 23

Code Editor Features

The Code Editor checks syntax as statements are entered Statements with syntax errors appear

underlined Syntax errors also appear in the Error List

window The Code Editor automatically indents

statement blocks

8/2/2013 3:46 PM

Slide 24

Code Editor In Action - 1 Take a simple example of code you have

completed Insert some errors into the code

Examine what the editor does Find and read the error message Correct the error and compile the program

8/2/2013 3:46 PM

Slide 25

Using Intellisense with the Code Editor

Intellisense technology displays pop-up menus as statements are entered

Intellisense displays classes applicable to a namespace

Intellisense displays members of a class or other type

Intellisense displays arguments to functions or methods

Intellisense is a wonderful piece of technology

8/2/2013 3:46 PM

Slide 26

Form Properties 1

AcceptButton contains the name of a special Button control instance Pressing Enter executes this button’s Click event handler

The BackColor property defines a form’s background color

The ControlBox property defines whether the control box appears

The MaximizeBox enables or disables the Maximize button on the control box

8/2/2013 3:46 PM

Slide 27

Form Properties 2 In the Properties window, we scrolled

down a bit. You see: The MinimizeBox property enables or

disables the Minimize button on the control box

The FormBorderStyle property defines whether a form is resizable and the size of the title bar

The CancelButton property contains the name of a special Button control instance

Pressing Escape executes this button’s Click event handler

8/2/2013 3:46 PM

Slide 28

Form Properties 3 The Icon property defines the form’s

icon The contents of the Text property

appear in the title bar The Width and Height properties define

the form’s size (x length and y length) The StartPosition property defines

the position of the form on the desktop (again, x and y coordinates)

8/2/2013 3:46 PM

Slide 29

Form Properties 4 - Configuring Textual and Hierarchical Properties

Properties such as Name and Text store textual values Edit these values directly in the Value

column A plus or minus sign appears next to

hierarchical properties Click plus to expand and minus to collapse

Some properties display a drop-down list Some properties display a visual editor We now examine different property

displays (we made these views optional – you probably have seen them already but you can certainly look at them “live” is a project of your own)

8/2/2013 3:46 PM

Slide 30

Hierarchical Properties in the Properties Window (optional)

8/2/2013 3:46 PM

Slide 31

Properties Window - Color Palette (optional)

8/2/2013 3:46 PM

Slide 32

Properties Window -- a Drop-down List (optional)

8/2/2013 3:46 PM

Slide 33

Configuring Textual and Hierarchical Properties

Properties such as Name and Text store textual values Edit these values directly in the Value

column A plus or minus sign appears next to

hierarchical properties Click plus to expand and minus to collapse

Some properties display a drop-down list

Some properties display a visual editor 8/2/2013 3:46

PM

Slide 34

Font Dialog Box (optional)

8/2/2013 3:46 PM

Slide 35

Snap Lines in the Windows Forms Designer (optional)

8/2/2013 3:46 PM

Slide 36

Controls as Objects of Classes Controls on a Form are all instances of

control classes The collection of control classes are

arranged in a class hierarchy The System.Windows.Forms Control Class

This class is the base class from which all visible controls are derived

Dialog boxes derived from the CommonDialog class

8/2/2013 3:46 PM

Slide 37

The Hierarchy of Controls Classes

If you look at one of your projects you will see that all of your forms inherit from

System.Windows.Forms Examine the code generated for you own

form Find the inherits statement in this code public partial class frmSplashStart : Form

8/2/2013 3:46 PM

Slide 38

Some Visual Studio Controls Controls you should know about

The PictureBox displays graphical images The Label control displays text The Button control is used to perform a

specific task when clicked The OpenFileDialog control displays a

dialog box from which the user can select a file to open

The ToolTip control displays informational pop-up messages

8/2/2013 3:46 PM

Slide 39

Using Visual Studio to Create and Configure Control Instances To create a control instance

Click the control in the Toolbox to select it Using the mouse, draw the region of the

control instance on the form To delete a control instance, click the

control instance to select it and press Delete

Go look at the code corresponding to this control What is gone? What is still there? Anything?

8/2/2013 3:46 PM

Slide 40

Moving and Resizing a Control Instance Move a control instance by dragging it

onto the form Resize a control instance by

Clicking the control instance to select it Resize the control instance by dragging

the sizing handles What happens behind the scenes? In

other words, what code behind is changed? (See slide 20 in this slide set)

8/2/2013 3:46 PM

Slide 41

Working with Multiple Control Instances

Select multiple control instances by Holding down the Shift key and clicking

the desired control instance Dragging a rectangle around the desired

control instance with the Pointer tool Only part of the control instance needs to

appear in the rectangle to be selected

8/2/2013 3:46 PM

Slide 42

Aligning Multiple Control Instances Use the Format menu to align control instances All commands work with the active and selected

control instances The Align command aligns the margins of the

selected control instances The Make Same Size command makes the

selected control instances the same size as the active control instance

The Horizontal and Vertical spacing commands change the horizontal or vertical spacing

Visual snap lines appear while dragging control instances in the Windows Forms Designer

8/2/2013 3:46 PM