Universidad Tecnolgica Nacional

Facultad Regional Crdoba

Departamento de Ingeniera en Sistemas de Informacin
Ctedra de Programacin de Aplicaciones Visuales I

TP 1 - La Calculadora
Objetivo:

Producir la sensibilizacin del alumno respecto del entorno de desarrollo de la

herramienta Visual Studio .NET 2008 de Microsoft

Utilizacin y manipulacin de objetos simples (formulario, etiquetas, caja de texto,

botones),. Comprensin de los conceptos: propiedad, evento y mtodo.

Lograr el primer desarrollo de una interfaz grfica con el IDE (entorno de desarrollo
integrado).

Utilizacin y comprensin de funciones sencillas (de la herramienta) .

Comentario:

Con conocimientos mnimos lograremos el desarrollo de un producto de permanente utilizacin,

una calculadora, la mayora de las aplicaciones traen incorporado una calculadora como opcin de
clculos sencillos. En este primer trabajo prctico intentaremos el desarrollo de sta y ser una
forma innovadora de conectarnos con esta herramienta de diseo Visual Studio 2008 .NET

Conceptos:

Propiedad: Permite establecer una caracterstica particular del objeto que estamos manipulando,
por ejemplo su ancho (width), su alto (height), su color de fondo (backcolor), su
contenido (text), etc.
Evento: Contenedor que le permite escribir cdigo (diseado por Ud.), que se ejecutar ante
circunstancias predefinidas por la herramienta, por ejemplo: el evento clic, se activa
cuando ud. oprima el botn principal de Mouse sobre un objeto, este evento se
encuentra entre los posibles, del objeto sobre el cual hizo clic.
Mtodo: Comprndase como mtodo a un conjunto de lneas de cdigo tambin denominada
subrutina, que se disparar como consecuencia de una condicin controlada por
programacin dentro de un evento.

Pgina 2
 Universidad Tecnolgica Nacional
Facultad Regional Crdoba
Departamento de Ingeniera en Sistemas de Informacin
Ctedra de Programacin de Aplicaciones Visuales I

El Diseo La calculadora ser de su libre creacin,

contemplando que debe tener como mnimo los mismos
botones que la de la imagen de esta pgina.

A continuacin describiremos los objetos que componen la

calculadora, sus dimensiones y caractersticas principales.

Tambin le sugiero que empiece a disear su calculadora en

funcin de la informacin que vaya obteniendo.

El objeto contenedor de la calculadora es un formulario, los

cuales siempre tienen un nombre propio al igual que
cualquier otro objeto dentro de ste, y como caracterstica
se le antepone una sigla que lo individualiza como tal, en
este caso es frm, el formulario se llama FrmCalculadora.

El teclado numrico, de operaciones, y de memoria son

botones de comando, tambin tienen un nombre y se les
antepone la sigla cmd.

El display de la calculadora (donde aparecen los nmeros que se van digitando) est compuesto
por una etiqueta que ser la que contenga los valores numricos. La etiqueta lleva como prefijo
lbl.

Pgina 3
 Universidad Tecnolgica Nacional
Facultad Regional Crdoba
Departamento de Ingeniera en Sistemas de Informacin
Ctedra de Programacin de Aplicaciones Visuales I

Diseo Paso a Paso de la interface grafica (lo que se ve)

1. Cree un proyecto llamado calculadora.

a. En la barra del men de la herramienta, seleccione la opcin archivo, luego la
opcin nuevo proyecto.
b. Le aparecer una ventana con distintas opciones, seleccione Aplicacin Windows

c. Escriba el nombre del proyecto la_calculadora

2. A la derecha del monitor Ud. Ver 2 o 3 ventanas la primera es el explorador de

soluciones, la siguiente por debajo es el browser de propiedades del objeto
seleccionado. El explorador de soluciones, es donde se almacenarn todos los
componentes del proyecto.
3. A la izquierda ver la solapa de cuadro de herramienta, esta contiene los objetos que
puede utilizar para programar.
4. Ya tiene un formulario en pantalla, haga lo siguiente:
a. Asgnele el nombre. Seleccione form1.vb y en nombre (name) pngale
frm_Calculadora. Cuando realice el cambio de cada una de estas propiedades,

Pgina 4
 Universidad Tecnolgica Nacional
