Está en la página 1de 11

ENTREGABLE 1

SUPER TRIVIAL GAME




Programacin Multimedia y Dispositivos
Mviles

2



Objetivos
Iniciarse en el desarrollo de interfaces grficas de usuario para Android
Conocer los componentes grficos disponibles en Android;

Material a utilizar
En esta prctica vamos a utilizar el siguiente software:
Android SDK r12 (descarga gratuita);
Eclipse Classic 3.7 (descarga gratuita);
Android Development Tools (ADT) plugin para Eclipse (descarga gratuita);
y el siguiente hardware:
HTC WildFire;
Archos 7o Internet Tablet;

3



Descripcin bsica de la aplicacin a desarrollar
La aplicacin que se desea desarrollar es un sencillo juego
de preguntas y respuestas, donde el usuario deber
seleccionar la respuesta correcta, de entre 4 posibles, para
una pregunta de un tema determinado. La puntuacin
obtenida, en caso de acertar la respuesta, depender de la
velocidad con la que se haya contestado. Una posible
pantalla de esta aplicacin se muestra en la Figura 1.
El desarrollo de esta aplicacin requerir de 3 prcticas,
en las que se ampliarn las funcionalidades
proporcionadas por la aplicacin:
Prctica 3 Desarrollo de interfaces de usuario
adaptadas: Se desarrollar el esqueleto bsico de
la aplicacin, dotndola de una funcionalidad
mnima que permita comprobar su correcto
funcionamiento. Se disearn las diferentes
pantallas que componen la aplicacin y se
gestionarn los eventos que permitan transitar
entre las mismas.
Prctica 4 Gestin local de la informacin: Se incorporarn capacidades de almacenamiento
persistente en el dispositivo.
Prctica 5 Comunicaciones WiFi: Se ampliar la funcionalidad de la aplicacin para ofrecer
el acceso a las cuestiones por medio de una conexin WiFi
En los boletines de cada una de estas prcticas se detallarn aquellos aspectos que sean necesarios para
permitir el diseo de la aplicacin y la interaccin de las diferentes funcionalidades desarrolladas.
Especificacin del GUI a desarrollar
A continuacin, describiremos cada una de las funcionalidades que se desean ofrecer por medio de las
diferentes ventanas (Activity) que componen la aplicacin. El esquema general de la aplicacin se
muestra en el Figura 2.

Figura 2. Esquema general de las pantallas que componen la aplicacin.


Figura 1. Pantalla de ejemplo de la
aplicacin a desarrollar.

4


