COMPONENTI INTERFACCIA UTENTE (User Interface Components)

Le Proprietà sono state organizzare di conseguenza alle nuove modifiche. E’ rimasto solo l’ Evento AfterPicking() e sono stati aggiunti quattro nuovi Metodi relativi ai componenti Dictionary, eliminando il “vecchio” metodo Open().

Differenze e annotazioni:

THUNK ha la proprietà Show Arrow: per visualizzare una freccia accanto a ciascun elemento nell’elenco, impostare l’interruttore su true.

Proprietà

Colore di sfondo BackgroundColor

color Specifica il colore di sfondo di ListPicker come numero intero alfa-rosso-verde-blu. Se è stata impostata un’immagine, il cambio di colore non sarà visibile fino a quando l’immagine non viene rimossa.

Elementi Elements

list blocks-only Specifica l’elenco di opzioni da visualizzare.

Elementi da stringhe ElementsFromString

textwrite-only Imposta l’elenco di scelte da una stringa di valori separati da virgola, ad esempio: Roma,Parigi,New York

FontSizeDetail

numberSpecifica la dimensione del carattere del testo dell’elemento

FontTypeface

number designer-onlySpecifica il tipo di carattere del testo dell’etichetta come predefinito, serif, sans serif o monospace.

FontTypefaceDetail

designer-onlySpecifica il tipo di carattere del testo dell’etichetta come predefinito, serif, sans serif o monospace.

Altezza Height

number designer-onlySpecifica l’ altezza verticale , misurata in pixel.

AltezzaPercentuale

numberwrite-only; block-onlySpecifica l’ altezza verticale come percentuale dell’altezza dello Screen .

Altezza immagine

numberSpecifica l’altezza dell’immagine dei layout ListView contenenti immagini

Larghezza immagine

numberSpecifica la larghezza dell’immagine dei layout ListView contenenti immagini

ElencoDati ListData

text designer-onlySpecifica i dati da visualizzare come elementi della ListView. Questa proprietà imposta gli elementi specificati in ListViewLayout. Ad esempio, se il layout scelto è Image,MainText questa proprietà consentirà di definire un numero qualsiasi di elementi, ciascuno contenente un nome file per Image e una stringa per MainText. Proprietà esclusiva del Designer.

ListViewLayout

number designer-onlySpecifica il tipo di layout per le righe della ListView. Di seguito si passerà all’inserimento dei dati attraverso la finestra ListData. Proprietà esclusiva del Designer.

Orientamento

numberSpecifica l’orientamento del layout. Può essere: Vertical, che visualizza gli elementi in righe uno dopo l’altro; o Horizontal, che visualizza un elemento alla volta e consente all’utente di scorrere verso sinistra o destra per sfogliare gli elementi.

Selezione

textRestituisce il testo nella posizione di SelectionIndex.

SelezioneColore

colorIl colore dell’elemento quando è selezionato.

SelezioneDettagliTesto

text  read-only, blocks-onlyRestituisce il testo Secondary o Detail nella posizione impostata da SelectionIndex

Indice di selezione SelectionIndex

number blocks-onlyL’indice dell’elemento attualmente selezionato, a partire da 1. Se non è selezionato alcun elemento, il valore sarà 0. Se si tenta di impostarlo su un numero minore 1 o maggiore del numero di elementi in ListView, SelectionIndex verrà impostato su 0, e Selection verrà impostato sul testo vuoto.

Mostra barra dei filtri ShowFilterBar

booleanImposta la visibilità della barra dei filtri. true mostrerà la barra, false la nasconderà.

Colore del testo

colorIl colore del testo degli elementi.

TestoColoreDettagli

colorSpecifica il colore del testo secondario in un layout ListView

Dimensione del testo TextSize

numberSpecifica la dimensione del carattere del testo dell’elemento

Visibile

booleanSpecifica se ListView deve essere visibile sullo schermo. Il valore è true se ListView viene visualizzato e false se nascosto.

Larghezza

number blocks-onlySpecifica la larghezza orizzontale di ListView, misurata in pixel.

LarghezzaPercentuale

number write-only, blocks-onlySpecifica la larghezza orizzontale del ListView come percentuale della larghezza dello Screen . Di seguito le vecchie proprietà dismesse: Abilitato Enabled Carattere grassetto FontBold Carattere corsivo FontItalic Dimensione carattere FontSize Immagine Image Colore di sfondo degli elementi ItemBackgroundColor Colore del testo degli elementi ItemTextColor Forma Shape Mostra Feedback ShowFeedback Testo Text Allineamento testo TextAlignment Titolo Title

Eventi

AfterPicking() Elements Evento semplice da sollevare dopo che è stato scelto un elemento nella lista. L’elemento selezionato è disponibile nella proprietà Selection.

Metodi

dictionary CreateElement(text mainText , text detailText , text imageName )

Crea un elemento

text GetDetailText(dictionary listElement )

Ottieni il testo di dettaglio di un elemento ListView.

text GetImageName(dictionary listElement )

Ottieni il nome file dell’immagine di un elemento ListView che è stato caricato su Media.

text GetMainText(dictionary listElement )

Ottieni il testo principale di un elemento ListView.

Refresh()

Ricaricare ListView per aggiornare eventuali modifiche ai dati.

Notifiche (Notifier)

App Inventor 2	Kodular	Thunkable
		Alert

