lunes, 12 de abril de 2010

Droid Draw y Android

En esta sección vamos a ver como crear un simple aplicativo usando Android, para esto vamos a necesitar Droid Draw, para hacer el diseño gráfico del aplicativo y Eclipse (con el plugin de Android instalado y funcionando), en cual haremos la programación de eventos.
Para este ejemplo estoy usando Ubuntu 9.10 y JDK1.6

DISEÑO DE GUI

Primeramente, descargamos Droid Draw de acuerdo a nuestro sistema operativo de http://www.droiddraw.org/




Se nos descargará el archivo droiddraw-r1b14.tgz, el cual tenemos que descomprimirlo en algún lugar de nuestro equipo.
Desde un terminal ejecutamos el archivo droiddraw.jar de la siguiente manera java -jar droiddraw.jar




Una vez hecho esto, se nos abrirá Droid Draw y procederemos a diseñar el interfaz gráfico:
En la parte izquierda tenemos la distribución de layouts y el tamaño de la pantalla, para este ejemplo cambiemos solo la distribución de widgets o controles en pantalla, para esto, en Root layout seleccionamos "Table Layout".

Sobre la parte derecha tenemos los diferentes opciones para el diseño del GUI de nuestro aplicativo de Android.
Para tener los controles organizados, seleccionemos el Tab llamado Layouts y arrastremos al Table Layout del lado izquierdo de nuestra pantalla cuatro "Table Row".



Luego demos click sobre el tab Widgets y arrastremos un TextView dentro del primer Table Row. Al arrastrar se nos preguntara si queremos agregarle en el Table Row o Table Layout, entonces seleccionamos Table Row.





Ahora cambiemos el texto del Text View, para esto demos click sobre TextView y seleccionamos Properties del lado izquierdo de la pantalla. Buscamos la propiedad llamada Text y colocamos algun texto, por ejemplo Prueba con Android y damos click sobre Apply.
El siguiente paso es para la segunda Table Row. Damos click en Widgets y arrastramos un EditText y un Button al segundo TableRow.




Damos click sobre el EditText seleccionamos properties en el id colocamos @+id/edittext01 (para que pueda ser reconocido de una maneras más fácil desde el código de manejo de eventos), tambien borramos lo que se encuentre en la propiedad Text y damos click sobre Apply. Despúes de esto, seleccionamos el Botón, cambiamos el id por @+id/button01 y en text colocamos "1" y damos click en Apply.
Lo mismo hacemos para el tercer TableRow en donde arrastramos un control EditText y un control Button, con la diferencia que en el id tendrán los valores
@+id/edittext02 y @+id/button02. y lo mismo para el cuarto TableRow , con la diferencia que en el id tendrán los valores
@+id/edittext03 y @+id/button03. No olvidarse dar click sobre el boton Apply, luego de hacer los cambios en los widgets.




Una vez que ya tenemos listo el GUI de nuestro aplicativo generemos el respectivo código XML, dando click en la opción Generate, que se encuentra bajo el menu, lo cual nos genera un texto XML en la seccion Output, copiemos todo este código para luego pegarlo en Eclipse.

CREACION DE PROYECTO EN ECLIPSE

Desde Eclipse, creemos un nuevo proyecto Android con las siguientes características:
Nombre del Proyecto: Mensaje,
Build Target: 2.0.1
Application Name: Demo
Package Name: com.example
Create Activity: Mensaje
y damos click en Finish




Abrimos el proyecto Mensaje y vamos a res/layout/main.xml
Bajo la sección llamada views, seleccionamos main.xml, para ver el xml del GUI. Seleccionamos todo, lo borramos y pegamos lo que copiamos de la sección Output de DroidDraw.
Si damos click sobre Layout, veremos que tenemos el mismo GUI que hicimos en DroidDraw.



PROGRAMACION DE EVENTOS:
Para programar eventos en Android debemos declarar los controles, buscar y asociar los controles y de ser el caso asignarles Listeners(para el caso de click de boton, click de Checkbox, click de Radio boton, change de EditText, etc).
Demos click en src/com.example/Mensaje.java
Declaremos las siguientes variables(en una nueva linea luego de ... extends Activity)

EditText et01;
EditText et02;
EditText et03;

Button bt01;
Button bt02;
Button bt03;


Luego en la parte final del método onCreate asociemos las variables declaradas a los controles, es decir:
et01=(EditText)findViewById(R.id.edittext01);
et02=(EditText)findViewById(R.id.edittext02);
et03=(EditText)findViewById(R.id.edittext03);
bt01=(Button)findViewById(R.id.button01);
bt02=(Button)findViewById(R.id.button02);
bt03=(Button)findViewById(R.id.button03);

y los asociamos con sus listeners(que ya los vamos a crear)
bt01.setOnClickListener(mClickListener01);
bt02.setOnClickListener(mClickListener02);
bt03.setOnClickListener(mClickListener03);



Para la implementacion de Listeners(que heredan de la clase android.view.View.OnClickListener) debemos crear funciones con el siguiente formato:

private OnClickListener mClickListener01 = new OnClickListener() {
@Override
public void onClick(View v) {
et01.setText("Click en 1");
}
};



private OnClickListener mClickListener02 = new OnClickListener() {
@Override
public void onClick(View v) {
et02.setText("Click en 2");
}
};


private OnClickListener mClickListener03 = new OnClickListener() {
@Override
public void onClick(View v) {
et03.setText("Click en 3");
}
};



Poniendo todo junto, queda de la siguiente manera:

package com.example;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;

public class Mensaje extends Activity {

EditText et01;
EditText et02;
EditText et03;

Button bt01;
Button bt02;
Button bt03;

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
et01 = (EditText) findViewById(R.id.edittext01);
et02 = (EditText) findViewById(R.id.edittext02);
et03 = (EditText) findViewById(R.id.edittext03);
bt01 = (Button) findViewById(R.id.button01);
bt02 = (Button) findViewById(R.id.button02);
bt03 = (Button) findViewById(R.id.button03);
//Asignacion de Listeners a botones
bt01.setOnClickListener(mClickListener01);
bt02.setOnClickListener(mClickListener02);
bt03.setOnClickListener(mClickListener03);
}

private OnClickListener mClickListener01 = new OnClickListener() {
@Override
public void onClick(View v) {
et01.setText("Click en 1");
}
};

private OnClickListener mClickListener02 = new OnClickListener() {
@Override
public void onClick(View v) {
et02.setText("Click en 2");
}
};

private OnClickListener mClickListener03 = new OnClickListener() {
@Override
public void onClick(View v) {
et03.setText("Click en 3");
}
};
}

Finalmente ejecutamos la aplicación, dando boton derecho sobre el proyecto, seleccionando Run As y luego Android Application.

No hay comentarios:

Publicar un comentario