Aprendiendo Cocoa

Aplicacion CuentaCaracteres, para Leopard

Julio 8th, 2008 por admin

Debido a todos los emails y comentarios recibidos, he decidido volver a realizar este sencillo programa pero para Leopard y su Xcode 3.0. Decir primero, que este tutorial esta realizado con el ultimo Xcode 3.1, que se actualiza al descargar la última iPhone SDK.

Bueno, pues abrimos nuestro Xcode haciendo click en su icono del Dock (si no esta en el Dock, está en MacintoshHD/Developer/Applications y trasladarlo al Dock que lo abriréis mucho) y seleccionamos File->New Project, para luego indicar Cocoa Application y nombre CuentaCaracteres.
imagen-5.png
imagen-6.png


Ahora debemos primero crear la implementación para las clases (uno de los principales cambios con respecto a Xcode 2), hacemos click en File->New File.. y luego en Cocoa-ObjectiveC Class y le damos de nombre Controlador.m

imagen-7.png

Lo mas probable será que los archivos .h y .m de nuestra nueva clase aparezcan en el arbol del proyecto pero no debajo de la carpeta Classes, haz drag&drop con los archivos para que quede de esta forma
imagen-8.png

En este punto vamos a “picar codigo” pero vereís como todo en Cocoa es bastante sencillo. Para facilitaros vuestra tarea os aconsejo hagais click en Editor, junto a Info en Xcode, para que no os abra una nueva ventana por cada archivo que abraís.

El controlador.h debe tener este aspecto
@interface Controlador : NSObject
{
IBOutlet NSTextField *entrada;
IBOutlet NSTextField *salida;
}
- (IBAction)Contar:(id)sender;
@end

Donde entrada y salida serían los Outlets de tipo NSTextField (si no recuerdas que es un Outlet miraté esto) y Contar un Action que no devuelve nada (IBAction equivale a void).

Pichamos en Controlador.m y copiamos este codigo dentro de @implementation Controlador y @end

- (void)awakeFromNib{
[salida setStringValue:@"Introduzca una palabra"];
}
- (IBAction)Contar:(id)sender
{
int count = [[entrada stringValue] length];
[salida setStringValue:[NSString stringWithFormat:@" %d caracteres",count]];
}

Donde el método awakeFromNib es un método que es llamado por la aplicación nada mas despertar y justo antes de cargar la interfaz en el que ponemos el valor del outlet salida al string “introduzca una palabra” y luego Contar, que es nuestro metodo principal, que será lanzado al pulsar sobre el botón apropiado, en el que contamos la longitud del Outlet entrada y se lo pasamos formateado como NSString al Outlet de salida. Perdonad que vaya rápido con el código, pero ya se explicó en la aplicación original, echadle un vistazo al blog si os veis un poco perdidos.

Pues terminando con Xcode, salvamos todo y dentro del árbol del proyecto, buscamos dentro de la carpeta Resources, un archivo llamado MainMenu.xib ( o .nib, el que tengais son lo mismo pero guardado en xml, cosas de Xcode 3.1) y lo abrimos, para automaticamente tener delante nuestra el nuevo Interface Builder.

Abrimos la Library (si no esta abierta) en Tools->Library, y dentro de ella, pinchamos en View&Cells y buscamos Rounded Rect Button, arrastrándolo a nuestra ventana, quedando tal que así
imagen-9.png

Pinchamos dentro para cambiarle el nombre y poner Contar. Ahora buscamos Label y lo arrastramos debajo del botón que acabamos de colocar, aunque haciendolo bastante grande, mas o menos como veis en la figura.
imagen-10.png

Para centrar el texto del Label, pinchad sobre él, abrid el inspector con Tools->Inspector y en la pestaña TextField Attributes, la tercera opción es Alignment seleccionamos centrado.
Y por último, añadimos un cuadro de texto y al arrastrarlo, lo hacemos bien ancho, todo lo que nos permita la ventana ayudándonos de las Aqua Guidelines. Tambien aprovechamos para mover y ajustar los demas elementos y hacer mas ajustada la ventana para que finalmente quede de esta forma.
imagen-11.png

Ahora sólo nos queda, conectar lo que realizamos en Xcode, con lo que acabamos de diseñar en Interface Builder, para ello, debemos crear una instacia de la superclase NSObject, luego especificar que realmente es de nuestra clase Controlador, para finalmente establecer las conexiones.
El primer paso, crear la instacia lo realizamos buscando en la Library->Objects&Controllers un cubo azul llamado Object, el cual arrastramos a nuestra doc window (aquella que tiene de titulo MainMenu.xib o nib, según vuestro Xcode) para quedar asi:
imagen-12.png
Mas o menos, debe ser parecida a esa, ahora con el cubo seleccionado nos vamos hacia el Inspector (Tools->Inspector), pinchamos en la sexta pestaña del inspector, Object Identity y dentro de Class Identity, en Class, escribir Controlador y pulsamos enter, obteniendo de esta manera todos los Outlets y Actions que dijimos en Xcode.
imagen-13.png
Si en este momento, tienes algún fallo o no os reconoce Controlador, revisa el código, es la única posibilidad de fallo que puede haber.

Ahora para terminar, hacemos Control-Drag(hacer control+click sin soltar nada hasta el destino) en el botón Contar y arrastramos hasta la instacia de nuestra clase Controlador, el cubo azul y pinchamos en el popup negro, en contar
imagen-14.png

Al contrario hacemos con los Outlets, pinchamos desde el cubo para soltar en los NSTextField. Hacemos Control-Drag en el cubo azul de nuestra clase y no soltamos hasta el NSTextField (cuadro de texto) de arriba, el de entrada de datos, y soltamos, ante el popup negro pinchamos en entrada. Para el Label, hacemos lo mismo, Contro-Drag en el cubo azul y no lo soltamos hasta llegar al Label, y cuando tengamos el popup negro , le pinchamos en Salida.
Si pinchais con el botón derecho(o control-click en monobotón) sobre la instacia de nuestra clase os deberá aparecer un popup de esta guisa.
imagen-15.png

Donde se observa al pasar por encima, con quien está conectado cada Outlet y a quien corresponde cada Action de nuestra instacia de Controlador.
Pues listo, salvamos todo, en el Interface Builder y volvemos a Xcode, para ejecutar y lanzar la aplicación con el martillo con el circulo verde debajo, Build and Go, esperamos a q compile y ejecute nuestra nueva app y listo, ya tenemos nuestra primera aplicación en Leopard.

imagen-16.png

Espero que os haya gustado, criticad este tutorial todo lo que creaís oportuno, así mejoraremos todo. Perdonad el retraso, pero los examenes, viajes y demás, me tienen hasta arriba. Si pensaid que he corrido mucho, y me he saltado explicaciones, os ruego le echeis un vistazo al blog y al libro de Fernando Lopez Hernández sobre ObjC, que es buenísimo.
Pues eso, a disfrutarlo y nos vemos en el próximo.

Posted in Cocoa

3 Respuestas

  1. Adrian

    Muy bueno tu tutorial gracias en serio y espero y sigas publicando ya que yo tengo el afán de realisar mis propias aplicaciones para mac.
    sigue así me da gusto que Haya gente que aporta estos manuales y lo mejor, que son en español. se gire tu blog.

  2. Adrian

    Por cierto como ago que aparezca un icono en la aplicación.
    gracias.

  3. Marco

    Gracias me ha servido de mucho!!! Espero sigas publicando mas para subirle el nivel de dificultad a esto… Saludos!

Animate a dejar un comentario

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.