การตั้งค่า Appmaster.io ตัวแก้ไขแอปพลิเคชันเว็บ: ปุ่ม

ปุ่มนี้เป็นองค์ประกอบที่ง่ายที่สุดของตัวแก้ไข Web Apps แต่มีบทบาทหลักประการหนึ่งในอินเทอร์เฟซของแอปพลิเคชันที่เสร็จสิ้น ยิ่งกว่านั้นวันนี้เราขอเสนอให้คุณสร้างแอปพลิเคชั่นที่ประกอบด้วยปุ่มเท่านั้น งานอาจดูแปลกๆ เล็กน้อย แต่ถ้าคุณทำ คุณจะได้เรียนรู้วิธีปรับแต่งปุ่ม ทำความเข้าใจพื้นฐานของการทำงานกับตัวแก้ไข และตรรกะของแพลตฟอร์มทั้งหมด

มาทำแบบทดสอบสั้น ๆ จากหนังสือ Alice's Adventures in Wonderland มาดูกันว่าผู้ใช้จำสถานที่แรกที่อลิซพบกับแมวเชสเชียร์ได้หรือไม่

ใบสมัครของเราจะมี:

1. ข้อความคำถาม: อลิซพบแมวเชสเชอร์ครั้งแรกที่ไหน
2. ปุ่มเลือก: Mad-Tea Party, Duchess' House, Wood, Croquet-Ground หากผู้ใช้เลือกคำตอบที่ผิด ปุ่มที่มีคำตอบนั้นจะหายไป หากผู้ใช้เลือกคำตอบที่ถูกต้อง ปุ่มทั้งหมดที่มีคำตอบที่ผิดจะหายไปพร้อมกัน
3. ข้อความป๊อปอัปที่บอกคุณว่าคำตอบนั้นถูกต้องหรือไม่

อ้อ คุณจำตัวเลือกที่ถูกต้องได้ไหม

วิธีสร้างปุ่ม

ลากองค์ประกอบ "ปุ่ม" ด้วยตัวชี้เมาส์ (โดยคลิกปุ่มซ้ายค้างไว้) ไปยังพื้นที่ที่คุณต้องการวางปุ่ม

คุณต้องเพิ่มปุ่มสี่ปุ่ม - ตามจำนวนคำตอบที่เป็นไปได้

ปรับแต่งลักษณะที่ปรากฏของปุ่ม

คลิกที่ปุ่มแรกหนึ่งครั้ง หน้าต่างการตั้งค่าจะเปิดขึ้น คุณจะพบว่าตัวเองอยู่ในแท็บ "รูปลักษณ์และความรู้สึก" ซึ่งมีหน้าที่รับผิดชอบในรูปลักษณ์ของปุ่มต่างๆ

1. แก้ไขฟิลด์ต่อไปนี้:

• ป้ายกำกับ: ข้อความปุ่ม - ป้อนคำตอบแรก: "ปาร์ตี้ชาบ้า";
• ไอคอน: ไอคอนปุ่ม - คลิกที่ "เลือกไอคอน" และเลือกไอคอนที่คุณชอบ (ตอนนี้มีมากกว่า 2,500 รายการ);
• ขนาด: ขนาดปุ่ม - ตั้งค่าเป็น "ใหญ่" เพื่อให้ปุ่มใหญ่
• ชื่อ: นี่คือชื่อที่องค์ประกอบอื่น ๆ ในแอปพลิเคชันของคุณ "มองเห็น" ปุ่มนี้ แต่ละปุ่มต้องมีชื่อไม่ซ้ำกัน - ตั้งชื่อปุ่ม "btn-mad_tea"

เมื่อคุณแก้ไขฟิลด์ ภาพที่ด้านบนของหน้าต่างจะเปลี่ยนไปเพื่อแสดงว่าปุ่มจะมีลักษณะอย่างไรหลังจากใช้การตั้งค่า

2. เมื่อคุณกรอกข้อมูลครบทุกช่อง - คลิก "บันทึก"

