Tema 4.3 Ejemplo sobre teleco

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

mailto:[email protected]

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


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

http://ofps.oreilly.com/titles/9781449390501/

http://developer.android.com/guide/topics/fundamentals.html


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/

http://mobile.tutsplus.com/series/android-user-interface-design/

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

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

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

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


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


Interfaces en Android

● “Separation of concerns”– Funcionalidad

(Java)– Disposición (XML)

● Podemos definir diferentes layouts para diferentes dispositivos


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)


UIs: Visión general: Views y Layout

● Vista (View): componente

● Disposición (Layout): contenedor

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></asignaturas2010>

http://www.gsi.dit.upm.es/~gfer/ftel/Procesadores.pdf


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

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


Explorar proyecto Android

CÓDIGO FUENTE

CÓDIGO GENERADO

BIBLIOTECAS

CÓDIGO COMPILADO DEVX, FICHERO APK

RECURSOS

CONFIGURACIÓN

ASSET


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?


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)


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)


Recursos

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

http://coding.smashingmagazine.com/2011/06/30/designing-for-android/

http://androideity.com/2011/08/04/disenando-para-android/


Crear una actividad

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


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


Modificando el layout (main.xml)

Doble click


Cambiamos la interfaz


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


Refactorización

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


Añadir botón


Botón

Llevamos este strings.xml


Cambiamos el botón


Y desplegamos

El botón no hace nada en el terminal


Añadir funcionalidad botón (I)

main.xml


Añadir funcionalidad botón (II)

Toast es un tipo de notificación en pantalla


Añadir funcionalidad botón (III)


Refactorizar String


¡Probar!


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


Añadiendo una imagen


Modificando tamaño


● 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


Cambiando la imagen (I)


Cambiando la imagen (II)


¡Lo probamos!


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)


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


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


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


Hierarchy Viewer

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


Perspectiva Hierarchy Viewer

Recuerda que sólo funciona con el emulador lanzado


Ej. FrameLayout


Ej. TextView


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


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


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


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


Ver trazas y depurar

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


Filtrar trazas

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


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


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


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'.


¿Preguntas?

Tema 4.3 Ejemplo sobre teleco

Documents

Transcript of Tema 4.3 Ejemplo sobre teleco