2/5/2013

[2] Crear una calculadora simple en

Microsoft Visual Studio 2010 (El Cdigo)
Parte I

Continuando con el tutorial sobre como crear una calculadora en Microsoft
Visual Studio 2010, les traigo la segunda parte y la mas importante y no
complicada, sino que hay que concentrarse y nunca perder la atencin.

Si no has visto la primera parte de este tutorial, puedes verla haciendo clic
aqu.

En esta segunda parte les explicar como darle dinamismos a esos
controles estticos que puedes ver en la imagen, a realizar las operaciones de
suma, resta, multiplicacin y divisin raz cuadrada, porcentaje, entre otros.

2) El Cdigo

Los Nmeros: hablamos de aquellos botones representados por
los nmeros de 0 al 9 Qu necesitamos hacer? Necesitamos que cada
vez que se presion el botn 0, 1, 2, 3, 4, 5, 6, 7, 8 y 9 aparezca escrito
en el cuadro de texto principal o caja de operaciones. No es tan dificil si
lo miramos desde el punto de vista que todos los botones requieren el
mismo cdigo, cambiando solamente, una parte, que sera lo mismo que
aparecer escrito. Veamos el cdigo
Me.TextBox2.Text = TextBox2.Text & "0"

Entendamos el cdigo mostrado, correspondiente a la tecla o botn "0", en
color Azul vemos el nombre de la cuadro de texto principal, o la caja de
operaciones Porque est en color azul? Est de ese color por que el nombre
del control puede variar segn tu versin de Visual o el nombre que le hayas
puesto al momento de insertarlo, en la calculadora que yo cre se llama
TextBox2 y es el nombre predeterminado que Visual Studio da a este tipo de
controles. No sabes el nombre de tu caja de operaciones? Fjate en la
siguiente figura.

Figura 1
Agrandar Imagen
En el punto 1 de la figura 1 te muestra el nombre de tu control, como ves,
coincide con el cdigo que anteriormente te he mostrado, en el punto 2 de la
figura 1 podrs personalizar este nombre, colocar el que tu quieras, pero
recuerda, siempre que lo cambies, debes sustituirlo en el cdigo tambin pues
si no lo haces, el cdigo ser inservible. Veamos de nuevo el cdigo.
Me.TextBox2.Text = TextBox2.Text & "0"

Como ya he dicho antes, el 0 en color rojo est en ese lugar puesto que al
presionar la tecla 0, obviamente en la caja de operaciones o Textbox2 debe
aparecer un cero. Que hacer con los otros numeros? Copia y pega ese
mismo cdigo en todos los nmeros haciendo doble clic en cada uno de ellos,
ejemplo, si haces doble clic el numero 1, sustituye el 0 entre comillas por
un 1, y haras lo mismo con los demas hasta llegar al 9, como se muestra en la
siguiente figura

Figura 2
Agrandar Imagen

Presiona la tecla F5 y en la vista previa a la aplicacin, prueba que al
presionar los botones de los nmeros aparezcan en la caja de operaciones,
como en la siguiente figura.

Figura 3
El punto: el cdigo es el mismo que el anterior pero aadindole otra
linea que har una accin bien importante dentro de nuestra
calculadora.
Me.TextBox2.Text = TextBox2.Text & "."
Button3.Enabled = False

Como saben, el texto en Azul es lo que puede variar, el nombre. Recuerden
que la caja de operaciones en la calculadora que yo cre es TextBox2 pero
ustedes pueden cambiarlo por el nombre que les asigne el programa. Ahora,
explico la lineaButton3.Enabled = False

Como pueden observar, la palabra Button3 tambin est remarcada en azul,
pues puede variar porque es el nombre del botn que contiene el punto, para
ver o cambiar el nombre que les asigno Visual deben hacer el mismo
procedimiento de la Figura 1. Pero, Que accin hace esta linea? Como todos
sabemos, en una calculadora el punto puede escribirse una sola vez ya que si
se escribe mas de una vez producira un SYNTAX ERROR o Error de
sintaxis, esta linea hace una accin muy simple pero bien importante, ya que
al presionar el botn del punto se desactivar el botn de manera que ya no
podremos presionarlo sino hasta cuando nos toque escribir la otra cantidad.