La aplicacin deber iniciarse con una pantalla de Splash, lo que permite al usuario comprobar que se
est procediendo a la carga de la aplicacin de forma atractiva. Esta pantalla dar paso a la pantalla
principal de la aplicacin (Main), que servir de lanzadera al resto de pantallas. Desde la pantalla de
configuracin (Settings) se podrn establecer los valores deseados por el usuario para determinados
parmetros del sistema, mientras que la pantalla Scores permitir visualizar las mejores puntuaciones
obtenidas. La pantalla Play es la que dispondr de mayor lgica de negocio, ya que ser la encargada de
visualizar las cuestiones y validar las respuestas introducidas por el usuario, obteniendo finalmente la
puntuacin correspondiente. Por ltimo, toda aplicacin que se precie debe tener su ventana de crditos
(Credits o About), que mostrar informacin relativa a la aplicacin.
Las secciones siguientes detallarn las diferentes pantallas a desarrollar y presentarn informacin de
utilidad para su implementacin.
NOTA: El diseo grfico de la GUI es responsabilidad del alumno, que podr utilizar aquellos
componentes y formatos que considere oportunos, as como disponerlos de la manera ms conveniente.
NOTA MUY IMPORTANTE: Informacin acerca de todos los componentes grficos y su utilizacin
puede encontrarse en Android Developers, donde puede consultarse la documentacin de la SDK
(Reference: http://developer.android.com/reference/packages.html) y la gua de desarrolladores (The
Developers Guide: http://developer.android.com/guide/index.html).
Pantalla de Splash
Esta es la pantalla de inicio de la aplicacin, por lo que as
deber indicarse en el AndroidManifest. Deber presentar, al
menos, el ttulo de la aplicacin junto con alguna animacin
que haga ms atractiva la transicin hacia el men principal
de la aplicacin (ver Figura 3).
ANIMACIONES
Las animaciones de los diferentes componentes grficos
(View) pueden especificarse por medio de dos mecanismos:
las Tween Animations y las Frame Animations. Las Tween
Animations permiten definir operaciones simples de
traslacin, rotacin y escalado de los componentes, mientras
que las Frame Animations definen animaciones clsicas frame
a frame. Ambos tipos de animaciones pueden especificarse
por medio de ficheros XML. Un ejemplo de operacin de
escalado definida como Tween Animation se muestra en el
fragmento de Cdigo 1.
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android=http://schemas.android.com/apk/res/android
android:shareInterpolator="false">
<scale
android:fromXScale="0.0"
android:toXScale="1.0"
android:fromYScale="0.0"
android:toYScale="1.0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="1000"/>
</set>
Cdigo 1. Escalado de un componente del 0% al 100% de su tamao, desde el centro del mismo, en 1 segundo.

Figura 3. Ejemplo de pantalla de Splash.

5


Las animaciones deben asociarse por medio de cdigo a los componentes sobre las que se van a aplicar.
Para ello, es preciso obtener, primeramente, una referencia al View objetivo. Posteriormente, se obtendr
la animacin correspondiente a travs del mtodo esttico AnimationUtils.LoadAnimation(). Finalmente
se asociar dicha animacin al componente objetivo. Un ejemplo de aplicacin de este mtodo se
muestra en el fragmento de Cdigo 2.
final ImageView image = (ImageView) findViewById(R.id.MyImage);
Animation anim = AnimationUtils.loadAnimation(this, R.anim.MyAnimation);
image.setAnimation(anim);
Cdigo 2. Asociacin de una Tween Animation a un componente de tipo View.
Deberemos esperar a que finalicen las diferentes animaciones antes de pasar a mostrar la ventana
principal de la aplicacin. La mejor manera de poder reaccionar al fin de una aplicacin es asocindole
un manejador de animaciones (anim.setAnimationListener())que implemente el mtodo
onAnimationEnd().
Recordad que al lanzar la nueva Activity, la anterior quedar en la pila de actividades, por lo que al
pulsar el botn BACK sobre la pantalla principal no se cerrar la aplicacin, sino que volver a
mostrarse la pantalla de Splash. Para solucionar este problema, debe destruirse la Activity
correspondiente a la pantalla de Splash una vez que se haya lanzado a ejecucin la siguiente Activity.
Esto puede lograrse por medio de: SplashScreen.this.finish().

Pantalla principal (Main)
Esta pantalla acta como punto de enlace entre las diversas
pantallas de la aplicacin, ya que desde sta es posible
acceder a todas ellas y siempre se retorna a este punto. Las
diversas pantallas a las que se debe poder acceder son Play,
Scores, Settings, y Credits. Adicionalmente, toda pantalla
deber proporcionar una opcin de Ayuda (Help), a la que se
acceder por medio del botn MEN. La manera en la que se
muestre esta informacin al usuario, ya sea mediante un
ListLayout o diversos ImageButton organizados linealmente o
en tabla, por ejemplo, se deja a la eleccin del alumno. En la
Figura 4 se muestra un ejemplo de pantalla principal en la que
el acceso a las diversas ventanas se realiza por medio de un
ListLayout, excepto a la de configuracin (Settings), que se
accede a travs del botn de opciones. La opcin de ayuda se
podr mostrar por medio de una Activity diferente, o por
medio de un AlertDialog.
IMPORTANTE: Lo que s se desea es que todas las
pantallas de la aplicacin dispongan de una cabecera que las
identifique de manera homognea para todas ellas. El diseo
de esta cabecera se deja a criterio del alumno. Un ejemplo se
muestra en la Figura 4, donde se muestra centrado el
identificador de la pantalla, enmarcado entre dos imgenes.
MEN DE OPCIONES
La creacin de las opciones asociadas al botn MEN se realiza a travs de un fichero XML que
especifica el texto e imagen asociadas a cada una de las opciones disponibles, tal y como se muestra en
el fragmento de Cdigo 3.


Figura 4. Ejemplo de pantalla principal.

6


<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:icon="@drawable/icon1" android:id="@+id/options_settings"
android:title="Settings"></item>
<item android:id="@+id/options_help" android:title="Help"
android:icon="@drawable/icon2"></item>
</menu>
Cdigo 3. Ejemplo de especificacin de las opciones disponibles a travs del botn MEN.
Para asociar las opciones especificadas con el botn MEN, es necesario sobrescribir el mtodo
onCreateOptionsMenu() tal y como se muestra en el fragmento de Cdigo 4. Finalmente,
sobrescribiendo el mtodo onOptionsItemSelected() podremos reaccionar a la seleccin de alguna de las
opciones del men y operar en consecuencia.
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// TODO Auto-generated method stub
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.mainoptionsmenu, menu);
return true;
}
Cdigo 4. Construccin del men de opciones a desplegar al pulsar el botn correspondiente.
DILOGOS DE ALERTA
Si deseamos mostrar informacin al usuario, como puede ser la de Ayuda, sin necesidad de generar una
nueva Activity, podemos recurrir al uso de dilogos y, en concreto, de tipo alerta. Cada dilogo se
identificar por medio de un nmero entero, por lo que resulta recomendable definir una constante por
cada uno de los dilogos diferentes que se vayan a utilizar, como muestra el fragmento de Cdigo 5.
final static public int HELP_DIALOG = 1;
Cdigo 5. Constante de identificacin de dilogos.
Este nmero entero se utilizar, a la hora de crear los dilogos, para determinar cul es el dilogo que se
desea generar. Esto es necesario debido a que la personalizacin de todos los dilogos se realiza por
medio del mtodo onCreateDialog(), que debe ser sobrescrito. En este mtodo, y a travs de un
AlertDialog.Builder, personalizaremos la alerta que deseamos mostrar, tal y como se lista en el
fragmento de cdigo 6.
@Override
protected Dialog onCreateDialog(int id) {

// TODO Auto-generated method stub
AlertDialog.Builder builder;
switch(id) {
case HELP_DIALOG:
builder = new AlertDialog.Builder(this);
builder.setMessage("This is the message to show");
break;
}
return builder.create();
}
Cdigo 6. Ejemplo de creacin de un AlertDialog.

