tema 4.3 ejemplo sobre teleco
TRANSCRIPT
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 <[email protected]>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?