jueves, 22 de diciembre de 2011

Primera aplicación sencilla

Vamos a mostrar los pasos para crear una primera aplicación sencilla donde introduzcamos un nombre en una caja de texto y mediante un botón nos aparezca otra pantalla con el nombre introducido.

Lo primero es crear un proyecto nuevo en eclipse, para ello pulsamos Ctrl+N o pinchamos en File --> New --> Other, apareciendo el asistente de creación de proyectos. Seleccionamos Android Project y nos aparecerá otra ventana donde pondremos el nombre de la aplicación y el target que queramos.









A la hora de seleccionar el Target, vemos que para una misma plataforma podemos elegir el Target de Android o de Google APIs. ¿Cual es la diferencia? Pues si pensamos usar en nuestro proyecto Google Maps u otra librería específica de Google, deberíamos elegir el Target Google APIs. Si no vamos a usar nada de esto, seleccionaremos el Target de Android, que sólo incluye librerías del core de Android.







En la última pantalla de configuración, nos pide que le introduzcamos el nombre del paquete y el nombre de la actividad inicial. En Java es muy comun poner el nombre del dominio en el nombre del paquete pero al reves, así que vamos a ello.









Con esto, ya tendremos creado nuestro proyecto listo para codificar.








Lo primero a realizar es remodelar la actividad principal de nuestra aplicación, ya que por defecto, Eclipse te monta un ejemplo "Hola Mundo" que a nosotros no nos hace falta. Hay que añadir una caja de texto y un botón y debemos hacerlo en el fichero main.xml. Si echamos un vistazo a este fichero, vemos que podemos editarlo en modo diseño o modo texto (yo lo haré por código). Dentro del Layout es donde debemos colocar nuestros controles, ya que un Layaout es un contenedor de controles (ya hablaremos de estos contenedores).
El código debe quedar así:

<?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" >

    <EditText 
       android:id="@+id/txtNombre"
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"
        />
    
    <Button android:id="@+id/btnAceptar"
        android:text="@string/textoBoton"
        android:layout_width="wrap_content"
       android:layout_height="wrap_content"
        />

</LinearLayout>

Vamos por partes:

  • La propiedad ID: con la sintaxis @+id, estamos indicando que cuando compile, nos genere en la clase R.java una nueva constante referente al control que podremos usar más adelante en nuestro código.

  • La propiedad Text: con la sintaxis @string, estamos indicando que la cadena de texto la coja del fichero de constantes string.xml. También podemos poner el texto directamente mediante un string.

    Una vez conseguido esto, vamos a crear la pantalla que recojerá la cadena de texto y la mostrará por pantalla. Para ello, pulsamos Ctrl+N y nos aparece el asistente para crear nuevo elemento. Dentro de la carpeta Android, seleccionamos el componente Layout, ya que nosotros queremos crear una pantalla nueva.









    Luego de damos un nombre a nuestra nueva pantalla, seleccionamos que elemento root queremos implementar (seleccionamos LinearLayout para que nos cree el contenedor) y le damos a finalizar.












    En nuestra nueva pantalla sólo vamos a crear una etiqueta que muestre lo introducido en la caja de texto anterior. Debe quedarnos algo así:

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


      Con esto ya tenemos nuestras dos interfaces gráficas o Layouts. Ahora toca codificar lo que queremos que haga la aplicación cuando introduzcamos una palabra en la caja de texto y pulsemos el botón. Por tanto, nuestra clase ActividadInicial debe contener las siguientes líneas:

      • Declaramos las dos variables que harán referencia a nuestros controles.
      • private EditText txtCadena;
         private Button btnAceptar;
        

      • Referenciamos las variables a los controles.
      • txtCadena = (EditText) findViewById(R.id.txtNombre);
          btnAceptar = (Button) findViewById(R.id.btnAceptar);
        

      • Creamos el evento OnClick del botón.
      • btnAceptar.setOnClickListener(new OnClickListener() {
           public void onClick(View v) {
            pasarStringactividadFinal();
           }
          });
        

      • Creamos la función llamada desde el evento que contiene la lógica para llamar a la siguiente actividad.
      protected void pasarStringactividadFinal() {
        // establecemos un texto por defecto si no tiene nada
        if (txtCadena.getText().length() == 0) {
         txtCadena.setText(R.string.txtDefecto);}
        // Creamos el Intent que llamará de una actividad a otra.
        // Como parámetros, para este constructor, necesitamos pasarle
        // el contexto actual y la clase de destino
        Intent intent = new Intent(this, ActividadFinal.class);
        // Creamos un objeto Bundle que es parecido a un Hash-Table o
        // tabla de clave-valor y le insertamos el valor a pasar
      //mediante la propiedad putString(clave,valor)
        Bundle ht = new Bundle();
        ht.putString("Parametro", txtCadena.getText().toString());
        // Añadimos la información al Intent mediante la propiedad
      //putExtras(bundle)
        intent.putExtras(ht);
        // Llamamos a la nueva actividad pasándole el intent
        startActivity(intent);
       }
      }
      

      La clase ActividadFinal debe contener la siguiente información:

      • Heredar de la clase Actividad y crear el evento onCreate enlazando mediante el
        ContentView el layout correspondiente (en este caso muestratextbox.xml).
      • public class ActividadFinal extends Activity {
         /** Called when the activity is first created. */
         @Override
         public void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          setContentView(R.layout.muestratextbox);
        
         }
        }
        
        

      • Mostramos por pantalla la cadena pasada
      • //Referenciamos el control para establecerle el texto
          TextView lblContenedor = (TextView)findViewById(R.id.lblMensaje);
          //Instanciamos un objeto Bundle para extraer los valores 
          //pasados desde la pantalla anterior
          Bundle ht = getIntent().getExtras();
          //Extraemos el valor de la clave correspondiente mediante la 
          //propiedad getString() y la enlazamos a la etiqueta para mostrarla por pantalla
          lblContenedor.setText("El texto introducido es " + ht.getString("Parametro")); 
         
        Por último, solo nos queda añadir en el fichero AndroidManifest.xml la nueva actividad creada.
        <activity android:name=".ActividadFinal"></activity>

      Entrada dedicada a Carmen Delgado, a ver si se pone pronto a programar ;-)

      Maikel.

      1 comentario:

      1. Lo haré. Con estos tutoriales que haces tan geniales. Gracias por la dedicatoria Maikel.

        ResponderEliminar