Tema 4 3_3_interfaces_de_usuario
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Tema 4 3_3_interfaces_de_usuario

on

  • 1,094 views

Tema 4.3.3 Widgets y Trazas. Interfaz Yamba

Tema 4.3.3 Widgets y Trazas. Interfaz Yamba

Statistics

Views

Total Views
1,094
Views on SlideShare
899
Embed Views
195

Actions

Likes
0
Downloads
33
Comments
0

1 Embed 195

https://moodle.lab.dit.upm.es 195

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Tema 4 3_3_interfaces_de_usuario Presentation Transcript

  • 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. LeyendaTeoríaEjercicio práctico en el ordenadorAmpliación de conocimientosLectura / Vídeo / PodcastPráctica libre / Experimentación Interfaces de Usuario 2
  • 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. 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. 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. La aplicación Yamba● Vamos a hacer una aplicación sencilla que tuitea Interfaces de Usuario 6
  • 7. Mensajes publicados●Puedes publicar tus mensajes en twitter o en marakana (yamba.markana.com), créate una cuenta. Interfaces de Usuario 7
  • 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. Otros cambios● StatusActivity0.java●res/values/strings.xml Interfaces de Usuario 9
  • 10. Ejecutar● Compila y se ejecuta, pero no hace nada...● Vamos a extender StatusActivity0.java – Programación programática Interfaces de Usuario 10
  • 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. 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. 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. 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. 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. PermisosAndroidManifest.xml Interfaces de Usuario 16
  • 17. Layout Interfaces de Usuario 17
  • 18. StatusActivity1.java (I) Interfaces de Usuario 18
  • 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. 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. Ejemplo - TextViewhttp://developer.android.com/reference/android/widget/TextView.html Interfaces de Usuario 21
  • 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. 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. 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. Implementación anónima de la interfaz Interfaces de Usuario 25
  • 26. Java – implementación de interfaz Interfaces de Usuario 26
  • 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. 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. 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. 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. 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. 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. 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. Ver trazas y depurar● Perspectiva DDMS (Dalvik Debug Monitor Server) – View LogCat Interfaces de Usuario 34
  • 35. Filtrar trazas● Podemos filtrar para ver menos tranzas (por log, etc.) Interfaces de Usuario 35
  • 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. 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. 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. 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. ¿Preguntas? Interfaces de Usuario 40