Small Basic > Curriculum > Online > Lesson 3.5: The Controls Object

The Controls Object
Introduction to the Controls Object
Operations of the Controls Object
Properties and Operations of the Controls object
The Controls Object
Control Events
Let’s Summarize…
Show What You Know
PowerPoint Downloads

Estimated time to complete this lesson: 1 hour

The Controls Object

In this lesson, you will learn how to:

Use various properties of the Controls object.
Use various operations of the Controls object.
Use control events on buttons and text boxes in your program.

Introduction to the Controls Object

So far, you have learned to use different objects in Small Basic, such as the GraphicsWindow, Shapes, File, and Math objects.

Controls Object

This lesson introduces you to the Controls object that Small Basic offers. By using this object, you can display simple controls, such as text boxes and buttons, in the graphics window.

Operations of the Controls Object

Before we create a program by using the Controls object, let’s learn about some operations of the Controls object and their parameters.

AddTextBox—You can define a text box that will appear in the graphics window by using this operation. As parameters, you must specify the text box’s x-coordinate and y-coordinate.

AddButton—You can define a button that will appear in the graphics window by using this operation. As parameters, you must specify the button’s caption and its x-coordinate and y-coordinate.

textbox = Controls.AddTextBox(200, 150)

button = Controls.AddButton("Button", 150, 200)

GetButtonCaption—By using this operation, you can retrieve the caption of a button. You must specify the name of the button as a parameter.

SetButtonCaption—By using this operation, you can set or change the caption of a button. You must specify the name of the button and the new caption as parameters.

Controls.GetButtonCaption(button)

Controls.SetButtonCaption(button, "Click")

GetTextBoxText—You can retrieve the text that appears in a text box by specifying its name as
a parameter for this operation.

SetTextBoxText—You can define the text to appear in a text box by specifying its name and the required text as parameters for this operation.

Controls.GetTextBoxText(textbox)

Controls.SetTextBoxText(textbox, "Hello World!")

In addition to adding useful controls into your program, you can perform certain operations and define the settings for the controls that you add.

Let’s explore the Controls object with the help of an example.

SmallBasic Graphics Window

GraphicsWindow.DrawText(50, 100, "Enter your first name:")

firstname = Controls.AddTextBox(200, 100)

GraphicsWindow.DrawText(50, 150, "Enter your last name:")

lastname = Controls.AddTextBox(200, 150)

showbutton = Controls.AddButton("Show Message", 150, 200)

message = Controls.AddMultiLineTextBox(50, 250)

Controls.SetSize(message, 310, 50)


Controls.ButtonClicked = ShowMessage


Sub ShowMessage

  If Controls.GetButtonCaption(showbutton) = "Show Message" Then    
   FullName = Controls.GetTextBoxText(firstname) + " " + Controls.GetTextBoxText(lastname)
   Controls.SetTextBoxText(message,"Hello " + FullName)

  EndIf

EndSub

Click the Run button on the toolbar.

Properties and Operations of the Controls object

Let’s look at the capabilities that a few more operations and properties of the Controls object offer.

HideControl—You can use this operation to hide an existing control from the graphics window.

ShowControl—You can use this operation to display a previously hidden control in the graphics window.

Remove—You can use this operation to remove a control from the graphics window.

Controls.HideControl(textbox)

Controls.ShowControl(button)

Controls.Remove(textbox)

SetSize—You can specify a fixed size for a control by using this operation. You must specify the name, height, and width of the control as parameters.

Move—You can move a control to a different position in the graphics window by using this operation. You must specify the name, left coordinate, and top coordinate of the control as parameters.

Controls.SetSize(textbox, 300, 50)

Controls.Move(textbox, 100, 150)

LastClickedButton—You can use this operation to find the last button that was clicked on the graphics window.

LastTypedTextBox—You can use this operation to find the last text box where text was typed.

Controls.LastClickedButton

Controls.LastTypedTextBox

The Controls Object

Now let’s write a simple program that includes the Controls object. This program displays the definitions of a given word.

GraphicsWindow.Title = "Dictionary"

GraphicsWindow.Height = 600

GraphicsWindow.Width = 600



GraphicsWindow.DrawText(50, 80, "Enter Text: ")

textbox = Controls.AddTextBox(50, 100)

Controls.SetSize(textbox, 100, 30)

Controls.SetTextBoxText(textbox, "")

GraphicsWindow.DrawText(50, 140, "Dictionary Meanings: ")



