Dialog (hộp thoại) là một giao diện người dùng mà ứng dụng sử dụng để tương tác với người dùng. Nó thường xuất hiện dưới dạng cửa sổ nhỏ và có thể chứa các thông báo, câu hỏi, hoặc yêu cầu thông tin từ người dùng.
Có một số loại Dialog phổ biến như sau:
– Alert Dialog
– Confirm Dialog
– Prompt Dialog
Khi Dialog hiện lên thì ta thường không thể thao tác được gì với trang web nếu không đóng Dialog. Khi đó ta cần sử dụng node Handle dialog để đóng hộp thoại được mở lên đó.
Tại node Handle dialog ta có 3 action:
– No handle: Sẽ không làm gì cả và dialog vẫn sẽ hiển thị trên trang web.
– Accept: Thường trong dialog sẽ có 2 button “OK” và “Cancel”, khi bạn chon action accept thì giống như việc bạn click vào button “OK” của dialog.
– Dismiss: Thường trong dialog sẽ có 2 button “OK” và “Cancel”, khi bạn chon action Dimiss thì giống như việc bạn click vào button “Cancel” của dialog.
Lưu ý: node Handle dialog phải được sử dụng trước khi dialog xuất hiện. Có nghĩa là khi click vào 1 button nào đó thì sẽ xuất hiện dialog, thì node Handle dialog sẽ được dùng trước node click.
a. Alert dialog
Bạn có thể tham khảo ví dụ thực tế về Alert Dialog tại đây: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_alert
Khi muốn đóng Dialog này thì tại node Handle dialog bạn sẽ dùng như sau:
Action thì bạn chọn là Accept tương ứng với OK. Trường Save message to sẽ lưu “Hello! I am an alert box!” vào biến message. Trường Save type to sẽ lưu type của dialog là alert vào biến type
b. Confirm dialog
Bạn có thể tham khảo ví dụ thực tế về Alert Dialog tại đây: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_confirm3
Khi muốn đóng Dialog này thì tại node Handle dialog bạn sẽ dung như sau:
Trường Save message to sẽ lưu “Press a button!Either OK or Cancel.” vào biến message. Trường Save type to sẽ lưu type của dialog là confirm vào biến type.
c. Prompt dialog
Bạn có thể tham khảo ví dụ thực tế về Alert Dialog tại đây: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_prompt
Khi muốn đóng Dialog này thì tại node Handle dialog bạn sẽ dung như sau:
Prompt dialog này có 1 ô input, tại trường prompt input của node, ta có thể nhập giá trị khác vào thay thế cho giá trị mặc định của prompt dialog. Như trong ví dụ này ta sẽ thay thế Harry Potter bằng Nana.
Trường Save message to sẽ lưu “Please enter your name” vào biến message. Trường Save type to sẽ lưu type của dialog là prompt vào biến type. Trường Save default value to sẽ lưu giá trị mặc định ban đầu của ô input trong dialog là “Harry Potter” vào biến default_value
Trường Save message to sẽ lưu “Please enter your name” vào biến message. Trường Save type to sẽ lưu type của dialog là prompt vào biến type. Trường Save default value to sẽ lưu giá trị mặc định ban đầu của ô input trong dialog là “Harry Potter” vào biến default_value