App inventor 2 en español
Cómo programar los teléfonos móviles con Android.
Curso de App inventor 2 en español - Juan Antonio Villalpando

-- Tutorial de iniciación de App Inventor 2 en español --

Volver al índice del tutorial

____________________________
107.- Java Brigde - 2.- Test con puntos. CasillaDeVerificación.

- Framework.

Para construir nuestra aplicación vamos a utilizar Framework. Un Framework es como una plantilla, un código con las líneas de inicio que iremos modificando y ampliando.

En principio utilizaremos nuestro código de Botonrojo como framework. Podremos añadir las partes correspondientes a los componentes: botones, etiquetas, casilleros,... y el código de funcionamiento.

Al principio el código Java es complicado de interpretar, de todos modos muchas de sus líneas no son necesarias de entender completamente, lo importante ahora es ver dónde y las modificaciones que tenemos que hacer para que nuestras aplicaciones básicas funcionen.

Las líneas de códigos Java están en inglés, sería conveniente que para estudiar Java Bridge y App inventor, pongamos a éste en inglés. Una vez aprendido App inventor en español, nos será fácil adaptarnos al código en inglés, que es lo más usual en programación.

En el código hay que respetar la mayúsculas y minúsculas. No poner acentos ni eñes, cuidado al poner espacios.

_________________
- Clase en Java.

La clase en Java se denomina class. Todas las líneas de código de Java están dentro de una clase. Todo nuestro código estará dentro de la clase "Screen1" que será la pantalla de inicio de nuestra aplicación.

Una clase en Java es lo que en App inventor es un componente. El Java Bridge tiene clases para todos sus componentes: Botón, Caja de Texto, Deslizador,... Utilizaremos las clases de estos componentes.

___________________________________________________________
- Importar, Declarar y Crear los componentes de nuestra aplicación.

En App inventor para poner un componente, por ejemplo un Botón, simplemente lo arrastramos desde la izquierda a la pantalla de Diseño. En Java debemos realizar tres procesos.

1.- Importar el código del componente.

En Java nuestra pantalla Screen1 deberá estar en una clase. Además también deberemos insertar una clase por cada componente que utilizemos en la aplicación, para ello debemos importar en el inicio del código las clases necesarias. La aplicación Botonrojo solo tiene una clase, concrétamente la correspondiente a Button, por eso al principio del código encontramos esta línea

import com.google.appinventor.components.runtime.Button;

Aunque tengas varios Botones en el código, solo es necesario importar el Button una sola vez, esta clase valdrá para todos los Botones que pongas en el código. A cada Botón se le llama instancia. A la clase se le puede llamar type Button.

Además de importar los componente, siempre debemos importar otras clases genéricas.

2.- Declarar la instancia de cada componente.

En Java debemos declarar el tipo (clase) de cada objeto que utilicemos. Un objeto es una instancia (redButton) de una clase (Button). En el código que estamos realizando, tenemos que declarar el objeto "redButton".

Supongamos que tenemos nuestro Botón llamado "redButton" y además una Etiqueta1, Etiqueta2, CampoDeTexto1, btnCerrar, btnAbrir, escribiremos esto...

En la segunda columna pondremos Button, Label, TextBox, Slider,... según su nombre en inglés.

3.- Crear cada instancia y poner Propiedades.

Una vez importada la clase de un componente y declarada las instancias, debemos crearlos. Lo hacemos con el comando "new".

Las instancias se crean en la parte de "$define ()".

Además también se pueden establecer las Propiedades.

Las demás instancias también irían dentro de este mismo $define (). Si tenemos Etiqueta1, Etiqueta2, Etiqueta3, cada una de estas instancias tendrá su propio new y sus Propiedades.

Agrega en el código que estamos haciendo las Propiedades indicadas y pulsa el botón verde de ejecutar en el emulador o en el teléfono móvil para ver cómo responde la aplicación.

3.- Establecer los eventos.

Eventos son las acciones que podemos hacer con los componentes: Click, LongClick, TouchUp, TouchDown, Changed, PositionChanged,... dependiendo de los componentes se podrá hacer unas u otras acciones (eventos).

Los eventos los establecemos cuando en la parte de Bloques sacamos, por ejemplo un bloque: "cuando Botón1.Click"

Los eventos los registramos con esta línea:

EventDispatcher.registerEventForDelegation( this, "RedButtonClick", "Click" );

- this, significa que el evento se realizará en la pantalla de inicio Screen1.

- "RedButtonClick", puedes poner cualquier nombre aclaratorio, cualquiera.

- "Click", es el evento.

Solo es necesario registrar un tipo de evento por componente, es decir, si tenemos varios botones, con una solo línea de registro "Click" ya vale para el "Click" de todos los botones.

4.- Introducir el código en los eventos.

- Esto es como introducir el código del programa en los Bloques de App inventor.

- El manejo "handle" del evento se introduce en la siguiente parte del código...

Se podría haber puesto el código así...

(pero se prefiere como en la forma anterior, en una función RedButtonClick.)

Aclaración, dentro de

public boolean dispatchEvent(Component component, String componentName, String eventName, Object[] params )

van todos los códigos de todos los componentes

----------------------------------------

En el siguiente enlace puedes ver todos los elementos que forman la librería Java Bridge.

Nombre en inglés de los componentes...

__________________________________