7


El dilogo desaparecer una vez pulsemos el botn BACK. Adems del mensaje a mostrar, es posible
incluir hasta 3 botones diferentes en el dilogo (setPositiveButton(), setNegativeButton(),
setNeutralButton()), asocindoles un texto y un manejador de eventos de tipo Click. La gestin de la
pulsacin de estos botones corre a cuenta del desarrollador. El dilogo generado se mantendr en un
pool de dilogos por si fuera necesario reutilizarlo ms tarde. En caso de querer liberar los recursos,
puede invocarse el mtodo removeDialog() de la Activity que lo gestiona, como se muestra en el
fragmento de Cdigo 7.
MainScreenActivity.this.removeDialog(HELP_DIALOG);
Cdigo 7. Eliminacin del dilogo del pool de dilogos.
Pantalla de crditos (Credits)
Esta pantalla (ver Figura 5) mostrar informacin
relativa a la aplicacin, como su versin, autores, etc.
El formato exacto de la pantalla se deja a eleccin del
alumno.
NOTA: Por el momento, la informacin textual que
se muestre en la pantalla se almacenar utilizando el
fichero XML strings.xml.


Pantalla de configuracin (Settings)
Esta pantalla permitir configurar diferentes parmetros de la aplicacin. Estos parmetros incluirn,
como mnimo, i) el nombre del usuario, que se mostrar en las puntuaciones, ii) su direccin de email,
que servir para identificar al usuario, iii) sus preferencias en cuanto al tema de las cuestiones que desea
responder, que servir para filtrar las preguntas que se le muestren, iv) el servidor desde el que se desea
obtener las cuestiones, que podr cambiarse en caso de no recibir respuesta de otros servidores, y v)
ofrecer la posibilidad de incluir direcciones de email pertenecientes a amigos, que permitir
posteriormente comparar las puntuaciones obtenidas por cada uno. Un ejemplo de implementacin de
esta pantalla se muestra en la Figura 6.

