ChilenoMac: Mac OS X a la chilena

enero 8, 2010

Cocoa: haciendo un navegador

Muchas veces, en alguna conversación real o virtual entre maqueros, salía el tema del nuevo Finder, o de las aplicaciones en 64 bits, o de Core Animation. En resumen, cualquier tema de las novedades que Apple añade a sus sistemas operativos. Pero finalmente, muchas de estas novedades tienen que ver con uno de los caballitos de batalla de Apple: Cocoa.

¿Y qué es Cocoa? Básicamente, Cocoa es uno de los entornos de programación, y el principal, de Mac OS X. Su historia es bastante larga, y fue cubierta en parte en este mismo blog (acá, por ejemplo).

Pero, ¿qué es de verdad Cocoa? Bueno, para responder esa pregunta, hablemos un poco de cómo se hace un programa y en particular uno para OS X.

Una de las maneras más prácticas de programar es usando un paradigma, es decir, un estilo, llamado programación orientada a objetos. La idea es súper simple: hacer que los programas estén compuestos de distintos trozos independientes, cada uno de ellos interactuando con los demás. El espíritu es que, así como en la vida real las cosas tienen distintas propiedades (una puerta, por ejemplo, es color verde) y “saben” hacer ciertas cosas (la misma puerta sabe cerrarse, abrirse, ponerse pestillo), en los programas estos distintos trozos, llamados objetos, sepan tener algunas propiedades y realizar algunas acciones. Esto hace más fácil hacer un programa. Por ejemplo, es como si al construir una casa, pudiéramos sacar todas las puertas de un mismo molde, haciéndolas en serie y luego aplicamos alguna configuración que necesitemos.

Y aquí es donde viene Cocoa. Cocoa es una colección de clases que están todas orientadas a objetos, es decir, ocupan todas esta idea de partes independientes pero capaces de relacionarse unas con otras. Está hecho por Apple y es la principal manera de hacer aplicaciones de cara al usuario. Safari, iPhoto, Mail, Finder (en snow leopard), iChat, entre tantas otras, son aplicaciones hechas en Cocoa. Asimismo, de terceras partes, la gran mayoría del software para Mac está escrito usando Cocoa.

¿Cómo funciona? Aprovechando que en un post anterior, dedicado a Quartz Composer, instalamos la suite Xcode, hagamos un programa simplecito.

Abrimos Xcode y creamos un proyecto nuevo (comando + shift + n). Nos aparece una ventana como la siguiente (en Snow Leopard)

Tenemos un selector de plantillas. En este caso, queremos una aplicación de Mac OS X en Cocoa. La elegimos, nos preguntará un nombre y donde guardarla (en mi caso, le puse Ejemplo y la guardé en el escritorio) y nos aparece una ventana como esta

Esta es la ventana principal de Xcode. Aquí escribimos las clases (que son como un “plano” para los distintos objetos, como una especie de molde donde se construyen objetos de cada tipo), manejamos recursos como íconos o imágenes o incluimos distintas funcionalidades provistas por Apple.

Una idea súper fundamental de Cocoa es separar las clases por función. Hay clases vista, que son las que… se ven. Por ejemplo, botones, cuadros de texto, ventanas, paneles y un largo etcétera. Hay clases modelo, que guardan información. Por ejemplo, si hacemos una aplicación que guarde cuentas de banco, un modelo sería “Cuenta corriente”, que describiría como es una cuenta corriente en general (tendría un número de cuenta, una cantidad de dinero, un nombre asociado, etc etc, y sabría recibir dinero, sacar dinero, sabría qué hacer si se queda sin dinero). Por último, hay clases controlador, que hacen de puente entre las vistas y los modelos. Es decir, relacionan la información que el usuario ve con la que maneja la aplicación.

El problema es que para hacer eso, hay que escribir código. En Cocoa, el código se escribe mayormente usando un lenguaje poco conocido, pero muy fácil de aprender, Objective C. También, para los programadores que lean este blog, hay dos lenguajes más conocidos que pueden usarse: Ruby y Python.

De todas formas, como aprender un lenguaje de programación no es cosa de un día para otro, haremos una aplicación muy simple que no requerirá escribir ni una sola línea para su funcionamiento. Haremos un navegador web.

La pregunta del fiel lector, en este momento, debería ser “¡¿Y cómo?! ¿No dicen que los navegadores son tan difíciles de hacer?” Y sí, son difíciles, pero haremos una versión simplificada aprovechando que WebKit, el motor de Safari y Google Chrome, viene integrado en Cocoa.

Además, no escribiremos una línea de código pues haremos todo en el creador de interfaces gráficas de Xcode, Interface Builder.

Pues bien, manos a la obra. Si nos fijamos en la ventana de Xcode, aparece abajo algo como esto

Si hacemos doble clic en ese archivo, se abrirá Interface Builder. Aparecerá una ventana y algunos paneles

En la foto, las distintas partes son

la ventana principal de la aplicación (tal como la verá el usuario), el menú que aparecerá en la barra superior y una ventana de Interface Builder donde nos va mostrando los objetos que están relacionados con la ventana.

Un panel con atributos o propiedades del objeto que esté seleccionado (en este caso, la ventana).

Un panel con objetos. Estos funcionan arrastrando y soltándolos sobre la ventana.

