SL4A - Creazione di GUI

Una GUI (Graphical User Interface) rappresenta un insieme di componenti grafici che consente all'utente di navigare, accedere e interagire con le funzionalità dell'applicazione.

Esistono due approcci di base all'interazione dell'utente con SL4A, ovvero:

Finestre di dialogo come Alerts.
Utilizzo di HTML e JavaScript per creare l'interfaccia utente e quindi Python dietro le quinte per gestire qualsiasi elaborazione aggiuntiva.

Questo capitolo spiega entrambi gli approcci.

Finestra di dialogo Python - GUI basate

SL4A include una facciata dell'interfaccia utente per accedere agli elementi dell'interfaccia utente di base forniti dall'API Android. Queste funzioni restituiscono un oggetto risultato come una tupla con nome quando vengono chiamate. A ogni risultato viene assegnato un ID univoco a scopo di monitoraggio. Il secondo elemento è il risultato. Rappresenta l'input dell'utente. La tupla include anche il terzo elemento di errore per fornire feedback al chiamante su qualsiasi condizione di errore che potrebbe essere stata riscontrata. Se non sono stati rilevati errori, questo elemento viene impostato su Nessuno.

La tabella seguente elenca le funzioni di UiFacade comunemente utilizzate.

S.No.	Funzione e descrizione di UiFacade
1	dialogGetInput Interroga l'utente per un input di testo. title (String) titolo della casella di input (predefinito = valore) message (String) messaggio da visualizzare sopra la casella di immissione (impostazione predefinita = inserire il valore :) defaultText (String) testo da inserire nella casella di input (opzionale) Il risultato è l'input dell'utente o Nessuno (null) se è stato premuto Annulla.
2	dialogShow Mostra finestra di dialogo
3	dialogCreateAlert Crea finestra di dialogo di avviso. title (String)(opzionale) message (String) (opzionale)
4	dialogDismiss Chiudi finestra di dialogo.
5	dialogCreateDatePicker Crea finestra di dialogo di selezione della data. year (Integer) (predefinito = 1970) month (Integer) (predefinito = 1) day (Integer) (predefinito = 1)
6	dialogCreateTimePicker Crea finestra di dialogo di selezione del tempo. hour (Integer) (predefinito = 0) minute (Integer) (predefinito = 0) is24hour (Boolean) Usa orologio a 24 ore (impostazione predefinita = false)
7	dialogGetPassword Interroga l'utente per una password. title (String) titolo della casella della password (default = Password) message (String) messaggio da visualizzare sopra la casella di immissione (impostazione predefinita = inserire la password :)
8	dialogGetResponse Restituisce la risposta della finestra di dialogo.
9	dialogSetPositiveButtonText Imposta il testo del pulsante positivo della finestra di dialogo di avviso. testo (stringa)
10	dialogSetNegativeButtonText Imposta il testo del pulsante della finestra di dialogo di avviso. testo (stringa)
11	dialogSetNeutralButtonText Imposta il testo del pulsante della finestra di dialogo di avviso. testo (stringa)
12	dialogSetSingleChoiceItems Questo crea un elenco di pulsanti di opzione.
13	dialogSetMultiChoiceItems Questo crea una casella di controllo
14	dialogCreateHorizontalProgress Crea una finestra di dialogo di avanzamento orizzontale. title (String) (opzionale) message (String) (opzionale) maximum progress (Integer) (predefinito = 100)
15	dialogCreateSpinnerProgress Crea una finestra di dialogo di avanzamento del filatore. title (String) (opzionale) message (String) (opzionale) maximum progress (Integer) (predefinito = 100)
16	addContexMenuItem Aggiunge un nuovo elemento al menu contestuale. label (String) etichetta per questa voce di menu event (String) evento che verrà generato al clic sulla voce di menu eventData (Object) (opzionale)
17	addOptionsMenuItem Aggiunge un nuovo elemento al menu delle opzioni. label (String) etichetta per questa voce di menu event (String) evento che verrà generato al clic sulla voce di menu eventData (Object) (opzionale) iconName (String)
18	webViewShow Visualizza un WebView con l'URL fornito. url (String) wait (Boolean) bloccare fino a quando l'utente non esce dalla WebView (opzionale)
19	clearContextMenu Rimuove tutti gli elementi precedentemente aggiunti al menu contestuale.
20	clearOptionsMenu Rimuove tutti gli elementi aggiunti in precedenza al menu delle opzioni
21	makeToast Crea una notifica

Esempi

A simple Toast Example

import android 
droid = android.Android() 
uname = droid.getInput("Enter your name") 
print uname  
droid.makeToast("Hello %s" %uname.result)

A Horizontal Progress Bar

import android 
   droid = android.Android() 
   title = "Progress" 
   str = "Loading..." 
   droid.dialogCreateHorizontalProgress(title,str,100) 
   droid.showDialog() 
	
   for x in range(0,99) 
      time.sleep(0.1) 
      droid.dialogSetCurrentProgress(x) 
		
   droid.dialogDismiss()

Finestre di dialogo modali e non modali

Una finestra di dialogo o una finestra modale è figlio di un altro processo o finestra. Con una finestra di dialogo modale, l'elaborazione attenderà o si bloccherà finché l'utente non interagisce con la nuova finestra di dialogo.

Un tipico esempio di questo caso è una finestra di dialogo di avviso. L'avviso non si chiuderà finché l'utente non esegue un'azione.

L'immagine seguente è un esempio di una finestra di dialogo modale.

Per riassumere, usa una finestra di dialogo modale quando hai bisogno di input da parte dell'utente prima di continuare l'esecuzione.

GUI Python con HTML

SL4A consente la creazione di interfacce utente grafiche (GUI) basate su CSS, HTML, JavaScript e Python. L'approccio utilizza HTML e JavaScript per creare l'interfaccia utente, CSS per migliorare l'aspetto e la coerenza di elementi e caratteri HTML e Python per gestire qualsiasi elaborazione aggiuntiva.

L'esempio seguente illustra un esempio di GUI HTML di base:

1. Speech.html

<html> 
   <head> 
      <title>Text To Speech</title> 
		
      <script> 
         var droid = new Android(); 
         var speak = function(){ 
            droid.postEvent("say",document.getElementById("say").value); 
         } 
      </script> 
		
   </head>
	
   <body> 
      <form onsubmit = "speak()";return false;”> 
         <label for = "say">What is your message?</label> 
         <input type = "text" id = "say"/> 
         <input type = "submit" value = "Speak"/> 
      </form> 
   </body> 
	
</html>

2. txtToSpeech.py

import android 
droid = android.Android() 
droid.webViewShow(‘file:///sdcard/sl4a/scripts/Speech.html’) 

while True: 
   result = droid.waitForEvent(‘say’).result 
   droid.ttsSpeak(result[‘data’])

Entrambi i file - Speech.html and txtToSpeech.py, deve risiedere in /sdcard/sl4a/scriptsdirectory sul dispositivo. Esegui lo script python per avviare il file HTML.

Questo file viene avviato da webViewShowChiamata API. L'evento viene generato quando ilSpeak si fa clic sul pulsante.