Declaracin de variables: hemos llegado al punto exacto de la
interaccin. Tenemos una calculadora que nos permite
colocar nmeros y el punto hasta ahora, pero aun no podemos realizar
las operaciones bsicas. Antes de entrar al punto de operaciones bsicas
por suma, resta, multiplicacin o divisin debemos declarar nuestras
variables, que ser el espacio en la memoria que almacenar
nuestros nmeros o datos para que el programa pueda recordarlos al
momento de darnos un resultado. Si no se declararn las variables, este
tutorial no tendra sentido, pues es la parte mas esencial para iniciar
todo el proceso del resultado final.
Para comenzar, busca la siguiente linea de cdigo
.
Public Class Form1

Justo debajo, pega el siguiente.


Dim numerouno As Double
Dim numerodos As Double
Dim total As Double
Dim operacion As Double

El cdigo en azul est precisamente de este color por ser el nombre de las
variables, nombre que tu puedes cambiar por cualquier otro, pero
siempre recordndolo ya que influye en la interpretacin de otros cdigos que
te mostrar mas adelante.

A continuacin, te explico que dato guardar cada una de estas cuatros
variables presentes en el cdigo anterior.

- numerouno: guardar el primer dato o nmero introducido.
- numerodos: guardar el segundo dato o nmero introducido.
- total: como la palabra lo dice, guardar el resultado obtenido.
- operacion: nos permitir saber que operacin bsica se est realizando
entre numerouno y numerodos.

Las variables son declaradas As Double o Como Decimal en espaol ya que
precisamente, pueden ser cantidades decimales, y tambin, cantidades enteras,
pero si se declarar As Intenger o Como Entero, el programa reconocera solo
lo que esta antes de la coma e ignorara lo que venga despus totalmente.

Operaciones bsicas: la suma, la resta, la multiplicacin y la divisin
son dichas operaciones bsicas que realizaremos con un cdigo muy
simple y parecido en todos los casos. Echemos un vistazo al siguiente
cdigo.

Button3.Enabled = True
Button2.Enabled = True
TextBox1.Text = "+"
operacion = 2
numerouno = Val(TextBox2.Text)
TextBox2.Clear()

Entendamos el cdigo, en azul son los nombres de los controles y de nuestras
variables, en rojo, opciones a cambiar. Recuerdas el Button3 o el boton del
punto, recordemos que este se des-habilitaba al hacer clic sobre el mismo,
pero Por qu la linea button3.Enabled = True est presente dentro del
cdigo que corresponde al signo "+"? Hay una palabra clave dentro de este
linea, la cual es "True" o verdadero, en el cdigo del botn del punto en lugar
de "True", estaba "False" o falso, pensemos que cada vez que presionemos el
signo "+" es porque deseamos escribir otra cantidad, y est
cantidad tambin puede ser decimal, lo mismo ocurre en el caso de Button2 o
en la calculadora de yo cre, el smbolo demas o menos (+-) ubicado al lado
derecho del punto. Al presionar este botn al igual que el botn del punto des-
habilitar y al dar clic en un smbolo de operaciones bsicas se habilitara de
nuevo ya que es momento de escribir una nueva cantidad. TextBox1 es el
cuadrito ubicado encima de la tecla MC. Este mostrar
el smbolo segn la operacin que se este realizando, por eso, si
el cdigo anterior es de la suma, en el cuadro se mostrara el smbolo "+".

A continuacin, una parte bastante esencial y que hay que tener muy en
cuenta, recuerdan que la variable operacion es la nos permitir saber
que operacin bsica se est realizando entre numerouno y numerodos. Por
esto, a dicha variable se le asignara un valor distinto por cada operacin en mi
caso use el valor 2 para identificarla, pero podrias usar el 3, 4, 5 o cualquier
numero que se te venga a la mente, incluso una palabra encerrada entre
comillas.

