Cómo hacer tu propio Widget con Dashcode

Después de leer el tutorial que publicaron hace unos días en DownloadSquad sobre cómo crear un widget que permitiera leer los feeds, me he animado y aquí os dejo una pequeña guía con imagénes del proceso y por supuesto el widget final para descargar…

Lo primero tendréis que descargar la utilidad Dashcode, aún en beta, de la web de Apple Developer. Luego lo instaláis y lo ejecutáis (se encuentra en /Developer/Applications) y tendréis una ventana como ésta:

Aquí tendréis que seleccionar la opción que veis marcada (RSS) y entonces os aparecerá una plantilla como ésta:

Si os fijáis, en la columna de la izquierda tenemos una serie de herramientas que son las que utilizaremos para diseñar el widget. Por defecto, los colores, la forma y el resto de la estructura es la que veis en el centro.

Empezaremos definiendo las propiedades más importantes. Para ellos, haremos clic en la opción “Widget Attributes” que se encuentra en la columna de la derecha. Allí tendremos algo parecido a esto:

Aquí tendremos que definir, por orden de arriba a abajo:

1. El identificador del widget, algo parecido a su “Namespace”. En mi caso, lo he definido como com.cmdq.Widget.
2. Dejaremos marcado “Allow Network Access” para que tenga acceso a Internet.
3. Si queréis que muestre contenido como vídeos de YouTube, GoogleVideo, Metacafé y demás, tendremos que marcar “Allow Internet Plugins”. Yo lo he dejado desactivado ya que he hecho varias pruebas y produce algunos errores gráficos, que los achaco a que el software aún está en beta.
4. Tendremos que definir la dirección de nuestro feed (”Feed URL”) así como los artículos que queremos que muestre (”Show Articles”) o de qué antigüedad como máximo. También podemos marcar si queremos que nos muestre la fecha y la hora del comentario (”Show article date and time”) así como qué artículos son nuevos (”Show New Content Badge”).
5. En “Localization”, podemos añadir un idioma y asignar una serie de valores a una serie de clave para que haga la traducción, pero nosotros lo cambiaremos en el mismo diseño.

Ahora vamos a retocar el diseño para dejarlo a nuestro gusto. Es bastante simple. En el menú de la izquierda, en la parte superior tenemos dos grandes grupos: FRONT y BACK, que no son más que los diseños frontal y trasero de nuestro widget, con cada uno de los elementos que los forman.

Haciendo uso de la herramienta “Inspector”, iremos cambiando el aspecto de cada uno de los elementos, cabecera, texto, contenido, pie…

Las opciones son variadas; se nos permite crear degradados de color fácilmente, aplicar las fuentes a nuestro gusto y además es muy fácil cuadrar la posición de los elementos donde queramos ya que incorpora unos marcadores de posición automático al estilo del “Interface Builder” de XCode. Yo voy a dejarlo más o menos así:

Dentro de las propiedades de cada elemento, como por ejemplo el “loading”, encontramos su “KEY” y su “VALUE”. Éste último tendremos que definirlo correctamente para que muestre el texto que queramos (en nuestro idioma, viene por defecto en inglés).

Ya sólo nos queda crear un icono chulo para que aparezca en nuestro Dashboard. Para ello podéis usar GIMP, Photoshop, etc. Yo he diseñado uno simple como éste:

Para añadirlo, no tenéis más que ir al menú “Widget Icon” del menú de la izquierda y localizarlo vía Finder o arrastrarlo desde cualquier archivo de imagen. Ya sólo nos falta probarlo. En la barra superior tenemos un botón PLAY, PAUSE y STOP, que nos permitirán depurar el comportamiento de nuestro widget. Aquí tengo el mío en marcha:

Cuando veamos que funciona como Dios manda, sólo tenemos que guardar el proyecto y el widget para Dashboard. Para ello, usaremos la opción “Deploy Widget” del menú File. Le pondremos el nombre que queramos y le indicaremos dónde queremos guardarlo. Podemos hacerlo compatible con OS X 10.4.3 en adelante o bien darle compatibilidad también a versiones anteriores.

Guardaremos el proyecto y haremos doble clic en el archivo generado para instalarlo en nuestro Dashboard. Queda la mar de bien funcionando. Podéis descargar el widget terminado aquí. Espero que os haya gustado la guía. Os agradecería cualquier comentario o mejora.

Technorati tags: Apple Dashboard Dashcode Widget Widget Tutorial Dashcode Tutorial