Inicio > Android Sdk > T02.- Mi Primera Aplicación Android – Uso de editText, Botones y MessageBox

T02.- Mi Primera Aplicación Android – Uso de editText, Botones y MessageBox

Me gusta comenzar por el principio :D, por lo que lo primero que vería nuestro vendedor seria el login, comencemos por allí :D, algo así estimo que debería quedar…

No es mas que una ventana de login muy simple, donde nos aparecerá el logo de la aplicación, un campo para introducir el nombre del usuario, en este caso sera una cédula y un botón de aceptar, esto es realmente simple, y básico, así no debería hacerse un login, deberíamos pedir password y validarlo contra una base de datos y eso, pero por ahora esto nos sera suficiente.

Para crear esta interfaz vamos a utilizar 4 elementos:

  • ImageView
  • TextView
  • EditText
  • Button

Y obtendremos algo como esto

Ahora lo q vamos a hacer es muy simple, el valor introducido lo tomamos y lo mostramos en un alert box (esto para saber que estamos leyendo bien el dato.

La primera pregunta que nos viene a la mente es ¿Donde Programo el botón?

Pero vamos hagamos las cosas en orden, lo primero que recomiendo y no es obligatorio es cambiar las ID de los elementos de la interfaz de usuario, ya que nuestro Eclipse las nombre como “button1”, “textView1” y muchas veces cuando tenemos muchos elementos en la UI, estos nombres no nos dicen absolutamente nada, por lo que lo primero es cambiar estos ID, solo debemos acceder así:


Clic Derecho sobre el elemento -> ChangeID (Menú Contextual)

En mi caso, verán a lo largo del desarrollo que estaré mis ID tienen cierto patrón y es algo como:

abreviaturatipoelemento_NombreEnIngles

Siempre es bueno tener un Estándar de como codificar los elementos para tener un orden en el desarrollo.

La primera pregunta es donde capturamos el eventos clic del botón deseado, en Android es llamado OnClickListener, esto lo crearemos en la actividad principal, en este caso sera: PrincipalActivity.java la cual nos trae el siguiente codigo:

package com.pedidos.oserpa;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;

public class PrincipalActivity extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.principal);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.principal, menu);
        return true;
    }
}

Debemos importar algunas librerías adicionales para poder activar el escuchador de eventos en nuestra aplicación.

import android.view.View;
import android.widget.Button;

Ahora solo falta implemente los metodos para que sea capturado el evento click.. quedando algo asi…

package com.pedidos.oserpa;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

public class PrincipalActivity extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.principal);
        
        final Button btn_pedido = (Button) findViewById(R.id.bt_Acept);
        btn_pedido.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
            	MessageBox("Prueba");
            }
        });
        
    }

    public void MessageBox(String message){
        Toast.makeText(this,message,Toast.LENGTH_SHORT).show();
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.principal, menu);
        return true;
    }
}

Con esto, ya vemos como podemos mostrar un mensaje, pero no es lo que queremos al final, al menos deberíamos capturar el código, y mostrarlo en un MessageBox…

package com.pedidos.oserpa;

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

public class PrincipalActivity extends Activity {
	EditText codigo;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.principal);
        
        codigo = (EditText)findViewById(R.id.et_CodeSeller);

        final Button btn_pedido = (Button) findViewById(R.id.bt_Acept);
        btn_pedido.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
            	String str = codigo.getText().toString();
            	MessageBox(str);
            }
        });
        
    }

    public void MessageBox(String message){
        Toast.makeText(this,message,Toast.LENGTH_SHORT).show();
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.principal, menu);
        return true;
    }
}

Por ahora esto es suficiente, podemos seguir jugando un rato esto que hemos aprendido, agregar mas editText, mas botones, en fin… hacer mas operaciones con botones y texto, al final cualquier aplicación se basa en este evento… Evento Clic.

No olvides visitar el repositorio para revisar las modificaciones al código
.

Anuncios
  1. 12 noviembre, 2012 en 7:00 PM

    vaya que buena la aplicacion, la verdad es que se ve bastante bien, y funcional..

  1. No trackbacks yet.

Responder

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: