Home

Windows Controls

 

Fundamentals of Windows Controls

 

Introduction

To make your interaction with the computer more useful, the Microsoft Windows operating systems provide various types of objects also called windows. Some of these windows are standard and can be seen in many applications. Some other windows can appear more complex as the companies that develop them are creative. Regardless, there are basic functionalities that most windows share. Therefore, before starting to get creative with the computer, you should be familiar with what is already available and get used to as many features as possible with the computer.

The major categories of what you and I call windows come in four families: A dialog box, a Single Document Interface (SDI), a Multiple Document Interface (MDI), and the Windows Controls. To explore them, we will not necessarily proceed in that order. But we will eventually see all of them as we move along.

Practical Learning: Introducing Windows Controls

  1. To start an application, click Start -> (All) Programs -> Accessories -> WordPad
  2. On the main menu, click Format -> Tabs...

Control's Focus

Focus is a visual aspect that indicates that a control is ready to receive input from you. Various controls have different ways of expressing that they have received focus.

Button-based controls indicate that they have focus by drawing a dotted rectangle around their text. In the following picture, the button on the right side has focus:

Focus

A text-based control indicates that it has focus by displaying a blinking cursor. A list-based control indicates that it has focus when one of its items has a surrounding dotted rectangle. Here is an example:

Focus

To give focus to a control, you can click it. Alternatively, if the focus is already on one of the controls, to give focus to a particular control, you can press Tab continuously until the control shows that it has focus. On a browser, if you press Tab continuously, the focus would move from one link or control to another. This means that a link on a web page can receive focus as if it were a control.

Practical Learning: Showing Windows Controls Focus

  1. Press Tab and notice that the word OK is surrounded with a dotted line, indicating that its control has focus
     
  2. Press Tab again and notice the surrounding dotted line around Cancel
  3. Press Tab again and notice that the caret is in the box under Tab Stop Position
  4. Click Cancel

Dialog Boxes

 

The Modal Dialog Box

A Dialog Box is a square or rectangular window whose main role is to carry, hold, or host, other windows:

By itself, a dialog box means nothing. The other objects displayed on it define its role. Like a dialog box, the types of objects whose role is to host other objects are called containers. Therefore, the primary role of a dialog box is as a container. Displaying a dialog box depends on the instructions you are given.

A dialog box is made of two main sections. On top, it displays rectangular colored section called the title bar. The left side of the title bar displays a sentence as the title of the dialog box. This group of words is also called the caption. Each dialog box is called by its title. Therefore, if the title displays Employees Registration, then the dialog box is called The Employees Registration Dialog Box. We will use the same naming convention in our lessons.

On the right section of the title bar, a normal dialog box would display only the system Close button or . By convention, a dialog box cannot be minimized or maximized. Therefore, it doesn't have those system buttons.

Sometimes, a dialog box will have a button with a question mark. This is called the Help button. A dialog box equipped with this button indicates that you can get quick help on the items displayed on the dialog box. While the behaviors of the system buttons seen in previous lessons are defined and controlled by the operating system, the person who creates a dialog box and equip it with the Help button also defines what happens if you click that Help button.

The main section of a dialog box can be referred to as its body (programmers call it the Client Area). This is the area where the objects the dialog box is hosting are positioned. There is no predefined directive nor a restriction on what types of objects a dialog box can hold. It is left to the programmer to decide.

Practical Learning: Displaying a Dialog Box

  1. To display a dialog box, on the Taskbar, click Start -> Run… The Run dialog box comes up.
     
  2. To close it, click Cancel

Command-Based Controls

 

Command Buttons

A command button, commonly called a button, is a rectangular object that displays a word or a group of words, expecting you to make a decision. You make your decision by clicking the button. The button is usually placed on a dialog box but it can also be placed on another type of container.

As far as you (the user) are (is) concerned, the most important characteristic of a button is the word or sentence it displays. This is called the caption. The most basic common button you will encounter has a caption of OK. The buttons available on a dialog box, including their behaviors, once again, depend on the programmer.