Componente NON VISIBILE che visualizza i messaggi di avviso o di allerta in modalità pop up. Esistono diversi eventi e metodi per personalizzare l’interfaccia e scegliere di mostrare il messaggio con uno , due o più bottoni. Aggiungere un titolo o elaborare l’immissione dell’utente.

Differenze e annotazioni:

KODU utilizza anche Snackbar un componente non visibile che visualizza un avviso nella parte inferiore dello schermo, o Spotlight un componente non visibile che enfatizza il componente specificato (ad esempio un bottone sullo schermo) mediante l’oscuramento dello schermo attorno a quel componente.

Proprietà

Colore di sfondo BackgroundColor

color write-only Specifica il colore di sfondo per gli avvisi (non le finestre di dialogo).

Lunghezza notifica NotifierLength

number designer-only Specifica il periodo di tempo in cui viene visualizzato l’avviso: ‘breve’ o ‘lungo’.

Colore del testo TextColor

color Specifica il colore del testo per gli avvisi (non le finestre di dialogo).

Eventi

Dopo aver scelto() AfterChoosing ( text scelta) Evento dopo che l’utente ha effettuato una selezione per ShowChooseDialog.

Dopo aver inserito il testo() AfterTextInput ( text risposta)

Evento generato dopo che l’utente ha risposto a ShowTextDialog.

Scelto cancellamento() ChoosingCanceled()

Evento generato quando l’utente annulla la scelta di un’opzione. ShowChooseDialog.

Inserimento testo cancellato() TextInputCanceled()

Evento generato quando l’utente annulla ShowChooseDialog, ShowPasswordDialog o ShowTextDialog.

Metodi

DismissProgressDialog ()

Ignora l’avviso creato dal blocco ShowProgressDialog

LogError (text messaggio)

Scrive un messaggio di errore nel registro di sistema di Android. Consulta la documentazione di Google Android per come accedere al registro.

Loginfo (text messaggio)

Scrive un messaggio informativo nel registro Android.

LogWarning (text messaggio)

Scrive un messaggio di avviso nel registro Android. Consulta la documentazione di Google Android per come accedere al registro.

ShowAlert (text avviso)

Visualizza una notifica temporanea.

ShowChooseDialog (text messaggio,text titolo,text button1Text, text button2Text, boolean cancellabile)

Mostra una finestra di dialogo con due pulsanti, tra cui l’utente può scegliere. Se la cancellazione è vera, ci sarà un ulteriore pulsante CANCEL. La pressione di un pulsante genererà l’evento AfterChoosing. Il parametro ‘scelta’ per AfterChoosing sarà il testo sul pulsante che è stato premuto, oppure ‘Annulla’ se è stato premuto il pulsante CANCEL. Se annullato, verrà eseguito anche l’evento TextInputCanceled.

ShowMessageDialog ( text messaggio, text titolo, text buttonText)

Visualizza una finestra di avviso con un solo pulsante che elimina l’avviso.

ShowPasswordDialog ( textmessaggio, text titolo, boolean cancellabile)

Mostra una finestra di dialogo in cui l’utente può inserire la password (l’input è mascherato), dopodiché verrà generato l’evento AfterTextInput. Se la cancellazione è vera, ci sarà un ulteriore pulsante CANCEL. Gli eventi AfterTextInput e TextInputCanceled si comportano nello stesso modo descritto in ShowTextDialog.

ShowProgressDialog ( text messaggio, text titolo)

Mostra una finestra di dialogo con un titolo e un messaggio facoltativi (utilizzare stringhe vuote se non sono desiderate). Questa finestra di dialogo contiene un artefatto rotante per indicare che il programma sta funzionando. Non può essere annullato dall’utente, ma deve essere eliminato dal Programma App Inventor utilizzando il metodo DismissProgressDialog.

ShowTextDialog ( textmessaggio text, titolo, boolean cancellabile)

Mostra una finestra di dialogo in cui l’utente può inserire il testo, dopodiché verrà generato l’evento AfterTextInput. Se la cancellazione è vera, ci sarà un ulteriore pulsante CANCEL. L’immissione di testo genererà l’evento AfterTextInput. Il parametro ‘response’ di AfterTextInput sarà il testo inserito o ‘Annulla’ se si preme il pulsante CANCEL. Se annullato, verrà eseguito anche l’evento TextInputCanceled.

THUNKABLE sistema di ALERT

In una maniera diversa viene affrontato lo stesso argomento dalla piattaforma.

Prima di tutto bisogna ricordare che non esiste un tempo di visualizzazione quindi l’Alert viene “interrotto” solo quando viene premuto uno dei due bottoni o di conferma o di cancellazione. Questo porta a degli equivoci e si può rimanere in loop se non si inserisce nessun testo all’interno delle proprietà Confirm Button o Cancel Button, rendendoli invisibili.

Se invece andiamo a vedere la parte dei blocchi Alert di THUNKABLE, ci sono solo due settaggi dei metodi: uno che riguarda lo Show la visualizzazione, a cui segue la proprietà Confirm (se non si inserisce niente nel DO, non c’è problema il codice prosegue senza problemi);

Invece l’altro set Show Button List, ha la possibilità di legare una lista al componente Alert e quindi avere quanti bottoni si voglia. È possibile impostare lo stile dell’avviso su ok, distruttivo (solo per iOS, colora di rosso la scritta) o annullato:

I blocchi creano tre bottoni sullo smartphone.

