|     Inicio    |   |         |  |   FOROS      |  |      |      
   Elastix - VoIP B4A (Basic4Android) App inventor 2 PHP - MySQL
  Estación meteorológica B4J (Basic4Java) ADB Shell - Android Arduino
  Raspberry Pi Visual Basic Script (VBS) FireBase (BD autoactualizable) NodeMCU como Arduino
  AutoIt (Programación) Visual Basic Cosas de Windows Webs interesantes
Translate:
Búsqueda en este sitio:


.

Create Extensions App inventor 2
Build Extensions App Inventor, easy tutorial - Juan Antonio Villalpando

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

Index tutorial

____________________________

125B.- Extensions. Pythagoras theorem. Join texts.

- Create an extension to calculate Pythagoras theorem.

0.- In our PC-Windows, we create a folder in disk C:\, call AppInventorExtensiones. In this folder download three packets:

1.- Java SE Development Kit, I have gone down 8u131 version (jdk-8u131-windows-x64.exe of 198 MB). [you can download other recent version].

http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

 

2.- Apache Ant is a JAVA library for build applications, http://ant.apache.org/bindownload.cgi, download: Ant 1.10.1 (Binary Distributions) (apache-ant-1.10.1-bin.zip of 8,6 MB)

3.- Git bash of https://git-scm.com/download/win (Git-2.13.2-32-bit.exe of 32 MB). This is as LINUX terminal to run ant.

[I have gone down 32-bit, if you download 64-bit also works.]

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

- These are our 3 packets in folder C:\AppInventorExtensiones.

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

4.- Now unzip Apache Ant. When you unzip, perhaps get a double folder:

C:\AppInventorExtensiones\apache-ant-1.10.1-bin\apache-ant-1.10.1-bin\

- Change a simple folder C:\AppInventorExtensiones\apache-ant-1.10.1-bin\

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

5.- Now install Git Bash. All default installation.

- In Windows Start button you can look.

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

6.- Install Java SE Development Kit. Perharps is necessary restart PC for installation.

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

- Environment Variables.

- Lets with Environment Variables:

Control Panel / System / Advanced System Settings / Advanced Options / Environment Variables...

- We can use "Edit..." or "New..." button.

- In User variables for yourname, by "New..." button we create this variables...

_JAVA_OPTIONS ------------------> -Xmx1024m

ANT_HOME ------------------> C:\AppInventorExtensiones\apache-ant-1.10.1-bin [folder unzip apache-ant]

ANT_OPTS ------------------> -Xmx256M

JAVA_HOME ------------------> C:\Program Files\Java\jdk1.8.0_131 [Look! is jdk NOT jdr]

CLASSPATH ------------------> %ANT_HOME%\lib;%JAVA_HOME%\lib

En PATH ------ Edit --------->  ;%ANT_HOME%\bin;%JAVA_HOME%\bin [Look! ;start with semicolon; ]

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

- Create a clon of App Inventor in our PC.

- We create a clon of App Inventor direct from Internet.

- Run Git Bash

- write:

git clone  https://github.com/mit-cml/appinventor-sources.git

- In 5 or 10 minutes, we get a folder: appinventor-sources with sources files of App Inventor.

- Where is image App Inventor source?

- Disk C:, folder Users, your name user, in my case juan, look this folder:

C:\Users\juan\appinventor-sources

- You can pry this sub-folders, look many files with .java

..\appinventor\components\src\com\google\appinventor\components\runtime

-----------------------------------------------------------------------------------------------------------------
- Create extension. Pythagoras theorem.

- Careful with upper and lower case, it isn't equal Cathetus what cathetus.

- Our first extension: Pythagoras theorem.

- We need a Text Editor, I recomend Notepad++, create a file with name Pitagoras.java and paste this code:

Pitagoras.java

package com.Pitagoras;
// package es.kio4.Pitagoras; // New version.

//  © Juan Antonio Villalpando 
// kio4.com
// Creacion de extensiones. Junio 2017.
// Esta extension calcula la hipotenusa mediante el Teorema de Pitagoras.

import com.google.appinventor.components.annotations.DesignerComponent;
import com.google.appinventor.components.annotations.DesignerProperty;
import com.google.appinventor.components.annotations.PropertyCategory;
import com.google.appinventor.components.annotations.SimpleEvent;
import com.google.appinventor.components.annotations.SimpleFunction;
import com.google.appinventor.components.annotations.SimpleObject;
import com.google.appinventor.components.annotations.SimpleProperty;
import com.google.appinventor.components.common.ComponentCategory;
import com.google.appinventor.components.common.PropertyTypeConstants;
import com.google.appinventor.components.runtime.util.MediaUtil;
import com.google.appinventor.components.runtime.*;

@DesignerComponent(version = Pitagoras.VERSION,
    description = "Teorema de Pitagoras. " + "Juan Antonio Villalpando - KIO4.COM ",
    category = ComponentCategory.EXTENSION,
    nonVisible = true,
    iconName = "")