multitxt = Controls.AddMultiLineTextBox(50, 160)

Controls.SetSize(multitxt, 500, 400)

Getdfn = Controls.AddButton("Search", 200, 100)

GraphicsWindow.DrawText(80, 80, "")

meaning = Dictionary.GetDefinition(Controls.GetTextBoxText(textbox))

Controls.SetTextBoxText(multitxt, meaning)

Controls.ButtonClicked = Showmeaning



Sub Showmeaning

  If Controls.GetButtonCaption(Getdfn) = "Search" Then

    meaning = Dictionary.GetDefinition(Controls.GetTextBoxText(textbox))   

    Controls.SetTextBoxText(multitxt, meaning)

  EndIf

EndSub

This is the output you will see:

Output

Control Events

Now that you are familiar with the Controls object in Small Basic, let’s get acquainted with the events that you can use for that object. Control events can generate actions in your program when the user clicks a button or types some text into a text box.

ButtonClicked raises an event when the user clicks a button.

TextTyped raises an event when the user types text into a text box.

You can use the ButtonClicked event to make a simple calculator like the one that appears to the right:

And here’s an example of the TextTyped event:

w = 350

h = 290

GraphicsWindow.CanResize = "False"

GraphicsWindow.Width = w

GraphicsWindow.Height = h

GraphicsWindow.Top = (Desktop.Height-h) / 2

GraphicsWindow.Left = (Desktop.Width-w) / 2

GraphicsWindow.Title = "Calculator"

CreateGUI()

Controls.ButtonClicked = ButtonDown

Sub CreateGUI   

  GraphicsWindow.DrawRectangle(10, 10, 330, 270) 

  GraphicsWindow.DrawText(50, 70, "Enter first Number: ")  

  Ftextbox = Controls.AddTextBox(200, 60)

  Controls.SetSize(Ftextbox, 60, 30)  

  GraphicsWindow.DrawText(50, 120, "Enter Second Number: ")

  Stextbox = Controls.AddTextBox(200, 110) 

 Controls.SetSize(Stextbox, 60, 30)  

  GraphicsWindow.DrawText(50, 170,"Answer is:")

  Atextbox=Controls.AddTextBox(200, 160) 

  Controls.SetSize(Atextbox, 60, 30) 

  GraphicsWindow.FontSize = 15

  Plus = Controls.AddButton("+", 20, 210)

  Controls.SetSize(Plus, 40, 40)

  Minus = Controls.AddButton("-", 70, 210)

  Controls.SetSize(Minus, 40, 40)

  Asterisk = Controls.AddButton("*", 120, 210)

  Controls.SetSize(Asterisk, 40, 40)

  Division = Controls.AddButton("/", 170, 210)

  Controls.SetSize(Division, 40, 40)

  Clear = Controls.AddButton("C", 220, 210)

  Controls.SetSize(Clear, 40, 40)      

EndSub  

Sub ButtonDown

  FtxtValue = controls.GetTextBoxText(Ftextbox)

  StxtValue = controls.GetTextBoxText(Stextbox) 

  operator = Controls.GetButtonCaption(Controls.LastClickedButton)  

If operator = "C" Then

   Controls.SetTextBoxText(Ftextbox, "")  

   Controls.SetTextBoxText(Stextbox, "")  

   Controls.SetTextBoxText(Atextbox, "") 

ElseIf operator = "+" Then

   AtxtValue = FtxtValue + StxtValue    

   Controls.SetTextBoxText(Atextbox, AtxtValue)

ElseIf operator = "-" Then

   AtxtValue = FtxtValue - StxtValue    

   Controls.SetTextBoxText(Atextbox, AtxtValue)

ElseIf operator = "*" Then

   AtxtValue=FtxtValue*StxtValue    

   Controls.SetTextBoxText(Atextbox,AtxtValue)

Else     

   AtxtValue=FtxtValue/StxtValue    

   Controls.SetTextBoxText(Atextbox,AtxtValue)

EndIf

EndSub

TextTyped event

Let’s Summarize…

Congratulations!

Now you know how to:

Use various properties of the Controls object.
Use various operations of the Controls object.
Use control events on buttons and text boxes in your program.

Show What You Know

Write a program to display a simple form, and perform the following steps:

Add text boxes to request the name, address, telephone number, and e-mail address of the user.
Add a Submit button to the form.
After the user specifies the information and clicks Submit, display an appropriate message.

To see the answers to these questions, go to the Answer Key page.

Next Lesson