Il blocco “ShowButtonList” restituirà un’uscita chiamata “Buttonpressed”. Ciò restituirà la posizione del pulsante nell’elenco dei pulsanti (cioè come un list Index) e da qui puoi gestire la risposta dell’utente.

Casella di testo password (PasswordTextBox)

App Inventor 2	Kodular	Thunkable
	NO	NO

Gli utenti inseriscono le password in un componente della casella di testo della password, che nasconde il testo che è stato digitato al suo interno. Una casella di testo della password è uguale al normale componente TextBox, tranne per il fatto che non visualizza i caratteri digitati dall’utente. Puoi ottenere o impostare il valore del testo nella casella con la proprietà Text. Se il testo è vuoto, è possibile utilizzare la proprietà Suggerimento per fornire all’utente un suggerimento su cosa digitare. Il suggerimento appare come un debole testo nella casella. I componenti della casella di testo della password vengono generalmente utilizzati con un componente Button. L’utente tocca il pulsante dopo aver inserito il testo.

Differenze e annotazioni:

Anche se non esiste espressamente una Casella di testo password, sia che in KODU che in THUNK la possibilità di oscurare un casella di testo è data dalla proprietà Input Type (Tipo di inserimento) di una normale casella di testo.

Proprietà

Colore di sfondo BackgroundColor

color Il colore di sfondo di PasswordTextBox`. Puoi scegliere un colore per nome nel Designer o nell’Editor blocchi. Il colore di sfondo predefinito è ‘predefinito’ (aspetto tridimensionale ombreggiato).

Abilitato Enabled

boolean Se impostato, l’utente può inserire il testo in PasswordTextBox.

Carattere grassetto FontBold

booleandesigner-only Specifica se il testo di PasswordTextBox deve essere in grassetto. Alcuni caratteri non supportano il grassetto.

Carattere corsivo FontItalic

booleandesigner-only Specifica se il testo di PasswordTextBox deve essere in corsivo. Alcuni caratteri non supportano il corsivo.

Dimensione carattere FontSize

number Specifica la dimensione del carattere del testo di PasswordTextBox, misurata in sp (pixel indipendenti dalla scala).

Tipo carattere FontTypeface

number designer-only La faccia del font di testo di PasswordTextBox. I valori validi sono 0 (impostazione predefinita), 1 (serif), 2 (sans serif) o 3 (monospace).

Altezza Height

number block-only Specifica l’altezza verticale di PasswordTextBox, misurata in pixel.

Percentuale altezza HeightPercent

number write-only,block-only Specifica l’altezza verticale di PasswordTextBox come percentuale dell’altezza dello schermo.

Suggerimento

Suggerimento PasswordTextBox per l’utente.

PasswordVisible

Specifica se la password è nascosta (impostazione predefinita) o visualizzata.

Testo

Il testo in PasswordTextBox, che può essere impostato dal programmatore in Designer o Editor blocchi, oppure può essere inserito dall’utente (a meno che la proprietà Enabled sia falsa).

Allineamento testo TextAlignment

number designer-only Specifica l’allineamento del testo. I valori validi sono: 0 (normale; ad es. Giustificato a sinistra se il testo è scritto da sinistra a destra), 1 (al centro) o 2 (a fianco; ad es. Giustificato a destra se il testo è scritto da sinistra a destra).

Colore del testo

Specifica il colore del testo come numero intero alfa-rosso-verde-blu.

Visibile Visible

boolean Specifica se deve essere visibile sullo schermo. Il valore è true se viene visualizzato e false se nascosto.

Larghezza Width

number block-only Specifica la larghezza orizzontale , misurata in pixel.

Percentuale larghezza WidthPercent

number write-only,block-only Specifica la larghezza orizzontale  come percentuale della larghezza dello schermo.

Eventi

GotFocus ()

Evento generato quando è selezionato per l’input, ad esempio quando l’utente lo tocca.

LostFocus ()

Evento generato quando non è più selezionato per l’input, ad esempio se l’utente tocca una casella di testo diversa.

Metodi

RequestFocus ()

Richiedi lo stato attivo per PasswordTextBox corrente.

Cursore (Slider)

App Inventor 2	Kodular	Thunkable

Questa classe viene utilizzata per visualizzare un dispositivo di scorrimento.

Un cursore è un dispositivo utilizzato dall’utente che trascina un cursore in linea orizzontale (una specie di bottone, THUMB in inglese), che scorre su una ‘barra di scorrimento’ chiamata slider. Quando il cursore viene trascinato, verrà attivato l’evento PositionChanged, che restituisce la posizione del cursore. La posizione riportata dal cursore può essere utilizzata per aggiornare dinamicamente un altro attributo del componente, ad esempio FontSize di una TextBox o il raggio di una sfera. Il dispositivo di scorrimento utilizza i seguenti valori predefiniti: MinValue = 10; MaxValue = 50; ThumbPosition = 30. Tuttavia, questi valori possono essere modificati tramite l’editor Designer o Blocks.

Differenze e annotazioni:

KODU nel confronto ne esce vincente: molti più elementi da personalizzare, sino a poter dare un’immagine al cursore.Inoltre, qui esistono gli eventi Touch Down e Touch Up. THUNK invece, ha la proprietà Step con cui indicare con quali passi deve avanzare il cursore.

Proprietà

Colore di sinistra ColorLeft

color Specifica il colore della barra di scorrimento a sinistra del cursore come numero intero alfa-rosso-verde-blu, ovvero 0xAARRGGBB. Un alfa di 00 indica completamente trasparente e FF significa opaco.

Colore di destra ColorRight

color Specifica il colore della barra di scorrimento a destra del cursore come numero intero alfa-rosso-verde-blu, ovvero 0xAARRGGBB. Un alfa di 00 indica completamente trasparente e FF significa opaco.

Percentuale altezza HeightPercent

number write-only,block-only Specifica l’altezza verticale del dispositivo di scorrimento in percentuale dell’altezza dello schermo.

Valore massimo MaxValue

number Imposta il valore massimo del cursore. Se il nuovo massimo è inferiore al minimo corrente, il minimo e il massimo saranno entrambi impostati su questo valore. L’impostazione di MaxValue ripristina la posizione del cursore a metà tra MinValue e MaxValue e segnala l’evento PositionChanged`.