In many circumstances, the buttons come as a group. For example, you may have a dialog box with OK and Cancel buttons. Many dialog boxes have an OK and a Cancel buttons. Sometimes, they will have more than one button.

Whenever a button has an OK and a Cancel buttons, clicking the OK button tells the computer that "I accept the changes I made" or "I agree with the changes made", or simply, "I agree". Clicking the Cancel button tells the computer that "Never mind", or "No, cancel your suggestion", or "Dismiss what I did". The documentation of the dialog box you are using should give you enough information about the buttons on the dialog box.

Practical Learning: Using Command Buttons

  1. To launch Solitaire, on the Taskbar, click Start -> (All) Programs -> Games -> Solitaire
  2. To display a dialog box, on the main menu, click Game -> Deck...
  3. Click the picture on the 1st row - 4th column
     
    Solitaire: Select Card Back
  4. Click Cancel and notice no change on the game.
  5. On the main menu again, click Game -> Deck...
  6. Click the picture on the 2nd row - 3rd column
     
  7. Click OK
  8. Notice that the back picture on the left top card has changed

Check Boxes

A check box is a control that makes a statement true or false. To perform this validation, this control displays a small square box that you can click:

The Options dialog box of Microsoft FrontPage

To start, the square box may be empty . If your click it, a check mark appears in the square box . If you click a check box that has a check mark in it, the check mark may be removed. When the square box is empty *, the statement is false. When the square box is filled with a check mark T, the statement is true.

To let you know what the check box control represents, the control is accompanied by some text on one of its sides. A check box is named after the text that accompanies it. For example, if the text closest to the check box is Show Status Bar, then the check box is called The Show Status Bar Check Box.

A check box can also be configured to show an intermediary state, in which case it would appear as not completely empty and now completely checked. Here is an example:

Indeterminate check box

A mentioned in Lesson 4, a menu can display check boxes.

Practical Learning: Using Check Boxes

  1. To start an application, click Start -> (All) Programs -> Games -> FreeCell
  2. Press F2 to start a new game
  3. Double-click a card to move it to the first empty box in the top-left section
  4. On the main menu, click Game -> Options...
  5. Click the Double Click Moves Card To Free Cell check box to remove the check mark
     
  6. Click OK
  7. Double-click a card again and notice that, based on the check box you clicked, the card doesn't move up
  8. On the main menu, click Game -> Options...
  9. Click the Double Click Moves Card To Free Cell check box to put a check mark
     
  10. Click OK

Radio Buttons

A radio button, sometimes called an option button, is a circular control that comes in a group with other controls of the same type. Each radio button is made of a small empty circle O. Here is an example:

Radio Buttons

From the group, when you click one of the items, the radio button that was clicked becomes filled with a big dot 8. When one of the radio buttons in the group is selected and displays its dot, the others display empty circles.

To guide you as to what the radio buttons mean, each is accompanied by some text. A radio button is named after the text next to it. For example, if the text closest to a radio box is Medium, then the radio button is called The Medium Radio Button. Although the text is usually positioned to the right side of the radio button, in some cases, it is positioned on the left or the top section of the button. This depends on the person (the programmer) who created the application.

A mentioned in Lesson 4, a menu can display radio buttons.

Text-Based Controls

 

Text Boxes

A text box is a window that is used to display text or to receive text from you. The type of text it displays or the type of text you are asked to provide depends on the application or the situation.

Some text boxes are used only to display text. Either you cannot change the text or only an intermediary action can make it possible to change the text. Some other text boxes would require you to enter text. If you don't, something bad might happen. Some text boxes would display text already, giving you the chance to change the text or to accept the one suggested to you.

In all or most circumstances, you will be informed about the text box and what you are supposed to do with it.

