Aplicacion Calculadora, parte 1

Tutorial creado con Xcode 2
Tal y como hicimos con nuestra aplicación CuentaCaracteres, vamos a dividir la programación en dos partes, la perteneciente a la parte gráfica con Interface Builder y la de código o funcionamiento interno con Xcode para hacer mucho mas sencilla su entendimiento.

Para la creación de este tutorial nos ayudó bastante este pero nos pareció bastante complicado el código que utilizaba por lo que decimos modificarlo y crear uno propio nuestro.

Como habéis visto, nuestra calculadora es bastante sencilla, no tiene menos unario ni punto, pero para empezar esta muy bien ya que básicamente tiene 4 operaciones aritméticas, una de resultado de operación y otra para limpiar la pantalla. Esto os da unan idea de cuantas operaciones tenemos que hacer. Para la introducción de los dígitos nos topamos con la misma inquietud que tuvimos en otro post, lo hacemos de manera chapucera o de manera elegante. La manera chapucera seria asociar cada numero con una operación del tipo IntroduceSiete, pero sin embargo la manera elegante (y la que vamos a tomar) seria asociarle la misma operación a todos, y distinguir que numero introducimos mediante los tags.

Bueno, empezamos como en los anteriores tutorial, seleccionando Cocoa Application y especificando un nombre y una ruta para salvar. Cuando Xcode tenga nuestro proyecto listo, buscamos el MainMenu.nib y lo abrimos para trabajar con Interface Builder, y ya estamos en faena.

Primero como toque simple estético, le vamos a dar textura nuestra aplicacion, seleccionando la ventana y en el inspector(Mayuscula+Manzana+I) clickando en Has texture y le cambiamos el Window Title a Calculadora. Ahora arrastramos un botón a nuestra ventana desde la Paleta para empezar a trabajar y tenemos esto.

Por los botones transparentes no os preocupéis por que no se verán en nuestra aplicación. Ahora añadimos otro button con texto C encima del numero 7 para poder borrar nuestra texto, otro botón con = para obtener resultado, y una columna de cuatro botones tal y como hemos hecho esta matriz. Es decir soltamos un button, pulsamos ALT, pinchamos en su parte inferior y lo arrastramos hasta que tengamos 4 botones. Aqui le cambiamos por las cuatro operaciones de las que costará nuestra aplicación, +,-,* y /, y revisad también que le ponga tag 0,1,2 y 3 respectivamente. El resultado seguro que es este.

Ahora vamos a crear una matriz de puntos, en lugar de arrastrar botón por botón. Esto lo hacemos teniendo el botón seleccionado, pulsamos Alt y arrastramos la esquina inferior derecha del botón hacia la derecha para crear 3 columnas y lo seguimos arrastrando hacia abajo para tener 4 filas. Está técnica es magnifica, extraña al principio pero muy útil. El resultado debe ser este.

Una matriz de 3X4 de botones, a los que les cambiaremos el nombre por su correspondiente valor numérico, salvo a los dos exteriores de la ultima fila, que les pondremos la opcion Transparent para hacerlos invisibles. Para editar el texto de cada button debemos pinchar dos veces en él ya que el primer click selecciona la matriz entera. También vamos a cambiar el tag de cada button, haciendo que aparezca el inspector (Mayuscula+Manzana+I) cuando tenemos un button seleccionado y cambiando el valor del tag por el de su valor numérico. Este tag nos ayuda a identificar que número ha sido pulsado luego. El resultado hasta este punto debe ser este. Os enseñamos tambien como debe ser el tag del button 0 por ejemplo.

Solo nos queda insertar el campo de texto y empezar con los outlets y las actions. Para el texto yo he elegido que fuese roundable, para darle un aspecto mas curioso. También lo agrandé de tamaño y en Text Direction seleccionamos Right to Left, todo esto, obviamente todo este en el inspector teniendo seleccionado el campo de texto. Ahora aprovechad que no hay nada conectado y darle un poco de estético, moviendo el texto para acá, este button para el otro sitio, y haced algo parecido a esto o mas bonito.

En este momento, vamos a por las conexiones con Xcode. Tenemos una calculadora con un campo de salida de texto, un botón de resultado, una matriz para los dígitos, otra para las operaciones y un botón para limpiar las operaciones. Los mas aventajados se habrán dado cuenta, un outlet de NSTextField, una operación enterDigit para los dígitos, una de enterOp para las operaciones, otra para calcular el resultado y otra para limpiar el campo de texto. Así que ya sabeís, en el selector de Instancias de Interface Builder, nos vamos la pestaña Classes, buscamos a NSObject (estará a la izquierda), botón derecho Subclass NSobject y le damos de nombre Controlador. En este punto, botón derecho en Controlador y Add Outlet to Controlador. Añadimos el de la imagen y nos vamos a 0 Actions y añadimos las que veis en la imagen.

Cuando tengamos las pestañas Outlets y Actions tal y como las imágenes, hacemos botón derecho en nuestra clase Controlador, y le decimos Instanciate Controlador, para obtener una instancia de nuestra clase en el selector de instancias. Como veis, el símbolo de exclamación amarillo nos indica que hay conexiones en nuestra instancia que no hemos conectado, así que vamos a conectarlas.

Hacemos Control-Drag desde nuestra clase hacia el campo de texto, y ante la respuesta del inspector, le decimos Connect con el outlet text del tipo NSTextField. Para las operaciones lo realizamos al contrario, es decir, por ejemplo el signo =, hacemos Control-Drag desde el signo = hacia nuestra clase, y soltamos y le decimos que lo conecte con la action calculate. Lo mismo para el signo C y la operación enterC. Para las dos matrices, son un poco mas extraño, ya que para nosotros quien nos dice que digito es el pulsado es su tag, todos los digitos hacen la misma operacion, enterDigit. Luego pinchamos en el centro de la matriz y hacemos Control-Drag hacia nuestra clase, y los conectamos a enterDigit. Ahora realizamos el mismo procedimiento para las operaciones, pinchamos en el centro de la matriz de una columna y hacemos Control-Drag hacia nuestra clase, y los conectamos a la operación enterOp. Id pinchando en cada uno de los cuatro grupos de botones para comprobar en el inspector que las conexiones son correctas.

Y para concluir, cread los archivos de nuestra clase Controlador, ya sabéis, pinchad en la pestaña Classes, botón derecho en nuestra clase y Create Files for Controlador, guardando los archivos junto al proyecto. Salvamos y cerramos Interface Builder, y nos vamos a por la segunda parte.

Muchos gracias, y como siempre, si hay alguna duda, dejad comentarios o al email.