Conversor de temperatura (1a parte)

Comenzar: Crear el proyecto

XCodeEl primer paso es abrir Xcode y crear un nuevo proyecto para nuestro programa.

Busca Xcode en la carpeta /Developer/Applications de tu disco duro y abre el programa

Cuando se ejecuta por primera vez hace una serie de preguntas, en general dejar los ajustes por defecto da buen resultado.

Aunque aparentemente no ha pasado nada (no se ha abierto ninguna ventana) verás que en la barra de menú pone Xcode y aparece el correspondiente icono en el Dock.

En la barra de menú selecciona File|new Project y verás como se abre el asistente. Como lo que estamos haciendo es una aplicación cocoa seleccionala y haz un click en siguiente (Next).

Asistente XCode

El siguiente paso es escoger el nombre y la carpeta donde estarán los ficheros del proyecto. Selecciona como nombre Temperatura y como carpeta ~/proyectos/temperatura (1) y haz click en acabar (Finish)

Asistente XCode, carpetas

Después de un cierto trabajo por parte del ordenador ha de aparecer la ventana del proyecto. con los elementos que lo componen.

El proyecto

Hasta el momento nosotros no hemos hecho gran cosa, pero el asistente nos ha creado la infrastructura necesaria para el programa. Crea las carpetas necesarias, el fichero fuente principal, un prototipo (vacio) de ventana y el sistema que informa al compilador de que librerias usar.

Crear la ventana del programa

Una vez creado el proyecto con el esqueleto de nuestro programa hay que crear los elementos que contendrá. En primer lugar vamos a crear la ventana del programa junto con los elementos que nos mostrará en pantalla.

Interface BuilderEl programa que nos permite "dibujar" la ventana es el Interface Builder . No hace falta que lo ejecutemos por separadado ya que el mismo xcode lo lanza cuando hace falta.

Ver la ventana

En la ventana de nuestro proyecto hay que hacer un doble clic en MainMenu.nib. Los ficheros *.nib contienen la interficie del programa y se manejan con el Interface Builder. Nada más iniciarse nos aparecerán tres ventanas.

Ventanas Interface Builder

Nombre de la ventana

  • Selecciona dentro del menú la opción Tools|Show Info, aparace una nueva ventana con información sobre el objeto seleccionado.
    Cambiar nombre a la ventana
  • Aquí se puede cambiar el nombre de la ventana, cambialo a "Conversión de temperatura"

Tamaño y colocación de nuestra aplicación

  • Dentro de la misma ventana de información en la parte superior escoge que muestre el tamaño de la ventana (size) en el menú pop-up.
    Cambiar el tamaño de la ventana
  • El tamaño se puede cambiar en esta ventana o simplemente moviendola
    donde quieras dejarla y ampliandola de la esquina inferior izquierda.

Añadir campos de texto

  • En la ventana de elementos (Tools|Palletes) selecciona el texto
    Añadiendo texto
  • Arrastra el icono del texto hasta la ventana y colocalo aproximadamente en la esquina superior derecha. Verás que cuando te acercas a los bordes se muestran una lineas azules que ayudan a colocar el texto en unas posiciones predeterminadas.
    Ventana en construcción
  • Duplica el campo de texto y colocalo (siguiendo las lineas azules) debajo
    del campo anterior. Este serà el campo de salida.
  • En la ventana de propiedades de este último campo selecciona los atributos del campo (Attributes) y haz que la marca editable no este seleccionada. Deja el campo activado (Enabled) y seleccionable (Selectable)

Poner etiquetas de texto

  • Arrastra el "System Font Text" a la ventana, y colocalo con la ayuda de la lineas auxiliares
    Añadiendo etiquetas
  • En la ventana de información cambia el título de la ventana (title) por "Temperatura en Fahrenheit".
    Información del Campo de texto
  • Para ajustar el nuevo tamaño de la etiqueta lo puedes hacer con el ratón o con la opción de menu "Layout > Fit". A lo mejor tienes que recolocar la etiqueta para que no quede demasiado cerca del campo de texto.
  • Crea de forma similar a la anterior una etiqueta para el segundo campo de texto "Temperatura en Celsius"

