Análisis y Diseño de Software

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

Ejemplo Desarrollo y DepuraciónEjemplo SobreTeleco

Carlos A. Iglesias <cif@gsi.dit.upm.es>1.0 18/04/13

Desarrollo con Android 2

Teoría

Ejercicio práctico en el ordenador

Ampliación de conocimientos

Lectura / Vídeo / Podcast

Práctica libre / Experimentación

Leyenda

Ejemplo SobreTeleco 3

Temario● 4.1 Introducción a Android ● 4.2 Introducción Desarrollo con Android

● 4.3 Ejemplo Desarrollo y Depuración ● 4.4 Actividades● 4.5 Interfaces de Usuario

● 4.6 Intenciones● 4.7 Acceso a Datos● 4.8 Preferencias● 4.9 Hebras e internacionalización

Ejemplo SobreTeleco 4

Bibliografía

● Libro de texto: – [Gar10] Learning Android, Marko Gargenta,

O'Reilly, 2010. Disponible en http://ofps.oreilly.com/titles/9781449390501/

– Capítulos 4-5

– 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

Ejemplo SobreTeleco 5

Bibliografía complementaria● Tutorial Android UI– http://mobile.tutsplus.com/series/android-user-interface-design/

– http://developer.android.com/resources/tutorials/views/index.html

– http://www.droiddraw.org/widgetguide.html

● Ejemplos

– http://apcmag.com/building-a-simple-android-app.htm

– http://www.maestrosdelweb.com/editorial/curso-android-construir-lector-de-feeds/

Ejemplo SobreTeleco 6

Objetivos

● Entender los conceptos básicos para desarrollar una interfaz de usuario en Android

● Entender la estructura de un proyecto Android

● Aprender a desarrollar un proyecto Android: programar, ejecutar, y depurar

● Aprender vista depuración: LogCat

Ejemplo SobreTeleco 7

Interfaces en Android

● “Separation of concerns”– Funcionalidad

(Java)– Disposición (XML)

● Podemos definir diferentes layouts para diferentes dispositivos

Ejemplo SobreTeleco 8

UI en Android

● En Android podemos definir de dos formas las interfaces: – Declarativa:

• En XML• Parecido a crear una página web en HTML

– Programática:• En Java• Parecido a interfaces en Java (Swing / AWT)

Ejemplo SobreTeleco 9

UIs: Visión general: Views y Layout

● Vista (View): componente

● Disposición (Layout): contenedor

Ejemplo SobreTeleco 10

El lenguaje XML (eXtensible Markup Language)

● Repasar FTEL– http://www.gsi.dit.upm.es/~gfer/ftel/Procesadores.pdf

● XML está diseñado para la representación de datos a efectos de almacenamiento y comunicación<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE asignaturas2010 SYSTEM "asignaturas.dtd"><asignaturas2010> <asignatura codigo="95000024" acronimo="ADSW"> <nombre>Análisis y Diseño del Software</nombre> <creditos>4.5</creditos> <semestre S="2" /> <tipo T="obligatoria" /> <guia> <url href="http//www.lab.dit.upm.es/adsw" /> </guia> </asignatura><!--otras asignaturas--></asignaturas2010>

Ejemplo SobreTeleco 11

Ejercicio: SobreTeleco

● Vamos a seguir el ejemplo un poco modificado para la asignatura– http://apcmag.com/building-a-simple-android-app.htm

● Pasos:– Crear un proyecto Android en Eclipse:

SobreTeleco

Ejemplo SobreTeleco 12

Explorar proyecto Android

CÓDIGO FUENTE

CÓDIGO GENERADO

BIBLIOTECAS

CÓDIGO COMPILADO DEVX, FICHERO APK

RECURSOS

CONFIGURACIÓN

ASSET

Ejemplo SobreTeleco 13

Ejercicio

● Explora la estructura del proyecto HolaMundo que hicimos en el capítulo anterior. – ¿Qué hay en bin?– Pincha en main.xml, y selecciona la pestaña

graphicalLayout ¿qué ves?

Ejemplo SobreTeleco 14

Explorando un proyecto...

● source: fuentes java del proyecto

● gen: ficheros generados del proyecto. Android genera R.java que 'mapea' los recursos UI XML a Java● library: framework Android

● assets: ficheros de cualquier formato, que podemos tratar como InputStream (veremos)● res: recursos, organizados en una estructura fija en imágenes, layout y texto. Se referenciarán con R: R.layout (veremos)

Ejemplo SobreTeleco 15

Recursos

● Como hay gran variedad de resoluciones y tamaños de pantallas (teléfono, tableta, TV), podemos ofrecer gráficos alternativos con diferente resolución / tamaño.

● Ver

http://developer.android.com/guide/topics/resources/providing-resources.html

● Ej. Recurso por defecto

Recurso alta densidad (high dpi, dots per inch, aprox. 240 dpi)

Ejemplo SobreTeleco 16

Recursos

http://coding.smashingmagazine.com/2011/06/30/designing-for-android/http://androideity.com/2011/08/04/disenando-para-android/

Ejemplo SobreTeleco 17

Crear una actividad

Fija como contenido el fichero res/layout/main.xml. Se genera una referencia en R este fichero: R.layout.main

Ejemplo SobreTeleco 18

Referencias a imágenes

R.drawable.ic_launcher

R.layout.main

R.values.strings

Se selecciona la imagen según la resolución del dispositivo

Ejemplo SobreTeleco 19

Modificando el layout (main.xml)

Doble click

Ejemplo SobreTeleco 20

Cambiamos la interfaz

Ejemplo SobreTeleco 21

Refactorización

● Técnica de software que consiste en modificar el código para que tenga “más calidad”

● Ej. extraer una interfaz de una clase pasar unas líneas de código a método privado, renombrar una clase o método, …

● Eclipse y muchos IDEs dan soporte a la refactorización: Menú->Refactor

Ejemplo SobreTeleco 22

Refactorización

● Pasamos el string a res/values/strings.xml

Ejemplo SobreTeleco 23

Añadir botón

Ejemplo SobreTeleco 24

Botón

Llevamos este strings.xml

Ejemplo SobreTeleco 25

Cambiamos el botón

Ejemplo SobreTeleco 26

Y desplegamos

El botón no hace nada en el terminal

Ejemplo SobreTeleco 27

Añadir funcionalidad botón (I)

main.xml

Ejemplo SobreTeleco 28

Añadir funcionalidad botón (II)

Toast es un tipo de notificación en pantalla

Ejemplo SobreTeleco 29

Añadir funcionalidad botón (III)

Ejemplo SobreTeleco 30

Refactorizar String

Ejemplo SobreTeleco 31

¡Probar!

Ejemplo SobreTeleco 32

Copiamos imágenes

● Vamos a copiar las imágenes que vamos a usar (están en moodle en un zip)

● Las copiamos en res/drawable-hdpi

Ejemplo SobreTeleco 33

Añadiendo una imagen

Ejemplo SobreTeleco 34

Añadiendo una imagen

Ejemplo SobreTeleco 35

Modificando tamaño

Ejemplo SobreTeleco 36

● contentDescription: mensaje sobre qué representa la imagen, por accesibilidad● match_parent: tan grande como el padre● wrap_content: tan grande como para que quepa el texto● weight: escalado

● 0dp: el que fije weight

ImageView

Ejemplo SobreTeleco 37

Cambiando la imagen (I)

Ejemplo SobreTeleco 38

Cambiando la imagen (II)

Ejemplo SobreTeleco 39

¡Lo probamos!

Ejemplo SobreTeleco 40

Recapitulando (I)

● Hemos hecho una aplicación con 1 Actividad● Las actividades las creamos en Java extendiendo Activity– Cuando se lance la actividad se

invocará el método onCreate, que tiene que la vista (setContentView(R.layout.main)

Ejemplo SobreTeleco 41

R y setContentView

● R es una clase Java que se genera automáticamente a partir de un 'layout' XML

● setContentView(R.layout.main) – usado en onCreate() - el proceso se llama 'insuflar' (inflate)– Lee el XML, crea objetos java por cada vista

(componente: botón, texto, imagen, …)– Fija atributos de cada objeto por cada propiedad

XML

Ejemplo SobreTeleco 42

Recapitulando (II)

● En el layout XML hemos definido – un layout (LinearLayout)

que contiene– Vistas (TextView,

ImageView, Button)

● Los textos los ponemos en res/values/strings.xml

Ejemplo SobreTeleco 43

Hierarchy Viewer

● Lanza la aplicación (Run-as) en el emulador (no vale en dispositivo real!)

● Abre la jerarquía– Window->Open Perspective-> Hierarchy

viewer

Ejemplo SobreTeleco 44

Hierarchy Viewer

● Pincha en Windows en la aplicación que quieres depurar, y ya lo ves :)

Ejemplo SobreTeleco 45

Perspectiva Hierarchy Viewer

Recuerda que sólo funciona con el emulador lanzado

Ejemplo SobreTeleco 46

Ej. FrameLayout

Ejemplo SobreTeleco 47

Ej. TextView

Ejemplo SobreTeleco 48

Ej. TextView

Ejemplo SobreTeleco 49

Los tres puntos (curiosidad)

● Los tres puntos indican las prestaciones, miden de izda a derecha los tiempos del proceso de visualización (render)– Measure time: calcular alto/ancho– Layout time: dice a las vistas las posiciones dentro de las medidas– Draw time: pinta los componentes

● Verde: más rápido que el 50% de las otras vistas● Amarillo: más lento que el 50% de las otras vistas

● Rojo: el más lento del árbol

Interfaces de Usuario 50

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 51

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 52

Puesta a punto

¿dónde falla qué?

•Trazas / Depurador paso a paso

fallo serio

detalle

falla

pasa

falla

pasa

pruebas

desarrollo

pruebas

pruebas deaceptación

Interfaces de Usuario 53

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 54

Interfaces de Usuario 55

Ver trazas y depurar

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

Interfaces de Usuario 56

Filtrar trazas

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

Interfaces de Usuario 57

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 58

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

Ejemplo SobreTeleco 59

Resumen

● Hemos visto cómo realizar una aplicación sencilla en Android, SobreTeleco

● Para desarrollar una aplicación debemos crear la actividad, el layout, enlazarlos, y definir la conducta de los componentes

● Si algo no funciona, debemos depurar. Lo primero es 'mirar los logs'.

Ejemplo SobreTeleco 60

¿Preguntas?