SL4A - การสร้าง GUI

อินเทอร์เฟซผู้ใช้แบบกราฟิก (GUI) แสดงถึงชุดของส่วนประกอบกราฟิกที่ช่วยให้ผู้ใช้สามารถเรียกดูเข้าถึงและโต้ตอบกับฟังก์ชันการทำงานของแอปพลิเคชัน

มีสองวิธีพื้นฐานในการโต้ตอบกับผู้ใช้ SL4A ได้แก่ -

  • กล่องโต้ตอบเช่น Alerts.

  • การใช้ HTML และ JavaScript เพื่อสร้าง UI จากนั้น Python อยู่เบื้องหลังเพื่อจัดการการประมวลผลเพิ่มเติมใด ๆ

บทนี้จะอธิบายทั้งสองแนวทาง

Python Dialog Box - ตาม GUI

SL4A มีหน้า UI เพื่อเข้าถึงองค์ประกอบ UI พื้นฐานที่จัดเตรียมโดย Android API ฟังก์ชันเหล่านี้ส่งคืนอ็อบเจ็กต์ผลลัพธ์เป็นทูเปิลที่มีชื่อเมื่อถูกเรียก ผลลัพธ์แต่ละรายการจะได้รับรหัสเฉพาะสำหรับการติดตาม องค์ประกอบที่สองคือผลลัพธ์ แสดงถึงอินพุตของผู้ใช้ ทูเปิลยังมีข้อผิดพลาดขององค์ประกอบที่สามเพื่อให้ข้อเสนอแนะแก่ผู้โทรเกี่ยวกับเงื่อนไขข้อผิดพลาดที่อาจพบ หากไม่พบข้อผิดพลาดองค์ประกอบนี้ถูกตั้งค่าเป็นไม่มี

ส. ฟังก์ชั่นและคำอธิบาย UiFacade
1

dialogGetInput

สอบถามผู้ใช้สำหรับการป้อนข้อความ

title (String) ชื่อของช่องป้อนข้อมูล (ค่าเริ่มต้น = ค่า)

message (String) ข้อความที่จะแสดงเหนือช่องป้อนข้อมูล (ค่าเริ่มต้น = โปรดป้อนค่า :)

defaultText (String) ข้อความที่จะแทรกลงในช่องป้อนข้อมูล (ไม่บังคับ)

ผลลัพธ์คืออินพุตของผู้ใช้หรือไม่มี (โมฆะ) หากกดยกเลิก

2

dialogShow

แสดงกล่องโต้ตอบ

3

dialogCreateAlert

สร้างกล่องโต้ตอบการแจ้งเตือน

title (String)(ไม่จำเป็น)

message (String) (ไม่จำเป็น)

4

dialogDismiss

ปิดกล่องโต้ตอบ

5

dialogCreateDatePicker

สร้างกล่องโต้ตอบตัวเลือกวันที่

year (Integer) (ค่าเริ่มต้น = 1970)

month (Integer) (ค่าเริ่มต้น = 1)

day (Integer) (ค่าเริ่มต้น = 1)

6

dialogCreateTimePicker

สร้างกล่องโต้ตอบตัวเลือกเวลา

hour (Integer) (ค่าเริ่มต้น = 0)

minute (Integer) (ค่าเริ่มต้น = 0)

is24hour (Boolean) ใช้นาฬิกา 24 ชั่วโมง (ค่าเริ่มต้น = เท็จ)

7

dialogGetPassword

ค้นหารหัสผ่านจากผู้ใช้

title (String) ชื่อของกล่องรหัสผ่าน (ค่าเริ่มต้น = รหัสผ่าน)

message (String) ข้อความที่จะแสดงเหนือช่องป้อนข้อมูล (ค่าเริ่มต้น = โปรดป้อนรหัสผ่าน :)

8

dialogGetResponse

ส่งกลับการตอบสนองของกล่องโต้ตอบ

9

dialogSetPositiveButtonText

ตั้งค่าข้อความปุ่มบวกของกล่องโต้ตอบการแจ้งเตือน ข้อความ (สตริง)

10

dialogSetNegativeButtonText

ตั้งค่าข้อความปุ่มโต้ตอบการแจ้งเตือน ข้อความ (สตริง)

11