Practical Learning: Using a Text Box Control

  1. On the Taskbar, click Start -> (All) Programs-> Games -> FreeCell
  2. On the main menu of FreeCell, click Game -> Select Game
  3. In the text box, type Jules and click OK
  4. Notice that the text box refuses the entry and displays 0
  5. Type 8522 and press Enter
     
  6. To close FreeCell, on the main menu, click Game -> Exit
  7. When asked whether you want to resign this game, click Yes

Rich Text

A text box is meant to display simple text with all characters using the same color and a relatively same size. A piece of text qualifies as rich if it can display some of its sections in different colors and the characters appear in significant different sizes.

The Scroll Bars

A scroll bar is an object that is used to navigate from one end of a window content to another. There are two types of scroll bars: vertical and horizontal.

A vertical scroll bar allows you to navigate up and down to display a hidden section of a document. A horizontal scroll bar allows you to navigate left and right on the document.

To scroll a bar, click the arrow of the section you want to display.

Practical Learning: Using a Scroll Bar

  1. On the main menu of WordPad, click Insert -> Date and Time...
  2. Notice the scroll bor in the box under Available Formats
  3. Click the date that includes the weekday name, the month name, the day, and the 
     
  4. Click OK and press Enter

List-Based Controls

 

List Boxes

A list box is a rectangular control that displays a list of items. Here is an example of a list under Available Formats:

When using a list box, if you see the item that is convenient to the issue at hand, then you can click it. Once an item is clicked, it becomes highlighted, indicating that the item has been selected. If you want to change your choice, you can click another item. Clicking another item deselects the previous item and selects the new one.

Depending on how a list box was configured, you may be able to select more than one item from the list. This is because, as set by the creator of the control, some list boxes allow only one selection while others could let you select as many objects as you want.

To select one item from the list, click it.

To select more than one item, click one of those you need. Press and hold Ctrl. Then click each of the desired items from the list. While making these selections, if you click an item by mistake, to deselect it, click it again and the item would appear "normal". After making the desired selection, release Ctrl. The selected items would be highlighted.

To select items in a range, for example if a list has ten items and you want to select from the 3rd to the 7th item, click either the top item of your desired range, or click the last item of the range you want to select. Press and hold Shift. Then click the item at the other end of the range and release Shift.

Practical Learning: Using a List Box Control

  1. On the main menu of WordPad, click Insert -> Object...
  2. Notice the list box under Object Type
  3. As Create New and Bitmap Image are selected, click OK
     
  4. In the bottom side of the window, click red area
  5. In the left section of the window, click the Pencil button Line
  6. Under the section with the buttons, click the third dot
  7. In the surrounded box in the document, draw a right pointing arrow
     
  8. Click an unoccupied area in the document to dismiss the surrounding box

Combo Boxes

A combo box is a combination of a text box and a list box but is made of three sections:

Based in its variations, there are three types of combo boxes:

The Drop Down Combo Box

One of the types of combo boxes is referred to as Drop Down. This control is made of a text box on the left side and a down-pointing arrowed button on the right side. Depending on how the control was created, when it comes up, it may not display anything:

A Drop Down Combo Box

To use the combo box, you can click its down pointing arrow. If you click that arrow, a list would appear (or expand):

If you see an item that you want or an item that you are asked to select, you can click it. After an item has been clicked, two things happen: 1. the list retracts (or collapses) like a plastic; 2. the item that was clicked fills the text part and becomes the new selection:

On the other hand, after displaying the list, if you don't want to select anything from the list, you can click the arrow again or click anywhere away from the list. The list would collapse and the text part would get back to the previous state.

One of the major characteristics of a drop down combo box, as compared to the type we will see next, is that, if you know for sure that the item you are looking for is in the list, you can first delete the text in the text part of the control, then start typing. For example, if the list contains a name such as Gertrude, you can delete the text part, and start typing g. If there is only one item that starts with g, you can then click the arrow twice and the item would be selected. Imagine the list contains such items as Jules and Julienne, if you type the first common letters of these item and double-click the arrow, the first item that has these letters would be selected. This means that, if you want to other item to be selected, you should type the letters beyond the common ones. In the case of Jules and Julienne, if you want Julienne to be selected from an incomplete string, you can type juli and click the arrowed button twice.