Valore minimo MinValue

number Imposta il valore minimo del cursore. Se il nuovo minimo è maggiore del massimo corrente, il minimo e il massimo saranno entrambi impostati su questo valore. L’impostazione di MinValue ripristina la posizione del cursore a metà tra MinValue e MaxValue e segnala l’evento PositionChanged`.

Abilita cursore ThumbEnabled

boolean Indica se abilitare il cursore dello slider.

Posizione del cursore ThumbPosition

number Imposta la posizione del cursore del dispositivo di scorrimento. Se questo valore è maggiore di MaxValue, verrà impostato sullo stesso valore di MaxValue. Se questo valore è inferiore a MinValue, verrà impostato sullo stesso valore di MinValue.

Visibile Visible

boolean Specifica se il dispositivo di scorrimento deve essere visibile sullo schermo. Il valore è true se viene visualizzato il dispositivo di scorrimento e false se nascosto.

Larghezza Width

number block-only Specifica la larghezza orizzontale del dispositivo di scorrimento, misurata in pixel.

Percentuale larghezza WidthPercent

number write-only,block-only Specifica la larghezza orizzontale del dispositivo di scorrimento in percentuale della larghezza dello schermo.

Eventi

PositionChanged (thumbPosition)

Indica che la posizione del cursore dello slider è cambiata.

Metodi

Nessuno

Selettore a scorrimento (Spinner)

App Inventor 2	Kodular	Thunkable
		NO

Un componente Selettore a scorrimento appartiene alla famiglia dei Combo Box, menu che visualizzano un elenco pop-up di dati testuali che l’utente può scegliere. Come abbiamo già visto, a questa famiglia appartengono anche il Selettore lista (ListPicker) e il Vista lista (ListView). Gli elementi da scegliere/visualizzare possono essere impostati nel Designer o nell’Editor blocchi impostando la proprietà ElementsFromString su un elenco di valori separato da virgole (ad esempio, scelta 1, scelta 2, scelta 3) o impostando la proprietà Elements su un elenco nell’editor Blocchi . Gli spinner vengono creati con il primo elemento già selezionato, quindi selezionarlo non genera un evento AfterSelecting. Di conseguenza è utile fare in modo che il primo oggetto Spinner non sia una voce del tipo ‘Scegli tra i seguenti …’.

Proprietà

Elementi Elements

list blocks-only Specifica l’elenco diopzioni da visualizzare.

Elementi da stringa ElementsFromString

text write-only Imposta l’elenco di scelte da una stringa di valori separati da virgola.

Altezza Height

number block-only Specifica l’altezza verticale dello Spinner, misurata in pixel.

Percentuale altezza HeightPercent

number write-only,block-only Specifica l’altezza verticale dello Spinner come percentuale dell’altezza dello schermo.

Prompt

text Specifica il testo utilizzato per il titolo della finestra Spinner.

Selezione Selection

text Specifica l’elemento attualmente selezionato nello Spinner.

Indice di selezione SelectionIndex

number blocks-only Imposta la selezione Spinner sull’elemento in corrispondenza dell’indice indicato. Se si tenta di impostare questo su un numero inferiore a 1 o maggiore del numero di elementi nello Spinner, SelectionIndex verrà impostato su 0 e Selection verrà impostato sul testo vuoto.

Visibile Visible

boolean Specifica se lo Spinner deve essere visibile sullo schermo. Il valore è vero se lo Spinner sta mostrando e falso se nascosto.

Larghezza Width

number block-only Specifica la larghezza orizzontale dello Spinner, misurata in pixel.

Percentuale larghezza WidthPercent

number write-only,block-only Specifica la larghezza orizzontale dello Spinner come percentuale della larghezza dello schermo..

Eventi

AfterSelecting() (text selezione)

Evento chiamato dopo che l’utente seleziona un elemento dall’elenco a discesa.

Metodi

DisplayDropdown ()

Visualizza l’elenco a discesa per la selezione, stessa azione di quando l’utente fa clic sullo spinner.

Interruttore (Switch)

App Inventor 2	Kodular	Thunkable

Gli Interruttori sono componenti che possono rilevare i tocchi dell’utente e possono modificare il loro stato booleano in risposta. Sono identici a CheckBoxes se non in apparenza. Gli switch hanno uno stato on (true) e uno off (false) attivabile dalla ‘levetta (in inglese THUMB). Un componente Switch genera un evento quando l’utente lo tocca per passare da uno stato all’altro.

Proprietà

Colore sfondo BackgroundColor

color Specifica il colore di sfondo del pulsante come numero intero (alfa-rosso-verde-blu). Se è stata impostata un’immagine, il cambio di colore non sarà visibile fino a quando l’immagine non viene rimossa.

Abilitato Enabled

boolean Specifica se il pulsante deve essere attivo e selezionabile.

Carattere grassetto FontBold

boolean Specifica se il testo del pulsante deve essere in grassetto. Alcuni caratteri non supportano il grassetto.

Carattere corsivo FontItalic

boolean Specifica se il testo del pulsante deve essere in corsivo. Alcuni caratteri non supportano il corsivo.

Dimensione carattere FontSize

number Specifica la dimensione del carattere del testo del pulsante, misurata in sp (scale-independent pixels , pixel indipendenti dalla scala).

Tipo carattere FontTypeface

number designer-only Specifica il tipo predefinito di carattere del testo del pulsante: serif, sans serif o monospace.

Altezza Height

number block-only Specifica l’altezza verticale del pulsante, misurata in pixel.

Percentuale altezza HeightPercent

number write-only, block-only Specifica l’altezza verticale del pulsante come percentuale dell’altezza dello schermo.

Acceso ON

boolean Vero se l’interruttore è nello stato On, falso altrimenti.

Testo Text

textSpecifica il testo visualizzato nell’etichetta dello Switch.

Colore del testo TextColor

color Specifica il colore del testo Switch come intero alfa-rosso-verde-blu.

Colore della levetta se attiva ThumbColorActive

color Specifica il colore della levetta quando l’interruttore è nello stato On.

Colore della levetta se inattiva ThumbColorInactive

colorSpecifica il colore della levetta quando l’interruttore è nello stato Off.

Colore della traccia se attiva TrackColorActive

color Specifica il colore della traccia dello stato quando è attivo.

Colore della traccia se inattiva TrackColorInactive

color Specifica il colore della traccia dello stato quando è OFF.

Visibile Visible

booleanSpecifica se deve essere visibile sullo schermo. Il valore è true se viene visualizzato e false se nascosto.

Larghezza Width

number blocks-only Specifica la larghezza orizzontale, misurata in pixel.

Larghezza in percentuale WidthPercent

number write-only,blocks-only Specifica la larghezza orizzontale come percentuale della larghezza schermo Screen's Width.

Eventi

Changed()

L’utente cambia lo stato Switchda On a Off o viceversa.

GotFocus ()

Switch è diventato il componente focalizzato.

LostFocus ()

Switch smesso di essere il componente focalizzato.

Metodi

Nessuna

Casella di testo (Text Input)

App Inventor 2	Kodular	Thunkable

Componente dove gli utenti inseriscono il testo.

Il valore di testo iniziale o immesso dall’utente in un componente casella di testo si trova nella proprietà Text. Se Text è vuoto, è possibile utilizzare la proprietà Hint (suggerimento) per fornire all’utente un suggerimento su cosa digitare. Il Hint appare come testo in grigio nella casella.La proprietà MultiLine determina se il testo può contenere più di una riga. Per una casella di testo a riga singola, la tastiera si chiuderà automaticamente quando l’utente preme il tasto Fine. Per chiudere la tastiera per le caselle di testo multilinea, l’app deve utilizzare il metodo HideKeyboard o fare affidamento sull’utente per premere il tasto Indietro.La proprietà NumbersOnly limita la tastiera ad accettare solo input numerici cambiando la propria visualizzazione a “soli numeri”.Le caselle di testo vengono generalmente utilizzate con il componente Button, con l’utente che fa clic su Button quando l’inserimento del testo è completo. Da qui viene scatenato l’evento e il relativo codice nell’Editor Blocchi.Se il testo inserito dall’utente non deve essere visualizzato, utilizzare invece il componente PasswordTextBox.

Differenze e annotazioni:

KODU aggiunge l’evento On Text Changed. Inoltre è possibile la posizione del cursore coi metodi SetCursor. In THUNK Casella di testo e PasswordTextBox appartengono allo stesso componente che qui si chiam Text Input, basta cambiare la proprietà Secure Text Entry.  La proprietà Keyboard Type fa scegliere il tipo di tastier in quattro modi: default; email address; numeric; phone pad. Anche qui esiste l’evento On Text Changed. 

Proprietà

Colore sfondo BackgroundColor

color Puoi scegliere un colore per nome nel Designer o nell’Editor blocchi. Il colore di sfondo predefinito è ‘predefinito’ (aspetto tridimensionale ombreggiato).

Abilitato Enabled

boolean Se impostato, l’utente può inserire il testo.

Carattere grassetto FontBold

boolean Specifica se il testo deve essere in grassetto. Alcuni caratteri non supportano il grassetto.

Carattere corsivo FontItalic

boolean Specifica se il testo deve essere in corsivo. Alcuni caratteri non supportano il corsivo.

Dimensione carattere FontSize

number Specifica la dimensione del carattere, misurata in sp (scale-independent pixels , pixel indipendenti dalla scala).

Tipo carattere FontTypeface

number designer-only Specifica il tipo predefinito di carattere del testo: serif, sans serif o monospace.

Altezza Height

number block-only Specifica l’altezza verticale, misurata in pixel.

Percentuale altezza HeightPercent

number write-only,block-only Specifica l’altezza verticale come percentuale dell’altezza dello schermo.

Suggerimento Hint

textTextBox suggerimento per l’utente.

Colore del suggerimento HintColor

color Specifica il colore del suggerimento come intero alfa-rosso-verde-blu.

Multi linea MultiLine

boolean Se vero, accetta più righe di input, che vengono immesse utilizzando il tasto Invio. Per le caselle di testo a riga singola è presente un tasto Fine anziché un tasto Invio e premendo Fine si nasconde la tastiera. L’app dovrebbe chiamare il metodo HideKeyboard per nascondere la tastiera per una casella di testo mutilina.

Solo numeri NumbersOnly

boolean Se vero, questo TextBox accetta solo numeri come input da tastiera. I numeri possono includere un punto decimale e un segno meno iniziale facoltativo. Questo vale solo per l’input da tastiera. Anche se NumbersOnly è true, puoi impostare il testo su qualsiasi cosa usando la proprietà  Text.

Sola lettura ReadOnly

boolean Se TextBox è di sola lettura. Per impostazione predefinita, questo è true.

Testo Text

text Il testo in TextBox, che può essere impostato dal programmatore in Designer o nell’Editor blocchi, oppure può essere inserito dall’utente (a meno che la Enabledproprietà non sia falsa).

Allineamento testo TextAlignment

number design-only Specifica l’allineamento testo. I valori validi sono: 0(normale; ad esempio, giustificato a sinistra se il testo è scritto da sinistra a destra), 1(centro) o 2(opposto; ad esempio, giustificato a destra se il testo è scritto da sinistra a destra).

Colore del testo TextColor

color Specifica il colore del testo come intero alfa-rosso-verde-blu.

Visibile Visible

booleanSpecifica se deve essere visibile sullo schermo. Il valore è true se viene visualizzato e false se nascosto.

Eventi

GotFocus ()

Evento generato quando TextBoxviene selezionato per l’input, ad esempio dall’utente che lo tocca.

LostFocus ()

Evento generato quando TextBoxnon è più selezionato per l’input, ad esempio se l’utente tocca una casella di testo diversa.

Textchanged ()

Evento generato quando il testo della casella di testo viene modificato, dall’utente o dal programma.

Metodi

HideKeyboard ()

Nascondi la tastiera. Solo le caselle di testo multilinea ne hanno bisogno. Le caselle di testo a riga singola chiudono la tastiera quando l’utente preme il tasto Fine.

MoveCursorTo ( posizione)

Riposiziona il cursore della casella di testo prima del carattere nella posizione 1-indicizzata data. Se la posizione data è maggiore della lunghezza della casella di testo, il cursore verrà spostato alla fine del testo; e se la posizione data è più piccola o uguale a 1, il cursore verrà spostato all’inizio.

MoveCursorToEnd ()

Riposiziona il cursore alla fine del testo della casella di testo.

MoveCursortostart ()

Riposiziona il cursore all’inizio del testo della casella di testo.

RequestFocus ()

Richiedi il focus all’attuale TextBox.

Selettore di data (TimePicker)

App Inventor 2	Kodular	Thunkable

Un pulsante che, quando si fa clic su, apre una finestra di dialogo per consentire all’utente di selezionare un orario. Nota: la data e l’ora vengono manipolate utilizzando i metodi nel componente Orologio (Clock).

Differenze e annotazioni:

In AI2 e in KODU esiste questo componente unico che gestisce sia date che ore. Al contrario THUNK gestisce i due valori separatamente.Questo si intuisce anche dalla differenza di interfacce grafiche assegnate a ciascun componente: un calendario per Date Input e un orologio per Time Input.

Proprietà

Colore sfondo BackgroundColor

color Specifica il colore di sfondo come numero intero (alfa-rosso-verde-blu). Se è stata impostata un’immagine, il cambio di colore non sarà visibile fino a quando l’immagine non viene rimossa.

Abilitato Enabled

boolean Specifica se il componente deve essere attivo e selezionabile.

Carattere grassetto FontBold

boolean Specifica se il testo del componente deve essere in grassetto. Alcuni caratteri non supportano il grassetto.

Carattere corsivo FontItalic

boolean Specifica se il testo del componente deve essere in corsivo. Alcuni caratteri non supportano il corsivo.

Dimensione carattere FontSize

number Specifica la dimensione del carattere del testo del componente, misurata in sp (scale-independent pixels, pixel indipendenti dalla scala).

Tipo carattere FontTypeface

number designer-only Specifica il tipo predefinito di carattere del testo del componente: serif, sans serif o monospace.

Altezza Height

number block-only Specifica l’altezza verticale del componente, misurata in pixel.

Percentuale altezza HeightPercent

number write-only,block-only Specifica l’altezza verticale del componente come percentuale dell’altezza dello schermo.

Ora Hour

number read-only,blocks-only Restituisce l’ora dell’ultima volta selezionata usando il TimePicker`. Il tempo restituito è sempre nel formato 24 ore.

