SL4A - Création de GUI

Une interface utilisateur graphique (GUI) représente un ensemble de composants graphiques qui permettent à l'utilisateur de parcourir, d'accéder et d'interagir avec les fonctionnalités de l'application.

Il existe deux approches de base pour l'interaction de l'utilisateur avec SL4A, à savoir -

Boîtes de dialogue telles que Alerts.
Utiliser HTML et JavaScript pour créer l'interface utilisateur, puis Python en arrière-plan pour gérer tout traitement supplémentaire.

Ce chapitre explique les deux approches.

Boîte de dialogue Python - interfaces graphiques basées

SL4A comprend une façade d'interface utilisateur pour accéder aux éléments de base de l'interface utilisateur fournis par l'API Android. Ces fonctions renvoient un objet de résultat sous la forme d'un tuple nommé lorsqu'elles sont appelées. Chaque résultat se voit attribuer un identifiant unique à des fins de suivi. Le deuxième élément est le résultat. Il représente l'entrée de l'utilisateur. Le tuple inclut également la troisième erreur d'élément pour fournir un retour à l'appelant sur toute condition d'erreur qui aurait pu être rencontrée. Si aucune erreur n'a été rencontrée, cet élément est défini sur Aucune.

Le tableau suivant répertorie les fonctions UiFacade couramment utilisées.

S.No.	Fonction et description de UiFacade
1	dialogGetInput Interroge l'utilisateur pour une saisie de texte. title (String) titre de la zone de saisie (par défaut = Valeur) message (String) message à afficher au-dessus de la zone de saisie (par défaut = Veuillez saisir une valeur :) defaultText (String) texte à insérer dans la zone de saisie (facultatif) Le résultat est l'entrée de l'utilisateur, ou None (null) si cancel a été atteint.
2	dialogShow Afficher la boîte de dialogue
3	dialogCreateAlert Créer une boîte de dialogue d'alerte. title (String)(optionnel) message (String) (optionnel)
4	dialogDismiss Ignorer la boîte de dialogue.
5	dialogCreateDatePicker Créer une boîte de dialogue de sélection de date. year (Integer) (par défaut = 1970) month (Integer) (par défaut = 1) day (Integer) (par défaut = 1)
6	dialogCreateTimePicker Créer une boîte de dialogue de sélection de temps. hour (Integer) (par défaut = 0) minute (Integer) (par défaut = 0) is24hour (Boolean) Utiliser une horloge de 24 heures (par défaut = faux)
sept	dialogGetPassword Demande à l'utilisateur un mot de passe. title (String) titre de la boîte de mot de passe (par défaut = mot de passe) message (String) message à afficher au-dessus de la zone de saisie (par défaut = Veuillez saisir le mot de passe :)
8	dialogGetResponse Renvoie la réponse de la boîte de dialogue.
9	dialogSetPositiveButtonText Définir le texte du bouton positif de la boîte de dialogue d'alerte. texte (chaîne)
dix	dialogSetNegativeButtonText Définir le texte du bouton de la boîte de dialogue d'alerte. texte (chaîne)
11	dialogSetNeutralButtonText Définir le texte du bouton de la boîte de dialogue d'alerte. texte (chaîne)
12	dialogSetSingleChoiceItems Cela crée une liste de boutons radio.
13	dialogSetMultiChoiceItems Cela crée une case à cocher
14	dialogCreateHorizontalProgress Créez une boîte de dialogue de progression horizontale. title (String) (optionnel) message (String) (optionnel) maximum progress (Integer) (par défaut = 100)
15	dialogCreateSpinnerProgress Créez une boîte de dialogue de progression du spinner. title (String) (optionnel) message (String) (optionnel) maximum progress (Integer) (par défaut = 100)
16	addContexMenuItem Ajoute un nouvel élément au menu contextuel. label (String) étiquette pour cet élément de menu event (String) événement qui sera généré sur l'élément de menu cliquez sur eventData (Object) (optionnel)
17	addOptionsMenuItem Ajoute un nouvel élément au menu d'options. label (String) étiquette pour cet élément de menu event (String) événement qui sera généré sur l'élément de menu cliquez sur eventData (Object) (optionnel) iconName (String)
18	webViewShow Afficher une WebView avec l'URL donnée. url (String) wait (Boolean) bloquer jusqu'à ce que l'utilisateur quitte WebView (facultatif)
19	clearContextMenu Supprime tous les éléments précédemment ajoutés au menu contextuel.
20	clearOptionsMenu Supprime tous les éléments précédemment ajoutés au menu d'options
21	makeToast Créer une notification

Exemples

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()

Boîtes de dialogue modales vs non modales

Une boîte de dialogue ou une fenêtre modale est un enfant d'un autre processus ou d'une fenêtre. Avec une boîte de dialogue modale, le traitement attendra ou se bloquera jusqu'à ce que l'utilisateur interagisse avec la nouvelle boîte de dialogue.

Un exemple typique de ce cas est une boîte de dialogue d'alerte. L'alerte ne se fermera pas tant que l'utilisateur n'aura pas effectué une action.

L'image suivante est un exemple de boîte de dialogue modale.

Pour résumer, utilisez une boîte de dialogue modale lorsque vous avez besoin d'une entrée de l'utilisateur avant de poursuivre l'exécution.

IUG Python avec HTML

SL4A permet de créer des interfaces utilisateur graphiques (GUI) basées sur CSS, HTML, JavaScript et Python. L'approche utilise HTML et JavaScript pour créer l'interface utilisateur, CSS pour améliorer l'apparence et la cohérence des éléments et des polices HTML et Python pour gérer tout traitement supplémentaire.

L'exemple suivant illustre un exemple d'interface graphique HTML de 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’])

Les deux fichiers - Speech.html and txtToSpeech.py, doit résider dans le /sdcard/sl4a/scriptsrépertoire sur l'appareil. Exécutez le script python pour lancer le fichier HTML.

Ce fichier est lancé par le webViewShowAppel API. L'événement est généré lorsque leSpeak bouton est cliqué.