So far, we have mentioned that, to display the list of a combo box, you could click its arrowed button. You can also display the list using the keyboard. To start, you must give focus to the control. When a drop down combo box has focus, to display its list, press Alt + down arrow key. To select an item from the list, you can press the down or up arrow key to move down or up. Once the desired item has been selected, you can press Enter. If you don't want to select an item while the list is displaying, press Esc.

Practical Learning: Using the Drop Down List Combo Box

  1. To use a combo box, click the arrow of the button on the right side of Arial and notice the list that appears
  2. Scroll down in the list and click Garamond

The Drop Down List Combo Box

Another type of combo box is referred to as Drop Down List. This type also is made of a text box on the left and a down-pointing arrowed button on the right side. It also may appear empty when it comes up, depending on how it was created. The biggest difference between a drop down combo box and a drop down list combo box is that, with the drop down list, you can only select from the list: you cannot type anything in the text box part of the control.

Once again, to use the control, you can click its arrow, which causes the list to display. You can also display the list using the keyboard by pressing Alt + down arrow key after giving focus to the control. Once the list displays, if you see the desired item, you can click it, which would cause the list to collapse and use the clicked item as the new selection. You can also press the up or down arrow key to select an item and press Enter when the desired item is highlighted. If you don't want to select anything from the list, you can click the arrow again, click anywhere away from the list, or press Esc.

The Simple Combo Box

The last type of combo box is called a simple combo box. This type of combo box is also made of two parts but they are distinct. The top section of the combo box displays a text box. Immediately under the text box, there is a list box:

The Simple Combo Box

Notice that the control doesn't display an arrow since the list is available already. To use this combo box, you can examine the list part. If you see the desired item, you can click it. When an item is clicked, it becomes the string of the top text part. If you click a different item, it would become the new selection, replacing the one that was in the text part. Although this appears as a list box, you cannot select more than one item.

Practical Learning: Using a Drop Down Combo Box

  1. On the main menu of WordPad, click Format -> Font...
  2. Notice that the Font, the Font Style, and the Size combo boxes are of type Simple
     
  3. Click the text box under Font, press Home, then press and hold down Delete. After deleting the whole text, release Delete
  4. Type Tim
  5. When Times New Roman appear, press the down arrow key to select
  6. Click OK

Toolbars

A toolbar provides a quick access to the most frequently used actions performed using the menu. A toolbar offers these items as buttons. In WordPad, the long object under the main menu is atoolbar:

Many applications offer more than one toolbar. For example, WordPad has two: one on top of the other. To distinguish them, each toolbar has a name. The documentation of the application will guide you as to the name(s) of the toolbar(s). In WordPad, the top toolbar is called the Standard toolbar and the second one is called the Formatting toolbar.

A toolbar is typically equipped with buttons. To use a button on a toolbar, you can click it. In some cases, you will not be familiar with the roles of the buttons on a toolbar. In most cases, to know what a button is used for, you can position the mouse on it. A tool tip would appear. Here is an example:

Besides buttons a toolbar can also be equipped with other types of controls, such as combo boxes, as can be seen on the Formatting toolbar of WordPad.

Practical Learning: Using Toolbars

  1. On the main menu of WordPad, click View -> Toolbar
  2. On the main menu again, click View -> Toolbar

Status Bars

A status bar helps as a guide to assist you with an application. In a typical application, a status bar displays small sentences that further explain the role of a particular button or an action that you are about to perform. The messages that appear on the status bar vary from one application to another and depend on the position of the mouse on an application.

Practical Learning: Using a Status Bar

  1. On the main menu of WordPad, click View -> Status Bar
  2. Again, on the main menu, click View -> Status Bar
 

Previous Copyright © 2007, Yevol Next