Añadir botones de selección

En la paleta de controles escoge los botones de radio y colocalos en la ventana. Cambia el texto de cada botón "A Fahrenheit" y "A Celsius". Fijate que se puede seleccionar cada botón por seprado (NSButtonCell) o los dos botones a la vez (NSMatrix). En los atributos que cada uno de los botones se puede ver que además del texto lo que les hace diferentes es la etiqueta (tag) de cada botón. Esta etiqueta nos interesa ya que más adelante (cuando escribamos código) nos permitirá saber cual de los dos botones esta activado (y por tanto que operación se ha de realizar).

Botones radio

Añadir el botón de conversión

  • En la paleta de controles escoger el botón y añadirlo a la
    ventana.
  • En la ventana de propiedades del botón Cambiar el Título a
    "Convertir"
  • En la misma ventana de propiedades, en la pestaña de atributos (attributes)
    hacer que la tecla equivalente (Key Equiv.) sea el retorno (Return)
    Añadiendo botones

Modificar la barra de menús

  • Si en lugar de la ventana escogemos el menú de la aplicación lo podemos personalizar de la misma forma que la ventana. Por ejemplo podemos dejarlo así:
    Menú del programa

Ajustar el tamaño y probar

  • Una vez que tenemos todos los elementos es el momento de ajustar nuestra
    ventana a su tamaño definitivo. Se puede hacer que la ventana tenga
    un tamaño predeterminado haciendo que en la ventana de propiedades
    el tamaño máximo y mínimo sean iguales a los actuales
    (current).
  • Para probar nuestro esqueleto de programa se puede acudir al menú
    File > test intreface. El resultado tendría que ser parecido a este:
    Ventana del programa

    Listo ya tenemos la ventana de la aplicación bien bonita y lista para trabajar. Claro que todavía no hace nada….

(1) el Símbolo ~ indica la carpeta del usuario

Continua en: Conversor de temperaturas, 2a parte

7 comentarios to “Conversor de temperatura (1a parte)”

  1. estoy empezando a programar Says:

    al hacer doble clic en el main menu no me aparece la ventana del cocoa controls aun no encuentro la manera de hacer que se muestre

  2. estoy empezando a programar Says:

    saludos de antemano, tengo la version xcode 3,0 espero tu respuesta gracias

  3. luisrey Says:

    Lo importante es estar en Interface Builder. Si es así, lo único que pasa es que la paleta de controles no está visible o bien muestra otro conjunto de elementos diferentes a los controles (Cocoa-menus, Cocoa-Text, …).
    Simplemente ves al menú “Tools | Palettes | Show Palettes”. Por defecto lo primero que muestra son los controles Cocoa, pero si has estado tocando cosas es posible que muestre otra paleta. Ves probando hasta que encuentres los controles :).
    Un Saludo, Luis

  4. Adriana Says:

    Hola quisiera saber si xcode es un programa para descargar o algo asi, es que la verdad no se como encontrarlo podrias explicarme

  5. felixalonso Says:

    Bueno arranco de -1 y me apunto a tu blog.

    Parece realmente interesante, ánimo y ya tienes un asiduo más.

    Salud!

  6. luisrey Says:

    Adriana:
    XCode es el programa de Apple para programar en Mac OSX. Lo puedes encontrar en el disco de instalación del sistema operativo. O bien descargarlo de la página web de Apple: http://developer.apple.com/tools/xcode/ Desde la página de Apple pide que te registres como programadora para poder hacer la descarga.

  7. Glenda Says:

    que buena información, es muy poca la informacion sobre cocoa y objective c

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


A %d blogueros les gusta esto: