Menús en Android (1ra Parte)

En este artículo vamos a hablar sobre los menús en Android, un recurso importante para nuestras aplicaciones cuando queremos mostrar opciones secundarias o queremos simplificar espacio dentro de la vista. En Android existen tres tipos diferentes de menús:

· Menús principales: De estos decir que son los más habituales, aparece cuando se oprime el botón menú del dispositivo en la parte inferior del mismo.

· Submenús: Son usados para mostrar opciones secundarias y se pueden mostrar al pulsar una opción del menú principal.

· Menús Contextuales: Aparece cuando se hace una pulsación larga sobre algún elemento de la vista de la aplicación.

En este artículo hablaremos sobre el primer tipo de menú y dejaremos los otros tipos de menú para próximos artículos.

Los menús los podemos implementar de dos formas en nuestra aplicación, una mediante la definición en un fichero XML y la segunda mediante código. En este artículo abordaremos la primera por ser la que más utilizo por su rápida implementación.

Para entender el tema de los menús pues nada mejor que llevarlo a la práctica y para esto le pondremos unos menús a la app que comenzamos en los artículos anteriores.

Para diseñar un menú es necesario crear el fichero menú.xml en la carpeta res / menú. En nuestra app pondremos un menú con tres opciones, por lo que el diseño quedaría así:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
	<item android:id="@+id/Menu1" android:title="Opción 1" 
	      android:icon="@drawable/tag"></item>
	<item android:id="@+id/Menu2" android:title="Opción 2"
	      android:icon="@drawable/filter"></item>
	<item android:id="@+id/Menu3" android:title="Opción 3"
	      android:icon="@drawable/chart"></item>
</menu>

Este XML se compone de un elemento principal <menu> que contiene tantos elementos <item> como opciones queramos ponerle a nuestro menú. Destacar que los elementos <item> tiene propiedades como el id, el título y el icono. Podemos observar que nuestro XML tiene un detalle y es que los títulos están puestos directamente, algo que vimos que no era aconsejable, para esto creamos los Strings de las opciones y lo referenciamos en el XML por lo que quedaría así:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
	<item android:id="@+id/MenuPrincipal"  
            android:title="@string/texto_opcion1_menu" 
	      android:icon="@drawable/tag"></item>
	<item android:id="@+id/Menu2" 
            android:title="@string/texto_opcion2_menu"
	      android:icon="@drawable/filter"></item>
	<item android:id="@+id/Menu3" 
            android:title="@string/texto_opcion3_menu"
	      android:icon="@drawable/chart"></item>
</menu>

Ahora tenemos que implementar el evento onCreateOptionsMenu() del activity que queremos que muestre el menú. En este evento vamos a “inflar” el menú. Primero obtendremos una referencia al inflater mediante el método getMenuInflater() y posteriormente generamos la estructura del menú llamando a su método inflate() pasándole como parámetro el ID del menú definido en el XML que en nuestro caso será R.menu.menu. Por último devolveremos el valor true para confirmar que debe mostrarse el menú.

Ahora solos nos queda implementar cada una de las opciones del menú. Esto se hará incluyendo el evento onOptionsItemSelected() del activity que mostrará el menú. Este evento recibe como parámetro el ítem que fue pulsado, cuyo ID podemos recuperar con el método getItemId(). Con el ID podemos saber qué opción ha sido pulsada y ejecutar lo que queramos. Por ahora lo único que haremos es mostrar un mensaje.

@Override
    public boolean onOptionsItemSelected(MenuItem item) {
	    switch (item.getItemId()) {
	        case R.id.Menu1:
	            Toast.makeText(this, "Opcion 1 pulsada!",
                  Toast.LENGTH_LONG).show();
	            return true;
	        case R.id.Menu2:
	        	Toast.makeText(this, "Opcion 2 pulsada!", 
                  Toast.LENGTH_LONG).show();
	            return true;
	        case R.id.Menu3:
	        	Toast.makeText(this, "Opcion 3 pulsada!", 
                  Toast.LENGTH_LONG).show();
	            return true;
	        default:
	            return super.onOptionsItemSelected(item);
	    }
    }

De este código solo comentar como se muestra el mensaje y es utilizando la clase Toast, el mismo tiene el método makeText para indicar el texto que se mostrará en el mensaje y luego usamos el método show() para que se muestre en nuestro activity. De las notificaciones hablaremos en próximos artículos.

{ Leer Más }

Nuestra primera aplicación (2da parte)

