การสร้าง UI

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

AppMaster มีส่วนประกอบ UI ดังต่อไปนี้:

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

การอัปเดตไลบรารีส่วนประกอบเป็นประจำจะช่วยเพิ่มความสามารถของคุณในการพัฒนาแอปพลิเคชันเว็บได้อย่างมีประสิทธิภาพมากขึ้น

มาสร้าง UI สำหรับแอปพลิเคชันเครื่องคิดเลขอย่างง่ายของเราเพื่อสาธิตความเป็นไปได้ของเครื่องมือสร้างเว็บไซต์แบบลากและวางของ AppMaster แอพนี้จะแสดงผลลัพธ์ของการดำเนินการทางคณิตศาสตร์ต่างๆ ตามค่าอินพุต

คอนเทนเนอร์แบบยืดหยุ่น

ด้วย Flex Container คุณสามารถจัดการการจัดตำแหน่งและการจัดเรียงการจัดการสำหรับองค์ประกอบลูกทั้งหมดภายในคอนเทนเนอร์ได้อย่างง่ายดาย

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

การเพิ่มคอนเทนเนอร์

เราจะใช้คอนเทนเนอร์หลักสองคอนเทนเนอร์: คอนเทนเนอร์หนึ่งสำหรับการป้อนข้อมูลและอีกคอนเทนเนอร์หนึ่งสำหรับแสดงผลการคำนวณซึ่งรวมอยู่ในคอนเทนเนอร์ทั่วไปตัวเดียว

ขั้นแรก เพิ่ม Flex Container ลงบนผืนผ้าใบเพื่อจัดเก็บองค์ประกอบอื่นๆ ทั้งหมด

ใน แผงลักษณะที่ปรากฏ คุณสามารถสำรวจการตั้งค่าต่างๆ ได้:

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

ปรับแต่งคอนเทนเนอร์หลักของคุณ ตัวอย่างเช่น ตั้งค่า Direction เป็นแนวนอนและปรับ Gap , Padding , Corner radius และ Borders

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

ทำซ้ำคอนเทนเนอร์นี้ (โดยใช้ CTRL/⌘+D ) เพื่อสร้างบล็อกแยกต่างหากสำหรับการแสดงผลลัพธ์ ตั้งค่าคุณสมบัติความกว้างเป็น 30%

การเพิ่มองค์ประกอบ UI

หากต้องการสร้างแอปพลิเคชันของคุณต่อไป ถึงเวลาที่ต้องเพิ่มองค์ประกอบ UI ที่จำเป็น

เพิ่มแบบฟอร์ม

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

สลับ ทิศทาง คอนเทนเนอร์แบบยืดหยุ่น ด้านซ้ายเป็น แนวตั้ง และเพิ่ม ช่องว่าง สำหรับองค์ประกอบที่ซ้อนกันเพื่อให้มีช่องว่างเล็กน้อยระหว่างองค์ประกอบเหล่านั้น เพิ่ม Input Float ภายในคอนเทนเนอร์ Flex นี้สำหรับค่าแรก ซึ่งเราจะติดป้ายกำกับว่า 'X':

• ลากและวางองค์ประกอบ Input Float ไปที่คอนเทนเนอร์ด้านซ้าย
• ใน แผงลักษณะที่ปรากฏ ให้ปรับแต่งฟิลด์โดยการเพิ่ม ป้ายกำกับ และ ตัวยึดตำแหน่ง
• ปรับแต่งรูปลักษณ์ของฟิลด์ให้เหมาะกับการออกแบบแอปพลิเคชันของคุณ

เลือกฟิลด์ที่เพิ่มบนผืนผ้าใบและทำซ้ำโดยใช้ CTRL/⌘+D แก้ไข ป้ายกำกับ และ ตัวยึดตำแหน่ง ของช่องที่ซ้ำกันเพื่อแสดงค่าที่สอง "Y"

ตอนนี้ลากและวางองค์ประกอบ ปุ่ม ด้านล่างช่องที่เพิ่ม ใน แผงลักษณะที่ปรากฏ ให้ปรับปุ่มเพื่อขยายความกว้างทั้งหมด ซึ่งสามารถทำได้โดยการตั้งค่าคุณสมบัติ Align ในกลุ่ม Flex Child เป็น Stretch

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

หลังจากเพิ่มองค์ประกอบเหล่านี้แล้ว แนวทางปฏิบัติที่ดีในการเปลี่ยนชื่อองค์ประกอบเพื่อให้ชัดเจนและง่ายต่อการระบุ ทำให้ง่ายต่อการอ้างอิงถึงกระบวนการทางธุรกิจของคุณ เพิ่มความเข้าใจ และเร่งกระบวนการพัฒนาให้เร็วขึ้น

เพิ่มบล็อกผลลัพธ์

ที่ด้านขวาของคอนเทนเนอร์หลัก เราจะกำหนดค่าพื้นที่เพื่อแสดงผลลัพธ์หลังจากดำเนินการกระบวนการทางธุรกิจของเรา ขั้นแรก ให้ตั้งค่าคุณสมบัติ ทิศทาง ของคอนเทนเนอร์นี้เป็น แนวตั้ง และเพิ่ม ช่องว่าง เล็กๆ เพื่อให้องค์ประกอบต่างๆ มีระยะห่างกันอย่างเหมาะสม เปลี่ยน ความกว้าง เป็น 30%

ภายในคอนเทนเนอร์ที่ถูกต้องนี้ ให้แทรก คอนเทนเนอร์ Flex แนวนอน ใหม่ และเพิ่มองค์ประกอบ ไอคอน ที่แสดงถึงการดำเนินการ บล็อกข้อความ ที่มีสัญลักษณ์เท่ากับ และ บล็อกข้อความ ที่ผลลัพธ์ของการดำเนินการจะปรากฏขึ้น ทำซ้ำคอนเทนเนอร์นี้สี่ครั้ง โดยอัปเดตแต่ละรายการสำหรับการดำเนินการทางคณิตศาสตร์ที่เรากำหนดไว้

ปรับแต่งแต่ละองค์ประกอบตามที่คุณต้องการด้วย แผงลักษณะที่ปรากฏ

เพิ่มบล็อกคำแนะนำ

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

คุณลักษณะสำคัญของคอนเทนเนอร์ที่มีผลลัพธ์คือสถานะการมองเห็นเริ่มต้น ตามค่าเริ่มต้น ให้ปิดสวิตช์ Visible โดยเริ่มแรกทำให้มองไม่เห็น

ซ่อนองค์ประกอบ

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

🎉 งานดี! เราสร้าง UI ที่สมบูรณ์แบบสำหรับแอปพลิเคชันของเราและพร้อมที่จะเพิ่มการโต้ตอบให้กับองค์ประกอบของเรา