1. กำหนดค่าปุ่มที่เหลือโดยเปรียบเทียบกับปุ่มแรกโดยใช้ชื่อ: btn-duchess_h, btn-wood, btn-croquet_g
2. คลิก "บันทึกการเปลี่ยนแปลง" เพื่อบันทึกการเปลี่ยนแปลงในแอปพลิเคชันของคุณ มิฉะนั้น ปุ่มจะหายไปเมื่อคุณรีเฟรชหน้าหรือปิดตัวแก้ไข

การตั้งค่าทริกเกอร์และเหตุการณ์

ตอนนี้คุณต้องตั้งค่าการทำงานของปุ่ม มาเริ่มกันที่คำตอบที่ถูกต้อง - "บ้านดัชเชส" . งานของคุณคือ "อธิบาย" ให้กับตัวแก้ไข Web Apps:

• ปุ่มทริกเกอร์คืออะไร - หมายถึงสิ่งที่ควรตอบสนองต่อ: เมื่อกด;
• เหตุการณ์ใดเกิดขึ้นในกรณีนี้: ปุ่มหายไป;
• ที่เหตุการณ์นี้เกิดขึ้น มีการเปลี่ยนแปลงองค์ประกอบอะไร: ปุ่มอื่นๆ

กลับไปที่การตั้งค่าปุ่ม "บ้านดัชเชส" และไปที่แท็บทริกเกอร์ ทริกเกอร์ทั้งหมดที่เพิ่มเข้าไปจะปรากฏขึ้น:

1. ขณะนี้มีเพียง "OnClick" เท่านั้น มันถูกเพิ่มโดยอัตโนมัติและหมายความว่าปุ่มจะทำงานเมื่อคุณคลิก (ซึ่งเป็นสิ่งที่คุณต้องการ)
2. นอกจาก "OnClick" แล้ว ปุ่มทริกเกอร์อื่นๆ ยังสามารถเรียกใช้ได้ รายการทั้งหมดพร้อมคำอธิบายอยู่ในเอกสารประกอบของแพลตฟอร์ม

ตอนนี้คุณต้องระบุข้อมูลเกี่ยวกับกิจกรรม (คุณจะมีสามรายการ - หนึ่งรายการสำหรับแต่ละปุ่ม) คลิก "+" ถัดจาก "OnClick" หน้าต่างการตั้งค่าเหตุการณ์จะเปิดขึ้น

ในฟิลด์ "องค์ประกอบเป้าหมาย" คุณต้องระบุว่าเหตุการณ์จะเกิดขึ้นที่ใด ในฟิลด์ "การดำเนินการ" - เหตุการณ์จะเป็นประเภทใด

ซ่อนคำตอบที่ผิดทั้งหมด

เพิ่มกิจกรรมที่จะซ่อนปุ่ม Mad-Tea Party:

1. คลิกที่ช่อง "องค์ประกอบเป้าหมาย" และค้นหาโดยใช้ชื่อเฉพาะ btn-mad_tea ในฟิลด์ การดำเนินการ เลือกเหตุการณ์ที่เหมาะสม ในกรณีนี้ - "ซ่อนปุ่ม"
2. คลิก "บันทึก"

กำหนดค่าปุ่มที่เหลือให้ซ่อนในลักษณะเดียวกัน

1. นี่คือลักษณะของรายการทริกเกอร์สำหรับปุ่ม "Duchess' House" เมื่อคุณทำเสร็จแล้ว
2. คลิก "บันทึก" เพื่อบันทึกการเปลี่ยนแปลงของคุณ

ตอนนี้คุณต้องแน่ใจว่าทุกอย่างใช้งานได้

1. บันทึกการเปลี่ยนแปลงของคุณ
2. กดปุ่มเพื่อเผยแพร่แอปพลิเคชัน (วางบนอินเทอร์เน็ต) เลือก "การพัฒนา"
3. คลิกที่ไปที่ไอคอนแอปของคุณ - จะเปิดขึ้นในแท็บใหม่