dialogSetNeutralButtonText

ตั้งค่าข้อความปุ่มโต้ตอบการแจ้งเตือน ข้อความ (สตริง)

12

dialogSetSingleChoiceItems

สิ่งนี้จะสร้างรายการปุ่มตัวเลือก

13

dialogSetMultiChoiceItems

สิ่งนี้จะสร้างช่องทำเครื่องหมาย

14

dialogCreateHorizontalProgress

สร้างกล่องโต้ตอบความคืบหน้าในแนวนอน

title (String) (ไม่จำเป็น)

message (String) (ไม่จำเป็น)

maximum progress (Integer) (ค่าเริ่มต้น = 100)

15

dialogCreateSpinnerProgress

สร้างกล่องโต้ตอบความคืบหน้าของสปินเนอร์

title (String) (ไม่จำเป็น)

message (String) (ไม่จำเป็น)

maximum progress (Integer) (ค่าเริ่มต้น = 100)

16

addContexMenuItem

เพิ่มรายการใหม่ในเมนูบริบท

label (String) ป้ายกำกับสำหรับรายการเมนูนี้

event (String) เหตุการณ์ที่จะสร้างขึ้นในการคลิกรายการเมนู

eventData (Object) (ไม่จำเป็น)

17

addOptionsMenuItem

เพิ่มรายการใหม่ในเมนูตัวเลือก

label (String) ป้ายกำกับสำหรับรายการเมนูนี้

event (String) เหตุการณ์ที่จะสร้างขึ้นในการคลิกรายการเมนู

eventData (Object) (ไม่จำเป็น)

iconName (String)

18

webViewShow

แสดง WebView พร้อม URL ที่กำหนด

url (String)

wait (Boolean) บล็อกจนกว่าผู้ใช้จะออกจาก WebView (ทางเลือก)

19

clearContextMenu

ลบรายการทั้งหมดที่เพิ่มไว้ก่อนหน้านี้ในเมนูบริบท

20

clearOptionsMenu

ลบรายการทั้งหมดที่เพิ่มไว้ก่อนหน้านี้ในเมนูตัวเลือก

21

makeToast

สร้างการแจ้งเตือน

ตัวอย่าง

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

กล่องโต้ตอบ Modal Vs Non-Modal

กล่องโต้ตอบโมดอลหรือหน้าต่างเป็นลูกของกระบวนการหรือหน้าต่างอื่น ด้วยกล่องโต้ตอบโมดอลการประมวลผลจะรอหรือปิดกั้นจนกว่าผู้ใช้จะโต้ตอบกับกล่องโต้ตอบใหม่

ตัวอย่างทั่วไปของกรณีนี้คือกล่องโต้ตอบการแจ้งเตือน การแจ้งเตือนจะไม่ปิดจนกว่าผู้ใช้จะดำเนินการ

รูปภาพต่อไปนี้เป็นตัวอย่างของกล่องโต้ตอบโมดอล

ในการสรุปให้ใช้กล่องโต้ตอบโมดอลเมื่อคุณต้องการข้อมูลจากผู้ใช้ก่อนที่จะดำเนินการต่อ

Python GUI ที่มี HTML

SL4A เปิดใช้งานการสร้างอินเทอร์เฟซผู้ใช้แบบกราฟิก (GUI) โดยใช้ CSS, HTML, JavaScript และ Python แนวทางนี้ใช้ HTML และ JavaScript ในการสร้าง UI, CSS เพื่อปรับปรุงลักษณะและความสอดคล้องขององค์ประกอบและแบบอักษร HTML และ Python เพื่อจัดการการประมวลผลเพิ่มเติมใด ๆ

ตัวอย่างต่อไปนี้แสดงตัวอย่าง HTML GUI พื้นฐาน -

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

ทั้งไฟล์ - Speech.html and txtToSpeech.pyต้องอาศัยอยู่ในไฟล์ /sdcard/sl4a/scriptsไดเร็กทอรีบนอุปกรณ์ เรียกใช้สคริปต์ python เพื่อเปิดไฟล์ HTML

ไฟล์นี้เปิดตัวโดยไฟล์ webViewShowเรียก API เหตุการณ์ถูกสร้างขึ้นเมื่อไฟล์Speak คลิกปุ่ม