En el artículo anterior comenzamos a desarrollar una pequeña aplicación. Definimos toda la parte visual y en esta entrega vamos a desarrollar toda la lógica de la aplicación. Recordando, nuestra app lo único que hará es que al hacer clic en un botón, este cambie el valor de su texto.

Antes de comenzar con la lógica veremos cómo nos quedó la parte visual de nuestra app.

Lo primero que debemos hacer es captar el evento que ejecutará el cambio de texto del botón y es el clic, es decir, cuando se le da clic al botón, este llama a su evento onClick, que es el que tenemos que capturar nosotros. Para eso vamos al fichero donde está la clase de que representa al Activity donde pertenece el botón, en nuestro caso se llama PrimeraActivity.java.

Lo primero que debemos hacer es declarar un objeto Button que es el que va a representar a nuestro botón de la parte visual en el código. Para esto escribimos el siguiente código:

private Button boton;

Señalar que para usar la clase Button de Android es necesario importar el paquete android.widget.Button como muestra la siguiente línea:

import android.widget.Button;

Después de creado el objeto, vamos a asociar el objeto creado con el botón visual. Esto lo hacemos en el método onCreate de la siguiente forma:

public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        boton = (Button)this.findViewById(R.id.button1);     
    }

Vamos a explicar un poco este código. El método onCreate de la case Activity se lanza cuando se lanza esta activity. Con el método findViewByid del activity lo que hacemos es devolver la referencia del objeto visual que tiene como id, el que se pasa por parámetro. En anteriores artículos hablamos de la clase R. En el código cuando ponemos R.id.button1 estamos accediendo al componente visual que tiene un id igual a button1.

Ahora vamos a capturar el evento onClick del botón. Esto lo haremos de la siguiente forma:

boton.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
            	//Acciones a ejecutar	
            }
        });

Después de saber cómo capturar el evento onClick del botón, solo nos queda cambiar el texto del mismo:

boton.setText(R.string.texto);

Es válido aclarar que texto es un String cualquiera que debemos crear para guardar el texto que vamos a mostrar cuando se de clic en el botón. El método onCreate quedaría así:

public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        boton = (Button)this.findViewById(R.id.button1);
        
        boton.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
            	boton.setText(R.string.texto);
            }
        });
    }

Con esto hemos hemos terminado nuestra primera aplicación en Android. En próximos artículos iremos enriqueciendo aún más esta aplicación.

{ Leer Más }

Nuestra primera aplicación (1era Parte)

Ya viene siendo hora de ponernos a programar. Soy de los que piensa que en la práctica es donde mejor se aprende la teoría por lo que hoy vamos a hacer una pequeña aplicación donde aplicaremos lo visto en artículos anteriores y algunas cosas nuevas. Nuestra primera aplicación lo único que hará es tener un botón que al hacer clic cambie su texto.

Lo primero que haremos es abrir el eclipse. Yo usaré la versión Indigo. Una vez abierto el eclipse crearemos una nueva aplicación para esto vamos a File > New > Android Project nos saldrá un cuadro donde pondremos el nombre de nuestra aplicación. Yo le llamaré Primera App. Luego deberemos seleccionar para qué versión de Android haremos nuestra aplicación. Esta selección es importante pues la versión que seleccionemos significará que será la versión mínima de Android que debe tener la aplicación que crearemos. En estos artículos usaremos la versión 2.2 por ser una de las más usadas.

Después de haber seleccionado la versión, entonces nos tocará seleccionar el nombre del paquete. En nuestro caso pondremos el siguiente: softpei.app. También debemos seleccionar el nombre de nuestra Activity. No hemos explicado qué es un Activity, pues llegó el momento: un Activity no es más que el componente principal de la interfaz gráfica. Viene siendo como la ventana en cualquier lenguaje visual. En nuestro caso seleccionaremos como nombre de nuestro Activity el de PrimeraActivity.

Con esto ya hemos creado los parámetros iniciales de nuestra aplicación. Ahora nos dedicaremos a la parte visual de la aplicación. Como vimos en el artículo Conociendo la estructura de un Proyecto Android, para ver el XML que representará la interfaz visual de nuestra Activity vamos a la carpeta res > layout. Ahí tendremos el fichero main.xml que por defecto tendrá el siguiente código:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello" />

</LinearLayout>

Aquí podemos ver que por defecto el Layout es linear con una orientación vertical y dentro hay un texto que tiene como valor lo que está en la variable hello.

Nosotros le haremos a esto unos pequeños ajustes, y es que quitaremos ese texto y pondremos un botón; entonces el código quedará así:

<Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

