·        User Interfaces in VB.NET: a simple calculator:

 

o       Some requirements:

·        Additions only.

·        Addition requires two numbers; clicking Add when only one number is present or when one or both of the numbers are not numbers generates an error. The error must pop up in a modal window.

·        When a new number is entered, the sum/result field must be cleared.

 

o       Note that the interface is a GUI.

o       Note that the interface is a so-called form.

o       Note that the interface is displayed in a window --> window (not console) application.

 

·        In VB.NET, setup a Windows Application (not a console!!)  project (File --> New --> Project --> Windows Application).

·        Notice how the VB.NET IDE automatically generates an empty form for you. Change the file name in the Solution Explorer from form1.vb into adder.vb.

·        Notice how the blank form is displayed in design view. However, behind the scenes, the IDE has generated VB.NET code for you that represents the form class and object. To see this code, switch to code view (View --> Code or click the associated tab).

·        Notice how the class Form1 is a subclass of a more abstract class Form.

 

Public Class Form1

    Inherits System.Windows.Forms.Form

 

·        Because of this inheritance, your Form1 class now has all attributes and behaviors that the VB.NET-provided Form class has.

·        Notice how the class is declared public; hence, all objects of all classes can create an object of class Form1.

·        Expand the ‘Windows Form Designer generated code’ box to see what the Form1 class is all about:

 

    'A public constructor

    Public Sub New()

        MyBase.New()

 

        'This call is required by the Windows Form Designer.

        InitializeComponent()

 

        'Add any initialization after the InitializeComponent() call

    End Sub

 

    'Form overrides dispose to clean up the component list.

    Protected Overloads Overrides Sub Dispose(ByVal disposing As Boolean)

        If disposing Then

            If Not (components Is Nothing) Then

                components.Dispose()

            End If

        End If

        MyBase.Dispose(disposing)

    End Sub

 

    'Required by the Windows Form Designer

    Private components As System.ComponentModel.IContainer

 

    'NOTE: The following procedure is required by the Windows Form Designer

    'It can be modified using the Windows Form Designer. 

    'Do not modify it using the code editor.

    <System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent()

        components = New System.ComponentModel.Container()

        Me.Text = "Form1"

    End Sub

 

·        Notice how the form has a Text attribute called Form1. Also note that the NOTE a few lines higher warns not to change this Text attribute in the editor, but rather to change it in the design view. The reason for this is that since all of this code got generated automatically, you as a programmer take a risk making modifications on your own.

·        In the design view, select right-click-->properties and change the Text attribute from Form1 to AddForm.  Also change the Name attribute to AddForm. Now check the results in both design view and code view.

·        Remember!! A form’s Name attribute refers to its class name. The Text attribute only refers to the default text displayed in the form window’s header.

·        Save your results.

 

