Análisis y Diseño      de SoftwareInterfaces de UsuarioLa aplicación Yamba      Carlos A. Iglesias <cif@gsi.dit.upm.es>   ...
LeyendaTeoríaEjercicio práctico en el ordenadorAmpliación de conocimientosLectura / Vídeo / PodcastPráctica libre / Experi...
Temario● 4.1   Introducción a Android [Gar10, cap1-2 ]● 4.2   Desarrollo con Android [Gar10, cap3-5]● 4.3   Interfaces de ...
Bibliografía●   Libro de texto:    –   [Gar10] Learning Android, Marko Gargenta,        OReilly, 2010. Disponible en      ...
Objetivos● Ver un ejemplo más complejo de interfaces de usuario● Aprender más detalles de algunos widgets (TextView, Butto...
La aplicación Yamba●    Vamos a hacer una aplicación sencilla que    tuitea                          Interfaces de Usuario...
Mensajes publicados●Puedes  publicar tus mensajes en twitter o en marakana (yamba.markana.com), créate una cuenta.        ...
Comenzamos Yamba v1 (I)● Puedes crearlo o partir del proyecto Yamba-ADSW● Crear proyecto Android    –   Seleccionar Androi...
Otros cambios●   StatusActivity0.java●res/values/strings.xml                           Interfaces de Usuario   9
Ejecutar●   Compila y se ejecuta, pero no hace nada...●   Vamos a extender StatusActivity0.java    –   Programación progra...
Modificando una actividad●   En Android, no podemos cambiar el estado    de una Actividad●   Pero sí podemos indicar al Ac...
Añadir una biblioteca● Vamos a usar una biblioteca que nos conecta con twitter: jtwitter-yamba.jar● Proyecto->Botón Dcho->...
Si te da problemas al                 ejecutar...●   “Limpia” para regenerar todo    –   Project->Clean● Mete el jar en un...
Manifiesto● Para ir progresando en el ejemplo, vamos a crear diferentes versiones de StatusActivity y status.xml: StatusAc...
Permisos - Manifest● Para publicar en Twitter, vamos a usar la red, y el usuario debe autorizarlo● Los permisos se indican...
PermisosAndroidManifest.xml          Interfaces de Usuario   16
Layout    Interfaces de Usuario   17
StatusActivity1.java (I)             Interfaces de Usuario   18
StatusActivity1.java (II)                - Recupera el estado guardado                - Fija status2.xml como layout      ...
Widgets básicos: TextView●   Son las etiquetas (Label) de Android●   No son editables               Realmente sí son      ...
Ejemplo - TextViewhttp://developer.android.com/reference/android/widget/TextView.html                                     ...
Widgets básicos: EditText   ●    Es una subclase de TextView, para campos       editables. Permite personalizarlo para el ...
Widgets básicos: Button● Button es una subclase de TextView●Tenemos botones de texto (Button), con imagen (ImageButton), c...
Button●   ¿Cómo asignamos la conducta al botón?    –   En el xml android:onClick=”método” (visto en        SobreTeleco)   ...
Implementación anónima de       la interfaz             Interfaces de Usuario   25
Java – implementación de         interfaz             Interfaces de Usuario   26
¿Qué opción es mejor?● Definir   android:onClick  –   Mayor acoplamiento entre parte Java y XML  –   Bueno si hay personas...
Widgets básicos:    ImageView / ImageButton●Subclases  de TextView y Button, respectivamente● Permiten incluir imágenes (s...
Patrón Template (Plantilla)●La actividad sigue el patrón plantilla●Una clase abstracta define métodos o pasos que queremos...
Trazas - Depuración●   Según va ejecutando el programa    –   estoy aquí ...    –   esta variable vale tanto ...●De    for...
Trazas – System.out.println● Se   pueden meter sentencias explícitas  –   System.out.println(“estoy aquí ...”);  –   Syste...
Puesta a punto         pruebas        desarrollo               fallo seriofalla         pruebas        pasa         detall...
Logging en Android●    Al poner un mensaje de traza, indicamos    “su relevancia”:    –   Argumentos TAG, msg. Se recomien...
Ver trazas y depurar●    Perspectiva DDMS    (Dalvik Debug Monitor Server)    –   View LogCat                          Int...
Filtrar trazas●    Podemos filtrar para ver menos tranzas    (por log, etc.)                          Interfaces de Usuari...
Loggers●   Poner loggers (en vez de System.err.println    o System.out.println)    –   Permite analizar qué ha pasado    –...
Loggers en Java● En Java tenemos el paquete estándar java.util.logging● La clase que nos da un logger es java.util.logging...
Conclusiones Loggers /               Trazas● Cuando     un programa no funciona  –   las trazas descubren cómo se llega al...
Resumen● Hemos    aprendido a programar actividades● Lainterfaz de las actividades se programa en XML, donde especificamos...
¿Preguntas?      Interfaces de Usuario   40
Upcoming SlideShare
Loading in …5
×

Tema 4 3_3_interfaces_de_usuario

910 views

Published on

Tema 4.3.3 Widgets y Trazas. Interfaz Yamba

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
910
On SlideShare
0
From Embeds
0
Number of Embeds
197
Actions
Shares
0
Downloads
36
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Tema 4 3_3_interfaces_de_usuario

  1. 1. Análisis y Diseño de SoftwareInterfaces de UsuarioLa aplicación Yamba Carlos A. Iglesias <cif@gsi.dit.upm.es> Departamento de Ingeniería de Sistemas Telemáticos http://moodle.dit.upm.es
  2. 2. LeyendaTeoríaEjercicio práctico en el ordenadorAmpliación de conocimientosLectura / Vídeo / PodcastPráctica libre / Experimentación Interfaces de Usuario 2
  3. 3. Temario● 4.1 Introducción a Android [Gar10, cap1-2 ]● 4.2 Desarrollo con Android [Gar10, cap3-5]● 4.3 Interfaces de Usuario [Gar10, cap6] – 4.3.1 Ejemplo SobreTeleco – 4.3.2 Layouts y Views – 4.3.3 Widgets y Trazas. Interfaz del proyecto Yamba – 4.3.4 Hebras e Internacionalización. Interfaz Yamba● 4.4 Intenciones y Servicios [Gar10, cap7-8]● 4.5 Acceso a Datos [Gar10, cap9] Interfaces de Usuario 3
  4. 4. Bibliografía● Libro de texto: – [Gar10] Learning Android, Marko Gargenta, OReilly, 2010. Disponible en http://ofps.oreilly.com/titles/9781449390501/ – Capítulos 7 – http://www.youtube.com/watch?v=SW82-YOOMIs● Android Developers – http://developer.android.com/guide/topics/fundamentals.html – http://developer.android.com/guide/topics/ui/index.html Interfaces de Usuario 4
  5. 5. Objetivos● Ver un ejemplo más complejo de interfaces de usuario● Aprender más detalles de algunos widgets (TextView, Button, EditText)● Aprender a depurar con trazas Interfaces de Usuario 5
  6. 6. La aplicación Yamba● Vamos a hacer una aplicación sencilla que tuitea Interfaces de Usuario 6
  7. 7. Mensajes publicados●Puedes publicar tus mensajes en twitter o en marakana (yamba.markana.com), créate una cuenta. Interfaces de Usuario 7
  8. 8. Comenzamos Yamba v1 (I)● Puedes crearlo o partir del proyecto Yamba-ADSW● Crear proyecto Android – Seleccionar Android 2.3.3 – Seleccionar paquete com.marakana.yamba – Actividad: StatusActivity0● Copia los recursos de resYamba.zip (icono de la aplicación y el fondo) Interfaces de Usuario 8
  9. 9. Otros cambios● StatusActivity0.java●res/values/strings.xml Interfaces de Usuario 9
  10. 10. Ejecutar● Compila y se ejecuta, pero no hace nada...● Vamos a extender StatusActivity0.java – Programación programática Interfaces de Usuario 10
  11. 11. Modificando una actividad● En Android, no podemos cambiar el estado de una Actividad● Pero sí podemos indicar al ActivityManager qué debe ejecutar cuando una actividad cambia de estado – Vamos a sobreescribir onCreate() para asignar conducta a los botones Interfaces de Usuario 11
  12. 12. Añadir una biblioteca● Vamos a usar una biblioteca que nos conecta con twitter: jtwitter-yamba.jar● Proyecto->Botón Dcho->Propiedades-> Build Path->Add Jar Interfaces de Usuario 12
  13. 13. Si te da problemas al ejecutar...● “Limpia” para regenerar todo – Project->Clean● Mete el jar en un directorio lib o libs● En Project->Properties->Java Build Path – Selecciona todo en Order and Export y confirma● Vuelve a probar...● http://android.foxykeep.com/dev/how-to-fix- the-classdefnotfounderror-with-adt-17 Interfaces de Usuario 13
  14. 14. Manifiesto● Para ir progresando en el ejemplo, vamos a crear diferentes versiones de StatusActivity y status.xml: StatusActivity0.java / status0.xml … StatusActivity3.java / status3.xml● Para ir cambiando de una a otra, debemos cambiar en AndroidManifest.xml Interfaces de Usuario 14
  15. 15. Permisos - Manifest● Para publicar en Twitter, vamos a usar la red, y el usuario debe autorizarlo● Los permisos se indican en el Manifesto (uses- permission) – http://developer.android.com/reference/android/Manifest.permission.html – Ej. android.permission.INTERNET // Usar Internet – android.permission.CALL_PHONE // Llamar – android.permission.NFC – android.permission.READ_SMS – android.permission.SEND_SMS Interfaces de Usuario 15
  16. 16. PermisosAndroidManifest.xml Interfaces de Usuario 16
  17. 17. Layout Interfaces de Usuario 17
  18. 18. StatusActivity1.java (I) Interfaces de Usuario 18
  19. 19. StatusActivity1.java (II) - Recupera el estado guardado - Fija status2.xml como layout - creamos el objeto twitter para conectarnos - pon tu usuario/contraseña - si usas twitter, comenta setAPIRootUrl - pasa del XML a Java - fija unOnClickListener en el botón - implementamos OnClickListener(): recuperamos el texto de editText y lo ponemos como status en twitter - creamos una traza (log) para Interfaces de Usuario 19 depurar
  20. 20. Widgets básicos: TextView● Son las etiquetas (Label) de Android● No son editables Realmente sí son editables, pero usaremos otra clase (EditText) para eso Interfaces de Usuario 20
  21. 21. Ejemplo - TextViewhttp://developer.android.com/reference/android/widget/TextView.html Interfaces de Usuario 21
  22. 22. Widgets básicos: EditText ● Es una subclase de TextView, para campos editables. Permite personalizarlo para el tipo de campo: – android:hint: pista para rellenar el campo – android:inputType : tipo de entrada (textEmailAddress, textUri, textPassword, autoText (usa corrector ortográfico), …) ● Mismos métodos getText()/setText() http://developer.android.com/reference/android/widget/TextView.html#attr_android:inputTypehttp://developer.android.com/reference/android/widget/EditText.html Interfaces de Usuario 22
  23. 23. Widgets básicos: Button● Button es una subclase de TextView●Tenemos botones de texto (Button), con imagen (ImageButton), con 2 estados (ToggleButton), ….http://developer.android.com/resources/tutorials/views/hello-formstuff.html Interfaces de Usuario 23
  24. 24. Button● ¿Cómo asignamos la conducta al botón? – En el xml android:onClick=”método” (visto en SobreTeleco) – En Java, implementando la interfaz onClickListener • De forma anónima o no Interfaces de Usuario 24
  25. 25. Implementación anónima de la interfaz Interfaces de Usuario 25
  26. 26. Java – implementación de interfaz Interfaces de Usuario 26
  27. 27. ¿Qué opción es mejor?● Definir android:onClick – Mayor acoplamiento entre parte Java y XML – Bueno si hay personas diferentes para hacer la interfaz (XML) y la lógica (Java)● Definir la interfaz o hacerla anónima – Al implementar onClick, un único método onClick para toda la actividad – si queremos distinguir, deberíamos mirar el id (v.getId() si queremos distinguir según dónde hayas pinchado). Bueno si queremos la misma conducta pinches donde pinches. – Implementarla anónima, generalmente la mejor opción, permite separar conducta por elemento Interfaces de Usuario 27
  28. 28. Widgets básicos: ImageView / ImageButton●Subclases de TextView y Button, respectivamente● Permiten incluir imágenes (sin nada o con botón)● La imagen debe ser un recurso (en res/drawable)●se define en los atributos android:src (foreground) y/o android:background http://developer.android.com/reference/android/widget/ImageView.html Interfaces de Usuario 28
  29. 29. Patrón Template (Plantilla)●La actividad sigue el patrón plantilla●Una clase abstracta define métodos o pasos que queremos ejecutar y las subclases “rellenan” estos pasos http://en.wikipedia.org/wiki/Template_method_pattern Interfaces de Usuario 29
  30. 30. Trazas - Depuración● Según va ejecutando el programa – estoy aquí ... – esta variable vale tanto ...●De formas que podemos ir “siguiendo la ejecución” – con diferentes niveles de detalle Interfaces de Usuario 30
  31. 31. Trazas – System.out.println● Se pueden meter sentencias explícitas – System.out.println(“estoy aquí ...”); – System.out.println(“variable= “ + valor);● Problemas – hay que editar el programa – cada vez que queremos cambiar una traza – cuando se entrega el programa – hay que editarlo y quitar las trazas – si el programa está compilado y algo falla, – hay que editarlo para ver qué pasa Interfaces de Usuario 31
  32. 32. Puesta a punto pruebas desarrollo fallo seriofalla pruebas pasa detalle ¿dónde falla qué? trazas pruebas de aceptación falla pasa Interfaces de Usuario 32
  33. 33. Logging en Android● Al poner un mensaje de traza, indicamos “su relevancia”: – Argumentos TAG, msg. Se recomienda que TAG sea una constante privada de la clase – Log.wtf (no debería suceder, What a Terrible Failure, Log.e(), Log.w(), Log,i(), Log.d(), Log.v() ERROR WARN INFO DEBUG VERBOSE Interfaces de Usuario 33
  34. 34. Ver trazas y depurar● Perspectiva DDMS (Dalvik Debug Monitor Server) – View LogCat Interfaces de Usuario 34
  35. 35. Filtrar trazas● Podemos filtrar para ver menos tranzas (por log, etc.) Interfaces de Usuario 35
  36. 36. Loggers● Poner loggers (en vez de System.err.println o System.out.println) – Permite analizar qué ha pasado – Hay otros programas (de gestión del servicio) que pueden analizar estos logs para generar alarmas si hay errores, y que se arregle Interfaces de Usuario 36
  37. 37. Loggers en Java● En Java tenemos el paquete estándar java.util.logging● La clase que nos da un logger es java.util.logging.Logger● Para que una clase tenga logger, se declara un campo static – private static final Logger log = Logger.getLogger(“nombre.de.la.clase”);● Niveles: FINEST, FINER, FINE, CONFIG, INFO, WARNING, SEVERE● En la clase, generamos las trazas: – log.info(msg), log.warning(msg), log.severe(msg), log.finer(msg), …● El nivel de trazas se define en un fichero, java.logger, con sintaxis propia Interfaces de Usuario 37
  38. 38. Conclusiones Loggers / Trazas● Cuando un programa no funciona – las trazas descubren cómo se llega al fallo● Las trazas son una inversión a futuro – deben quedar en el código para siempre – pero con el nivel de detalle mínimo (errores) si no estamos depurando● Conviene controlar el detalle de trazado● Ver apuntes de la asignatura – http://www.lab.dit.upm.es/~lprg/material/apuntes/log/lo g.htm Interfaces de Usuario 38
  39. 39. Resumen● Hemos aprendido a programar actividades● Lainterfaz de las actividades se programa en XML, donde especificamos contenedores (Layout) y widgets (View)● Debemos añadir dependencias como bibliotecas (jar) en el proyecto● Hemos visto la relación entre Java y XML para varios widgets: TextView, EditText, Button, ImageView, ImageButton● Las trazas facilitan la depuración de programas Interfaces de Usuario 39
  40. 40. ¿Preguntas? Interfaces de Usuario 40

×