Figura 6. Ejemplo de pantalla de configuracin (izquierda), dilogo de seleccin de temas (centro), y seleccin de
servidor de cuestiones (derecha).

Figura 5. Ejemplo de pantalla de crditos.

8


NOTA: En este momento nicamente es necesario definir la interfaz grfica y sus componentes. La
gestin de la informacin que se introduzca se realizar en la Prctica 4, donde se almacenarn estas
preferencias para su uso en la aplicacin. El alumno podr incluir otros aspectos de configuracin que
considere oportunos.
Pantalla de puntuaciones (Scores)
Esta pantalla mostrar el ranking de las 25 mejores puntuaciones
que se hayan conseguido de manera local en el dispositivo, y las
25 mejores puntuaciones que hayan logrado los amigos del
usuario, tal y como se muestra en la Figura 7. La informacin
mostrada consistir en el nombre del usuario, la puntuacin
obtenida, y la posicin que ocupa en el ranking total (del
dispositivo local o del servidor).
La pantalla debe de disponer de un men de opciones que
permita borrar las puntuaciones obtenidas de manera local, pero
no las obtenidas por los amigos, que se obtendrn desde el
servidor de preguntas en la Prctica 5. El mtodo
onPrepareOptionsMenu() puede ser de utilidad en este caso.
NOTA: Por el momento, incluir una serie de puntuaciones
ficticias desde el cdigo de la aplicacin para poder comprobar
el correcto funcionamiento de la interfaz.
Para la visualizacin de las diferentes puntuaciones, y tal y como
se muestra en la Figura 7, se sugiere el uso de diversas pestaas
y la organizacin de la informacin en la misma en formato de
tabla. A continuacin, se describe brevemente el funcionamiento
de ambos tipos de componentes.
PESTAAS
Para poder utilizar pestaas en una Activity es necesario tener en cuenta una serie de consideraciones. Se
utilizar un componente compuesto TabHost que ser la raz de toda la estructura de las pestaas. Este
TabHost contendr un LinearLayout que ser donde se desplieguen tantos las pestaas como el
contenido de las mismas. Dentro de este LinearLayout se insertarn dos componentes adicionales, un
TabWidget, cuyo identificador debe ser necesariamente @android:id/tabs, y un FrameLayout, cuyo
identificador debe ser necesariamente @android:id/tabcontent. Dentro del TabWidget se incluir un
LinearLayout por cada pestaa que deseemos incluir, mientras que dentro del FrameLayout podremos
incluir todo tipo de layout que asociaremos posteriormente con las pestaas. Si insertamos el TabHost
desde el editor grfico se generar toda la estructura necesaria automticamente.
La estructura creada se mostrar vaca en el editor de la interfaz grfica. La informacin de las
diferentes pestaas se incluir programticamente desde la Activity correspondiente. Primeramente se
obtendr la referencia al TabHost y se inicializar con su mtodo setup(). Si no se realiza su
inicializacin, no podr utilizarse el componente. Despus se especificarn las pestaas necesarias a
travs de un objeto de tipo TabSpec que se crear a partir del TabHost. Para cada especificacin de
pestaa deberemos utilizar el mtodo setIndicator() para incluir el texto e imagen asociado a la pestaa.
El contenido de la pestaa que se est especificando se realizar por medio del mtodo setContent(),
donde podremos pasar la referencia al layout que hayamos incluido en el fichero XML generado
mediante la interfaz grfica, o un Intent para cargar una Activity especfica. Estas especificaciones deben
aadirse al TabHost y, finalmente, debe determinarse cul es la pestaa que debe visualizarse por
defecto (setCurrentTab() o setCurrentTabByTag()). Un ejemplo de implementacin se muestra en el
fragmento de Cdigo 8.

