SL4A - การสร้าง GUI

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

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

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

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

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

Python Dialog Box - ตาม GUI

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

ตารางต่อไปนี้แสดงฟังก์ชัน UiFacade ที่ใช้กันทั่วไป

ส.	ฟังก์ชั่นและคำอธิบาย 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 คลิกปุ่ม