@SimpleObject(external = true)
public class Pitagoras extends AndroidNonvisibleComponent implements Component {

    public static final int VERSION = 1;
    public static final float DEFAULT_CATETO_A = 3f;
	public static final float DEFAULT_CATETO_B = 4f;
    private ComponentContainer container;
    private double cateto_a = 0;
	private double cateto_b = 0;
 
    public Pitagoras(ComponentContainer container) {
        super(container.$form());
        this.container = container;
        Cateto_A(DEFAULT_CATETO_A);
		Cateto_B(DEFAULT_CATETO_B);
    }

    // Obtener el valor.
    @SimpleProperty(category = PropertyCategory.BEHAVIOR)
    public double Cateto_A() {
        return cateto_a;
    }
	
	 @SimpleProperty(category = PropertyCategory.BEHAVIOR)
	public double Cateto_B() {
        return cateto_b;
    }

    // Establecer el valor.
    @DesignerProperty(editorType = PropertyTypeConstants.PROPERTY_TYPE_NON_NEGATIVE_FLOAT, defaultValue = Pitagoras.DEFAULT_CATETO_A + "")
    @SimpleProperty(description = "Asigna el valor del cateto A. " +  "El separador decimal es el punto.")
    public void Cateto_A(double nuevoCateto_A) {
        this.cateto_a = nuevoCateto_A;
    }
	
	@DesignerProperty(editorType = PropertyTypeConstants.PROPERTY_TYPE_NON_NEGATIVE_FLOAT, defaultValue = Pitagoras.DEFAULT_CATETO_B + "")
    @SimpleProperty(description = "Asigna el valor del cateto B. " +  "El separador decimal es el punto.")
    public void Cateto_B(double nuevoCateto_B) {
        this.cateto_b = nuevoCateto_B;
    }

    // Funcion para calcular la hipotenusa.
    @SimpleFunction(description = "Introduce los dos catetos y obtendras la hipotenusa.")
    public double Pitagoras(double catetoA, double catetoB) {
        double hipotenusa, cuadrado;
		
        hipotenusa = Math.sqrt((catetoA*catetoA)+(catetoB*catetoB));
		cuadrado = hipotenusa * hipotenusa;  // Calcula el cuadrado de la hipotenusa.
            
       YaCalculada(cuadrado); 

        return hipotenusa;
    }

    // Bloque disponible despues de calcular la hipotenusa.
    @SimpleEvent(description = "Muestra la hipotenusa al cuadrado.")
    public void YaCalculada(double sucuadrado){
        EventDispatcher.dispatchEvent(this, "YaCalculada", sucuadrado);
    }    

 } 

- Copy file Pitagoras.java in:

C:\Users\juan\appinventor-sources\appinventor\components\src\com\google\appinventor\components\runtime

Update.

[In new version Pitagoras.java is copied in:
C:\Users\juan\appinventor-sources\appinventor\components\src\es\kio4

(Read: http://ai2.appinventor.mit.edu/reference/other/extensions.html ) Look sección 3.3.1

1.- In C:\Users\juan\appinventor-sources\appinventor\components\src\ create folder es:

C:\Users\juan\appinventor-sources\appinventor\components\src\es

2.- In es, create folder kio4:

C:\Users\juan\appinventor-sources\appinventor\components\src\es\kio4

3.- In kio4 copy Pitagoras.java file.

4.- Look this line in Pitagoras.java

package es.kio4.Pitagoras;

5.- Add import, with this line:

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

6.- También en la carpeta kio4 creamos otra carpeta llamada

aiwebres y en esa carpeta ponemos la imagen del icono que debe ser de 16x16

iconName = "aiwebres/iconname.png"

 

 

- Let's go to folder with App Inventor sources (C:\Users\juan\appinventor-sources\appinventor)

- Click with Right button mouse, then click Git Bash Here.

- Git bash get directory...

C:\Users\juan\appinventor-sources\appinventor (master)

[In Git bash, another way to get that directory is write: cd c/Users/juan/appinventor-sources/appinventor ]

- In Git Bash write:

ant extensions

- If all is perfect, you get: BUILD SUCESSFUL

- Our extension is create in...

C:\Users\juan\appinventor-sources\appinventor\components\build\extensions

- This is our extension: com.Pitagoras.aix

- Now in App Inventor. Import extension com.Pitagoras.aix and look as works.

________________________
- Important.

 

- When write your extension, change name package with your name, file name,... change this word in all file .java

package com.Pitagoras;

package com.Juan;

- This mean we build an EXTENSION, extensions aren't visible in Screen.

category = ComponentCategory.EXTENSION,
nonVisible = true,

- This are DEFAULTS valors, you can look extension Properties. Letter f is float (also is possible: int, String, double,...)

public static final float DEFAULT_CATETO_A = 3f;
public static final float DEFAULT_CATETO_B = 4f;

- It is highly recommended to back up the file Pitagoras.java in other folder.

- Pitagoras.aix can not convert to Pitagoras.java

- You can put an icon image of 16x16 pixels:

iconName = "imagenes/extension.png")

- Also external link:

iconName = "http://kio4.com/appinventor/imagenes/extension.png")

