Tema 4.3.3 Widgets y Trazas. Interfaz Yamba

1. Análisis y Diseño
de Software
Interfaces de Usuario
La 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. Leyenda
Teoría
Ejercicio práctico en el ordenador
Ampliación de conocimientos
Lectura / Vídeo / Podcast
Prá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,
O'Reilly, 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. Permisos
AndroidManifest.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 - TextView
http://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:inputType
http://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 serio
falla
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