Aquí vemos que el texto del botón tiene un valor escrito en el fichero por lo que, como vimos en Los textos en Android es importante poner todos nuestros textos en el fichero strings.xml por lo que vamos a crear una variable en este fichero de nuestra aplicación para asignárselo al texto del botón creado. Nuestro fichero de textos quedaría así:

<resources>

    <string name="hello">Hello World, PrimeraActivity!</string>
    <string name="app_name">Primera App</string>
    <string name="texto_boton">Aceptar</string>

</resources>

Ahora procedemos a modificar el valor del botón por la variable creada, por lo que el main.xml quedará así:

<Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/texto_boton" />

Bueno ya tenemos la parte visual casi lista. Solo nos quedaría crear también un texto para cuando hagamos clic sobre el botón, para esto creamos otra variable en el fichero strings.xml:

<string name="texto_boton_clickeado">Botón Clickeado</string>

Con esto ya hemos terminado la parte visual, ahora nos quedará la lógica pero esto lo veremos en un próximo articulo.

{ Leer Más }

Los textos en Android

A veces los programadores no le damos mucha importancia a este tema del que se va a hablar hoy porque a veces es más rápido y fácil escribir el texto de un componente directamente pero es que imaginemos que tenemos una aplicación compleja y donde se usa un texto en varios componentes que es necesario cambiar luego. Tendremos que ir por toda la aplicación buscando cada uno de los textos para cambiarlo. Este problema se puede solucionar en Android usando el fichero strings.xml que se encuentra en el directorio res/values.

El archivo strings.xml guarda las cadenas de texto utilizando el lenguaje XML. El element raíz de este recurso es <resources></resources>. Cada vez que necesitemos agregar una nueva cadena de texto deberemos agregar un elemento <string> con un atributo name cuyo valor debe ser un identificador de la cadena. Vamos a poner un ejemplo de cómo quedaría el fichero strings.xml a la hora de definir el texto que se utilizará en un botón de Aceptar.

<?xml version="1.0" encoding="utf-8"?>
<resources>
	<string name="button_name">ACEPTAR</string>
</resources>

Aquí vemos un ejemplo sencillo de definición de un string que se puede usar entre otras cosas para el texto de un botón. Ahora vamos a ver cómo sería si lo quisiéramos usar. Para hacer referencia en nuestro código del string que hemos creado usaremos la siguiente sintaxis @string/[nombre_variable] para aplicar lo anteriormente explicado ponemos el siguiente código.

<Button android:text="@string/button_name"/>

En el código anterior se ha definido un botón que tiene como texto el valor de la variable button_name creado anteriormente en el fichero strings.xml

Así debemos hacer con cada uno de los textos que vayamos a utilizar en nuestra aplicación . Esta sin duda es una muy buena práctica en la programación de aplicaciones Android.

{ Leer Más }

Layouts en Android

Los layouts en Android son elementos no visuales que se usan para controlar la distribución, posición y dimensiones de los componentes que se inserten en su interior. En Android podemos usar dos formas para declarar layouts: la primera mediante código java y la segunda a partir de ficheros XML. Si comparamos estas dos formas, es sin dudas la segunda la más factible por varias razones entre las que se encuentra que existen herramientas visuales donde el programador o el diseñador pueden, de manera fácil diseñar una interfaz de usuario, otra ventaja es que es importante en términos de arquitectura tener separado la lógica de la interfaz de usuario de forma tal que si necesitamos hacer algunos ajustes en el diseño de la aplicación no conlleve a hacer grandes cambios en la aplicación.

En Android, los ficheros de layout codificados en XML se consideran recursos y se guardan dentro del directorio res/layout del proyecto.

Cada fichero XML está formado por un árbol de elementos que describen la forma en que los componentes y contenedores se acomodarán para definir la parte visual. Cada uno de estos elementos tiene atributos que se denominan propiedades y son las que describen cómo es que deben verse los elementos y su comportamiento en un contenedor.

Para cada elemento del XML se tendrá un nombre correspondiente a la clase base de ldirectorio Android. Por ejemplo si existe un elemento Button en el XML, se deberá tener un objeto de la clase Button en el código java.

Cuando una aplicación requiere hacer referencia desde el código java a uno de los elementos del XML es importante que el elemento tenga un identificador, la convención a utilizar para darle este valor de id es @+id/[nombreElemento] Este nombre tiene que ser único.

Después de haber diseñado la interfaz de usuario, es necesario compilar la aplicación para que en la clase R.java se genere un id que Android maneja de manera interna y que permite llamar a los ficheros desde el código java.

