How To
68 MA XIMUMPC SEPTEMBER 2004
3 Create your app’s graphical framework
DEFINING TERMS
CONTROLS: Objects such as
TextBoxes and Buttons that com-
prise the user interface.TEXTBOX: A control that accepts
user text input.LABEL: A control that provides
descriptive or informative text to
a user.BUTTON: A control that can be
clicked in order to cause an action.VALIDATE: The examination of
data to insure it meets predefined
criteria.CREATING A FORM
Now it’s time to get down to the nitty
gritty of building your GUI. Select Form1
by single-clicking it. If you double-click
the form, you’ll enter code view mode,
and we’re not ready for that yet. If you
accidentally double-clicked, click the tab
named “Form1.vb [Design]” (found at
the top of the design area) and you’ll
return to design view.
In the bottom right corner of the IDE,
under the Solution Explorer you should
see the Properties window. (If you don’t
see the Properties window, press F4.)
The Properties window displays the
various properties of the object selected
in the Windows Form Designer. In the
Properties window, under the Object
Name combo box, are a couple buttons
that toggle the sorting of the proper-
ties. If Categorized isn’t selected, selectit now, and use the scroll bar to find the
Appearance group. Once you have locat-
ed the Appearance properties, click the
text box to the right of the Text property.
It should currently say “Form1” but let’s
change that to “MaxPC02.”
Once you’ve made the change, you
can either press Enter or move your
cursor out of the Text property textbox.
If you look over at your form, you’ll
see that the text at the top now reads
“MaxPC02” instead of Form1. You can
manipulate numerous other properties
in the Properties window.ADD BASIC ELEMENTS
TO YOUR FORM
OK, so now let’s use this form upon
which we’ve lavished so much attention.
Look to the far left side of the IDE and
you should see a tab labeled “Toolbox.”
If you don’t see it, use the View menu
or Ctrl+Alt+X to open it. Position your
cursor over the Toolbox tab and it
should slide into view. You’ll see a list of
controls commonly used on Windows
Forms. If you right-click the toolbox,
you can change the way the controls
are displayed as well as their sort order.
We prefer “List View” and “Sort Items
Alphabetically.” As long as the toolbox
has focus by placing your mouse cursor
over the toolbox tab, it will remain in
view. If it loses focus, it will slide out
of the way, giving you more room to
work. Let’s add a TextBox control to the
form so that we have a way to input
data to be encrypted. There are several
ways to add controls to forms, but let’s
drag and drop this control. Find the
TextBox control in the toolbox, left-click
it, drag it over to the top right quadrant
of the Form1 form, and then release
your mouse button. If you prematurely
released the mouse button, single-click
the textbox, which Visual Studio has
named TextBox1, and then drag it to the
proper location on the form.
TextBox1 is not exactly the type of
effective, descriptive name we want
for controls in our code. Let’s use the
Properties window to fix that. Find the
Name property in the Design group and
change it to “txtPlaintext.” We’re using
the prefix “txt” so we’ll know we’re
dealing with a TextBox object when we
look at raw code. Get rid of the default
text by erasing “TextBox1” from the Text
property. While you have txtPlaintext
selected, move your cursor over the
control’s edges. You can resize a control
by dragging its boundaries. To tell the
user the purpose of txtPlaintext, drag
a Label control from the toolbox to the
form and position it next to txtPlaintext.
Then change its Text property to
“Plaintext.” If we were going to
programmatically access this label we
would give it a better name, but we’re
not, so we won’t.MAKE A PLACE FOR YOUR DATA
Now we have a way to get
unencrypted data into the application,but how do we receive the encrypted
data? Let’s use a second textbox
to handle this issue. Add another
TextBox to Form1, and set its name to
“txtCiphertext.” Then delete the default
text from the Text property. Also, add
a label beside txtCiphertext and set its
Text property to “Ciphertext.” Because
we also need a way to input a key with
which to encrypt and decrypt data,
add a Label with a Text property of
“Key” and a TextBox named txtKey.
Remove txtKey’s default text so that
the user will see a blank TextBox
at runtime. For the cryptography
algorithm we used in our original app,
the maximum acceptable value for the
key is 94, which is a two-digit number.
By setting the MaxLength property to
2, we instruct our program to validate
the user’s input by restricting the
number of characters that he can type
into txtKey.
We need a way to start the process
in which data from txtPlaintext will
be encrypted and then placed in
txtCiphertext. An obvious candidate
for this position is a button, which can
be found in the toolbox and added to
the form in the same manner as the
other controls that we’ve worked with
so far. In fact, add three buttons and
position them along the bottom of the
form. Name the buttons “btnEncrypt,”
“btnDecrypt,” and “btnExit.” Set their
text properties to “Encrypt,” “Decrypt,”
and “Exit,” respectively. Refer to the
screenshot on the left if you have any
problems arranging the controls.
Now you have a nice Windows Form
with several controls. However, the
Form is just an empty shell, until we
write code that tells the app what to do
when each button is pressed.The control layout we used for this
project.