Tema 4 3_4_interfaces_de_usuario
-
Upload
carlos-iglesias -
Category
Technology
-
view
1.152 -
download
0
description
Transcript of Tema 4 3_4_interfaces_de_usuario
![Page 1: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/1.jpg)
Análisis y Diseño de Software
Departamento de Ingeniería de Sistemas Telemáticoshttp://moodle.dit.upm.es
Interfaces de UsuarioHebras e Internacionalización.Interfaz Yamba
Carlos A. Iglesias <[email protected]>
![Page 2: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/2.jpg)
Interfaces de Usuario 2
Teoría
Ejercicio práctico en el ordenador
Ampliación de conocimientos
Lectura / Vídeo / Podcast
Práctica libre / Experimentación
Leyenda
![Page 3: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/3.jpg)
Interfaces de Usuario 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]
![Page 4: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/4.jpg)
Interfaces de Usuario 4
Bibliografía
● Libro de texto: – [Gar10] Learning Android, Marko Gargenta,
O'Reilly, 2010. Disponible en http://ofps.oreilly.com/titles/9781449390501/
– Capítulos 6– http://www.youtube.com/watch?v=-P1eiRy-klk&list=PLE08A97D36D5A255F&index=10&feature=plpp_video
– http://www.youtube.com/watch?v=CzKYgi80yUw&list=PLE08A97D36D5A255F&index=11&feature=plpp_video
● Android Developers– http://developer.android.com/guide/topics/fundamentals.html
– http://developer.android.com/guide/topics/ui/index.html
![Page 5: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/5.jpg)
Interfaces de Usuario 5
Objetivos
● Entender cómo funcionan la concurrencia y las hebras en Android
● Aprender a internacionalizar una aplicación
![Page 6: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/6.jpg)
Interfaces de Usuario 6
Hebras en Android
● Android se basa en Linux, por lo que utiliza el sistema de gestión de hebras de linux
● Vamos a ver cómo usar las hebras al programar en Android
![Page 7: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/7.jpg)
Interfaces de Usuario 7
Ejecución Monohebra
● Por defecto, una aplicación Android ejecuta sólo una hebra (single thread):– Cada instrucción se ejecuta, una a
continuación de otra– Cada llamada es bloqueante– La hebra que se ejecuta es la hebra de interfaz
de usuario (UI thread), es responsable de 'pintar' y de capturar los eventos del usuario
– Ejecución monohebra:
![Page 8: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/8.jpg)
Interfaces de Usuario 8
¿Qué pasa si se cuelga una actividad?
● El sistema operativo está 'atento', y si una actividad no responde (normalmente 5 segundos), nos avisa para que 'la matemos'– Diálogo ANR (Application Not Responding)
![Page 9: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/9.jpg)
Interfaces de Usuario 9
Problema monohebra: bloqueo UI
Solución: usamos hebras
![Page 10: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/10.jpg)
Interfaces de Usuario 10
Ejemplo
● Una aplicación que se descarga un fichero
Android in Practice, Collins et al., 2011,Cap 6, Manning. Ejemplo disponible en http://www.manning.org/collins
![Page 11: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/11.jpg)
Interfaces de Usuario 11
Interfaz main.xml (I)
![Page 12: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/12.jpg)
Interfaces de Usuario 12
Interfaz main.xml (II)
![Page 13: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/13.jpg)
Interfaces de Usuario 13
Actividad: SimpleImageDownload (I)
Creo un objeto 'Runnable' para descargar la imagen
![Page 14: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/14.jpg)
Interfaces de Usuario 14
Actividad: SimpleImageDownload (II)
Al pinchar el botón, creo una hebra con el objeto Runnable y ejecuto start()
![Page 15: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/15.jpg)
Interfaces de Usuario 15
Para ver si ha terminado... trazas
![Page 16: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/16.jpg)
Interfaces de Usuario 16
Podemos depurar para ver las hebras
Proceso del sistema
Nuestro proceso1. Click – Selecciono proceso
2. Depurar
3. Depurar hebras
4. Ver hebras (actualizar)
![Page 17: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/17.jpg)
Interfaces de Usuario 17
Nuestra hebra
UI Thread
![Page 18: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/18.jpg)
Interfaces de Usuario 18
Análisis
● ¿Cuánto vive la hebra?– Termina cuando termina el método run(). Puede
terminar más tarde que la Actividad / Servicio que lo inició → No debería tener referencias a estos objetos, puede darnos problemas
● Es una 'mala solución' – No podemos indicar en la interfaz que hemos terminado
● ¿Qué pasa si damos muchas veces al botón? → Generamos muchas hebras...
![Page 19: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/19.jpg)
Interfaces de Usuario 19
Soluciones
● Problemas para actualizar UI desde la hebra– Creamos varias hebras (la UI y otras) y las
comunicamos: Handler
● Problemas si piden muchas hebras– Creamos un 'pool' de hebras y sólo tenemos
ese número activo– Así además reutilizamos las hebras y no hace
falta crearlas cada vez: ThreadPoolExecutor
![Page 20: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/20.jpg)
Interfaces de Usuario 20
Ejecución multihebra
● Separamos tareas 'que tardan mucho' en diferentes hebras
● Así, simulamos mayor paralelismo, y la interfaz responde sin penalizaciones
● Casos normales de una hebra:– Un servicio de actualización que se ejecuta de
fondo (background) – Un calculo que lleva mucho tiempo– Almacenamiento de datos en tarjeta SD
![Page 21: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/21.jpg)
Interfaces de Usuario 21
¿Cómo programamos esto en Android?
● Definiendo un servicio que se ejecuta de fondo y envía notificaciones a la interfaz (lo veremos, es la 'opción mejor')
● Usando una hebra (thread) de fondo– Usando la clase Thread y Handler directamente
• Las hebras no pueden notificar directamente a la hebra de interfaz UI
– Usando la clase AsyncTask, que facilita ejecutar tareas de fondo y publicar resultados en la hebra UI principal
![Page 22: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/22.jpg)
Interfaces de Usuario 22
Hebras
● En Android, tenemos una hebra principal, la UIThread, que es responsable de la interfaz
● Esta hebra puede crear otras hebras secundarias que NO pueden acceder a la interfaz
● La comunicación entre la hebra ppal y las secundarias se hace con un Handler
![Page 23: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/23.jpg)
Interfaces de Usuario 23
Handler
● Al comunicarnos con la hebra principal con un Handler, podemos hacer dos cosas:– Intercambiar mensajes de la cola de mensajes
del Handler– Pasar objetos Runnables para que los ejecute
la hebra principal
http://developer.android.com/reference/android/os/Handler.html
![Page 24: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/24.jpg)
Interfaces de Usuario 24
Comunicación hebras Mensajes
<<Thread>>Hebra principal (UI)
Handler h
<<Thread>>Hebra secundaria 1
<<Thread>>Hebra secundaria 1
1. Message msg = h.obtainMessage()
2. h.sendMessage(msg)
handleMessage(Message msg)
Constructor con patrón de diseño
Factoría para reutilizar objetos
![Page 25: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/25.jpg)
Interfaces de Usuario 25
Esquema paso mensajes
HebraPrincipal extends Activity {private Handler h = new Handler() {public void handleMessage(Message msg) {
// procesa mensajes}
metodo() { // crea una hebra secundaria Thread th = new Thread(new Runnable(){ // método de la hebra secundaria ... Message msg = h.obtainMessage(); h.sendMessage(msg); ... }); } }
![Page 26: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/26.jpg)
Interfaces de Usuario 26
Comunicación hebrasCola de Tareas
<<Thread>>Hebra principal (UI)
Handler h
<<Thread>>Hebra secundaria 1
<<Thread>>Hebra secundaria 1
<<Runnable>>Runnable r2
h.post(r1)
h.postAtFrontOfQueue(r2)
<<Runnable>>Runnable r1
![Page 27: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/27.jpg)
Interfaces de Usuario 27
Esquema paso tareasHebraPrincipal extends Activity {
private Handler h = new Handler() {public void onCreate() {
…Thread th = new Thread(r2, “Background”);th.start();
}private Runnable r1 = new Runnable() {
public void run() {// actualizo UI
}}private Runnable r2 = new Runnable() {
public void run() {// ejecuto cosash.post(r1);
}}
}
![Page 28: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/28.jpg)
Interfaces de Usuario 28
Más detalle
Sólo el thread principal tiene un objeto Looper, a través del que
accede a la cola de mensajes en un bucle
![Page 29: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/29.jpg)
Interfaces de Usuario 29
Ejemplo con mensajes
● Vamos a hacer una aplicación que vaya mostrando el progreso de la tarea de fondo
● Usaremos ProgressBar
![Page 30: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/30.jpg)
Interfaces de Usuario 30
Interfaz main.xml (I)
![Page 31: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/31.jpg)
Interfaces de Usuario 31
Interfaz main.xml (II)
![Page 32: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/32.jpg)
Interfaces de Usuario 32
Actividad (I)
![Page 33: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/33.jpg)
Interfaces de Usuario 33
Actividad (II)
![Page 34: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/34.jpg)
Interfaces de Usuario 34
Actividad (III)
![Page 35: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/35.jpg)
Interfaces de Usuario 35
Ejecución
![Page 36: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/36.jpg)
Interfaces de Usuario 36
Ejemplo paso de tareas
![Page 37: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/37.jpg)
Interfaces de Usuario 37
main.xml
![Page 38: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/38.jpg)
Interfaces de Usuario 38
Actividad (I)
![Page 39: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/39.jpg)
Interfaces de Usuario 39
Actividad (II)
![Page 40: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/40.jpg)
Interfaces de Usuario 40
Actividad (III)
![Page 41: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/41.jpg)
Interfaces de Usuario 41
Usando AsyncTask
● Usar las hebras directamente es tedioso
● Android proporciona AsyncTask– Permite crear una hebra de fondo que publica
en la hebra UI sin tener que programar Threads o Handlers
– Definimos una tarea 'asíncrona' que se ejecuta de fondo y publica sus resultados en la hebra UI
![Page 42: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/42.jpg)
Interfaces de Usuario 42
AsyncTask – Uso básico● Hebras: UI Thread (UITh) y Background Thread
(BGTh, la AsyncTask) ●Tipos genéricos: Params, Progress, Result● Estados principales
– onPreExecute (UITh)– doInBackground (BGTh)– onProgressUpdate(UITh)– onPostExecutre(UITh)
● Método auxiliar– publishProgress (BGTh)
![Page 43: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/43.jpg)
Interfaces de Usuario 43
AsyncTask
● Una AsyncTask tiene 3 tipos genéricos● AsyncTask<Params, Progress, Result>
– Params – tipo de parámetros enviados a la tarea para su ejecución
– Progress – tipo de las unidades de progreso publicadas durante su ejecución
– Result – resultado de la ejecución de la tarea
● Si no usamos un tipo, lo ponemos Void (con V)
![Page 44: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/44.jpg)
Interfaces de Usuario 44
Métodos de AsyncTask● onPreExecute(): invocado por UIth
justo tras ejecutar la tarea
● doInBackground(Params) – invocado por BGTh justo tras onPreExecute
● onProgressUpdate(Progress) – invocado por UITh tras una llamada de BGTh a publishProgress(Progress)
● onPostExecute(Result) invocado por UITh justo tras terminar BGTh
![Page 45: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/45.jpg)
Interfaces de Usuario 45
Ejemplo AsyncTask
![Page 46: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/46.jpg)
Interfaces de Usuario 46
Interfaz main.xml
![Page 47: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/47.jpg)
Interfaces de Usuario 47
Actividad MainTask
![Page 48: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/48.jpg)
Interfaces de Usuario 48
Actividad MainTask (II)
… → número de argumentos
variable, se procesa como un array
![Page 49: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/49.jpg)
Interfaces de Usuario 49
Actividad MainTask (III)
![Page 50: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/50.jpg)
Interfaces de Usuario 50
Yamba. StatusActivity2 (I)
![Page 51: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/51.jpg)
Interfaces de Usuario 51
StatusActivity2 (I)
![Page 52: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/52.jpg)
Interfaces de Usuario 52
Retoques finales
● Ya tenemos la aplicación
● Podemos– Añadir que descuente el
número de caracteres– Añadir colores/imágenes
![Page 53: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/53.jpg)
Interfaces de Usuario 53
ContarCaracteres main.xml
![Page 54: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/54.jpg)
Interfaces de Usuario 54
ContarCaracteres -TextWatcher (I)
![Page 55: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/55.jpg)
Interfaces de Usuario 55
ContarCaracteres -TextChangedListener (III)
![Page 56: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/56.jpg)
Interfaces de Usuario 56
Personalización
●En Android en res podemos hacer carpetas con recursos para– Una orientación res/layout-land/status.xml– Un idioma res/values-es-rES/strings.xml
(language-region)
●En eclipse new->XML File
![Page 57: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/57.jpg)
Interfaces de Usuario 57
Asistente recursos alternativos
![Page 58: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/58.jpg)
Interfaces de Usuario 58
Lo que llevamos hecho...
![Page 59: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/59.jpg)
Interfaces de Usuario 59
Resumen
● En este tema hemos aprendido a gestionar concurrencia con tareas de fondo en Android
● Hemos visto cómo gestionar directamente hebras, comunicarlas con Handlers, y cómo usar AsyncTasks
● Por último, cómo darle un mejor aspecto visual y crear recursos alternativos
![Page 60: Tema 4 3_4_interfaces_de_usuario](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d161db4795993508b47fb/html5/thumbnails/60.jpg)
Interfaces de Usuario 60
¿Preguntas?