Dentro del método onCreate() de la actividadse escribirá la sentencia setLayoutView() con el parámetro R.layout.[nombreDelFicheroXML]. Si se quiere hacer uso del elemento en específico se usa el método findViewById() y se le pasa como parámetro el id del componente. Por ejemplo:

btn = (Button) findViewById(R.id.btn);

Con esta breve explicación acerca de los layouts y su definición en un fichero XML tenemos algunos elementos para el diseño de una aplicación Android, aunque sería bueno abundar un poco más en el tema para aprovechar más las potencialidades de estos recursos, de forma tal que hagamos aplicaciones más eficientes.

{ Leer Más }

Uso de JAXB en el trabajo con XML y XSD en JAVA.

En esta entrada veremos cómo usar el framework JAXB en JAVA para trabajar con los XML, el escenario podría ser el siguiente.

Se nos ha entregado como parte de un proyecto un XSD a partir del cual debemos generar XMLs y los mismos deben ser deserializados a objetos JAVA. Esto puede incluir acciones de validación contra el XSD, lo cual será objeto de otra entrada.

Veremos como usando el XSD podemos:

1. Llevar el XSD al eclipse.

2. Generar las clases que se encargaran de trabajar en la serialización y deserialización de los objetos y XML.

3. Crear los XML.

4. Leer los datos del XML y usarlos en los objetos de nuestra aplicación.

Los pasos serán los siguientes:

1. Creamos un proyecto JAVA en el Eclipse.

2. Lo convertimos en un proyecto Maven desde el mismo eclipse.

3. Le agregamos las dependencias necesarias.

4. Creamos un XSD con una estructura definimos por nosotros.

5. Creamos las clases que se encargaran de acceder a los XML correspondientes a este XSD.

6. Creamos un XML a partir del XSD del paso 4.

7. Creamos una clase que nos permita obtener los datos del XML.

Los 2 primeros pasos no necesitan explicación.

Para el paso 3 deben ir al pom del proyecto Maven y agregar estas dependencias.

Para las dependencias de Maven deben usar las siguientes:

<dependencies>

	<dependency>

		<groupId>com.sun.xml.bind</groupId>

			<artifactId>jaxb-xjc</artifactId>

			<version>2.1.13</version>

	</dependency>

	<dependency>

		<groupId>com.sun.xml.bind</groupId>

		<artifactId>jaxb-impl</artifactId>

		<version>2.1.13</version>

	</dependency>

</dependencies>

En la siguiente imagen pueden ver las dependencias que se descargan:

Paso 4:

Para crear el XSD Ahora hacemos clic derecho sobre la carpeta src y creamos un nuevo archivo XSD tal y como se muestra en la imagen:

Luego veremos la siguiente pantalla:

En la sección de Types daremos clic derecho y crearemos un tipo complejo llamado Capitulo.

Para añadirle elementos al tipo complejo damos clic derecho encima de él y luego damos clic en Add Element, en mi caso queda algo como lo siguiente:

Ahora debemos crear un elemento para que nos almacene el tipo complejo que acabamos de crear. Para eso vamos a la sección Elements y damos clic derecho y luego en Add Element. Por defecto nos lo pone de tipo String, así que debemos darle doble clic y luego en el elemento damos clic derecho y seleccionamos “Set Type” y luego “Browse” para buscar el tipo complejo que creamos.

Ahí damos OK y listo.

Tendremos lo siguiente:

Si pasan a la sección de Source verán lo siguiente:

Paso 5:

Damos clic derecho sobre el esquema creado en el paso 4 y seleccionamos Generate -> JAXB clases.

Aquí seleccionamos el proyecto, damos Next, y llegamos a esta pantalla donde especificamos el paquete en que queremos que se generen las clases.

Damos finish y listo. Si todo fue bien veremos lo siguiente:

Como ven se nos ha creado el paquete con las clases dentro que representan el tipo de dato complejo que creamos en el XSD. Revisen la clase Capitulo para que vean el código generado.

Paso 6:

Ahora damos clic derecho sobre el XSD y seleccionamos la opción Generate -> XML File.

Damos Next.

Y luego Finish.

Ahora vamos al XML y editamos sus datos, en mi caso puse este.

Paso 7:

Ahora la clase que debemos crear es realmente sencilla. Les dejo el código porque se explica por sí solo.

Cuando ejecutamos vemos lo siguiente:

El código lo pueden descargar desde aquí  y compilar con Maven.

Cualquier duda pues dejen un comentario.

---

{ Leer Más }