ไปที่แอพและตรวจสอบให้แน่ใจว่าเมื่อคุณเลือกตัวเลือกที่ถูกต้อง ปุ่มที่เหลือจะหายไป

ซ่อนคำตอบที่ไม่ถูกต้องใน click

ตอนนี้เรามาทำให้ปุ่มที่มีคำตอบที่ผิด "Mad-Tea Party" หายไปเมื่อผู้ใช้คลิกที่มัน ในกรณีนี้ ทั้งทริกเกอร์ (การกด) และเหตุการณ์ (หายไป) เป็นของปุ่มเดียวกัน - คุณจะต้องใช้งานมันเท่านั้น

เปิดการตั้งค่าปุ่ม ไปที่แท็บ "ทริกเกอร์" เพิ่มเหตุการณ์ใหม่ให้กับทริกเกอร์ "onClick" ในฟิลด์ "องค์ประกอบเป้าหมาย" เลือก "ส่วนประกอบนี้ (ตัวเอง)" เพื่อระบุว่าปุ่มเปิดใช้งานเหตุการณ์สำหรับตัวเอง ค่าของฟิลด์ "Action" จะเหมือนกับในตัวอย่างก่อนหน้า - "Hide Button"

บันทึกการเปลี่ยนแปลงทั้งหมดและเผยแพร่แอป สลับไปที่แท็บแอป แล้วรีเฟรช ตรวจสอบว่าทุกอย่างทำงานตามที่ตั้งใจไว้:

ตอนนี้ปรับ Wood และ Croquet-Ground บันทึก เผยแพร่ และทดสอบอีกครั้ง

ประเภทของปุ่ม

เยี่ยมมาก คำตอบได้ผล ได้เวลาเพิ่มคำถามแล้ว แน่นอน Appmaster.io มีองค์ประกอบพิเศษสำหรับสิ่งนี้ แต่คุณจำงานของเราได้ - ปุ่มและไม่มีอะไรอื่น เลยขอเพิ่มอีกอัน คราวนี้ - ไม่ใช่บนผืนผ้าใบหลัก แต่อยู่ที่ด้านบนของหน้า:

เพื่อให้สนุกยิ่งขึ้น ให้กรอกคำถามตามภาพหน้าจอนี้:

ตอนนี้ "ระบายสี" โดยใช้ชุดสีสำหรับปุ่มประเภทต่างๆ: ไปที่การตั้งค่าและเปลี่ยนค่าในช่อง "ประเภท" เป็นปุ่มอื่น

เราได้รับสิ่งนี้ แต่คุณสามารถเลือกตัวเลือกของคุณได้ โทนสีของปุ่มไม่ส่งผลต่อการทำงานของปุ่ม:

ตอนนี้ ไปที่งานสุดท้าย - การตั้งค่าข้อความสำหรับผู้ใช้

งานที่ยากขึ้น

คุณสามารถแสดงข้อความบนหน้าจอได้หลายวิธี เราได้เลือกสิ่งที่แปลกที่สุดอย่างหนึ่ง:

- ก่อนอื่น ให้ตรวจสอบให้แน่ใจว่าปุ่มที่มีคำถามนั้นถูกปิดใช้งานโดยอัตโนมัติเมื่อผู้ใช้ให้คำตอบที่ถูกต้อง พวกเขาจะเปลี่ยนเป็นสีเทาและหยุดตอบสนองต่อการคลิก ในการทำเช่นนี้ เราใช้ฟังก์ชัน Enable (Disable) ซึ่งเรายังไม่ได้พิจารณา และ "onClick" ที่คุ้นเคยอยู่แล้ว

- จากนั้นเราจะพิจารณาทริกเกอร์ใหม่ - onStateChange ซึ่งจะทริกเกอร์เมื่อสถานะของปุ่มเปลี่ยนแปลง มากำหนดทริกเกอร์นี้ให้กับ "?" - และข้อความจะปรากฏบนนั้น

