|
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
_________________________________________________
112.- Java Bridge crear código desde la página de JavaBridge.
- En el tutorial anterior copiamos y pegamos un código en la Screen1 para realizar una aplicación con JavaBrige. En esa ocasión el código estaba realizado escribiéndolo directamente.
- Ahora vamos a crear un código directamente desde la página de JavaBridge.
_____________________________________________________
- Web de JavaBridge.
- Entramos en:
http://www.appinventor.org/jbridge
_____________________________________________________
- Pitágoras con JavaBridge.
 PitagorasJava.aia
- Importa esa aplicación.
_____________________________________________________
- Diseño.
beep8.mp3
_____________________________________________________
- Bloques.
- Observa que he puesto las variables con decimales.
_____________________________________________________
- Conversion a Java.
- Pulsamos en "Generate Java"
- Pulsamos en JAVA FILE.
- Obtenemos el archivo Screen1.java
Screen1.java |
package org.appinventor; // CAMBIA POR TU PACKAGE
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
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;
/////////////////////////////// COMPONENTES UTILIZADOS //////////////////////////////////
import com.google.appinventor.components.runtime.HorizontalArrangement;
import com.google.appinventor.components.runtime.Label;
import com.google.appinventor.components.runtime.TextBox;
import com.google.appinventor.components.runtime.Button;
import com.google.appinventor.components.runtime.Image;
import com.google.appinventor.components.runtime.Sound;
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
class Screen1 extends Form implements HandlesEventDispatching {
////////////////////////////// DECLARACIÓN DE COMPONENTES //////////////////////////
private HorizontalArrangement DisposicionHorizontal1;
private Label Etiqueta1;
private TextBox CampoDeTexto1;
private HorizontalArrangement DisposicionHorizontal2;
private Label Etiqueta2;
private TextBox CampoDeTexto2;
private Button Boton1;
private HorizontalArrangement DisposicionHorizontal3;
private Image Imagen1;
private Label Etiqueta3;
private Sound Sonido1;
private float a;
private float b;
private float c;
////////////////////// CREACIÓN Y PROPIEDADES ///////////////////////////////////////
protected void $define() {
this.AppName("PitagorasJava");
this.Title("Pitágoras - Juan A. Villalpando");
DisposicionHorizontal1 = new HorizontalArrangement(this);
DisposicionHorizontal1.Width(LENGTH_FILL_PARENT);
Etiqueta1 = new Label(DisposicionHorizontal1);
Etiqueta1.FontBold(true);
Etiqueta1.FontSize(22);
Etiqueta1.Text("Introduce un cateto");
CampoDeTexto1 = new TextBox(DisposicionHorizontal1);
CampoDeTexto1.FontBold(true);
CampoDeTexto1.FontSize(22);
CampoDeTexto1.Width(LENGTH_FILL_PARENT);
CampoDeTexto1.NumbersOnly(true);
CampoDeTexto1.Text("3");
DisposicionHorizontal2 = new HorizontalArrangement(this);
DisposicionHorizontal2.Width(LENGTH_FILL_PARENT);
Etiqueta2 = new Label(DisposicionHorizontal2);
Etiqueta2.FontBold(true);
Etiqueta2.FontSize(22);
Etiqueta2.Text("Introduce el otro cateto");
CampoDeTexto2 = new TextBox(DisposicionHorizontal2);
CampoDeTexto2.FontBold(true);
CampoDeTexto2.FontSize(22);
CampoDeTexto2.Width(LENGTH_FILL_PARENT);
CampoDeTexto2.NumbersOnly(true);
CampoDeTexto2.Text("4");
Boton1 = new Button(this);
Boton1.FontBold(true);
Boton1.FontSize(24);
Boton1.Height(60);
Boton1.Width(LENGTH_FILL_PARENT);
Boton1.Text("Pulsa para calcular");
Boton1.TextColor(0xFF0000FF);
DisposicionHorizontal3 = new HorizontalArrangement(this);
DisposicionHorizontal3.AlignHorizontal(3);
DisposicionHorizontal3.Width(LENGTH_FILL_PARENT);
Imagen1 = new Image(DisposicionHorizontal3);
Imagen1.Picture("pitagoras_br.png");
Etiqueta3 = new Label(this);
Etiqueta3.FontBold(true);
Etiqueta3.FontSize(26);
Etiqueta3.Text("La hipotenusa vale: ");
Etiqueta3.TextColor(0xFFFF0000);
Sonido1 = new Sound(this);
Sonido1.Source("beep8.mp3");
a = 1.1;
b = 1.1;
c = 1.1;
//////////////////////// EVENTOS ///////////////////////////////////////////////////////////////////
EventDispatcher.registerEventForDelegation(this, "ClickEvent", "Click" );
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
}
//////////////////////////////////////// GRUPOS DE EVENTOS /////////////////////////////
public boolean dispatchEvent(Component component, String componentName, String eventName, Object[] params){
/////////////////////////////// EVENTO BOTON1 ///////////////////////////////////////////////////////////////
if( component.equals(Boton1) && eventName.equals("Click") ){
Boton1Click();
return true;
}
///////////////////////////// FIN EVENTO BOTÓN1 /////////////////////////////////
return false;
}
///////////////////////////// FUNCION DEL BOTÓN1 ////////////////////////////
public void Boton1Click(){
a = (Float) CampoDeTexto1.Text();
b = (Float) CampoDeTexto2.Text();
c = (Float) Math.sqrt((float)(Math.pow(Integer.valueOf(a), 2) + Math.pow(Integer.valueOf(b), 2)));
Etiqueta3.Text("La hipotenusa vale: " + );
}
/////////////////////////////// FIN FUNCIÓN BOTÓN1 ///////////////////////////
} // => FIN
|
_____________________________________________________
- Cargar el Screen1 en el Android Studio.
- Ahora debemos volver al tutorial: 110 Java, realizar el mismo proceso y cargar este archivo Screen1.
- Crear un Nuevo Proyecto... llamado Pitagoras.
- Debemos importar la librería AppInventor-JavaLibrary.jar, para que no salgan palabra en rojo. |
 |
