Como hacer una calculadora

Vamos a crear una aplicación muy conocida cuando empezamos con

un entorno visual. Una calculadora.

La imagen final sera así:

Con esta calculadora podrás hacer las operaciones básicas.

La pantalla se borrara cada vez que hagamos una operación

para mostrar el resultado.

Empezamos por un formulario:

Esta formulario tiene:

Propiedad Height (Altura) del formulario: 272

Propiedad Width (Ancho) del formulario: 232

Como no queremos que la imagen se agrande, cambiaremos

la propiedad Resizable a False. Desaparecerá el icono de maximizar.

Necesitaremos para comenzar una etiqueta que sera nuestra pantalla LCD.

Dentro de un formulario tenemos unas coordenadas X e Y. Fijaros en las propiedades de este. Luego,vamos a la caja de herramientas, que tenemos todos nuestros componentes y seleccionamos label.

Situamos la etiqueta en:

X =11 e Y =15

Si no podéis colocarlo con el cursor el componente.

Usar sus propiedades X e Y. ;-)

Le damos un alto y un ancho.

Height: 32 y Width: 208

Ahora fijaros. La etiqueta debería dar la sensación de que tiene profundidad.

Así que cambiaremos su propiedad Border a Sunken.(Hundida).

Probar a ver que pasa si cambiareis a otros modos.

Para que los números comiencen por su derecha, debemos cambiar su alineación. Así que en la propiedad Align cambiaremos a RIGHT (derecha).

Vamos a la propiedad nombre y la cambiamos a Pantalla

Ya tenemos nuestro LCD.

Ahora vamos a crear una botonera. Tendremos:

• Los números.
• Las operaciones.
• El signo igual
• La coma o punto decimal.

Con esto, podemos darnos cuentas de que tenemos unos grupos de botones divididos según función

Estos grupos de controles son los conocidos como “Matriz de controles”.

Ganamos en claridad de código y usamos un mismo código para cada 

grupo de botones.

Vamos a crear el primer botón para los números.

Necesitaremos 10 botones.

Comenzaremos por el 0.

Vamos a nuestra caja de herramientas o componentes y pulsamos en el

botón que tiene ok en su interior.

Hacemos doble clic sobre el.

Grande,¿ verdad ?.Con este botón vamos a crear todo el resto de botones

de los números.

Vamos a cambiar su alto y ancho:

Height : 42 y su Width: 49

Vamos a cambiar su nombre:

Name: Boton0

Y vamos a cambiar su propiedad de texto.

Text: 0

Como es un conjunto de botones o grupo. Todos estos botones tienen

su índice, que lo identifica en su grupo, con la propiedad “Tag”

En la que iremos añadiendo un índice. Como boton0 es el primero de todos.

cambiaremos la propiedad Tag a 0 y así iremos haciéndolo con cada grupo

de botones. El boton0 es 0, el boton1 es 1, el boton3

es 3, etc.

¿ Estas contento con ese tamaño de letra para tu botón ?.

Puedes cambiarlo en la propiedad Font del botón.

Yo lo deje a 11.

Parece que ya de principio nuestro número esta alineado.

Vamos a desplazar el botón.

Seleccionamos nuestro botón.Nos valemos del lateral de la etiqueta

y lo llevamos hasta abajo.

Podemos colocarlo en:

X: 8

Y: 216

Nos vamos a la propiedad Group del botón

Y escribiremos: Números

Ahora viene lo interesante. Tenemos seleccionado nuestro botón 0 y 

con el botón derecho del ratón, mostramos el “menú emergente” y seleccionamos “Copiar”.

Nuestro botón se ha copiado a la memoria y ahora queremos tener otro igual sobre el formulario. Usamos de nuevo el “menú emergente” con el botón derecho y “Pegamos”.

Tenemos nuestra copia de botón arriba. Lo bajamos y lo colocamos encima del primer botón.

Fijaros ahora en las propiedades Name y Group, automáticamente su nombre ha cambiado a boton1 y se ha incluido en el grupo Numeros. Tenemos que cambiar la propiedad “Tag”,manualmente.

Como aun tenemos en memoria el primer botón. Volvemos a usar “Pegar” del menú emergente (Botón Derecho). Una vez mas hasta tener una fila de tres botones.

Veremos algo así:

Ahora seleccionaremos los tres botones de la misma fila. Iremos desde el primero al tercero. Dejaremos pulsado el botón izquierdo y seleccionamos los tres botones.

Cuando los tengamos seleccionados, usaremos el menús emergente y usamos “Copiar”.

Tendremos tres botones en memoria. Que vamos a Pegar ahora dos veces, para completar los diez botones de la calculadora.Las tres filas. :-)

Fijaros que al pegar los botones están seleccionados, vamos a ellos con el botón izquierdo y los ponemos encima de la primera fila de tres botones.

Una vez mas. “Menú emergente” y “Pegar”.

Ya tenemos nuestro grupo de botones “Números”.

Ahora hay que cambiar el contenido del texto de cada botón

y observar también como han ido cambiando sus nombres según

hemos ido pegando estos,sobre el formulario.No olvidar cambiar

su propiedad Tag.

Cambiamos el contenido del texto y queda así:

Vamos a crear ahora nuestros botones para las operaciones.

Seleccionamos un botón de los números ,lo copiamos,pegamos y lo situamos

a la derecha del 9.