Figura 7. Ejemplo de pantalla de
puntuaciones.

9



TabHost host = (TabHost) findViewById(R.id.MyTabHost);
host.setup();

TabSpec spec = host.newTabSpec(TAB1);
spec.setIndicator(Label1,
getResources().getDrawable(R.drawable.Tab1Icon));
spec.setContent(R.id.MyScrollView1);
host.addTab(spec);

spec = host.newTabSpec(TAB2);
spec.setIndicator(Label2,
getResources().getDrawable(R.drawable.Tab2Icon));
spec.setContent(R.id. MyScrollView2);
host.addTab(spec);

host.setCurrentTabByTag(TAB1);
Cdigo 8. Ejemplo de carga del contenido en un componente de tipo pestaas.
TABLAS
Las tablas (TableLayout) se componen de una serie de filas (TableRow) que, a su vez, contienen los
diferentes elementos grficos que mostrarn el contenido de la tabla. Esto puede ser una solucin para
alinear componentes grficos en una pantalla, o para mostrar informacin de forma tabulada. A pesar
de que es posible generar las tablas a travs del editor grfico (para obtener el fichero XML asociado), la
inclusin de nuevas filas de manera dinmica hace que sea necesario el gestionar las tablas directamente
a travs de cdigo.
Primeramente, se obtendrn los diferentes componentes que se desean mostrar en una fila determinada
de la tabla. En ese momento, se crear una nueva TableRow a la que se aadirn dichos elementos
(addView()). Una vez construida la fila, se aadir al TableLayout previamente generado (addView()).
Un ejemplo de generacin de una tabla con una fila que muestran dos textos informativos cada una se
muestra en el fragmento de cdigo 9.
TableLayout table = (TableLayout) findViewById(R.id.MyTable);
TableRow row = new TableRow(this);
TextView tv = new TextView(this);

tv.setText(Test info 1);
row.addView(tv);

tv = new TextView(this);
tv.setText(Test info 2);
row.addView(tv);

table.addView(row);
Cdigo 9. Ejemplo de generacin del contenido de una tabla de dos columnas.

10



Pantalla de juego (Play)
En esta ventana se mostrarn las preguntas que el usuario
debe responder y se comprobarn las respuestas introducidas.
Al usuario se le suministrarn 4 posibles respuestas, de las
cules solamente una es correcta. Se dispondr de tiempo
limitado para contestar a la pregunta (7 segundos, por
ejemplo), y la puntuacin obtenida ser igual a los
milisegundos restantes antes de que acabe el tiempo. El
usuario tendr la posibilidad de solicitar una pista, a travs del
men de opciones, lo que eliminar una de las preguntas. Se
mostrar la respuesta correcta cuando el usuario conteste o
finalice el tiempo, y se actualizar la puntuacin total que se
mostrar en pantalla. Se debe mostrar el tiempo restante para
contestar la pregunta y se solicitar confirmacin al usuario
antes de mostrar cada pregunta. Un ejemplo de
implementacin de esta pantalla se muestra en la Figura 10.

