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

การใช้ส่วนประกอบ Image ในองค์ประกอบซ้ำ ( List/Grid )

มาดูตัวอย่างที่เรามีตารางเที่ยวบินและวัตถุการบินแต่ละรายการมีหน้าปกของตัวเองซึ่งแสดงโดยฟิลด์ ImageFile [ file ]

0_dataModel

ลองนึกภาพว่ารายการเที่ยวบินแสดงด้วยองค์ประกอบ List องค์ประกอบแต่ละรายการขององค์ประกอบ List - เป็นส่วนประกอบของ Card ที่มี Image และส่วนประกอบอื่นๆ สองสามรายการเพื่อแสดงข้อมูลเที่ยวบินที่เกี่ยวข้อง ในตัวออกแบบ UI จะมีลักษณะดังนี้:

uiux

ก่อนอื่น ต้องระบุ Data Source สำหรับองค์ประกอบหลัก ( ส่วนประกอบ List ในกรณีนี้)

01_select_from_model

หากต้องการอัปโหลดข้อมูลจากฐานข้อมูลไปยังส่วนประกอบ Image เราจำเป็นต้องสร้างกระบวนการทางธุรกิจใหม่สำหรับส่วนประกอบ Image

02_openBP

BP ที่จำเป็นเริ่มต้นด้วยการสร้างองค์ประกอบรูปภาพในแอปพลิเคชัน นั่นคือทริกเกอร์ onCreate ก่อนอื่น จำเป็นต้องได้รับอ็อบเจกต์ของโมเดลข้อมูลที่สอดคล้องกับรูปภาพที่กำหนด ในการทำเช่นนี้ คุณสามารถใช้ข้อมูลที่องค์ประกอบพาเรนต์ได้รับแล้ว ( List ในกรณีนี้) ในการรับข้อมูลจาก List จะใช้บล็อก List Get Data

03_bp_1

ตรรกะของ BP ที่เรากำลังสร้างมีดังนี้: หากหนึ่งในองค์ประกอบอาร์เรย์ Data (อ็อบเจกต์แบบจำลอง flight ) มีตัวระบุ ( ID ) เท่ากับ Record ID เราก็พบองค์ประกอบตารางการบินที่เราต้องการแล้ว จากนั้น ID ไฟล์รูปภาพจะถูกนำมาจากวัตถุโมเดลการบินและโหลดลงในองค์ประกอบรูปภาพด้วย Widget ID ตที่จำเป็น

ในการวนซ้ำองค์ประกอบทั้งหมดของอาร์เรย์ Data จะใช้บล็อก For each loop BP และในเนื้อหาของลูป แต่ละองค์ประกอบของอาร์เรย์ Data จะถูกขยายโดยใช้บล็อก Expand Flight ถ้า Flight ID = Record ID ระบบจะใช้ตัวระบุไฟล์ ImageFile และโหลดวัตถุไฟล์โดยใช้ Server request GET /_files/:id/download/ block ตัวอย่างของ BP ที่สอดคล้องกันดังต่อไปนี้

03_bp_2

ในขั้นตอนถัดไป ไฟล์รูปภาพจะถูกขยายโดยใช้บล็อก Expand file เพื่อส่งอาร์เรย์ไบต์เป็นอินพุตไปยังคุณสมบัติ Data ของบล็อก Image Update Properties นอกจากนี้ยังจำเป็นต้องระบุ Widget ID ขององค์ประกอบรูปภาพเฉพาะในแผ่นงาน โดยส่งค่าจากบล็อก onCreate ที่จุดเริ่มต้นของ BP ผลลัพธ์ของส่วนสุดท้ายของ BP แสดงในตัวอย่างด้านล่าง:

03_bp_3

ในตอนท้ายบล็อก Break Loop จะถูกใช้เพื่อไม่ให้วนซ้ำองค์ประกอบที่เหลือของอาร์เรย์โดยเปล่าประโยชน์

break loop

กำลังโหลดรูปภาพจากระบบไฟล์ของสมาร์ทโฟนของผู้ใช้

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

11_ui

จากนั้น BP ที่เกี่ยวข้องจะอนุญาตให้ผู้ใช้เลือกไฟล์จากอุปกรณ์โดยใช้บล็อก Select Files และหากเลือกไฟล์สำเร็จ องค์ประกอบที่มี index = 0 จะถูกนำไปใช้ BP ที่สอดคล้องกันมีลักษณะดังนี้:

12_bp_1

องค์ประกอบไฟล์ที่เป็นผลลัพธ์ของอาร์เรย์ Files ต้องอัปโหลดไปยังเว็บแอปพลิเคชันเซิร์ฟเวอร์สำหรับการใช้งานเพิ่มเติม ( Server request POST /_files/ ) หากคำขอสำเร็จ วัตถุไฟล์ที่เอาต์พุตของบล็อก Server request POST /_files/ จะถูกส่งผ่านไปยังอินพุตของบล็อก Expand file เพื่อรับ Bytes Array ซึ่งจะถูกส่งผ่านไปยังอินพุตของบล็อก Image Update Properties ใน คุณสมบัติ Data

13_bp_2

Was this article helpful?

AppMaster.io 101 หลักสูตรความผิดพลาด

10 โมดูล
2 สัปดาห์ที่ผ่านมา

ไม่แน่ใจว่าจะเริ่มต้นที่ไหน? เริ่มต้นด้วยหลักสูตรเร่งรัดสำหรับผู้เริ่มต้นและสำรวจ AppMaster จาก A ถึง Z

เริ่มหลักสูตร
Development it’s so easy with AppMaster!

ต้องการความช่วยเหลือเพิ่มเติมหรือไม่?

แก้ปัญหาด้วยความช่วยเหลือจากผู้เชี่ยวชาญของเรา ประหยัดเวลาและมุ่งเน้นที่การสร้างแอปพลิเคชันของคุณ

headphones

ติดต่อฝ่ายสนับสนุน

บอกเราเกี่ยวกับปัญหาของคุณ แล้วเราจะหาทางแก้ไขให้คุณ

message

ชุมชนแชท

สนทนาคำถามกับผู้ใช้รายอื่นในการแชทของเรา

เข้าร่วมชุมชน