Tutorial 04: Using ComboBoxes April 18, 2008 © NS BASIC Corporation. All rights reserved. Contributed by Tom Newman, Mission Peak Designs

Contents:

1. Introduction
2. Creating a ComboBox
3. Using a ComboBox
4. Additional Properties, Methods, and Events

Introduction

The purpose of this tutorial is to demonstrate how to add a ComboBox to a form using NS Basic/Desktop. You should have completed Tutorial #1 before beginning this tutorial.

The program to be developed will start out creating a form with a ComboBox. It will then show how to populate the ComboBox and detecting when the user has selected a value from the list

Creating a ComboBox

1. Creating the Form

A ComboBox is really a combination text box and list box. Items in the list can be added and removed or selected by the user. The ComboBox looks like a single line text box until the user clicks on the box causing a drop-down list to appear. The user can select one of the items in the list or enter a new value. Events are generated whenever an item is selected or changed.

• Start NS Basic/Desktop from the Start menu.
• At the initial screen select Standard in the New Project dialog box and click OK

• Click on the ComboBox object in the Toolbox (large grid-looking icon).
• Move the cursor to the form where you want the object to appear and click the left mouse button.
• Click on the object to select it.
• Set the Name in the Properties window to "cboWeekday"
• Set ExpandedHeight in the Properties window to 100. This allows the list to expand (drop down) when the user selects it.
• Use the mouse to expand the size of Date object horizontally (about twice its current size) and reposition on the form.

• Click on the TextBox object in the Toolbox ("ab" icon)
• Move the cursor to the form and click the left mouse button to place the object on the form
• Click on the object to select it.
• In the Properties window, change the Name to "txtWeekDay"
• Scroll down in the Properties Window and delete the value of Text
• Scroll down in the Properties Window and change the value of Locked to True (makes the field read-only)
• Use the mouse to expand the size of the TextBox to display the text all on the same line and reposition on the form.

At this point it's a good idea to save the project. You can save it from the File menu or pressing F5 to save and view your completed form. Save the project as ComboBoxExample.nsd

2. Creating the Code

We need to add code to initialize the ComboBox with items for the user to select. Since we selected a "Standard" project, NS Basic automatically creates the form and any controls (objects) we dragged onto the form. It also generates the code to create these objects when the program is started. We can't initialize or adjust the properties of these objects until the creation process has completed. This is where the Form Load routine comes in. The last thing the auto-generated form/object code does is call the form load routine (if it exists). This is where we will place our code to initialize the form and/or objects. Double click on an empty area of the form and the Code Window opens with "Sub Form1_Load." This is where we will place our initialization code

	Option Explicit
	ShowOKButton True

	Dim i

	Sub Form1_Load
	    cboWeekDay.style = 2

		For i = vbSUNDAY To vbSATURDAY
			cboWeekDay.AddItem WeekDayName(i)
		Next
	
		cboWeekDay.ListIndex = WeekDay(Now-1)
	End Sub 

• The "DIM i" statement declares a variable used as our index
• "cboWeekDay.syle = 2" sets our ComboBox as read-only
• The For...Next loop initializes the ComboBox with the days of the week. The vb names are predefined constants.
• The last line sets the Index to the current weekday using NOW. This sets the initial selection to the current day of the week.

3. Testing the Program

Press F5 to save and start the program.

Using a ComboBox

The ComboBox program we just built allows the user to click on the list and select a day of the week but does nothing with the selection. Lets now modify our code to detect when the user has clicked on the box and display the selection.

1. Extending the Code

Double click on the ComboBox and the Code Window will open with the Change event subroutine. Change "_Change" to "_Click" so we detect whenever the user clicks on the combo box instead of actually changing the text. Add the following code to read the current ComboBox selection and place it in the TextBox.

	Sub cboWeekDay_Click
	   txtWeekDay.Text = cboWeekDay.Text
	End Sub 

This code change will update the text box every time the user clicks on the combo box.

2. Testing the Program

Press F5 to save and start the program.

Additional Properties, Methods, and Events

Like all objects, ComboBox has a number of properties, methods, and events for using and configuring the ComboBox. You can see all of these in the NS Basic Handbook or by viewing the online documentation. Listed here are some of the more common ones you will use in your programs.

Common ComboBox Properties (see documentation for a full list)

• ListCount - Returns number of items in the list
• ListIndex - Returns or sets the Index of the currently selected item in the list
• List(n) - Returns or sets the item in the list at Index n
• Text - Returns or sets the text of the selected item
• NewIndex - Returns the Index of the item most recently added to the list
• Style - Sets the list as editable (0), or read-only (2)
• ExpandedHeight - Height of the ComboBox when expanded

ComboBox Events

• Change - Triggered when the user enters a item in the list box
• Click - Triggered when the user clicks on an item in the list
• DropDown - Triggered when the user clicks on the ComboBox
• GotFocus - Triggered when focus is on the ComboBox
• LostFocus - Triggered when focus is removed from the ComboBox
• Timer -- Triggered when the preset interval for the Timer has elapsed

ComboBox Methods (functions)

• AddItem - Adds a new item to the list
• Clear - Clears all items from the list
• Hide - Hides the ComboBox from view (Visible = False)
• Move - Moves the object to new x, y location
• RemoveItem - Removes an item from the list
• SetFocus - Sets the focus on the ComboBox (for keyboard selection)
• Show - Shows the ComboBox (Visible = True)

We now want to make one additional change to our ComboBox example using some of the items mentioned above. We will add a button (cmdChange) and change it's caption to "Change List". Whenever the button is pressed, the currently selected list item will be removed from it's current location in the list and placed at the end of the list with an "*" character added to the end. In this set of code I've added comment lines to help understand what the code is doing.

Note: The Index numbers for items in the list start at 0. ListCount returns the total number of items which means the last item in the list will be one less than the value returned by ListCount.

Your code should look like the following:

Option Explicit
ShowOKButton True

Dim i

Sub Form1_Load
   cboWeekDay.style = 2

	For i = vbSUNDAY To vbSATURDAY
		cboWeekDay.AddItem WeekDayName(i)
	Next
	
	cboWeekDay.ListIndex = WeekDay(Now-1)
End Sub
Sub cboWeekDay_Click
   txtWeekDay.Text = cboWeekDay.Text
End Sub

Sub cmdChange_Click
   Dim value
   ' Get the selected list item
   value = cboWeekDay.Text
   ' Remove the selected list item
   cboWeekDay.RemoveItem(cboWeekDay.ListIndex)
   ' Add back the text with a "*" at the end
   cboWeekDay.AddItem value & "*"
   ' Select the last item in the list
   cboWeekDay.ListIndex = cboWeekDay.ListCount-1
End Sub

2. Testing the Program

Press F5 to save and start the program.