Facultad Regional Crdoba
Departamento de Ingeniera en Sistemas de Informacin
Ctedra de Programacin de Aplicaciones Visuales I

fjese en el ltimo cuadro de la ventana de propiedades (el de ms abajo), que

explicacin le suministra la herramienta sobre la propiedad que est utilizando.
b. Dimensiones (Size)
i. alto (height) 354
ii. ancho (width) 250
c. MaximizeBox : false
d. MinimizeBox : false
e. ShowIcon : false
f. StartPosition : WindowsDefaultLocation
g. AutoSizeMode : GrowAndShrink
h. TopMost : true

5. Coloque dentro del formulario 17 botones de a uno

por vez, los objetos estn en el cuadro de
herramientas (ver imagen), por lo general a la
izquierda de la IDE, busque el objeto que se presenta
como Button (dentro de la clasificacin controles
comunes), Asgnele las siguientes caractersticas:
i. Ancho : 50 (width)
ii. alto : 45 (height)
iii. contenido: nmero o signo
1. text = 1 a 0, o (+), o (-) segn
corresponda.
iv. Tipo de letra font.
v. color de fondo del botn que corresponda
backcolor
vi. distribuya apropiadamente los botones.
vii. los botones deben nombrarse como se especifica a continuacin cmd_0 al
cmd_9 para los nmeros, cmd_punto, cmd_dividir, cmd_multiplicar,
cmd_mas, cmd_menos, cmd_borrar.

6. Coloque 3 botones en el formulario con los que se realizarn las funciones de memoria.
a. ancho: 50
b. alto: 24
c. contenido: vea el diseo.
d. color de fondo: verde claro.
e. nmbrelos como ud. desee teniendo en cuenta el prefijo.

7. Coloque una etiqueta dentro del recuadro ubicada a la derecha del mismo, esta ser el
componente que muestre la informacin del display de la calculadora:
a. ancho:189
b. alto:540
c. BorderStyle: FixedSingle
d. BackColor: LightGray
e. caption: nada

Pgina 5
 Universidad Tecnolgica Nacional
Facultad Regional Crdoba
Departamento de Ingeniera en Sistemas de Informacin
Ctedra de Programacin de Aplicaciones Visuales I

f. nombre: LblDisplay
g. foreColor: verde (color de frente)
h. AutoSize: false
i. TextAling: MiddleRight
j.
La programacin de cada uno de los eventos del formulario:

Programacin del teclado numrico:

Ahora nos preocuparemos de que el display funciones

correctamente. Se debera poder ver la informacin como
muestra la imagen. Los nmeros se ajustan a la derecha de
la pantalla del display y a medida que voy introduciendo
ms nmeros estos se ubican en la ltima posicin en el
display, produciendo un corrimiento de los dems nmeros
un lugar a la izquierda.

Dentro del evento clic de cada botn numrico y del punto

decimal debe escribir la siguiente programacin:

En caso de oprimir otro botn cambiara el

valor asociado a cmd_

Me.lblDisplay.Text = Me.lblDisplay.Text + Me.cmd_0.Text

Le asignamos a la propiedad text del Para este caso, se est oprimiendo el botn
display (etiqueta) una concatenacin. Con el del nmero cero (0)
valor de la propiedad text del display, ms el
valor del text del botn que estamos
oprimiendo

Lo que debe hacer ahora es cargar en los eventos clic de cada botn numrico, la lnea de
programacin que corresponda. En funcin de la ya explicada.

Pgina 6
 Universidad Tecnolgica Nacional
Facultad Regional Crdoba
Departamento de Ingeniera en Sistemas de Informacin
Ctedra de Programacin de Aplicaciones Visuales I

Cmo llegar el evento clic de cada botn?

Realice doble clic sobre el botn que desea trabajar, se abrir la interface de edicin de cdigo, en
cada caso en el evento mas utilizado en cada objeto, para los botones ser el evento clic.

Si desear trabajar con otro evento de un objeto, realice la misma accin, luego tendra que
seleccionar dentro del editor de cdigo el evento que desee, esto se hace seleccionndolo en el
combo de la derecha del editor de cdigo. Este combo se encuentra ubicado arriba a la derecha en
el editor de cdigo.

El combo de la izquierda nos permite cambiar el objeto con el cual trabajaremos, siempre ser un
objeto previamente definido en el formulario. Entonces, el combo de la izquierda dentro del editor
de cdigo, contiene lo objetos definidos en el formulario, incluso el mismo formulario, tambin el
rea de general declaraciones (donde se pueden declarar objetos y propiedades, que sern vistas
en cualquier evento o mtodo de formulario).

Ahora pruebe el funcionamiento. Debe poder ingresar nmeros, los mismos se vern reflejar en el
display.

Programacin del teclado de operaciones matemticas:

El anlisis del problema. Cmo realizar una operacin matemtica?

Analicemos la secuencia de acciones que se cumplen cuando se efecta una operacin

matemticas que incluye varios nmeros y operadores.

Supongamos que vamos a realizar la operacin que se ve a continuacin.

10 + 4 + 5 = 19

Debiera suceder lo mismo por cada vez que oprimo el botn mas?

la primera tecla de operaciones pulsada, en este caso el primer mas (+), el rojo, ste podra ser
cualquier tecla de operaciones, suma, resta, divisin, multiplicacin, la accin que se realiza en
esta instancia siempre es la misma. Cmo? Antes de oprimir la primera tecla de operaciones, se
ingreso un nmero (cualquiera), en el momento de oprimir la tecla de operaciones, siempre
deber almacenar este nmero en algn lugar (una variable), sta ser de alcance global o pblico
(accesible en cualquier evento del formulario). Esto que acabamos de describir suceder siempre
para la primera tecla de operaciones, tambin se deber guardar el signo de operacin, para saber
como operar con el siguiente nmero a ingresar. Pues la operacin se completa recin despus de

Pgina 7
 Universidad Tecnolgica Nacional
Facultad Regional Crdoba
Departamento de Ingeniera en Sistemas de Informacin
Ctedra de Programacin de Aplicaciones Visuales I

saber cual es el siguiente nmero con el que se trabajar en esta operacin matemtica. Pero aqu
no acaba, pues slo se realizar la operacin entre el primer nmero y el segundo, con el signo
que se interpuso entre ambos cuando se ingrese el siguiente operador (el mas de color azul).

Anlisis Paso a Paso:

10
1. Ingresa el primer nmero, este se debe reflejar en el display simplemente.
10 +
2. Se establece la primera operacin (el signo ms rojo), en esta etapa se debe almacenar el
nmero que est en el display en una variable, y tambin guardar el signo del operador
que acaba de pulsar, en otra variable.
10 + 4
3. Ingresa el segundo nmero (el cuatro), previo a mostrar el cuatro en el display, ste debe
ser blanqueado (borrar su contenido), pues sino quedar el nmero 104 y no 4.
10 + 4 +
4. Se Oprime el segundo operador. En este momento se debe realizar la operacin
matemtica anterior, entre el nmero 10 que se encuentra almacenado en una variable y el
nmero 4 que se encuentra en el display, operando entre ambos con el signo que estar
guardado en una variable para este fin. Luego asigno el valor resultado en la variable de
memoria en que se encontraba almacenado el nmero 10, y tambin almaceno en la
variable para el signo el nuevo que acabo de oprimir (el signo mas azul).
10 + 4 + 5
5. Al Ingresar el tercer nmero (el cinco), previo a mostrarlo en display, ste debe ser
blanqueado (borrar su contenido), pues sino quedar el nmero 45 y no 5.
10 + 4 + 5=
6. Al Oprimir el igual, aqu sucede la misma situacin que cuando se oprime un operador que
no sea el primero, con la diferencia que no se guardar el signo de la operacin y el
resultado de la misma ser mostrado en el display.

Pgina 8
 Universidad Tecnolgica Nacional
Facultad Regional Crdoba
Departamento de Ingeniera en Sistemas de Informacin
Ctedra de Programacin de Aplicaciones Visuales I

Secuencia de acciones
Ingreso 4 por teclado al El igual realiza la ltima
display operacin matemtica y
muestra en el display el
Ingreso 10 por resultado
teclado al display
10 + 4 + 5 = 19

Almaceno el 10 en una Realizo la operacin matemtica

variable de memoria e identificada anteriormente (+)
identifico la operacin entre el valor almacenado en la
matemtica a realizar variable de memoria y el valor que
esta en el display. Luego asigno el
resultado a la variable de. Vuelvo a
identificar la operacin matemtica
actual que operar con el siguiente
nmero.

Pgina 9