Tip 6: What’s in a window?

In the olden days, we used to sit at dumb terminals and enter data in the single supported format: 80 characters per line, 24 lines per screen, available in either beautiful green or brilliant amber with a nice soft black background.  We could only run one program at a time.  Life was dull.

When windowed operating systems like Windows and Apple’s original windowed OS, we could finally run more than one program at the same time.  This was truly a world changing concept, as we were suddenly able to do more work on a single computer screen.  And we could change the colors too.

Things have changed quite a bit since the early days of windowed operating systems.  But the basic nature of a “window” hasn’t changed much at all.  The look and design may be different, but the manner in which we interact with a window has not really changed much.

Parts of a window

At its most basic definition, a window is a single frame with a solid border around it.  A Windows application can have one or more windows depending on what the needs are.  Most applications are comprised of a single window, but some have other windows such as floating toolbars.  Depending on which version of Windows you are running, the details of a basic window may look different, but they work the same. To illustrate, this is what it looks like when the Notepad program (used for editing simple text files) is running on Windows XP: The following screen shot is from Vista (Windows 7 looks similar):

Title Bar

The “Title Bar” is the uppermost part of the window.  It includes everything from the icon on the left to the red button on the right. 

You can move windows around on the screen by clicking your mouse on the title bar, holding the mouse button down, dragging the window to a new location and letting go of the mouse. 

In the next screen shot, note that in the top left corner I’ve circled two elements.  The leftmost little picture is what we call the “application icon” (it looks like a little pad of paper) and next to it the “window title”.  The application icon is custom designed for each application and has the purpose of giving a visual reference to recognize the program and differentiate it from others.  The window title generally contains the name of the file (“Untitled” here because the file has not been saved yet) followed by a dash and the name of the application (“Notepad”).

In the top right corner are the Window sizing buttons.  The most important button here is the big red “X” Close button.  Clicking on this button will close the window (in some cases you may be prompted whether this is what you truly wanted to do).  The other two buttons (one that looks like an underscore, “_”, and one that looks like a box) are used for minimizing/hiding and maximizing/restoring the window.  We’ll discuss this more in the next tip.

Menu Bar

The Menu Bar is the area directly below the title bar.  In the Notepad window example above, the menu bar contains five menu items: File, Edit, Format, View and Help.  Many of these are common to all well-designed Windows application, and programmers are encouraged to conform to this standard to the letter.  As a result, you can always find the Copy command (for example) under the Edit menu.  To activate a menu, click on the word, then click on the option:

According to our Windows design standards, you’ll always find these commands under the Edit menu.  Notice on the right side of the menu there are keystroke shortcuts listed.  These also tend to be the same from one Windows application to the next.  So in Microsoft Word, Internet Explorer, and even Apple Safari for Windows, Ctrl + F should display the find dialog (and indeed, it does).

Note that many of the options in the previous screen shot are grayed out.  This means they are not currently available for one reason or another.  For example, you can only use Cut, Copy or Delete when text is selected, and Paste is only available when there is data stored in the Clipboard.  More on the incredibly useful Clipboard in a future tip.

We’ll discuss the menu bar more in detail once we’ve got the basics down.  For now, feel free to explore the menus of your favorite programs and get used to where the commands are.

A final caveat about the menu bar: if you are a Microsoft Office 2007 user, you will no doubt have noticed that the menu bar has gone through a significant redesign.  Office 2007 programs including Word, Excel and Outlook are utilizing the new “Ribbon Bar”.

The commands available in a ribbon menu change depending on the context of what you are doing, providing the most needed options as needed.  This shift toward the ribbon will likely be gaining more of a foothold as Windows 7 comes along, so if you are a current user of Office 2007, get ready for more menu ribbon goodness down the road.

Status Bar

A window can have a “Status Bar” along the bottom.  For example, Internet Explorer and Mozilla Firefox feature a status bar that provides current information.  Programs often provide option settings to hide the Status Bar if the information is not relevant to you.

Client Area

The “Client Area” is the rest of the window including scrollbars.  This is the part where the program’s information is displayed.  In a word processor, the document is displayed and edited within the client area.  In a web browser, the web page is displayed within the client area.

We’ve only scratched the surface of the parts of a window.  Next time we’ll take a look at how to change the size and hide them.  See you then…