SL4A - Membangun GUI

Sebuah Antarmuka Pengguna Grafis (GUI) mewakili sekumpulan komponen grafis yang memungkinkan pengguna untuk menelusuri, mengakses dan berinteraksi dengan fungsi aplikasi.

Ada dua pendekatan dasar untuk interaksi pengguna dengan SL4A yaitu -

Kotak dialog seperti Alerts.
Menggunakan HTML dan JavaScript untuk membangun UI dan kemudian Python di belakang layar untuk menangani pemrosesan tambahan apa pun.

Bab ini menjelaskan kedua pendekatan tersebut.

Python Dialog Box - GUI Berbasis

SL4A menyertakan fasad UI untuk mengakses elemen UI dasar yang disediakan oleh API android. Fungsi-fungsi ini mengembalikan objek hasil sebagai tupel bernama saat dipanggil. Setiap hasil diberi id unik untuk tujuan pelacakan. Elemen kedua adalah hasilnya. Ini mewakili masukan pengguna. Tupel juga menyertakan kesalahan elemen ketiga untuk memberikan umpan balik kepada pemanggil tentang kondisi kesalahan apa pun yang mungkin ditemui. Jika tidak ada kesalahan yang ditemukan, elemen ini disetel ke Tidak Ada.

Tabel berikut mencantumkan fungsi UiFacade yang umum digunakan.

S.No.	Fungsi & Deskripsi UiFacade
1	dialogGetInput Membuat kueri pengguna untuk input teks. title (String) judul kotak input (default = Nilai) message (String) pesan untuk ditampilkan di atas kotak input (default = Harap masukkan nilai :) defaultText (String) teks untuk dimasukkan ke dalam kotak masukan (opsional) Hasilnya adalah masukan pengguna, atau Tidak Ada (null) jika pembatalan dilakukan.
2	dialogShow Tampilkan dialog
3	dialogCreateAlert Buat dialog peringatan. title (String)(pilihan) message (String) (pilihan)
4	dialogDismiss Tutup dialog.
5	dialogCreateDatePicker Buat dialog pemilih tanggal. year (Integer) (default = 1970) month (Integer) (default = 1) day (Integer) (default = 1)
6	dialogCreateTimePicker Buat dialog pemilih waktu. hour (Integer) (default = 0) minute (Integer) (default = 0) is24hour (Boolean) Gunakan format 24 jam (default = false)
7	dialogGetPassword Meminta pengguna untuk mendapatkan kata sandi. title (String) judul kotak kata sandi (default = Kata sandi) message (String) pesan untuk ditampilkan di atas kotak input (default = Silakan masukkan kata sandi :)
8	dialogGetResponse Mengembalikan respons dialog.
9	dialogSetPositiveButtonText Setel teks tombol positif dialog peringatan. teks (String)
10	dialogSetNegativeButtonText Setel teks tombol dialog peringatan. teks (String)
11	dialogSetNeutralButtonText Setel teks tombol dialog peringatan. teks (String)
12	dialogSetSingleChoiceItems Ini membuat daftar tombol radio.
13	dialogSetMultiChoiceItems Ini membuat kotak centang
14	dialogCreateHorizontalProgress Buat dialog kemajuan horizontal. title (String) (pilihan) message (String) (pilihan) maximum progress (Integer) (default = 100)
15	dialogCreateSpinnerProgress Buat dialog kemajuan spinner. title (String) (pilihan) message (String) (pilihan) maximum progress (Integer) (default = 100)
16	addContexMenuItem Menambahkan item baru ke menu konteks. label (String) label untuk item menu ini event (String) acara yang akan dihasilkan pada klik item menu eventData (Object) (pilihan)
17	addOptionsMenuItem Menambahkan item baru ke menu opsi. label (String) label untuk item menu ini event (String) acara yang akan dihasilkan pada klik item menu eventData (Object) (pilihan) iconName (String)
18	webViewShow Tampilkan WebView dengan URL yang diberikan. url (String) wait (Boolean) blokir hingga pengguna keluar dari WebView (opsional)
19	clearContextMenu Menghapus semua item yang sebelumnya ditambahkan ke menu konteks.
20	clearOptionsMenu Menghapus semua item yang sebelumnya ditambahkan ke menu opsi
21	makeToast Buat pemberitahuan

Contoh

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

Kotak Dialog Modal Vs Non-Modal

Sebuah kotak dialog modal atau jendela adalah anak ke proses atau jendela lain. Dengan kotak dialog modal, pemrosesan akan menunggu atau memblokir hingga pengguna berinteraksi dengan kotak dialog baru.

Contoh umum kasus ini adalah kotak dialog peringatan. Lansiran tidak akan ditutup sampai pengguna melakukan tindakan.

Gambar berikut adalah contoh dari kotak dialog modal.

Singkatnya, gunakan kotak dialog modal ketika Anda membutuhkan masukan dari pengguna sebelum Anda melanjutkan eksekusi.

GUI Python dengan HTML

SL4A memungkinkan pembuatan Antarmuka Pengguna Grafis (GUI) berdasarkan CSS, HTML, JavaScript, dan Python. Pendekatan ini menggunakan HTML dan JavaScript untuk membangun UI, CSS untuk meningkatkan tampilan dan konsistensi elemen dan font HTML dan Python untuk menangani pemrosesan tambahan apa pun.

Contoh berikut mengilustrasikan contoh GUI HTML dasar -

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’])

Kedua file - Speech.html and txtToSpeech.py, harus berada di /sdcard/sl4a/scriptsdirektori di perangkat. Jalankan skrip python untuk meluncurkan file HTML.

File ini diluncurkan oleh webViewShowPanggilan API. Acara dibuat saatSpeak tombol diklik.