Immagine Image

text Specifica il percorso dell’immagine del TimePicker. Se è stato specificato sia il BackgroundColor che il Image, quest’ultima avrà la precedenza e sarà visibile solo questa.

Istante Istant

read-only, blocks-only Restituisce l’istante nel tempo che è stato selezionato l’ultima volta usando il TimePicker.

Minuto Minute

number read-only, blocks-only Restituisce l’ora dell’ultima volta selezionata utilizzando il TimePicker. Il tempo restituito è sempre nel formato 24 ore.

Forma Shape

number designer-only Specifica la forma del file TimePicker. I valori validi per questa proprietà sono 0(predefinito), 1(arrotondato), 2(rettangolo) e 3(ovale). La forma non sarà visibile se una Image è usata.

Mostra feedback ShowFeedback

boolean Specifica se deve essere visualizzato un feedback visivo quando viene premuto un TimePicker con un assegnato Image.

Testo Text

text Il testo in TextBox, che può essere impostato dal programmatore in Designer o nell’Editor blocchi, oppure può essere inserito dall’utente (a meno che la proprietà Enabled non sia falsa).

Allineamento testo TextAlignment

number design-only Specifica l’allineamento del TextBoxtesto. I valori validi sono: 0(normale; ad esempio, giustificato a sinistra se il testo è scritto da sinistra a destra), 1(centro) o 2(opposto; ad esempio, giustificato a destra se il testo è scritto da sinistra a destra).

