Análisis y Diseño de Software

Departamento de Ingeniería de Sistemas Telemáticoshttp://moodle.dit.upm.es

Interfaces de UsuarioLa aplicación Yamba

Carlos A. Iglesias <cif@gsi.dit.upm.es>

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

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]

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 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 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 6

La aplicación Yamba

● Vamos a hacer una aplicación sencilla que tuitea

Interfaces de Usuario 7

Mensajes publicados

●Puedes publicar tus mensajes en twitter o en marakana (yamba.markana.com), créate una cuenta.

Interfaces de Usuario 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 9

Otros cambios

● StatusActivity0.java

●res/values/strings.xml

Interfaces de Usuario 10

Ejecutar

● Compila y se ejecuta, pero no hace nada...

● Vamos a extender StatusActivity0.java– Programación programática

Interfaces de Usuario 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 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 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 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 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 16

Permisos AndroidManifest.xml

Interfaces de Usuario 17

Layout

● En res/layout refactorizamos (cambiar nombre): main.xml → status1.xml

Interfaces de Usuario 18

StatusActivity1.java (I)

Interfaces de Usuario 19

StatusActivity1.java (II)

- Recupera el estado guardado- Fija status2.xml como layout

- fija unOnClickListener en el botón

- pasa del XML a Java

- creamos el objeto twitter para conectarnos- pon tu usuario/contraseña- si usas twitter, comenta setAPIRootUrl

- implementamos OnClickListener(): recuperamos el texto de editText y lo ponemos como status en twitter- creamos una traza (log) para depurar

Interfaces de Usuario 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 21

Ejemplo - TextView

http://developer.android.com/reference/android/widget/TextView.html

Interfaces de Usuario 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/EditText.html

http://developer.android.com/reference/android/widget/TextView.html#attr_android:inputType

Interfaces de Usuario 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 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 25

Implementación anónima de la interfaz

Interfaces de Usuario 26

Java – implementación de interfaz

Interfaces de Usuario 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 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 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 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 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 32

Puesta a punto

¿dónde falla qué?

trazas

fallo serio

detalle

falla

pasa

falla

pasa

pruebas

desarrollo

pruebas

pruebas deaceptación

Interfaces de Usuario 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()

VERBOSE

DEBUG

INFO

WARN

ERROR

Interfaces de Usuario 34

Ver trazas y depurar

● Perspectiva DDMS(Dalvik Debug Monitor Server)– View LogCat

Interfaces de Usuario 35

Filtrar trazas

● Podemos filtrar para ver menos tranzas (por log, etc.)

Interfaces de Usuario 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 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 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/log.htm

Interfaces de Usuario 39

Resumen

● Hemos aprendido a programar actividades

● La interfaz 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 40

¿Preguntas?