|
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
_________________________________________________
110.- Java Bridge. Nueva Versión.
- Esto trata de realizar una aplicación en App Inventor y convertirla automáticamente a código JAVA para poder seguir trabajándola en Android Studio.
- En el tutorial 106.- Java Bridge vimos la manera de comenzar a trabajar con esta herramienta.
- El Java Bridge es una librería que hace de puente entre el código de App Inventor y Android Studio.
- Vamos a retomar esta herramienta con algunas de las modificaciones que han realizado.
- En esta entrada del Foro de Java Brigde, David Wolber, presenta la actualización el 3/6/17:
https://groups.google.com/forum/?utm_medium=email&utm_source=footer#!topic/app-inventor-java-bridge/l9bh4P_UPEE
- En esta nueva versión existe la posibilidad de realizar una aplicación en App Inventor y convertirla automáticamente a Java, (aunque casi siempre se necesitará unas pequeñas modificaciones para su buen funcionamiento).
- Como indiqué en el primer tutorial, esto no es exactamente la manera en la que se realiza una aplicación en Java para el Android, es una herramienta para pasar aplicaciones de App Inventor a Java, pero si realizáramos el código propiamente en Java para el Android, se haría de otra manera.
___________________________________
- ¿Qué defectos encontraremos?
- La emulación es lenta.
- Muchas veces hay que retocar el código.
- Algunos componentes no funcionan.
__________________________________________
- Web de Bridge Java.
http://www.appinventor.org/jbridge
- Para comenzar a trabajar, es mejor continuar con este tutorial, a ese enlace iremos más adelante, por ahora no es necesario entrar.
__________________________________________________________
- Qué necesitaremos.
- Java SDK.
- Android Studio.
- Un dispositivo con Android (móvil o tablet) y un cable USB para conectarlo al ordenador, el ordenador debe reconocer al dispositivo. Esto lo haremos para emular nuestros proyectos. Se podría emular con el SDK de Android, pero es bastante lento, así que emularemos con nuestro móvil.
__________________________________________________________
- Java SDK.
- Vamos a la página de Java y bajamos e instalamos el Java SE Developmente Kit, Java SDK, en caso de que ya no lo tuviéramos instalado en nuestro ordenador.
http://www.oracle.com/technetwork/java/javase/downloads/jdk10-downloads-4416644.html
- En este momento la versión de bajada es la 10.0.1, puede ser otra.
__________________________________________________________
- Android Studio.
- Vamos a la página de Google y bajamos e instalamos el Android Studio.
https://developer.android.com/studio/?hl=es
_____________________________________________________
- Preparación de nuestro Android Studio con la librería de Java Bridge.
- Entramos en Android Studio. Comenzamos un nuevo proyecto.
- Le damos un nombre: Botones.
- Un nombre de dominio: dos palabras separadas por punto, por ejemplo: com.juan
- La carpeta donde se guardará este proyecto: C:\users\juan\Downloads\Botones
- Establecemos la mínima versión de funcionamiento, vamos a poner la: Android 5.0 (Lollipop)
- Elegimos Basic Activity.
- Establecemos la Screen1 como pantalla de inicio.
- Quitamos de la zona visible content_screen1.xml (en este pantalla se ponen los componentes gráficamente, pero nosotros los pondremos por código)
(Está quitado de la zona visible, pero no está borrado. Aunque también se podría borrar pulsando sobre él con el botón derecho del ratón)
_______________________________________
- Vamos a cargar la librería JavaBridge: AppInventor-JavaLibrary.jar
- La encontramos en... https://groups.google.com/forum/#!topic/app-inventor-java-bridge/l9bh4P_UPEE
- La puedes bajar directamente de aquí, baja este archivo a tu ordenador: AppInventor-JavaLibrary.jar
- Vamos a app / libs
- Vamos a la carpeta del ordenador donde anteriormente hemos bajado el archivo AppInventor-JavaLibrary.jar, pulsamos con el Botón derecho del ratón. Luego Copiar.
- Ahora pulsa con el Botón derecho del ratón el icono de la carpeta libs, pulsa en Pegar, para que el archivo AppInventor-JavaLibrary.jar se guarde en esa carpeta.
- Aquí la tenemos...
- Activación de la librería.
- Pulsamos con el botón derecho del ratón sobre AppInventor-JavaLibrary.jar y luego en Add As Library...
_____________________________________________
- Aplicación.
- Vamos a realizar esta aplicación.
_____________________________________________
- Copia del código en Screen1.java
- Observamos Screen1.java, borramos todo su contenido menos: package juan.com.botones;
- En esa parte que hemos borrado copiamos el siguiente código:
- Debes poner el nombre de tu package.
Screen1.java |
// Juan A. Villalpando
// kio4.com
package juan.com.botones;
// 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;
import com.google.appinventor.components.runtime.Clock;
// 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;
private Clock Reloj1;
private Label Etiqueta3;
// Variables
int cantidad = 1;
int cuentareloj = 0;
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);
// Etiqueta3
Etiqueta3 = new Label(this); // Situado en la pantalla
Etiqueta3.Width(180);
Etiqueta3.Text("Cuenta reloj.");
Etiqueta3.TextColor(COLOR_RED);
Etiqueta3.Height(50);
Etiqueta3.FontSize(25);
Etiqueta3.FontBold(true);
// Imagen1
Imagen1 = new Image(this);
// Imagen1.Width(LENGTH_FILL_PARENT);
Imagen1.Picture("sabio.png");
// Reloj1
Reloj1 = new Clock(this);
Reloj1.TimerInterval(500);
// 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, "TimerEvent", "Timer" );
// 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);
}
// Código para la cuenta del Reloj1
if( component.equals(Reloj1) && eventName.equals("Timer") ){
Reloj1Timer();
return true;
}
return false;
}
////////////////// Función del Reloj /////////////
public void Reloj1Timer(){
cuentareloj = cuentareloj + 1;
Etiqueta3.Text(String.valueOf(cuentareloj)); // Otra manera de pasarlo a String
}
////////////////////////////////////////////////
} // => FIN
|
_____________________________________________
- Funcionamiento.
- Pulsamos en la flecha verde y saldrá una ventana desde donde podemos elegir entre distintos dispositivos virtuales, si tenemos instalado el SDK de Android o nuestro teléfono móvil si lo tenemos conectado al ordenador y reconocido por éste.
- La mejor opción es conectar nuestro móvil al ordenador por cable USB, ya que funciona más rápido.
- Si tienes problema de instalación pulsa en Rebuild Project.
- Cuando se va a instalar en tu móvil te avisa de que la aplicación no está firmada, acepta y continua con la instalación.
_____________________________________________
- Creación de la carpeta assets. Imagen.
- En el código anterior has visto que hay una Imagen1.Picture ("sabio.png"), pero no se ve.
- Debemos crear una carpeta llamada assets y subir ahí la imagen.
- Vamos a Botones / app / src / main
- Pulsamos con el botón derecho del ratón sobre main.
- New / Directory
- Le ponemos de nombre: assets
- Baja a tu ordenador esta imagen:
sabio.png
- Cuando ya esté en el ordenador pulsa sobre ella con el botón derecho del ratón y Copiar.
- Ahora pulsas con el botón derecho sobre la carpeta assets y Pegar, para que se pegue la imagen en esa carpeta.
- Si ahora ejecutas el programa verás esa imagen.
_____________________________________________
- Entender el código de la Screen1.
- Pare entender el código de la Screen1, consulta este tutorial:
107JavaBridge2.htm
__________________________________
|
