El fuente de esta primera extensión lo podemos encontrar en https://github.com/pinguytaz/extAppInventor/blob/main/Ejemplos/src/losejemplos/Ej1.java y comenzamos con la explicación
Lo primero es generar el entorno de trabajos, que como comentamos en el anterior POST es muy sencillo.
git clone --recurse-submodules https://github.com/mit-cml/extension-template.git EjemplosEsto nos genera un fichero Ejemplos desde el que lanzaremos nuestros comando «ant». Como nuestra intención es generar nuestros ejemplos en un paquete llamado «losejemplo» crearemos este directorio por debajo de src y sera en este donde coloquemos nuestros ficheros .java con las clases de extensiones que creemos.
cd Ejemplos
mkdir src/losejmplosCreamos el fichero src/losejemplos/Ej1.java, podemos descargarlo del enlace que dimos al principio, que creara la extensión Ej1.
Esta extensión tendrá una única función que se representa en el diseñador se representa con color morado, como podemos ver.
La función, llamada Cadena, es muy sencilla recibe un String (parámetro texto) y retorna un String.
public String Cadena(String texto) { ..... }Antes de llegar a definir la función debemos explicar una serie de cosas:
Lo primero sera definir el paquete (package losejemplos) e importar las librerias necesarias, tanto de appinventor (como es nuestro caso) como las librerías de diandro que necesitemos (ejemplo android.nfc.Tag si vamos a trabajar con NFC) y las nuestras.
package losejemplos;
// Importación minima para clases internas y anaotaciones de AI2
import com.google.appinventor.components.annotations.DesignerComponent; // Componente que aparece en el diseñador
import com.google.appinventor.components.runtime.AndroidNonvisibleComponent;
import com.google.appinventor.components.annotations.SimpleObject;
import com.google.appinventor.components.runtime.ComponentContainer;
import com.google.appinventor.components.common.ComponentCategory;
import com.google.appinventor.components.annotations.SimpleFunction; // Ya que definimos una función
Luego generamos unas anotaciones que nos permiten que el componente aparezca en el diseñador, aunque en nuestro caso sea un componente no visible.
@DesignerComponent(version = 1,
category = ComponentCategory.EXTENSION,
description = "Un ejemplo simple",
nonVisible = true,
iconName = "")
@SimpleObject(external = true)Información de las anotaciones se pueden ver en los enlaces: https://appinventor.mit.edu/blogs/evan/2023/04/10/overview-app-inventor-sources-components y en https://docs.google.com/document/d/1UsjVC6bjf4rKPLP6FULUPeB6C8O-A5GbpYjvvwqTYK8/edit
La primera anotación @DesignerComponent() que indica que aparecerá en la paleta del diseñador y definiremos información que nos mostrara como:
- description que da una descripción de la extensión y es la que se ve al pulsar en la interrogación de la extensión que aparece en la paleta.
- version
- category La categoría del componente en el que se incluye, en nuestro caso sera EXTENSION
- nonVisible lo pondremos a true para que el componente sea visible en la paleta.
- iconName nombre del archivo del icono que aparece en la paleta (16×16) y podra ser una URL o dejar el nombre en el directorio aiwebres dentro del directorio del paquete «aiwebres/icono.png», por defecto no tiene icono.
La otra anotación sera @SimpleObject(external = true) para indicar que es un componente externo. Tendríamos otras anotaciones de permisos que hablaremos más adelante.
Y con esto empezamos a generar nuestra clase que heredera de «AndroidNonvisibleComponent» componente no visual y tendrá un constructor con las inicializaciones necesarias.
public class Ej1 extends AndroidNonvisibleComponent {
public Ej1(ComponentContainer container) {
super(container.$form());
}
...... Nuestro código en el que definiremos los elementos de la extensión.
}
Ahora solo nos queda añadir el comportamiento o bloques de nuestra extensión, en nuestro ejemplo hemos creado un bloque de procedimiento, color morado.
Para crear un método al que luego llamaremos lo primero es utilizar la anotación «@SimpleFunction()» y despees definir nuestro método publico con el tipo de retorno y parámetros a recoger, en el siguiente POST veremos como crear un parámetro lista.
@SimpleFunction(description = "La descripcion del la funcion que nos aparecera en el interfaz de bloques.)
public String Cadena(String texto) { .... }Y con esto tenemos creada nuestra primera extensión, en la próxima entrega veremos como crear un método que reciba una lista de valores que se añadirán desde el interfaz WEB.
