Construyendo aplicaciones con Dashcode Dr. José Martín Molina Espinosa 1
Dashcode: Web IDE Creado en 2006 para la creación de widgets que fueran ejecutados sin necesidad del navegador. En 2008 se define como parte de las herramientas de construcción de aplicaciones para iphone. Programación gráfica + javascript 2
Proyectos predefinidos Tipo browser Navegación de una lista con un menu deslizante Tipo custom Panel listo para agregar componentes Tipo utility Aplicación con un panel de escritura y un panel de ajsutes Tipo RSS Aplicación que permite la lectura de RSS Tipo Podcast Aplicación que presenta un podcast 3
4
Plataformas destino Es posible seleccionar la plataforma destino de la aplicación entre: Safari mobile (iphone, ipad) Safari desktop 5
Pantalla de proyecto Selección de vista del proyecto Plataforma Herramientas Navegador Workflow 6
Herarramienta - Libreria Herramienta de librería se compone de: Los componentes para el diseño de la interfaz gráfica. Segmentos de código con las tareas más usadas en la programación de una aplicación, e.g. get y set de componentes gráficos. Acceso directo a las fotos almacenadas en la Mac. 7
Componentes gráficos Botones Contenedores 8
Componentes gráficos (2) Indicadores Uso de multimedios Formas geométricas Te xto 9
Herramienta-Inspector Herramienta de inspección Se utiliza para la definición de propiedades de los elementos gráficos Atributos Apariencia y color Posición y distribución en la pantalla Texto (color, tipo, alineamiento, espaciado,...) Asociación con variables Comportamiento, asociación de eventos. 10
Plataforma Safari 11
Plataforma Safari mobile 12
Navegador del proyecto 13
Workflow 14
Vistas del proyecto 15
Creando la aplicación Hola Mundo Crear un proyecto tipo Custom llamado HolaMundo Seleccionar la plataforma Mobile Safari Abrir la herramienta de librería y arrastrar un componente Text Arrastrar un botón bajo el componente de texto 16
Aplicación Hola Mundo (2) Seleccionar el botón y abrir la herramienta Inspector Seleccionar la pestaña de eventos (ícono en forma de cubo azul) en el evento onclick definir la función s a luda r Inmediatamente se abrirá la vista de código en la pantalla del proyecto 17
Aplicación Hola Mundo (3) En la librería, seleccionar la pestaña de código. Buscar el snipet Set Text Field Te xt Copiar este código dentro de la función saludar() Grabar y ejecutar la aplicación- 18
Aplicación Hola Mundo (4) Despliegue de la aplicación para su ejecución desde el móvil Configuración del servidor web Apache System Preferences Web Sharing Encender el servidor Apache y verificar que está corriendo desde el navegador http://10.48.148.46/~profesoritesm/ 19
Aplicación Hola Mundo (5) En el navegador del proyecto Dashcode, seleccionar Run & Share Seleccionar el servidor de destino Hacer click sobre Deploy Ejecutar desde el móvil usando el URL generado http://10.48.148.46/~profesoritesm/ CADIHolaMundo/mobile/index.html 20
RSS Rich Site Summary and Really Simple Syndication Dialecto de XML usado para presentar el contenido de un sitio web de forma mormalizada. noticias, entradas de blog, detalle de productos, podcast, etc. 21
Formato RSS Documento XML con raíz de rss Contiene un canal <channel> Título Liga Descripción... Contiene uno o mas elementos <item> Título Descripción Fecha de publicación Liga... 22
Formato RSS <?xml version="1.0" encoding="utf-8"?> <rss xmlns:atom="http://www.w3.org/2005/atom" version="2.0" xmlns:georss="http://www.georss.org/ georss" xmlns:twitter="http://api.twitter.com"> <channel> <title>twitter / MartinMolina</title> <link>http://twitter.com/martinmolina</link> <atom:link href="http://api.twitter.com/1/ statuses/user_timeline.rss?screen_name=martinmolina" rel="self" type="application/rss+xml"/> <description>twitter updates from MartinMolina / MartinMolina.</description> <language>en-us</language> <ttl>40</ttl> rel="nofollow">motoblur</a></ twitter:source> <twitter:place/> </item> </channel> </rss> <item> <title>martinmolina: En Motodev app summit</ title> <description>martinmolina: En Motodev app summit</description> <pubdate>mon, 23 May 2011 15:36:14 +0000</ pubdate> <guid>http://twitter.com/martinmolina/statuses/ 72687287594532864</guid> <link>http://twitter.com/martinmolina/statuses/ 72687287594532864</link> <twitter:source><a href="http:// www.motorola.com" 23
Ejemplo de cliente RSS (1) Crear un proyecto de tipo RSS llamado ClienteRSS Seleccionar la plataforma de Mobile Safari En el explorador, seleccionar Application Atributes En el área de properties, llenar el campo de Feed URL con la siguiente dirección: http://api.twitter.com/1/statuses/ user_timeline.rss?screen_name=martinmolina 24
Ejemplo de cliente RSS (2) Grabar el proyecto Ejecutar el proyecto et voilà! una aplicación web funcionando! 25
Fuentes de datos Se puede asociar una fuente de datos estática o dinámica de tipo XML o JSON a los elementos visuales que aparecen en las vistas Si la recuperación de datos es dinámica, entonces se tiene que construir un modelo de lista para que sea asociado a un template. 26
Formatos de datos AJAX XML Procesamiento a través de DOM JSON Procesamiento a través de arreglos en javascript 27
JavaScript Object Notation Representación de objetos mediante strings Alternativa de represenatción de datos más compacta Objetos JSON Representado por una lista de propiedades y valores dentro de llaves {} { nombre : Martín, apellido : Molina } 28
JSON Arreglos de objetos Definido dentro de corchetes y separados por coma [{...},{...}] [ { nombre : José, apellido : Molina },{ nombre : Martín, apellido : Espinosa } ] 29
Validación de JSON Usar http://json.parser.online.fr/ Probar con http://api.twitter.com/1/ statuses/user_timeline.json? screen_name=martinmolina 30
Creación de cliente de consumo JSON Crear un proyecto tipo Browser intitulado ClienteJSON Seleccionar plataforma Mobile Safari Abrir la vista de data sources Crear una nueva fuente de datos, usando botón derecho sobre el item datasource, llamandola clientejson URL http://api.twitter.com/1/statuses/ user_timeline.json?screen_name=martinmolina 31
Cliente JSON Arrastrar la liga de text hacia el elemento rowtitle de la lista del navegador Modificar la vista de detalle con la información particular del elemento actual de la lista Grabar y ejecutar. 32
Modificación de parámetros de un datasource http://api.t witter.com/1/statuses/ user_timeline.json?screen_name=martinmolina var datasource = dashcode.getdatasource ("datasourceresultados"); datasource.setvalueforkeypath( ITESM, "parameters.screen_name"); setvalueforkeypath vuelve a ejecutar la petición al servidor 33
Cambio de valores en parámetros Modificar el ejemplo anterior para que el usuario pueda seleccionar el screen_name La lista de items del timeline debe actualizarse 34