Al hacer clic en el boton de suma, necesitamos que la
variable numerouno capture el numero que se encuentra en ese momento en
la caja de operaciones, que lo guarde para despues sumarlo al siguiente
numero que tecleemos. Por este motivo, numerouno sera igual al texto
convertido en valor que se encuentra en la caja de operaciones.

Como necesitamos que guarde ese valor, pero que al mismo tiempo lo borre,
ya que necesitaremos escribir otro numero, es neceserario el
codigo TextBox2.Clear() presente en el cdigo anterior.

A continuacin, los cdigos por operacin bsica

- Resta o Sustraccin


Button3.Enabled = True
Button2.Enabled = True
TextBox1.Text = "-"
operacion = 3
numerouno = Val(TextBox2.Text)
TextBox2.Clear()

- Multiplicacin


Button3.Enabled = True
Button2.Enabled = True
TextBox1.Text = "*"
operacion = 4
numerouno = Val(TextBox2.Text)
TextBox2.Clear()

- Divisin


Button3.Enabled = True
Button2.Enabled = True
TextBox1.Text = "/"
operacion = 5
numerouno = Val(TextBox2.Text)
TextBox2.Clear()

Nota que todos los cdigos serian idnticos sino fuera por dos puntos bien
importantes. En la tercera linea es necesario cambiar el smbolo dependiendo
de la accin que estemos realizando, y que la variable operacin necesita tener
un valor nico por cada operacin de manera que pueda identificarse en el
siguiente punto que trataremos.

Boton Igual (=): este ser la puerta que nos mostrar el resultado, y el
que contendr el identificador de la variable operacin. Veamos su
cdigo
numerodos = Val(TextBox2.Text)
If operacion = 2 Then
total = numerouno + numerodos
TextBox2.Text = total
ElseIf operacion = 3 Then
total = numerouno - numerodos
TextBox2.Text = total
ElseIf operacion = 4 Then
total = numerouno * numerodos
TextBox2.Text = total
ElseIf operacion = 5 Then
total = numerouno / numerodos
TextBox2.Text = total
End If

Recordemos que la variable operacin esta representada por valores diferentes
que corresponden con cada operacin bsica a realizar.

- Suma: 2
- Resta: 3
- Multiplicacin: 4
- Divisin: 5

En la primera linea del codigo se puede ver la variable numerodos; ya que al
dar clic en el boton igual lo primero que necesitamos el capturar el numero
que sumar, restar, multiplicar o dividir al numerouno.

En la siguiente linea necesitamos reconocer la operacin, por eso, en el
simbolo igual utilizamos el comun If-Else el cual define dentro de nuestra
calculadora la identificacin de cada operacin, pero Cmo funciona? Si la
variable operaciones igual al valor 2 el total o resultado ser igual
al numerouno mas el numerodos y la caja de operaciones ser la encargada
de mostrar el total en pantalla, pero si la variable operacion fuera igual a 3
el total o resultado ser igual al numerouno menos el numerodos y la caja
de operaciones ser la encargada de mostrar el total en pantalla, y asi
sucesivamente hasta llegar a la division.

Pulsa la tecla F5 y ya las operaciones bsicas de la calculadora deben estar
funcionando.

La Raz Cuadrada (sqrt): Para sacar el sqrt (Square Root) o Raz
cuadrada en espaol, hacemos doble clic en dicho botn y entre las
lineas del cdigo donde nos redireccion, pegamos el siguiente cdigo.

operacion = 6
If operacion = 6 Then
numerouno = Val(TextBox2.Text)
TextBox2.Text = System.Math.Sqrt(numerouno)
End If

La raz cuadrada al igual que las operaciones bsicas, es una operacin, valga
la redundancia, por esta razn necesitamos identificarla, el valor que yo le he
dado ha sido 6 como ves en el cdigo de arriba, y debajo de la variable he
puesto el identificador que reconocer si la operacin es igual a 6 entonces el
la variable numerouno capturar el valor que se encuentra en ese momento en
la caja de operaciones o TextBox2 en mi caso, y en la misma caja mostrar el
resultado de la raiz cuadrada de el numero capturado.

El porcentaje: Hay varias maneras de calcular el porcentaje de un
nmero en una calculadora, pero esta vez lo har de la forma sencilla
que puedo mostrarles. Antes de comenzar, en el cuadro de herramientas
o ToolBox buscamos la herramienta Label y la arrastramos hasta
cualquier espacio libre de la calculadora de esta manera.

Figura 4
Ahora, haz clic en cualquier espacio libre del formulario, donde no haya
puesto ningun boton, ni ninguna caja de texto, ni ninguna label, ni ningun
menu, solo haz doble clic en cualquier espacio de la ventana gris. Entre las
lineas que se encuentra el cursor de escritura, pega el siguiente cdigo.

Label1.Visible = False

Label1 ser el nombre del nuevo control que hemos insertado, pero Qu
hace precisamente este cdigo? Como no queremos que ese label se vea al
momento de arrancar el programa, ya que solo ser un "puente" para obtener
nuestro resultado de porcentaje, le quitamos visibilidad con el
atributo Visible en False.

A continuacin, nos vamos al diseo, y hacemos doble clic en el boton de
porcentaje, entre las lineas que se encuentra el cursor de escritura, pega el
siguiente cdigo.

numerodos = Val(TextBox2.Text)
If operacion = 4 Then
total = numerouno * numerodos
Label1.Text = total
End If
TextBox2.Text = Val(Label1.Text) / 100

Para sacar el porcentaje de descuento, necesitamos de una operacin bsica; la
multiplicacin. En este caso, el porcentaje ser quien haga la funcin que hace
el botn igual al momento que se hace una multiplicacin. Para empezar, con
el botn porcentaje debemos capturar el numero en la caja de operaciones con
la variable numerodos ya que el primer numero ya lo habramos capturado al
presionar el smbolo de multiplicacin primero. Entonces, ya que hemos
capturado elnumerodos, reconocemos si antes se hizo la operacion 4 que
corresponde a la multiplicacin, si fue asi entonces enLabel1 se mostrar el
producto de numerouno por numerodos, mientras que al presionar
el botn de porcentaje se realizar la operacin de dividir el producto
en label1 entre 100, es simple, se hace una regla de tres para obtener nuestro
resultado de porcentaje.

El botn mas o menos (+-): este botn nos permitir pasar una
cantidad escrita de mas a menos, as como poner en negativo cualquier
cantidad prxima a escribir. La hace negativa ya que el positivo esta
predeterminado. Haz doble clic sobre el, y entre las lineas donde se
encuentra el cursor de escritura pega el siguiente cdigo.

TextBox2.Text = "-" & TextBox2.Text
Button2.Enabled = False

En la primera linea del cdigo lo que hacemos en anteponer un signo menos a
lo que ya esta escrito en la caja de operaciones, o lo que est por escribirse, la
segunda linea, simplemente des-habilita el botn una vez se haya presionado,
y no sera habilitado de nuevo hasta que se presione un botn de operaciones o
el botn C que veremos a continuacin.

El botn C: Clean o Limpiar sera la accion que realizara este boton al
dejar en blanco la caja de operaciones. Haz doble clic en el boton C y
entre las lineas de codigo donde se encuentra el cursor de escritura pega
el siguiente cdigo.
Button3.Enabled = True
Button2.Enabled = True
TextBox2.Clear()

En la primera linea, habilitamos el botn del punto, en la
segunda, habilitamos el botn de mas o menos y en la tercera linea,
simplemente limpiamos la caja de operaciones.

Esto ha sido todo por este tutorial, los dems botones y el men son cdigos
mas avanzados que estar explicando prximamente.