ปุ่มปิดการใช้งาน

คุณสามารถเปิดหรือปิดใช้งานปุ่มด้วยตนเองในการตั้งค่าโดยสลับตัวเลือกฟิลด์ "เปิดใช้งาน":

หากต้องการตั้งค่าการสลับอัตโนมัติ ให้เปิดการตั้งค่าปุ่ม "Duchess' House" และเพิ่มทริกเกอร์ "onClick" ในฟิลด์ "องค์ประกอบเป้าหมาย" เลือกปุ่มคำถามหนึ่งปุ่ม ในช่อง "การดำเนินการ" - "ปิดใช้งานปุ่ม" ทำซ้ำสำหรับปุ่มทั้งหมดที่มีคำถาม ควรมีลักษณะดังนี้:

อย่าลืมบันทึกการเปลี่ยนแปลงทั้งหมด เผยแพร่ และตรวจสอบว่าแอปพลิเคชันทำงานถูกต้องหรือไม่

ทีนี้มาผูกจุดเริ่มต้นของข้อความกับปุ่ม "?" (เราตั้งชื่อมันว่า "btn_qqq") มาเพิ่มทริกเกอร์ "onStateChange" กันเถอะ เปิดใช้งานเมื่อสถานะของปุ่มเปลี่ยนไป - ตัวอย่างเช่น เมื่อปิด

ในช่อง "องค์ประกอบเป้าหมาย" เลือก "แอปพลิเคชัน" (ข้อความจะปรากฏขึ้นในหน้าต่างแอปพลิเคชัน) ในช่อง "การดำเนินการ" - "แสดงข้อความ UI" (แสดงข้อความถึงผู้ใช้)

1. ในฟิลด์ "รูปแบบข้อความ" ให้เลือกรูปแบบที่เหมาะสมกับสถานการณ์ของคุณมากที่สุด ในกรณีของเรา นี่คือ "ความสำเร็จ" - ข้อความเกี่ยวกับความสำเร็จ
2. กรอกข้อมูลในฟิลด์ "ชื่อ" และ "เนื้อหา" - แจ้งให้ผู้ใช้ทราบว่าคำตอบนั้นถูกต้องหรือเพียงแค่เขียนสิ่งที่ดี

บันทึก เผยแพร่ และทดสอบ

ผลลัพธ์

การเลือกตัวเลือกที่ถูกต้อง ควรซ่อนปุ่มที่มีคำตอบที่ไม่ถูกต้อง ข้อความของคำถามควรจางลง และข้อความยืนยันจะปรากฏขึ้น

แน่นอน คุณสามารถปรับแต่งข้อความได้ง่ายขึ้นโดยผูกไว้กับปุ่มคำตอบที่ถูกต้อง แม้ว่าวันนี้เราจะไม่มองหาวิธีง่ายๆ ยิ่งกว่านั้น คุณรู้อยู่แล้วว่าต้องทำสิ่งนี้โดยไม่ได้รับคำแนะนำจากเรา พยายามปรับแต่ง ข้อความแสดงข้อผิดพลาดที่จะปรากฏขึ้นเมื่อคุณเลือกคำตอบผิด ควรมีลักษณะดังนี้:

เรามั่นใจว่าคำแนะนำนี้จะช่วยให้คุณรู้จัก Appmaster.io มากขึ้น แต่ถ้าไม่ชัดเจน (หรืออาจตรงกันข้าม ง่ายเกินไป) ให้เขียนถึง ช่องทางโทรเลข ของฝ่ายสนับสนุนด้านเทคนิคของเราเกี่ยวกับคำแนะนำที่คุณต้องการ เราจะเขียนมัน!

หากคุณกำลังมองหาข้อมูลโดยละเอียดเพิ่มเติมเกี่ยวกับ Studio.appmaster.io โปรดดู เอกสารประกอบ ของเรา