1

CS 106Computing Fundamentals II

Chapter 210“Adding Controls to User Forms”

Herbert G. Mayer, PSU CSHerbert G. Mayer, PSU CSStatus 7/4/2013Status 7/4/2013

Initial content copied verbatim fromInitial content copied verbatim fromCS 106 material developed byCS 106 material developed by

CS professors: Cynthia Brown & Robert MartinCS professors: Cynthia Brown & Robert Martin

2

Syllabus GoalGoal Adding ControlsAdding Controls Mac vs. WindowsMac vs. Windows Double Click Form Name to Get ControlsDouble Click Form Name to Get Controls Useful ControlsUseful Controls Writing CodesWriting Codes

3

Goal• Presentation “Create_User_Form” is paired with Presentation “Create_User_Form” is paired with

this presentation “Add_Control_2_User_Form”this presentation “Add_Control_2_User_Form”

• Overall goal is to show how to enter a string Overall goal is to show how to enter a string and then display the concatenated string in and then display the concatenated string in these steps:these steps:

• 1 A label prompts user to enter a string1 A label prompts user to enter a string

• 2 A text box reads this string input, e.g. 2 A text box reads this string input, e.g. “Cindy”“Cindy”

• 3 A button, when subsequently pushed, causes 3 A button, when subsequently pushed, causes the string concatenation and display eventthe string concatenation and display event

• 4 A second text box displays “This is: Cindy!”4 A second text box displays “This is: Cindy!”

4

Adding Controls• A user form isn’t much use without some A user form isn’t much use without some

controlscontrols

• We’re going to add controls and write code We’re going to add controls and write code for themfor them

• Note that the code to Note that the code to openopen the form should the form should belong to the belong to the workbookworkbook project project

• The code for controls on the form, though, The code for controls on the form, though, belongs to the form, and is on a separate belongs to the form, and is on a separate code windowcode window

5

Mac vs. Windows• The following slides show the Windows The following slides show the Windows

versionversion

• There are videos of doing both versions, There are videos of doing both versions, and there are a few slides at the end of and there are a few slides at the end of this presentation that show how things this presentation that show how things look on the Maclook on the Mac

• Mac users should read through the whole Mac users should read through the whole presentation as not everything is presentation as not everything is duplicatedduplicated

6

Double click Form Name to Get Code

Click here

7

Ready to add controls…

This is the design view of the form, where you can add controls and set their properties.

8

Useful Controls• Listboxes: for printing data for the user to Listboxes: for printing data for the user to

see. Also good for giving a list of choices see. Also good for giving a list of choices to pick fromto pick from

• Command Button: clicking the button creates Command Button: clicking the button creates an an eventevent we can write a program for we can write a program for

• Labels: used to put useful information and Labels: used to put useful information and instructions on the form; can serve as prompt instructions on the form; can serve as prompt for inputfor input

• Check boxes: used to offer options where the Check boxes: used to offer options where the user can pick user can pick any number any number from none to allfrom none to all

9

Useful Controls• Option buttons: used to offer options Option buttons: used to offer options

where where exactly one exactly one should be chosenshould be chosen

• Frames: used to group controls like option Frames: used to group controls like option buttons; needed if there is more than one buttons; needed if there is more than one set of optionsset of options

• Textboxes: a place for the user to type Textboxes: a place for the user to type inputinput

• Others we won’t use in CS 106Others we won’t use in CS 106

10

Events for Controls• Most things you do with a control, like Most things you do with a control, like

checking a check box, typing in a text box, checking a check box, typing in a text box, or clicking a command button, are events in or clicking a command button, are events in VBAVBA

• You can write code to handle any control You can write code to handle any control eventevent

• If you don’t write code for an event, then If you don’t write code for an event, then nothing happensnothing happens

• We will typically use the command button We will typically use the command button control to trigger execution of our programcontrol to trigger execution of our program

11

Finding UserForm Code Page

If you click on the Window item, you can move between the code page and design page for the form and the code page for the workbook.

12

The Form Code Page

This looks a lot like the window for the workbook code, so be careful you use the right window! I just typed Option Explicit at the top.

13

Adding Four Controls

A label. I changed the caption, font, and size properties

