ChilenoMac: Mac OS X a la chilena

enero 13, 2010

Cocoa: refinando nuestro navegador

Filed under: Programación,tutorial — varodonaire @ 3:30 am
Tags: , , , , ,

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 de qué es Cocoa, cuál es la idea que tiene detrás, la programación orientada a objetos. Vimos también un poco sobre cómo se aplica esta idea, en este caso, ocupando objetos que corresponden a distintos tipos de vistas (botones, la ventana, la vista web, el campo de texto). Todo eso, por supuesto, sumado a hablar levemente de Xcode (que es un monstruo de programa, daría para hablar un buen rato) y de Interface Builder, además de usarlo en la práctica. No es poco, ¿no?

En este refinaremos un poco la interfaz, de modo de dejarla más adecuada. ¿En qué consiste ese refinamiento? Bueno, hay varios detalles obvios, si miramos nuestra aplicación tal como está. Por ejemplo, la pregunta que quedó volando la semana pasada, ¿qué pasa si agrandamos la ventana?

Claramente, ese no es un comportamiento adecuado. Además, digámoslo, la ventana se ve… fea. Otro problema que tiene es que los menús no dicen nada relacionado con el navegador, como “Recargar”, “Detener” o algo así.

En fin, hay muchos problemas que podríamos encontrarle (¿alguien habrá probado a imprimir?), pero más que eso, es necesario buscar soluciones. Así que busquémoslas.

Nuestro primer problema tiene que ver con las dimensiones de los objetos, en particular, con lo que pasa cuando redimensionamos. Abramos nuestro proyecto y vamos a Interface Builder.

Una de las cosas que notamos en el artículo anterior es que IB funciona, tal como los programas de la suite iWork, con un inspector. Entre los inspectores disponibles, está el de tamaño.

Por ejemplo, si seleccionamos la vista web, su inspector de tamaño aparece así.

¿Cómo podemos usarlo para que se redimensione de manera adecuada? La respuesta es mucho más clara en un video.

Como vemos, el inspector tiene una animación para ayudarnos a imaginar cómo quedará (a grandes rasgos) el objeto. También, como pueden ver, al achicar demasiado la ventana, el sistema falla completamente. Todo eso tiene solución, sin embargo. Basta poner los objetos de una manera práctica y —en un poco de trampa— hacer que la ventana no se redimensione bajo un cierto tamaño. ¿Cómo?, veamos.

Bueno, todo muy bien. Pero igual, no se ve muy profesional que digamos. Tomemos cartas en el asunto y hagamos cuatro detalles que ayudarán notablemente. Primero, los botones. No se ve bien que sean tan distintos, los textos, el ancho. De hecho, mejorarían notablemente si en vez de texto, tuvieran imágenes. Pero, ¿de dónde las sacamos?

Agradablemente, desde Leopard, Apple provee algunas imágenes estándar. Podemos encontrarlas en Interface Builder en la misma paleta de los objetos, en la sección Media. Por ejemplo, para el botón de Atrás, la imagen seleccionada sería ideal.

¿Cómo lo usamos? Nada más fácil. Primero borremos el texto. Luego, en un gesto típicamente Apple, arrastramos la imagen y la soltamos sobre el botón. Hacemos lo mismo con el otro y la imagen correspondiente. Por supuesto, quedan un poco mal de tamaño, como podemos  ver

La solución a esto es ponerlas a un tamaño más apropiado. En este caso, les puse un ancho de 35 pixeles, lo que permite cambiar un poco el tamaño de la barra de direcciones. Con el paso 1 terminado, la aplicación queda así:

Y el paso 2. Bueno, ¿se han fijado en Safari? Las ventanas se ven distintas. En Safari se ve como más llena, y en nuestro navegador como más plana. Para cambiar eso, seleccionamos la ventana en Interface Builder (el borde de arriba) y en el inspector, le pedimos que la ventana sea con textura.

Lo que convierte la ventana anterior en esto (además de subir la barra y los botones un poco y así agrandar el WebView)

El paso 3 es añadir un poco de funcionalidad a la aplicación. Algo común al navegar es necesitar recargar la página. Añadamos un botón para eso. Para que se vea bien, debe ser igual a los otros (salvo la imagen). Lo más fácil es duplicar uno. Para esto, elijamos cualquiera (yo escogí el de adelante) y usemos Command + d. Esto nos da un nuevo botón, cuya imagen podemos configurar (hay una en los templates). Necesitamos conectarlo al método correcto, pues ahora, como buen duplicado, está conectado al método del botón original

Para eso, hacemos clic en la pequeña x para desconectar el método y hacemos, como la semana pasada, la conexión nueva, haciendo control + clic en el botón, arrastrando y soltando en el WebView.

Nos aparece la lista de métodos. Elegimos, claramente, reload.

El cuarto, y último por hoy, paso es con los menús. Si miramos, por ejemplo, el menú File de nuestra aplicación, veremos algo como esto

Ok, close sirve, cierra la ventana. Pero de los otros, casi nada sirve, pues nuestra aplicación no sabe abrir archivos, o guardarlos. Así que borramos los que no sirven agarrándolos y tirándolos fuera de la ventana y desde la paleta de objetos, tiramos algunos nuevos ítems de menús.

Dejamos nuestro nuevo menú así

La guinda de la torta es hacer atajos de teclado para nuestras acciones. Esto es muy fácil, pues basta ir al inspector (con el ítem deseado seleccionado, en este caso lo haré con Reload) y donde dice Key Equivalent, escribir el atajo deseado, en este caso Command + r.

Y así con los otros ítems, hasta dejarlo así (o con los atajos que ustedes prefieran)

Finalmente, para que los menús efectivamente funcionen, los conectamos al WebView del modo usual, es decir, control + clic, arrastrar, soltar sobre el WebView y elegir el método que queremos, que a estas alturas es más bien claro cual.

Y eso. Se ve bastante mejor que antes, lo que nunca es malo.

And one more thing…

Probablemente ya lo notaron, pero el artículo de ayer no fue escrito por ninguno de los tres escritores regulares, si no que por @maxrf. Él es nuestro nuevo escritor, un switcher recientísimo pero con mucho entusiasmo y bueno, le damos la más amplia bienvenida. Estamos convencidos que es una excelente adición al staff y que ustedes, los lectores, sabrán apreciarlo. ¡Enhorabuena!

Anuncios

2 comentarios »

  1. […] lenguajes, Mac, objective c, objetos, Programación, programación orientada a objetos, Xcode Hace algún tiempo, hablábamos acerca de cómo hacer un navegador sin escribir ni una sola línea. Pero la […]

    Pingback por Cocoa: aprendiendo a escribir « ChilenoMac: Mac OS X a la chilena — marzo 18, 2010 @ 12:16 am | Responder

  2. […] Publicado en MacBook, Programación el 17 de Marzo de 2010 a las 4:00 am por varodonaire Hace algún tiempo, hablábamos acerca de cómo hacer un navegador sin escribir ni una sola línea. Pero la […]

    Pingback por Cocoa: aprendiendo a escribir - ChilenoMac — marzo 18, 2010 @ 9:14 pm | Responder


RSS feed for comments on this post. TrackBack URI

Responder

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

Blog de WordPress.com.

A %d blogueros les gusta esto: