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
_________________________________________________
108.- Java Bridge - 3.
- Ejemplo de plantilla. Estructura.
- Copia y pega este código en tu Screen1.java que tienes en el Android Studio, sin cambiar BotonRojo ni nada, solo sobre-escribe este código.
- Cambia el package juan.com.botonrojo; y lo pones con tu package
- Observa las distintas partes.
- Al principio hace las 4 importaciones de API de App inventor.
- Luego importa los componentes que vamos a necesitar.
- Después le pone los nombres a los componentes que vamos a necesitar.
- Se declaran las variables.
- Mediante new se crean los componentes y luego se ponen las Propiedades.
- Se establecen los eventos.
- Se escribe el código.
____________________________
Esto trata de dos Botones y dos Etiquetas.
Cuando se pulsa el Botón1 se añade uno a la variable cantidad y se muestra en la Etiqueta2.
Cuando se pulsa el Botón2 se resta uno a la variable cantidad y se muestra en la Etiqueta2.
- Hay algunas líneas, por ejemplo declaración de TextBox, Notificador, Slider,... que he puesto solamente para ampliar el ejemplo, pero no las uso luego.
- El Slider no llega a funcionar.
- Consulta en al final de esta página la forma de crear la carpeta assets y grabar la imagen sabio.png
Screen1.java |
// Juan A. Villalpando
// kio4.com
// Aquí el package
package juan.com.botonrojo;
// Siempre importamos esto para utilizar el Java Bridge de App inventor
import com.google.appinventor.components.runtime.HandlesEventDispatching;
import com.google.appinventor.components.runtime.EventDispatcher;
import com.google.appinventor.components.runtime.Form;
import com.google.appinventor.components.runtime.Component;
// Importamos los componentes que vamos a utilizar en nuestra aplicación
import com.google.appinventor.components.runtime.Button;
import com.google.appinventor.components.runtime.Label;
import com.google.appinventor.components.runtime.TextBox;
import com.google.appinventor.components.runtime.HorizontalArrangement;
import com.google.appinventor.components.runtime.Notifier;
import com.google.appinventor.components.runtime.Slider;
import com.google.appinventor.components.runtime.Image;
// Nombre de los componentes que vamos a utilizaz, Creación y sus Propiedades
public class Screen1 extends Form implements HandlesEventDispatching
{
// Declaramos los componentes.
private Button Boton1;
private Button Boton2;
private Button btnAbrir;
private Button btnCerrar;
private HorizontalArrangement DisposicionHorizontal1;
private Label Etiqueta1;
private Label Etiqueta2;
private TextBox TextBox1;
private Notifier Notificador1;
private Slider Deslizador1;
private Image Imagen1;
// Variables
int cantidad = 1;
String s;
// define Creación y Propiedades de los componentes.
protected void $define()
{
// Pantalla
this.Title("Título de la pantalla"); // this es la pantalla
// this.Icon("icono.png");
this.BackgroundColor(COLOR_NONE);
// this.BackgroundImage("imagendefondo.png");
this.Scrollable(true);
// Boton1 Creación y Propiedades
Boton1 = new Button(this); // El Boton1 está en this, en la pantalla.
Boton1.Height(80);
Boton1.Width(LENGTH_FILL_PARENT); // Ajustar al ancho del contenedor
Boton1.BackgroundColor(COLOR_BLUE);
Boton1.Text("Pulsa para suma");
Boton1.TextColor(COLOR_WHITE);
Boton1.FontSize(24);
Boton1.FontBold(true);
// Boton2 Creación y Propiedades
Boton2 = new Button(this);
Boton2.Height(80);
Boton2.Width(LENGTH_FILL_PARENT); // Ajustar al ancho del contenedor
Boton2.BackgroundColor(COLOR_RED);
Boton2.Text("Pulsa para resta");
Boton2.TextColor(COLOR_WHITE);
// Boton2.TextColor(0xFF00EE55); // Otra manera. FF = transparencia, 00-Rojo, EE-Verde, 55-Azul
Boton2.FontSize(24);
Boton2.FontBold(true);
// Disposición Horizontal
DisposicionHorizontal1 = new HorizontalArrangement(this);
DisposicionHorizontal1.Width(LENGTH_FILL_PARENT);
DisposicionHorizontal1.AlignHorizontal(ALIGNMENT_CENTER);
// Etiqueta1
Etiqueta1 = new Label(DisposicionHorizontal1); // Situado en la DisposicionHorizontal1
Etiqueta1.Width(300);
Etiqueta1.Text("Suma y Resta");
Etiqueta1.FontBold(true);
Etiqueta1.TextColor(COLOR_GREEN);
Etiqueta1.FontSize(26);
Etiqueta1.TextAlignment(ALIGNMENT_CENTER);
// Etiqueta2
Etiqueta2 = new Label(this); // Situado en la pantalla
Etiqueta2.Width(180);
Etiqueta2.Text("Resultado.");
Etiqueta2.TextColor(COLOR_BLUE);
Etiqueta2.Height(50);
Etiqueta2.FontSize(26);
Etiqueta2.FontBold(true);
// Imagen1
Imagen1 = new Image(this);
// Imagen1.Width(LENGTH_FILL_PARENT);
Imagen1.Picture("sabio.png");
// Deslizador
// Deslizador1 = new Slider(this); // NO FUNCIONA !!!!!!
// Deslizador1.MinValue(1);
// Deslizador1.MaxValue(100);
// Deslizador1.ThumbPosition(50);
// Establecemos los Eventos.
EventDispatcher.registerEventForDelegation(this, "Pulsar_Boton", "Click");
// EventDispatcher.registerEventForDelegation(this, "Mover_Deslizador", "PositionChanged");
}
// Códigos
public boolean dispatchEvent(Component component, String componentName, String eventName, Object[] params )
{
// Código cuando se hace Click en el Boton1
if( component.equals(Boton1) && eventName.equals("Click") )
{
cantidad = cantidad + 1;
s = String.valueOf(cantidad); // Hay que pasarlo a String para verlo en Etiqueta
Etiqueta2.Text(s);
}
// Código cuando se hace Click en el Boton2
if( component.equals(Boton2) && eventName.equals("Click") )
{
cantidad = cantidad - 1;
s = String.valueOf(cantidad); // Hay que pasarlo a String para verlo en Etiqueta
Etiqueta2.Text(s);
}
return false;
}
}
|
_____________________________
- Creación de la carpeta assets.
[Carpeta base]
Vamos a BotonRojo / app / src / main / assets
Podemos copiar imágenes en esa carpeta.
Baja esta imagen: sabio.png, a tu ordenador. Luego pulsas con el Botón derecho de ratón sobre ella. Copiar.
Te situas sobre assets. Botón derecho del ratón. Pegar.
sabio.png
__________________________________
|