Tenemos que cambiar sus propiedades de nombre,grupo,texto y tag.

A su nombre: BotonDiv

Grupo: Operaciones

Text: /

Tag: 0

Ahora que tenemos seleccionado el botón de dividir. Copiamos y Pegamos,

debajo del botón dividir. Hasta tres botones más.

Cambiamos de estos tres, sus propiedades nombre,texto y tag.

Nombrándolos y poniendo su signo de operación.

BotonPor

BotonMenos

BotonMas

Y tendremos una imagen así:

Para la coma o punto y el signo igual usaremos botones que no van en un grupo.

Son dos botones independientes.

 

Así que seleccionamos un botón cualquiera,copiamos y pegamos.

Y lo colocamos debajo del 2, el botón para el punto o coma y hacemos

de nuevo la misma operación y colocamos nuestro igual.

Vamos a los dos botones y cambiamos para “el punto decimal”.Usaremos un punto.

Su nombre: BotonComa

Borramos su grupo y su tag (índice).

Y hacemos lo mismo con el botón de igual.

Nombre: BotonIgual

Borramos su grupo y su tag

Tenemos todos los botones de nuestra calculadora.

Es muy importante que para el futuro sepáis crear vuestros grupos de controles.

Comencemos con el código.

Vamos a definir unas variables que son comunes a todo el formulario.

---código---

Private operando1 As Float

Private operando2 As Float

Private operador As String

Private Borrapantalla As Boolean

Private resultado As Float

---código---

Pasamos al formulario y ahora pulsa sobre cualquier botón de los números.

Fíjate que ha salido como nombre del evento Click , el grupo que pertenece.

Con esto, tenemos el mismo código común para todos esos botones.

Vamos a programar su respuesta.

Fijaros en la variable Borrapantalla.

---código---

Public Sub Números_Clic()

If Borrapantalla Then

    Pantalla.Text = ""

    Borrapantalla = False

Endif

Pantalla.Text = Pantalla.Text & Last.Text

End

---código---

Es una variable Booleana. No se esta comparando, pero se esta

comprobando su valor.

Como la variable Booleana por defecto vale “False” al comienzo.

IF comprueba si es True para saber si estamos con el primer operando

o con el segundo.

Cada vez pulsemos una tecla de los números su

contenido de texto se añade al contenido de texto de la etiqueta.

Pantalla.Text = Pantalla.Text & Last.Text

Al comienzo Pantalla.Text esta vacío

Last.Text nos dice, que de su propiedad texto de cualquier botón del 

grupo Números (el ultimo pulsado),  se añadirá a la pantalla y se 

mostrara en esta.

Así se van añadiendo números.

Veamos el código de las operaciones.

Vamos a usar una instrucción “condicional selectiva múltiple”

---código---

Public Sub Operacion_Clic()

Select Case Last.tag

Case 0

    operando1 = CFloat(Pantalla.Text)

    operador = "+"

    Pantalla.Text = ""

Case 1

     operando1 = CFloat(Pantalla.Text)

     operador = "-"

     Pantalla.Text = ""

Case 2

     operando1 = CFloat(Pantalla.Text)

     operador = "*"

     Pantalla.Text = ""

Case 3

     operando1 = CFloat(Pantalla.Text)

     operador = "/"

     Pantalla.Text = ""

End Select

End

---código----

La propiedad Tag de Last nos devuelve su índice

“Cada botón de operación tiene que tener en su propiedad

Tag un valor, de 0 a 3 en este caso”, que son el número de

operaciones.

Cuando es 0, convierte el contenido de la pantalla al tipo Real

su operador es “+” y limpia la pantalla.

Habremos almacenado el primer operando y su operador.

Podríamos haber usado el propio contenido del botón para saber

su operador, ya que este se encuentra en la propiedad de texto

del botón del grupo operaciones.

Y así sucesivamente según su índice realizara una operación u otra.

El botón de punto o coma.....

---código---

Public Sub BotonComa_Clic()

If InStr(Pantalla.Text, ".") = False Then

Pantalla.Text = Pantalla.Text & "."

Endif

End

---código---

Este grupo de instrucciones lo que hace es buscar la coma dentro

del texto contenido en la etiqueta que es la pantalla. Si existe la coma

no volverá a escribirse en la pantalla, otra coma.

Y por ultimo nuestro botón igual:

---código---

Public Sub BotonIgual_Clic()

operando2 = CFloat(Pantalla.Text)

If operador = "+" Then resultado = operando1 + operando2

If operador = "-" Then resultado = operando1 - operando2

If operador = "*" Then resultado = operando1 * operando2

If operador = "/" And operando2 <> 0 Then resultado = operando1 / operando2

Pantalla.Text = resultado

End

---código----

En este grupo de instrucciones, almacenamos el segundo operando

y comprobamos cual es la operación que quiere que hagamos.

También comprueba que si la operación es dividir,que su operando2 no sea 0

para que no de error.

Hemos hecho nuestra primera aplicación.

Hay muchas funciones que se le pueden añadir .Que el contenido de la

pantalla no pase de una cantidad de números. Etc

Recordar que al pegar las comillas del blog al editor de gambas, hay que cambiarlas.No son el mismo tipo de comillas.Gambas no la interpreta igual.

Ah, para el icono de nuestra calculadora.Ir a propiedades del formulario y usar

la propiedad Icon. ;-)