·        Add a file MainClass.vb to the project (right-click the Windows Application-->Add--> Add New Item --> Class.

 

·         Add the following code to the MainClass.vb file.

 

Option Strict On

Option Explicit On

 

Public Class Mainclass

    Public Shared MyForm As AddForm

 

    Public Shared Sub Main()

 

        MyForm = New AddForm()

        MyForm.Show()

        MyForm.Refresh()

        System.Threading.Thread.Sleep(5000)

        MyForm.Dispose()

    End Sub

 

End Class

 

·        Note what the above code does:

o       It creates a top-level class.

o       This class contains two things:

§         A (shared) declaration for a Myform object of class AddForm.

§         A (shared) Main which:

·        Creates the MyForm object using New.

·        Sets the object’s visibility to true (the call to Show() displays the object).

·        Makes all the object’s controls active (refresh()).

·        Waits for five seconds (the sleep statement).

·        Disposes of the object (takes it off the screen and destroys it).

·        Set the Startup Object of the application to MainClass.

·        Build and run. Does it work?

• Add some interactivity to the form:
  • In design view, using the ToolBox (tab on left side of window) add the two buttons, three text boxes and the + sign (use a label) to the AddForm class. Use the properties dialog of the various interface elements to fine tune them (e.g., font, and bold).
  • Now switch to code view and note the new code segments added for each of these elements.
  • Using the properties dialog for the buttons and text boxes, change their Names and Texts as follows:
  • Top text box: Text: none (leave empty!), Name: FirstBox.
  • Middle text box: Text: none (leave empty!), Name: SecondBox.
  • Bottom (sum) box: Text: none (leave empty!), Name: SumBox.
  • Close button: Text: Close, Name CloseButton.
  • Add button: Text: Add, Name: AddButton.

  • Check in code view if all the changes made it. If not, go back and fix the missing/erroneous ones.
  • Notice how on the AddForm class, each of the interface objects gets created using the New statement. after which their attributes get set.
  • Compile and run the code.
  • Note how the form is displayed, but the cursor is an hour glass and interaction with the form’s controls (textboxes or buttons) is not allowed.
  • To make the form’s controls ‘listen’ to the mouse, we must define its events.
  • Notice how in code view, you have a Private subroutine named ..._Click(). This is a so-called callback or event handler subroutine (if you don't have such a routine yet, generate it by double clicking the Close button in design view). The routine is a so-called event handler and gets called automatically when a specified mouse event; e.g., a mouse click while the cursor is located over the button, occurs.
  • Modify the code of the ..._Click() function by adding a call to Dispose():

  Private Sub CloseButtonClick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles CloseButton.Click

     Dispose()

     End Sub

   

  Note how the above subroutine CloseButtonClick() is declared to handle a Click event that occurs on the ClickButton object (Handles CloseButton.Click). The only content of the subroutine is to call the Dispose() method on the form.

   

  • In the MainClass.vb file:
  • Replace the line MyForm.Show()with the line MyForm.ShowDialog()
  • Delete the line MyForm.Refresh()
  • Delete the line System.Threading.Thread.Sleep(5000)
  • Delete the line MyForm.Dispose()

  • Compile and run and notice how the form stays on the screen until you click the Close button. Also notice how when you click the Add button, it depresses but does not result in an action (no event handler defined for it yet).
  • Notice that the textboxes all accept typing. This is problematic, since the SumBox should not accept any typing; it should be used for display of results only.
  • In design view, set the ReadOnly property of the SumBox to true.
  • Compile and run to check if this worked.

  • Let us now add some action to AddButton. Its job is to read the contents of FirstBox and SecondBox, then add them up and display the result in SumBox. We code this by adding another event handler (either write the event handler yourself, or have its skeleton generated for you by double clicking the Add button in design view):

  Private Sub AddButtonClick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles AddButton.Click

    SumBox.Text = CStr(CShort(FirstBox.Text) + CShort(SecondBox.Text))

  End Sub

   

  Note how this subroutine gets called when AddButton is clicked (Handles AddButton.Click). All it does is convert the Text properties in FirstBox and SecondBox to shorts, adds them up, converts the result back into a string which is then displayed in the SumBox.

   

  • Compile and run this.
  • What happens when you type a text rather than a number in either FirstBox or SecondBox and try to add them up? What happens when you leave one or both boxes empty?
  • Apparently, our code in AddButtonClick() is not very flexible. It assumes that the values entered in FirstBox and SecondBox can be converted into shorts. This causes two problems:
  • If a value contains a decimal point, the information following the decimal point is rounded (test this!!).
  • If a text not representing a number is entered, an exception is thrown and the program dies.

  • First deal with exceptions in general. Add a try/catch block to the AddButtonClick() function that catches any exception:

  Private Sub AddButtonClick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles AddButton.Click

     Try

        SumBox.Text = CStr(CShort(FirstBox.Text) + CShort(SecondBox.Text))

     Catch Ex As Exception

     End Try

  End Sub

   

  • Compile and run entering a text for one of the boxes. Note how the exception is handled (no message), but now the program provides no feedback to the user on what the problem is.
  • Change the program so that the exception not only gets caught, but that a meaningful message is displayed to the user. We can do this using a Message Box:

  Private Sub AddButtonClick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles AddButton.Click

    Try

      SumBox.Text = CStr(CShort(FirstBox.Text) + CShort(SecondBox.Text))

    Catch Ex As Exception

      MsgBox("Invalid Entry...", MsgBoxStyle.OKOnly, "Input error...")

    End Try

  End Sub

   

  • Almost there. One thing left to do is to make sure we can handle both integers and floating point numbers. To do this convert the FirstBox and LastBox inputs into singles rather than shorts:

  Private Sub AddButtonClick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles AddButton.Click

    SumBox.Text = CStr(Csng(FirstBox.Text) + CSng(SecondBox.Text))

  End Sub

  • One last thing to do is to make sure that as a user types a new number in one of the text boxes, the SumBox is cleared. This way, the SumBox never contains a faulty sum. This, once again can be accomplished with an event handler. Interestingly, this event handler should be called when a user enters a value into either the FirstBox or the SecondBox. Thus, this event handler can be called from two different events:

  Private Sub ClearSumBox(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles FirstBox.TextChanged, SecondBox.TextChanged

        SumBox.Text = ""

  End Sub

   

  Notice how in the above example the ClearSumBox() subroutine gets called when either FirstBox or SecondBox receives a TextChanged event.

   

  • Suppose we want the little calculator we just wrote to be kicked off not as a separate application, but instead, it should be started from a menu option on a window. The parent window also needs a Close option. This would require some changes and additions to the existing code.
  • We must define a new window containing a menu. The menu needs two options:
  • Calculator...
  • Close.

  • Add a form item to the application (right-click on the project in Solution Explorer) (right-click-->Add-->Add Windows Form). Name the form MenuForm.
  • In design view, select a MainMenu item from the ToolBox-->Windows Forms category and fill out the menu’s name (MainMenu) and its options (Calculator... and Close).
  • Change the Text property of MenuForm to A simple startup interface
  • Change the Name of the menu MenuItem1 to MainMenu.
  • Change the Name of the Calculator... menu item to CalculatorItem.
  • Change the Name of the Close item to CloseItem.
  • Check the automatically generated code for the MenuForm.
  • Now change the Main() function of MainClass, so that it creates an object of class MenuForm, rather than an object of class AddForm:

   

  Public Shared Sub Main()

   

          Dim MyMenuForm as MenuForm

          MyMenuForm = New MenuForm()

   

          MyMenuForm.ShowDialog()

                                 

  End Sub

   

  §         Compile and run. Notice how the menu and menu item objects do their work. However, since we have not coded any event handlers on the menu items, clicking them has no effect.

  §         The next step is to add the event handlers. We need two:

  o       A click on the CloseItem should dispose of MyMenuForm.

   

  To the code for MenuForm add the following event handler (again, you can write the code yourself or generate its skeleton by double-clicking on the menu item):

   

  Private Sub CloseItemClick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles CloseItem.Click

      Dispose()

  End Sub

   

  Compile and make sure this works.

   

  o       A click on the CalculatorItem should create an object of class MyForm and call its ShowDialog() subroutine:

   

  To the code for MenuForm add the following event handler:

   

  Private Sub AddCalculatorItemClick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles CalculatorItem.Click

   

          MyForm = New AddForm()

          MyForm.ShowDialog()

  End Sub

   

  Notice that this will not compile as the compiler complains that MyForm is not declared. Reason: the AddCalculatorItemClick() subroutine ‘lives’ on the MenuForm class. However, this class does not yet have an object MyForm of class AddForm declared.

   

  Add the following line at the top of the code for MenuForm (immediately following the inherits... line:

   

  Private MyForm As AddForm

   

§         Now recompile, run, and... hey presto! Notice how the full functionality of the calculator is maintained within the confines of the MenuForm.

General principles illustrated in these notes:

§         User interfaces in VB.NET consist of objects that have other objects that live on them. For instance, a form object may have a few button and textbox objects living on it.

§         The VB.NET IDE provides wizards (design view) that help create and layout the skeleton code for these objects.

§         All the objects have properties and behavior.

§         Objects are connected with mouse-based interaction through so-called event handlers. These event handlers are subroutines that get automatically called when the specified mouse event occurs. Other types of event handlers exist as well.

§         Objects of specific interface classes can create objects of other interface classes.

§         Once you have a basic set of classes and event handlers, different user interfaces become mere variations on a theme.