Colore del testo TextColor

color Specifica il colore del testo TextBoxcome intero alfa-rosso-verde-blu.

Visibile Visible

booleanSpecifica se deve essere visibile sullo schermo. Il valore è true se viene visualizzato e false se nascosto.

Eventi

AfterTimeSet ()

Questo evento viene eseguito quando un utente ha impostato l’ora nella finestra di dialogo popup.

GotFocus ()

Indica il cursore spostato sopra TimePicker quindi è ora possibile fare clic su di esso.

LostFocus ()

Indica che il cursore si è allontanato da TimePicker quindi non è più possibile fare clic su di esso.

TouchDown ()

Indica che è TimePicker è stato premuto.

Ritocco()

Indica che TimePickerè stato rilasciato.

Metodi

LaunchPicker ()

Avvia la TimePickerfinestra di dialogo.

SetTimeToDisplay ( ora , minuti )

Consente all’utente di impostare l’ora da visualizzare quando si TimePickerapre. I valori validi per il campo ora sono 0-23 e 0-59 per il secondo campo.

SetTimeToDisplayFromInstant ( istantaneo )

Consente all’istante di impostare l’ora e i minuti da visualizzare quando si TimePickerapre. Instants sono utilizzati in Clock, DatePickere TimePicker componenti.

Visualizzatore WEB (WebViewer)