IMPORTANTE: La Figura 8 es solo un ejemplo, los
componentes elegidos para su desarrollo y su disposicin
queda a criterio del alumno.
NOTA: Por el momento las cuestiones a mostrar estarn insertadas en el cdigo del propio programa
de manera esttica. En la Prctica 5 se modificar el comportamiento de la aplicacin para obtener las
cuestiones desde el servidor va inalmbrica. Para facilitar el desarrollo de la prctica se ha incluido
en el apartado de Recursos de PoliformaT la clase Question.java, que encapsula la informacin relativa
a las preguntas (tema, texto, 4 respuestas, respuesta correcta y respuesta a eliminar si se solicita
ayuda). Asimismo se incluye un fragmento de cdigo (generateQuestionList.java) que puede utilizarse
para generar una lista de cuestiones a modo de prueba.
HILOS DE EJECUCIN
A la hora de controlar el tiempo restante para contestar la pregunta ser necesario utilizar otro hilo de
ejecucin diferente al encargado de gestionar la interfaz grfica.
IMPORTANTE: No es posible modificar la interfaz grfica desde diferentes hilos de ejecucin, sino
que nicamente el hilo gestor de la misma puede hacerlo. Para gestionar diferentes hilos se disponen de
dos mecanismos diferentes: el uso de threads y paso de mensajes con el encargado de gestionar la
interfaz grfica, o el uso de tareas asncronas (AsyncTask).
Por su simplicidad, mostraremos cmo utilizar tareas asncronas para la realizacin de tareas simples.
Hay que tener en cuenta que debe crearse la instancia de la tarea en el hilo de ejecucin que gestiona la
interfaz grfica, este mismo hilo debe ejecutar execute(), y la tarea solo puede realizarse una vez.
Para crear una tarea asncrona es preciso generar una clase que extienda AsyncTask indicando el tipo de
parmetros que se le enviarn a la tarea en su inicio, que se utilizarn en la actualizacin de la interfaz
grfica, y los que devolver como resultado de su ejecucin. Esta clase dispone de cuatro mtodos que
pueden sobrescribirse: i) onPreExecute(), que se ejecuta en el hilo que gestiona la interfaz grfica justo
despus de que la tarea comienza su ejecucin (por si hace falta inicializar algn componente grfico),
ii) doInBackground(), que es dnde la tarea realiza su actividad en segundo plano y puede invocar a
publishProgress() para provocar una actualizacin de la interfaz grfica, iii) onProgressUpdate(), que se
ejecuta en el hilo que controla la interfaz grfica despus de que la tarea solicite su actualizacin, y iv)
onPostExecute(), que se ejecuta en el hilo que controla la interfaz grfica cuando la tarea termina su

Figura 8.Pantalla de ejemplo de la
aplicacin a desarrollar.

11


ejecucin. Es posible cancelar la ejecucin de una tarea mediante la llamada a su mtodo cancel(). La
tarea, una vez creada, comenzar su ejecucin cuando se invoque el mtodo execute(). Es posible
detener la ejecucin de un hilo durante un periodo de tiempo determinado (milisegundos) mediante el
mtodo Thread.sleep(). Un ejemplo de tarea asncrona puede verse en el fragmento de cdigo 10.
private class MyTask extends AsyncTask<Void, Integer, Boolean> {

@Override
protected void onPreExecute() {
// TODO Auto-generated method stub
}

@Override
protected Boolean doInBackground(Void... params) {
// TODO Auto-generated method stub
while (!isCancelled()) {
try {
Thread.sleep(100);
// DO SOMETHING
}
catch(InterruptedException ie) {
Log.d("AsyncTask", "InterruptedException");
}
return true;
}

@Override
protected void onProgressUpdate(Integer... values) {
// TODO Auto-generated method stub
myProgressBar.incrementProgressBy(100);
}
}
Cdigo 10. Ejemplo de tarea asncrona que actualiza un ProgressBar cada 100 milisegundos.
Material a entregar
El material a entregar consistir en el proyecto Eclipse que se habr realizado para desarrollar
la GUI definida en esta prctica.
El proyecto deber exportarse en formato ZIP desde el entorno de desarrollo.
Deber incluirse un fichero de texto dnde aparezcan los nombres de los componentes del
grupo que ha realizado el trabajo.
El fichero comprimido deber alojarse en el espacio compartido de uno de los alumnos del
grupo.
Deber notificarse al profesor de prcticas (generar notificacin al cargar el fichero desde
PoliformaT) la carga del fichero en el espacio compartido.
La fecha lmite de entrega de la prctica ser el da 28 de octubre.