Creare nuovo componente (Mit App Inventor 2)

Oggi vediamo una cosa molto carina di Mit App Inventor 2, come creare nuovi componenti.
Sto parlando ovviamente della versione locale di app inventor, ovvero quella che avete installato sul vostro computer, dato che quella online non è ovviamente modificabile, salvo per l'aggiunta di qualche estensione.

Questo breve tutorial spiegherà come duplicare un componente app inventor 2 già esistente, non quindi come crearlo da zero, per il quale comunque lascerò un link con tutte le istruzioni dettagliate su come fare, a fine post.

Vediamo subito come iniziare a muovere i passi verso la creazione di componenti aggiuntivi per app inventor, che sono la base per poter creare le estensioni (quelle che poi potete distribuire).

Come creare un nuovo componente in Mit App Inventor 2

Per poter creare un componente aggiuntivo, occorre prima di tutto sapere dove risiedono i componenti di app inventor 2.
Il percorso tipico (poi dipende da dove lo avete installato) per trovare la cartella dove sono fisicamente i componenti appinventor 2, è il seguente:
C:\appinventor\appinventor\components\src\com\google\appinventor\components\runtime

Adesso, per fare un esempio pratico su come duplicare un componente app inventor, scegliamone uno a caso e facciamo copia ed incolla del file, ad esempio quello chiamato Label.java (il famoso componente etichetta).

Andiamo poi a rinominare la copia di Label.java in LabelOggi.java.

Ora, entriamo nel nuovo file appena creato con un editor di testo, ed andiamo a modificare alcuni parametri.

Cerchiamo il blocco che contiene la scritta "@DesignerComponent"e modifichiamo/aggiungiamo (se non presenti) i parametri:

• description: dove andremo a scrivere la descrizione del nostro componente, es: "Componente di prova duplicato dalla label".
• nonVisible = true: da aggiungere se non presente, altrimenti si riceverà il terribile messaggio "java.lang.UnsupportedOperationException: unknown component" (questo perchè al momento c'è il limite di poter aggiungere solo componenti nuovi non visibili)
• iconName = "images/extension.png": mettere l'url di un'icona, per farla apparire accanto al componente quando lo si vuole trascinare nel visualizzatore (campo facoltativo, ma è meglio metterlo)

Adesso cerchiamo le 2 righe
@SimpleObject
public final class Label extends AndroidViewComponent {
e sostituiamole con
@SimpleObject(external = true)
public final class LabelOggi extends AndroidViewComponent {

Infine sostituiamo
public Label(ComponentContainer container) {
con
public LabelOggi(ComponentContainer container) {

Salvare e chiudere il file.

Come avrete capito, per duplicare un componente app inventor, basta rinominare le classi univoce con un nuovo nome a nostra scelta.

Adesso, affinchè questo nuovo componente sia visibile in appinventor, occorre rifare il build dell'intero ambiente, ed anche rifare il build del companion, altrimenti non sarà possibile testarlo sul cellulare.
Se non sapete come compiere queste operazioni con Ant, trovate le istruzioni in questo post.

Ovviamente, affinchè tutto sia visibile nella nuova piattaforma appinventor, bisogna poi terminare eventuali processi attivi e riavviare il tutto.
Nel caso il processo di app inventor 2 non ne volesse sapere di terminare, vi basterà terminare il processo java, dal taskmanager di windows.

Se tutto sarà andato a buon fine, riavviando app inventor 2 (ed il browser), dovreste vedere a video il vostro nuovo componente LabelOggi, posizionato nella stessa sezione delle Etichette, ovvero in Interfaccia utente (user interface).

Con tanto di blocchi (blocks).

Questo è ovviamente solo un rapido esempio su come copiare / replicare un componente aggiuntivo.
Per creare un componente app inventor da zero, seguire questo tutorial, dove vengono spiegate tutte le classi e la struttura che compone questo tipo di oggetti appinventor.
Ovviamente, anche conoscendo bene la teoria, partire sempre da un componente già esistente, facilita molto il lavoro.

Imparare a creare/modificare componenti app inventor 2 è la base per poter aggiungere nuove funzionalità alla piattaforma, senza dover aspettare che qualcun altro le sviluppi per voi (es. admob per app inventor 2 :p).
Ovviamente, per fare tutto ciò, dovrete conoscere almeno un po' java.

Tornare all'elenco delle lezioni