App Inventor 2	Kodular	Thunkable
	NO

Componente per la visualizzazione di pagine Web. L’indirizzo web, HomeUrl , è possibile specificarlo nel Designer o nell’Editor blocchi. La vista può essere impostata per seguire i collegamenti quando vengono toccati e gli utenti possono compilare moduli Web.

Attenzione: questo non è un browser completo. Ad esempio, premendo il tasto Indietro hardware del telefono si esce dall’app, anziché tornare indietro nella cronologia del browser.

Puoi utilizzare la proprietà WebViewString per comunicare tra la tua app e il codice Javascript in esecuzione nella pagina WebViewer. Nell’app, si ottiene e si imposta WebViewString su “hello”, quindi verrà visualizzata la pagina Web:  The answer is hello. E se la pagina Web contiene Javascript che esegue il comando windowAppInventor.setWebViewString("hello from Javascript"), quindi il valore della proprietà WebViewString sarà  hello from Javascript. Chiamando setWebViewString da JavaScript, eseguirà anche l’evento WebViewStringChange in modo che i blocchi possano gestirli quando la proprietà   WebViewString cambia.

Proprietà

Titolo della pagina corrente CurrentPageTitle

text read-only, blocks-onlyRestituisce il titolo della pagina attualmente visualizzata

URL Corrente CurrentUrl

text read-only,blocks-only Restituisce l’URL attualmente visualizzato. Questo potrebbe essere diverso dal HomeUrl caso in cui nuove pagine fossero visitate seguendo i collegamenti.

Segui i collegamenti FollowLinks

boolean Determina se seguire i collegamenti quando vengono toccati in WebViewer. Se segui i collegamenti, puoi utilizzare i metodi GoBack e GoForward per navigare nella cronologia del browser.

Altezza Height

number block-only Specifica l’altezza verticale misurata in pixel.

Percentuale altezza HeightPercent

number write-only,block-only Specifica l’altezza verticale come percentuale dell’ altezza schermo.

URL della Home HomeUrl

text Specifica l’URL della pagina a cui WebViewer dovrebbe inizialmente aprirsi. L’impostazione caricherà la pagina.

Ignora errori SSL IgnoreSslErrors

boolean Determina se ignorare o meno gli errori SSL. Imposta true per ignorare gli errori. Utilizzare questo per accettare certificati autofirmati dai siti Web.

Richiesta autorizzazione PromptforPermission

boolean Determina se all’utente deve essere richiesta l’autorizzazione per utilizzare l’API di geolocalizzazione mentre è in WebViewer. Se true, WebViewer chiede all’utente di fornire l’autorizzazione per accedere all’API di geolocalizzazione. Se false, supponi che l’autorizzazione sia concessa.

Usa localizzazione UsesLocation

boolean write-only,designer-only Specifica se questo WebViewer può accedere o meno all’API di geolocalizzazione JavaScript.

Visibile Visible

boolean Specifica se WebViewer deve essere visibile sullo schermo. Il valore è true se WebViewer viene visualizzato e false se nascosto.

WebViewString

Ottiene la stringa di WebView, che è visualizzabile tramite Javascript nel WebView come oggetto window.AppInventor.

Larghezza Width

number block-only Specifica la larghezza orizzontale del componente, misurata in pixel.