- Copiamos la librería Appinventor-JavaLibrary.jar y la pegamos en libs.
- Activamos la librería.
- Creamos la carpeta assets para guardar el archivo de imagen y sonido.
- En Pitagoras / app / src / main
- Aquí están los dos:
_____________________________________________________
- Corrección de fallos.
- Observamos que el código obtenido tiene fallos.
1.- Si estás utilizando la versión de App Inventor en Español, quita los acentos de los componentes. Es decir:
DisposiciónHorizontal1 ----------------------------> DisposicionHorizontal1 (quita el acento)
Botón1 ---------------------------------------------> Boton1 (quita el acento)
------------------------------------------------------------------------------------------------------------
2.- Observa las variables:
private float a;
private float b;
private float c;
Son de tipo float, (las variables suelen ser int, float, double, string). Son flotantes porque pusimos a =1.1, si hubiéramos puesto a = 1 sería entera.
- Aquí comete un fallo:
a = 1.1;
b = 1.1;
c = 1.1;
- Como las variables son flotantes debemos poner:
a = 1.1f;
b = 1.1f;
c = 1.1f;
----------------------------------------------------------------------------------------------------------------------
3.- Función que realiza el cálculo:
public void Boton1Click(){
a = (Float) CampoDeTexto1 .Text();
b = (Float) CampoDeTexto2 .Text();
c = (Float) Math. sqrt (( float )(Math. pow (Integer.valueOf( a ), 2 ) + Math. pow (Integer.valueOf( b ), 2 )));
Etiqueta3 .Text( "La hipotenusa vale: " + );
}
- Los fallos están relacionados con los tipos de variables, int, float, double.
- Cuando te ocurra esto, intenta aprender estas funciones para convertir un tipo de variable a otro:
Integer.valueOf(---)
Float.valueOf(---)
Double.valueOf(---)
String.valueOf(---)
- Cambiamos el código anterior por este:
public void Boton1Click(){
a = Float.valueOf(CampoDeTexto1.Text());
b = Float.valueOf(CampoDeTexto2.Text());
Double cr = (Math.sqrt((Math.pow(a,2) + Math.pow(b,2))));
Etiqueta3.Text("La hipotenusa vale: " + cr);
Sonido1.Play();
}
- Fíjate que en vez de utilizar la variable Float c, he creado otra nueva llamada Double cr
- Observa que también he añadido Sonido1.Play(); ya que el conversor también fallaba en esto.
----------------------------------------------------------------------------------------------------------------------
- Alineamiento en la CajaDeTexto.
- Otra propiedad que no se crea automáticamente es el alineamiento del texto en las CajaDeTexto, para correguirlo añadimos estas líneas.
CampoDeTexto1.TextAlignment(2);
CampoDeTexto2.TextAlignment(2);
----------------------------------------------------------------------------------------------------------------------
- Dar formato decimal al número.
- El bloque de App Inventor, Dar formato decimal al número, tampoco se realiza.
- Debes consultar en códigos Java cómo se puede mostrar solo dos decimales.
__________________________________
|