A text box. I changed the name to txtName.

I changed the caption property and the name to btnPrint

A label. I changed the name to lblHello, the font to a large size, and the Visible property to False.

14

Names for Controls• Controls that are referred to in the code Controls that are referred to in the code

should have meaningful namesshould have meaningful names

• Start with a three letter prefix that Start with a three letter prefix that identifies the control: identifies the control: btnbtn for button, for button, lbllbl for label, for label, txttxt for text box, etc. for text box, etc.

• You can leave the names unchanged on You can leave the names unchanged on controls that are not referred to, like controls that are not referred to, like most labelsmost labels

15

Writing the Code• To get started, double click on the To get started, double click on the

control you want to write an event routine control you want to write an event routine forfor

• Works if you have already opened the code Works if you have already opened the code window for your formwindow for your form

• VBA will guess the name of the routine and VBA will guess the name of the routine and put the procedure header on the code page, put the procedure header on the code page, all set for you to start codingall set for you to start coding

16

Double Click on btnPrint

17

My code changes the properties of the label lblHello:

Option ExplicitOption Explicit'*****************************************************'*****************************************************

********************'Demonstrate the use of controls on a user form'Demonstrate the use of controls on a user form'*****************************************************'*****************************************************

********************

Private Sub Private Sub btnPrint_Click()btnPrint_Click() DimDim name name As StringAs String '*** read the name from the text box'*** read the name from the text box name = txtName.Textname = txtName.Text '*** create the caption and show the label'*** create the caption and show the label lblHello.Caption = "Hello, " & name & "!"lblHello.Caption = "Hello, " & name & "!" lblHello.Visible = lblHello.Visible = TrueTrueEnd SubEnd Sub

18

Push F5 to run the code, or use the Run menu

19

After Pushing the Button:

20

Try it Yourself!• You can download the example program and You can download the example program and

try using ittry using it

• Try making some changes in the properties, Try making some changes in the properties, fonts, colors, etc. of the various fonts, colors, etc. of the various controls, and in the layout of the user controls, and in the layout of the user interfaceinterface

• Also try adding a button that does Also try adding a button that does something to the text in the large labelsomething to the text in the large label

21

Mac version

22

Adding Controls• A blank user form isn’t much use!A blank user form isn’t much use!• Let’s add a few controls.Let’s add a few controls.

• When using controls that our program When using controls that our program refers to, we give them meaningful names. refers to, we give them meaningful names.

• We have a standard way to construct names. We have a standard way to construct names. Form names start with Form names start with frmfrm; buttons with ; buttons with btnbtn; text boxes with ; text boxes with txttxt; labels with ; labels with lbllbl

23

Watch the Video• There’s a video that shows the There’s a video that shows the

construction of this user form applicationconstruction of this user form application

• The following slides show some of the The following slides show some of the major highlightsmajor highlights

24

Add controls

I’ve added two labels, a text box, and a command button, using the palette at right to choose my controls, and the properties window to set their properties.

25

The Large Label

I changed the font size on the large label to 16, made it a bold font, and changed the name to lblHello. I set its Visible property to False, so you don’t see it when you start the program.

26

Command Button

I changed the name of the button to btnClick and the caption to read “Now Click This Button”. I changed the font size to 12, as well.

27

The CodeOption ExplicitOption Explicit

'******************************************************'******************************************************

' Read name from text box and print on label' Read name from text box and print on label

'******************************************************'******************************************************

Private Sub Private Sub btnClick_Click()btnClick_Click()

DimDim name name As StringAs String

name = txtName.Textname = txtName.Text

lblHello.Caption = "Hello, " & name & "!"lblHello.Caption = "Hello, " & name & "!"

lblHello.Visible = lblHello.Visible = True True ‘important so we see the message!‘important so we see the message!

End SubEnd Sub

28

Try it Yourself!• You can download the example program and You can download the example program and

try using ittry using it

• Try making some changes in the properties, Try making some changes in the properties, fonts, colors, etc. of the various fonts, colors, etc. of the various controls, and in the layout of the user controls, and in the layout of the user interfaceinterface

• Also try adding a button that does Also try adding a button that does something to the text in the large labelsomething to the text in the large label