Percentuale larghezza WidthPercent

number write-only,block-only Specifica la larghezza orizzontale del componente come percentuale della larghezza dello schermo.

Eventi

BeforePageLoad ( text  url )

Quando una pagina sta per caricare, questo evento viene eseguito.

ErrorOccurred ( number errorCode ,text  description , text failingUrl )

Quando si verifica un errore, questo evento viene eseguito.

A questo link trovate i principali codici di risposta del server e i principali metodi del protocollo HTTP.

PageLoaded ( text url )

Al termine del caricamento di una pagina, questo evento viene eseguito.

WebViewStringChange ( text valore)

Evento che viene eseguito quando il METODO AppInventor.setWebViewString viene chiamato da JavaScript. Il nuovo WebViewString è dato dal value del parametro.

Metodi

boolean CanGoBack ()

Restituisce vero se WebViewer può tornare indietro nell’elenco cronologico.

boolean CanGoForward ()

Restituisce vero se WebViewer può andare avanti nell’elenco della cronologia.

ClearCaches ()

Svuota la cache di visualizzazione web interna, sia ram che disco. Ciò è utile quando si utilizza il WebViewer per eseguire il polling di una pagina che potrebbe non inviare intestazioni di controllo cache appropriate.

ClearCookies()

Cancella i cookie della webview. Ciò è utile se si desidera disconnettere l’utente da un sito Web che li utilizza per archiviare gli accessi.

ClearLocations ()

Cancella le autorizzazioni per la posizione memorizzata. Quando l’API di geolocalizzazione viene utilizzata in WebViewer, all’utente finale viene richiesto in base all’URL se è necessario concedere o meno l’autorizzazione per accedere alla propria posizione. Questa funzione cancella queste informazioni per tutte le posizioni. Poiché l’interfaccia delle autorizzazioni non è disponibile su telefoni più vecchi di Eclair, questa funzione non è operativa sui telefoni più vecchi.

GoBack()

Torna alla pagina precedente nell’elenco cronologico. Non fa nulla se non c’è una pagina precedente.

GoForward()

Passa alla pagina successiva nell’elenco cronologico. Non fa nulla se non c’è la pagina successiva.

GoHome()

Carica la pagina dall’URL di casa. Ciò accade automaticamente quando l’URL home viene modificato.

GoToUrl ( text url )

Carica la pagina nell’URL indicato.

Reload()

Ricarica la pagina corrente.

RunJavaScript ( text js )

Esegui JavaScript nella pagina corrente.

StopLoading ()

Smetti di caricare una pagina.

Kodular
	Circular Progress
	Custom progress
	Floating action button
	Linear progress bar
	Radio button
	Rating bar
	Snack bar
	Spotlight
	State progress bar

KODU – Circular Progress

https://docs.kodular.io/components/user-interface/circular-progress/ Un componente visibile che indica l’avanzamento di un’operazione utilizzando un loop animato.

KODU – Custom progress

https://docs.kodular.io/components/user-interface/custom-progress/ Un componente visibile che indica l’avanzamento di un’operazione utilizzando una gamma di animazioni indeterminate.

KODU – Floating action button

https://docs.kodular.io/components/user-interface/floating-action-button/ Un componente non visibile utilizzato per creare pulsanti di azione mobile. I pulsanti di azione mobile vengono utilizzati per indicare l’azione principale dello schermo.

KODU – Linear progress bar

https://docs.kodular.io/components/user-interface/linear-progressbar/ Un componente visibile che indica l’avanzamento di un’operazione utilizzando una barra lineare animata.

KODU – Radio button

https://docs.kodular.io/components/user-interface/radio-button/ Un componente visibile che consente all’utente di alternare tra due stati: selezionato e non selezionato. È possibile controllare un solo pulsante di opzione in un gruppo di pulsanti di scelta alla volta.

KODU – Rating bar

https://docs.kodular.io/components/user-interface/rating-bar/ Un componente visibile che consente all’utente di inviare una valutazione in stelle.

KODU – Snack bar

https://docs.kodular.io/components/user-interface/snackbar/ Un componente non visibile che visualizza un avviso nella parte inferiore dello schermo.

KODU – Spotlight

https://docs.kodular.io/components/user-interface/spotlight/ Un componente non visibile che enfatizza il componente specificato mediante l’oscuramento dello schermo attorno a quel componente.

KODU – State progress bar

https://docs.kodular.io/components/user-interface/state-progress-bar/ Un componente visibile che indica l’avanzamento di un’operazione evidenziando i passaggi coinvolti in tale operazione.

THUNKABLE X

Thunkable
	Loading icon
	Time input
	Pdf reader
	Data Viewer grid

THUNX – Loading icon

https://docs.thunkable.com/loading-icon Per le attività che richiedono più di qualche secondo, il caricamento delle icone può essere utile per dire agli utenti dell’app che si sta svolgendo un’attività in background, come il recupero o il caricamento di dati.

THUNX – Time input

https://docs.thunkable.com/time-input Un componente Time Input è utile quando si desidera che l’utente della propria app selezioni facilmente un orario specifico utilizzando il selettore di date nativo per Android o iOS

THUNX – Pdf reader

https://docs.thunkable.com/pdf-reader Consenti ai tuoi utenti di visualizzare i tuoi PDF preferiti – contratti legali, poster artistici o magari anche una tesi di dottorato – tutto comodamente dalla tua app.