Para hacer la versión más simple, necesitaremos:

  • Un lugar donde escribir la dirección de la página.
  • Un visor propiamente tal.
  • Botones para ir atrás o adelante.

Veamos los objetos de los que disponemos

  • Texto: si hacemos una búsqueda por text, aparecerán varios objetos. En este caso, necesitamos escribir sólo una línea (como todos los navegadores). El objeto más parecido a eso se llama Text Field. Tomamos el que aparece en el panel y lo arrastramos.

  • Web: buscamos por web y, como no, aparece web view. Arrastramos y soltamos.

  • Botones: si buscamos por button, aparecen varios tipos de botones. Escogemos los que más nos gusten y los arrastramos. Una característica de los botones es que, haciendo doble clic sobre ellos, podemos configurar su título.

Finalmente, dejamos la interfaz parecida a esto

No es la interfaz más elegante del mundo, pero funciona. Necesitamos decirle a nuestra vista web que tome la dirección del text view, que el botón de atrás nos envía de vuelta a la página anterior y el de adelante a la página siguiente. Esto es bastante fácil, pues el WebView ya tiene este comportamiento incorporado, sólo hace falta decirle quien hace cada cosa. En Interface Builder, esto se logra haciendo control + click en el objeto que va a enviar la información, arrastrando y soltando sobre el que debe recibirla.

Soltamos y nos aparece una lista de cosas que puede hacer

Escogemos takeStringURLFrom haciendo clic. El mismo procedimiento ahora debemos hacerlo con los botones, escogiendo goBack para el botón de Atrás y goForward para el botón de adelante.

Un último detalle es seleccionar el text field y, en el inspector, en Action, elegir “Sent on Enter Only”. Esto hará que al apretar Enter, el texto le envíe la dirección al webview.

En Xcode debemos hacer una última configuración.  Para que la aplicación funcione, debemos añadir algo de funcionalidad a Cocoa. Necesitamos un framework extra, WebKit. Para añadirlo, hacemos clic derecho en la carpeta en Xcode que dice Frameworks y seleccionamos Add > Existing Frameworks

Esto hace aparecer un panel con una lista de frameworks. Escogemos WebKit y damos al botón Add..

Para terminar, escribimos la siguiente línea en el archivo EjemploAppDelegate.h (el nombre puede variar, en otras versiones de Xcode es AppDelegate.h) que está en la carpeta Classes.

#import <WebKit/WebKit.h>

luego de la línea

#import <Cocoa/Cocoa.h>

Estamos listos. Para probar nuestro navegador, hacemos clic al botón build and run que aparece en la barra de herramientas

y listo, aparece nuestro navegador.

Por supuesto, esta es una versión a la que le falta mucho todavía. Por ejemplo, ¿qué pasa cuando cambiamos el tamaño de la ventana? Sin embargo, se puede hacer mucho sin escribir todavía código, pero lo dejo para la próxima oportunidad. Saludos!

About these ads

10 comentarios »

  1. @varodonaire: excelente!
    gran artículo… de los mejores que ha tenido ChilenoMac!

    Comentario por naissant — enero 8, 2010 @ 11:58 pm | Responder

  2. Solo una pregunta, ¿donde lo consigo, si quiero comenzar a programar?

    Comentario por carlitoxmc — enero 10, 2010 @ 10:58 pm | Responder

  3. A propósito de software chileno, he aquí un notificador de Gmail y Apps > http://matmartinez.net/airmail
    Es gratuita y 100% chilena :)

    Comentario por Matías Martínez — enero 11, 2010 @ 12:18 pm | Responder

  4. [...] dimensiones, inspector, Interface Builder, interfaz, Xcode Y seguimos con nuestro navegador. El artículo anterior fue bastante extenso, en el sentido de cubrir muchas aristas del tema. Resumiendo, hablamos un poco [...]

    Pingback por Cocoa: refinando nuestro navegador « ChilenoMac: Mac OS X a la chilena — enero 13, 2010 @ 3:32 am | Responder

  5. Estimado, con la ayuda y todo, aun no he podido descargar el software necesario para la programación, sería ideal que como sucede con otros tutoriales en la página, puedan dar el link de descarga directa. Estaría muy agradecido. Hasta pronto

    Comentario por Carlitoxmc — enero 13, 2010 @ 7:24 pm | Responder

    • Estimado, la verdad es que no es posible dar el link de descarga directa, como sucede en otros tutoriales de la página. De todas formas es ir a http://developer.apple.com/mac/ crear una cuenta de usuario y aparece ahí mismo (si tienes snow leopard). Puedes rebuscar entre los dvds de instalación de tu mac, vienen como instalación extra, aunque probablemente desactualizada.

      Comentario por varodonaire — enero 13, 2010 @ 11:16 pm | Responder

      • Si, hice lo último que indicaste, revisé en el dvd de leopard 10.5 y estaba. Gracias por estar atento a las preguntas.

        Comentario por Carlitoxmc — enero 14, 2010 @ 3:16 am


RSS feed para los comentarios de esta entrada. TrackBack URI

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

El tema Rubric. Crea un blog o un sitio web gratuitos con WordPress.com.

Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.

Únete a otros 37 seguidores

%d personas les gusta esto: