Demostración M2 - PROGRAMACION MOVIL (ANDROID ¡OS, HTML5)

28/3/2019 Demostración M2: PROGRAMACION MOVIL (ANDROID ¡OS, HTML5) (MAR2019)
Demostración
Resultado Diseña una aplicación móvil básica en Android Studio, aplicando programación Java en entorno
de Aprendizaje Android Studio y utiliza componentes de diseño de interfaz en el ámbito de la programación.
Mi primera App
En la presente demostración se aspira explicar cómo capturar datos numéricos, procesarlos y mostrar su resultado en la interfaz de
una App básica. Estos datos son ingresados por el usuario, utilizando los componentes (EditText), se procesan con métodos en Java
al pulsar un botón (Button) y se visualiza su resultado mediante un mensaje en la interfaz, utilizando el componente (TextView).
El desarrollo de este tipo de App básicas nos permitirá comprender la base de App más complejas, como por ejemplo: realizar una
calculadora, calcular el índice de masa corporal (IMC), calcular la base de un triángulo, etc. Existe un sin fin de aplicaciones
que podemos realizar comprendiendo estos conceptos básicos.
Nuestra demostración fue recuperada de un sitio web especializado en tutoriales de programación, la cual se destaca por su clara
explicación, incluye varios ejercicios que nos servirán para otros capítulos y en especial la demostración los ayudará a ejecutar la
actividad práctica evaluada de este módulo.
En este caso en particular, el usuario debe ingresar dos números en la interfaz, utilizando controles de tipo EditText, esta interfaz
debe mostrar un mensaje que solicite la carga de los valores, luego deberá pulsar un botón (Button) para sumar los dos valores
https://ipp.instructure.com/courses/2643/pages/demostracion-m2 1/24
ingresados y mostrar el resultado en un mensaje (TextView).
Luego de realizar los pasos de la demostración, nos deberá quedar una interfaz parecida a la siguiente:
Lo primero que debemos hacer es borrar el TextView que aparece por defecto cuando se crea un proyecto. Ahora desde la ventana
"Palette" seleccionamos de la pestaña "Form Widgets" el control "TextView" y lo arrastramos a la ventana de diseño de nuestra
interfaz:
Seguidamente, seleccionamos el componente y en la ventana de propiedades especificamos la propiedad text (como habíamos visto
anteriormente) disponemos el texto "Ingrese el primer valor:":
También vamos a especificar la propiedad "Id", la misma aparece de primera en la paleta de propiedades y le asignaremos el valor
@+id/tv1 (el nombre es el que se indica luego de la barra es decir cambiamos textView1 por tv1) Cuidado de no borrar @+id/
Le asignamos como nombre a este objeto: tv1 (recordemos que se trata de un objeto de la clase TextView).
Ahora de la paleta de componentes seleccionamos la pestaña "Text Fields" y arrastramos el primero (el que tiene la etiqueta abc).
En la ventana de properties estando seleccionado el EditText configuramos la propiedad Id... con el nombre et1, después
utilizaremos estos nombre de variable para programarlos en Java.
Efectuamos los mismos pasos para crear el segundo TextView y EditText (inicializamos las propiedades respectivas) Definimos los id
con los nombres tv2 y et2, el resultado visual debe ser algo semejante a esto:
De la pestaña "Form Widgets" arrastramos un control de tipo "Button":
Inicializamos la propiedad text con el texto "Sumar" y la propiedad id la dejamos con el valor ya creado llamado "button1".
Para terminar con nuestra interfaz visual arrastramos un tercer objeto de tipo TextView y definimos la propiedad id con el valor "tv3" y
la propiedad text con el texto "resultado", recordemos que la interfaz final debe ser semejante a esta:
Es importante una vez finalizada la interfaz, proceder a guardarla (icono de los diskettes) o la opción File->Save para que se
actualicen los archivos que se generan automáticamente.
Hasta ahora hemos trabajado solo con el archivo xml (activity_main.xml) donde se definen los controles visuales de la ventana que
estamos creando. Abrimos el archivo MainActivity.java que lo podemos ubicar en la carpeta src:
La clase MainActivity hereda de la clase Activity. La clase Activity representa una ventana de Android y tiene todos los métodos
necesarios para crear y mostrar los objetos que hemos dispuesto en el archivo xml.
El código fuente de la clase MainActivity.java es:
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
Se debe sobrescribir el método onCreate heredado de la clase Activity donde procedemos a llamar la método setContentView
pasando como referencia una valor almacenado en una constante llamada activity_main contenida en una clase llamada layout que
a su vez la contiene una clase llamada R (veremos más adelante que el ADT se encarga de crear la clase R en forma automática y
sirve como puente entre el archivo xml y nuestra clase MainActivity).
Captura de eventos:
Definimos variables en java donde almacenamos las referencias a los objetos definidos en el archivo XML.
Se Definen tres variables, dos de tipo EditText y finalmente una de tipo TextView.
import android.widget.EditText;
import android.widget.TextView;
private EditText et1,et2;
private TextView tv3;
@Override
@Override
return true;
La forma más fácil de importar las clases EditText y TextView es tipear las dos líneas:
Y luego presionar las teclas Control-Shift-O. Esto hace que se escriban automáticamente los dos import:
No se definen TextView para los dos mensajes "Ingrese el primer valor" e "Ingrese el segundo valor" ya que no necesitaremos
interactuar con ellos. También veremos que el objeto de la clase Button no es necesario definir un atributo sino que desde el archivo
XML inicializaremos la propiedad OnClick.
En el método onCreate debemos enlazar estas variables con los objetos definidos en el archivo XML, esto se hace llamando al
método findViewById:
public void onCreate(Bundle savedInstanceState) {
setContentView(R.layout.main);
et1=(EditText)findViewById(R.id.et1);
tv3=(TextView)findViewById(R.id.tv3);
Al método findViewById debemos pasar la constante creada en la clase R (recordemos que se crea automáticamente esta clase) el
nombre de la constante si debe ser igual con el nombre de la propiedad del objeto creado en el archivo XML. Como la clase
findViewById retorna una clase de tipo View luego debemos utilizar el operador cast (es decir le antecedemos entre paréntesis el
nombre de la clase).
Ya tenemos almacenados en las variables las referencias a los tres objetos que se crean al llamar al
método:setContentView(R.layout.main); .
Ahora planteamos el método que se ejecutará cuando se presione el botón (el método debe recibir como parámetro un objeto de la
clase View) En nuestro ejemplo lo llamaremos sumar:
import android.view.View;
@Override
@Override
return true;
//Este método se ejecutará cuando se presione el botón
public void sumar(View view) {
Debemos importar lar clase View (Control-Shift-O)
Ahora debemos ir al archivo XML e inicializar la propiedad OnClick del objeto button1 con el nombre del método que acabamos de
crear (este paso es fundamental para que el objeto de la clase Button pueda llamar al método sumar que acabamos de crear):
Finalmente implementaremos el método para sumar los dos valores ingresados en los controles EditText:
String valor1=et1.getText().toString();
int nro1=Integer.parseInt(valor1);
int suma=nro1+nro2;
String resu=String.valueOf(suma);
tv3.setText(resu);
Extraemos el texto de los dos controles de tipo EditText y los almacenamos en dos variables locales de tipo String. Convertimos los
String a tipo entero, los sumamos y el resultado lo enviamos al TextView donde se muestra la suma (previo a convertir la suma a
String).
La clase completa queda entonces como:
import android.view.View;
@Override
@Override
return true;
// Cuando se presione el botón, se ejecutará el método sumar().
int suma=nro1+nro2;
String resu=String.valueOf(suma);
tv3.setText(resu);
Si ejecutamos nuestro programa podemos ver ahora que luego de cargar dos valores al presionar el botón aparece en el tercer
TextView el resultado de la suma de los dos EditText:
El material de esta demostración fue recuperado de aquí

(http://www.tutorialesprogramacionya.com/javaya/androidya/detalleconcepto.php?codigo=134&inicio=0) .
Con la visualización del siguiente vídeo, se ejemplifica los pasos señalados a lo largo de está demostración, para una mejor
comprensión del tema:
VIDEO: Mi primera APP
M2 - Demostración - Mi primera App
03:06
La creación de una App es muy amplia, sin embargo, a través de esta demostración pretendemos indicar que partiendo de ejecutar
una operación básica, como el ejemplo de sumar dos valores ingresados por el usuario, nos da el puntapié inicial para realizar
cualquier App de cálculos aritméticos, como por ejemplo: simuladores de venta, simuladores de hipoteca, etc, existe un sin fin de
aplicaciones que se pueden realizar sobre la base de operaciones matemáticas básicas. Otro punto importante es la claridad como se
explica la demostración y nos conduce a poder realizar la actividad evaluada este módulo.
Finalmente, al visualizar este ejemplo nos permite comprender los conceptos básicos de una aplicación móvil, como insertar
botones, textos, entradas de textos, configurar una aplicación desde cero, y aprender como ejecutar la App, ya sea en un
simulador o en un dispositivo real. También comprendimos el uso de Intent para el envió de datos entre distintos activity, como si
fueran distintas pantallas de un navegador web. Por lo tanto, la demostración nos permitió conocer las herramientas esenciales
para diseñar aplicaciones básicas y comprender la raíz de aplicaciones complejas.

Demostración M2 - PROGRAMACION MOVIL (ANDROID ¡OS, HTML5)

Încărcat de

Informații document

Descriere originală:

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Demostración M2 - PROGRAMACION MOVIL (ANDROID ¡OS, HTML5)

Încărcat de

Drepturi de autor:

Formate disponibile

28/3/2019 Demostración M2: PROGRAMACION MOVIL (ANDROID ¡OS, HTML5) (MAR2019)

ingresados y mostrar el resultado en un mensaje (TextView).

De la pestaña "Form Widgets" arrastramos un control de tipo "Button":

El código fuente de la clase MainActivity.java es:

public class MainActivity extends Activity {

protected void onCreate(Bundle savedInstanceState) {

public boolean onCreateOptionsMenu(Menu menu) {

public class MainActivity extends Activity {

private EditText et1,et2;

private TextView tv3;

protected void onCreate(Bundle savedInstanceState) {

public boolean onCreateOptionsMenu(Menu menu) {

private EditText et1,et2;

private TextView tv3;

public void onCreate(Bundle savedInstanceState) {

public class MainActivity extends Activity {

private EditText et1,et2;

private TextView tv3;

protected void onCreate(Bundle savedInstanceState) {

public boolean onCreateOptionsMenu(Menu menu) {

//Este método se ejecutará cuando se presione el botón

public void sumar(View view) {

Debemos importar lar clase View (Control-Shift-O)

public void sumar(View view) {

La clase completa queda entonces como:

public class MainActivity extends Activity {

private EditText et1,et2;

private TextView tv3;

protected void onCreate(Bundle savedInstanceState) {

public boolean onCreateOptionsMenu(Menu menu) {

// Cuando se presione el botón, se ejecutará el método sumar().

public void sumar(View view) {

El material de esta demostración fue recuperado de aquí

VIDEO: Mi primera APP

M2 - Demostración - Mi primera App

S-ar putea să vă placă și