- Look at the comments:

-

____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________

- Another example similar to the previous one. Join 2 texts.

- This code is an adaptation to Pitagoras.java. This code join 2 texts.

- Example, in TextoPrimero set "Hola" and TextoSegundo send "Adios", result is "HolaAdios".

unidos = TextoPrimero + TextoSegundo;

- Fíjate que en la aplicación de Pitágoras las variables eran numéricas double, ahora son de cadena de texto String.

- Cuidado con las mayúsculas, no es igual String que string.

UneTexto.java

package com.UneTexto;
//  © Juan Antonio Villalpando 
// kio4.com
// Creacion de extensiones. Junio 2017.
// Esta extension se utiliza para unir dos textos.

import com.google.appinventor.components.annotations.DesignerComponent;
import com.google.appinventor.components.annotations.DesignerProperty;
import com.google.appinventor.components.annotations.PropertyCategory;
import com.google.appinventor.components.annotations.SimpleEvent;
import com.google.appinventor.components.annotations.SimpleFunction;
import com.google.appinventor.components.annotations.SimpleObject;
import com.google.appinventor.components.annotations.SimpleProperty;
import com.google.appinventor.components.common.ComponentCategory;
import com.google.appinventor.components.common.PropertyTypeConstants;
import com.google.appinventor.components.runtime.util.MediaUtil;
import com.google.appinventor.components.runtime.*;

@DesignerComponent(version = UneTexto.VERSION,
    description = "Une dos textos. " + "Juan Antonio Villalpando - KIO4.COM ",
    category = ComponentCategory.EXTENSION,
    nonVisible = true,
    iconName = "")
@SimpleObject(external = true)
public class UneTexto extends AndroidNonvisibleComponent implements Component {

    public static final int VERSION = 1;
    public static final String DEFAULT_TEXTO_1 = "Hola";
	public static final String DEFAULT_TEXTO_2 = "Adios";
    private ComponentContainer container;
    private String texto_1 = "";
	private String texto_2 = "";
 
    public UneTexto(ComponentContainer container) {
        super(container.$form());
        this.container = container;
        Texto_1(DEFAULT_TEXTO_1);
		Texto_2(DEFAULT_TEXTO_2);
    }

    // Obtener el valor.
    @SimpleProperty(category = PropertyCategory.BEHAVIOR)
    public String Texto_1() {
        return texto_1;
    }
	
	 @SimpleProperty(category = PropertyCategory.BEHAVIOR)
	public String Texto_2() {
        return texto_2;
    }

    // Establecer el valor.
    @DesignerProperty(editorType = PropertyTypeConstants.PROPERTY_TYPE_STRING, defaultValue = UneTexto.DEFAULT_TEXTO_1 + "")
    @SimpleProperty(description = "Asigna el valor del texto 1. ")
    public void Texto_1(String nuevoTexto_1) {
        this.texto_1 = nuevoTexto_1;
    }
	
	@DesignerProperty(editorType = PropertyTypeConstants.PROPERTY_TYPE_STRING, defaultValue = UneTexto.DEFAULT_TEXTO_2 + "")
    @SimpleProperty(description = "Asigna el valor del texto 2. ")
    public void Texto_2(String nuevoTexto_2) {
        this.texto_2 = nuevoTexto_2;
    }

    // Funcion que une los dos textos.
    @SimpleFunction(description = "Une dos textos.")
    public String UneTexto(String TextoPrimero, String TextoSegundo) {
        String unidos;
        unidos = TextoPrimero + TextoSegundo;
            
       YaUnidos(unidos);  

        return unidos;
    }
	
    // Bloque disponible despues de la union de los textos.
    @SimpleEvent(description = "Esto sale despues de unir los textos.")
    public void YaUnidos(String unidos){
        EventDispatcher.dispatchEvent(this, "YaUnidos", unidos);
    }  
	
}

_______________
- Ejemplo.


- Every time you make a .java file, make a backup copy of it, copy it to another folder since at any moment you can block the clone of app-inventor-source and lose what you have.

___________________________

 

- Mi correo:
juana1991@yahoo.com
- KIO4.COM - Política de cookies. Textos e imágenes propiedad del autor:
© Juan A. Villalpando
No se permite la copia de información ni imágenes.
Usamos cookies propias y de terceros que entre otras cosas recogen datos sobre sus hábitos de navegación y realizan análisis de uso de nuestro sitio.
Si continúa navegando consideramos que acepta su uso. Acepto    Más información