Home -> Programming -> Demo Files -> Faces

Faces

This is a simple program which shows the use of textboxes, labels, pictureboxes and radio buttons. A zipped copy of this project is available from
this link. The program is a simple Greeting program which demonstrates the use of commonly used controls in Visual Basic.
  1. Plan your Project
    1. Create the program specification
    2. Output - A Happy and Sad faces are displayed by turn when clicked on. Below the face, a greeting message is displayed. The user's name, from the textbox at the top of the form, is added to the message and the text is colored according to which radio button is selected by the user.
      Input - The user is asked to enter their name in a textbox and prompted to click on the picture of the face which is displayed below the textbox. The user also selects the text color of the greeting by clicking one of the Radio buttons to the left of the faces.
      Processing - There are two picture boxes: one contains a Happy face, and the other contains a Sad face. Each time a picture box is clicked it becomes invisible and the other face becomes visible. A greeting is assigned in the label below the picture boxes and the text is colored according to the Radio Button selected by the user.
    3. Design the interface (the form)

      Description

      This is a greeting program which demonstrates the use of the common controls in Visual Basic. It introduces the textbox, label picturebox and radio button. The picture boxes contain a Happy and a Sad face which are clickable and cause a message to be displayed in the label. If the user has entered their name in the textbox, that name is concatenated to the greeting message in the label. Finally the use and potential drawback of applying color to text is demonstrated by using radio buttons.

      Drawing


      Faces Design
    4. Determine the initial properties for each control
    5. Now we decide what the properties should be for each control on our form when it first appears. You must always set the Name property for each control which you will refer to in your code. Other properties are set as needed. In this case we need to set the Text property for each of the controls.

      Initial Property Settings
      ControlPropertyValueExplanation
      FormNamefrmFacesWhen we need to program this object, we must have a way to give it instructions, so we give it a unique name (also called an Identifier) and use the name or identifier to send instructions to the object.
      Text FacesThis is the text that the user sees in the window header. By entering text in this property we can communicate with the user. See Output.
      TextboxNametxtNameSee explanation under Form Name above
      Textleave blank This is the text that the user sees. By entering text in this property we can communicate with the user. See Output.
      LabelNamelblGreetingSee explanation under Form Name above
      Textleave blank This is the text that the user sees. By entering text in this property we can communicate with the user. See Output.
      Border3D There are three options for borders, see the Basic Controls Chart on the Output page for details. All output labels should display a border.
      Radio Button 1 Name radBlack See explanation under Form Name above
      Text Black This is the text that the user sees. By entering text in this property we can communicate with the user. See Output.
      Radio Button 2NameradRedSee explanation under Form Name above
      TextRed This is the text that the user sees. By entering text in this property we can communicate with the user. See Output.
      Radio Button 3NameradBlueSee explanation under Form Name above
      TextBlue This is the text that the user sees. By entering text in this property we can communicate with the user. See Output.
      Radio Button 4NameradGreenSee explanation under Form Name above
      TextGreen This is the text that the user sees. By entering text in this property we can communicate with the user. See Output.
      Radio Button 5NamebtnOrangeSee explanation under Form Name above
      TextOrange This is the text that the user sees. By entering text in this property we can communicate with the user. See Output.
      Picture Box 1NamepicHappySee explanation under Form Name above
      Picture Box 2NamepicSadSee explanation under Form Name above
      Button 3NamebtnExitSee explanation under Form Name above
      TextExit This is the text that the user sees. By entering text in this property we can communicate with the user. See Output.

    6. What events do you need to create and what actions should each event take
    7. From the input, output, processing, program description and list of controls above it should be obvious that the following events need to be programmed.
      • Click Event for the Exit button.
      • Click Event for the Black radio button.
      • Click Event for the Red radio button.
      • Click Event for the Blue radio button.
      • Click Event for the Green radio button.
      • Click Event for the Orange radio button.
      • Click Event for the Happy Face picture box.
      • Click Event for the Sad Face picture box.

      The best way to figure out the actions is to start with the final outcome and work backwards. For the Button, this is simple. There is only one action.

      Button Events and Actions
      ButtonAction
      ExitCause the program to end

      For the Radio Buttons it is also simple. For each button there is only one action.

      RadioButton Events and Actions
      RadioButtonAction
      radBlack Set the forecolor property of the message label to black
      radRedSet the forecolor property of the message label to red
      radBlueSet the forecolor property of the message label to blue
      radGreenSet the forecolor property of the message label to green
      radOrangeSet the forecolor property of the message label to orange

      For the Picture Boxes the actions a bit more complex. Each time a picture is clicked we need to do three things. First we need to set the clicked picture to be invisible. Second we need to set the other picture to be visible. Third we need to concatenate the person's name to ur greeting and assign it to the message label. Now the question is does the order in which these three actions are taken matter? What do you think?
      Button Events and Actions
      Picture BoxAction
      picHappypicHappy becomes invisible
      picSad becomes visible
      assign the concatenated greeting to the label
      picSadpicSad becomes invisible
      picHappy becomes visible
      assign the concatenated greeting to the label

      At this point we have finished our planning.

  2. Create your Project
    1. Create the Form

    2. VB Form

      To create a form we need to create a new project first. VB is very sensitive about the files and resources in a project. In order to avoid problems you need to strictly follow these rules for creating projects. (This is repeated from our first example, but so many people have problems with corrupted projects it is worth the space to reinforce these points again!)

      1. Make sure there are no open projects in the current window. If there is an open project, close it. VB Is very good about saving your work, it will prompt you to save if necessary. (You can have more than 1 project open at a time but each must be in its own window so that VB does not get confused and cross link the files!)
      2. Select New Project form the File menu. This opens a dialog box (shown below) which displays the new project options. Make sure the Windows Application template is selected. (We will discuss the other templates later.)
      3. Name the project. You may only use letters and numbers - no punctuation and no special characters! (Windows Application is never a good name for a program file!)
      4. Never rename the files or folders inside the project folder! The project folder is the outermost folder when looking at your project files in Windows Explorer. It initially has the same name that you gave the project in step three above.
      5. Never move any files inside the project folder. You can copy the project folder and thereby its entire contents. You can zip the project folder and all its contents will be recreated in their proper places when the zip file is unzipped. When needed you can add files to the project folder. We will discuss this later.
      6. You can rename the Project Folder but never do so while the project is open! Doing this causes your project files to appear to be deleted. The files should eventually reappear but it will cause you to think they are gone!

      Now create a new project and name it Faces.

      New Project

      This will create a new project and result in a display that should appear as shown below. If the project form is not on the screen, then go to the top right panel named Solution Explorer and double-click Form1.vb to cause it to appear. Now using the controls from the left pane (GroupBox is in the Containers division) create the layout we previously planned. Place all the controls as planned in your new form. Once you are finished we are ready to proceed to the next step.

      Project with Blank Form

    3. Set initial Properties
    4. Follow your plan from above and name each control.

    5. Code the planned events
    6. We do this one procedure (one event) at a time. The usual pattern is to do the simplest things first. In this case, and almost every other that is to write the code for the Exit button. From the Design View of the project, locate and double-click the Exit button. Doing this does three things:
      • transfers you to the code view of the project,
      • creates the event procedure declaration and close for the Exit control and
      • ties the click event of that button to the procedure it just created.

      It will look like this:

      Private Sub btnExit_Click(ByVal e as SystemEvent, ) Handles btnExit.Click

      End Sub