ในแอปพลิเคชันมือถือ เวิร์กโฟลว์องค์ประกอบ Image จะแตกต่างจากเวิร์กโฟลว์ในเว็บแอปพลิเคชันเล็กน้อย บทความนี้จะอธิบายรายละเอียดวิธีใช้องค์ประกอบ Image ในแอปพลิเคชันมือถือ ในองค์ประกอบที่ทำซ้ำ เช่น องค์ประกอบของ List และองค์ประกอบ Grid การโหลด Image จากแบบจำลองข้อมูลนั้นไม่คลุมเครือ และต้องมีขั้นตอนบางอย่างสำหรับการโหลดโดยใช้ BP
การใช้ส่วนประกอบ Image ในองค์ประกอบซ้ำ ( List/Grid )
มาดูตัวอย่างที่เรามีตารางเที่ยวบินและวัตถุการบินแต่ละรายการมีหน้าปกของตัวเองซึ่งแสดงโดยฟิลด์ ImageFile [ file ]
ลองนึกภาพว่ารายการเที่ยวบินแสดงด้วยองค์ประกอบ List องค์ประกอบแต่ละรายการขององค์ประกอบ List - เป็นส่วนประกอบของ Card ที่มี Image และส่วนประกอบอื่นๆ สองสามรายการเพื่อแสดงข้อมูลเที่ยวบินที่เกี่ยวข้อง ในตัวออกแบบ UI จะมีลักษณะดังนี้:
ก่อนอื่น ต้องระบุ Data Source สำหรับองค์ประกอบหลัก ( ส่วนประกอบ List ในกรณีนี้)
หากต้องการอัปโหลดข้อมูลจากฐานข้อมูลไปยังส่วนประกอบ Image เราจำเป็นต้องสร้างกระบวนการทางธุรกิจใหม่สำหรับส่วนประกอบ Image
BP ที่จำเป็นเริ่มต้นด้วยการสร้างองค์ประกอบรูปภาพในแอปพลิเคชัน นั่นคือทริกเกอร์ onCreate ก่อนอื่น จำเป็นต้องได้รับอ็อบเจกต์ของโมเดลข้อมูลที่สอดคล้องกับรูปภาพที่กำหนด ในการทำเช่นนี้ คุณสามารถใช้ข้อมูลที่องค์ประกอบพาเรนต์ได้รับแล้ว ( List ในกรณีนี้) ในการรับข้อมูลจาก List จะใช้บล็อก List Get Data
ตรรกะของ 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 ที่สอดคล้องกันดังต่อไปนี้
ในขั้นตอนถัดไป ไฟล์รูปภาพจะถูกขยายโดยใช้บล็อก Expand file เพื่อส่งอาร์เรย์ไบต์เป็นอินพุตไปยังคุณสมบัติ Data ของบล็อก Image Update Properties นอกจากนี้ยังจำเป็นต้องระบุ Widget ID ขององค์ประกอบรูปภาพเฉพาะในแผ่นงาน โดยส่งค่าจากบล็อก onCreate ที่จุดเริ่มต้นของ BP ผลลัพธ์ของส่วนสุดท้ายของ BP แสดงในตัวอย่างด้านล่าง:
ในตอนท้ายบล็อก Break Loop จะถูกใช้เพื่อไม่ให้วนซ้ำองค์ประกอบที่เหลือของอาร์เรย์โดยเปล่าประโยชน์
กำลังโหลดรูปภาพจากระบบไฟล์ของสมาร์ทโฟนของผู้ใช้
พิจารณาตัวอย่างการโหลดอวาตาร์โปรไฟล์ผู้ใช้ เว็บอินเตอร์เฟสประกอบด้วยรูปภาพและปุ่มที่เรียกใช้ BP และมีลักษณะดังนี้:
จากนั้น BP ที่เกี่ยวข้องจะอนุญาตให้ผู้ใช้เลือกไฟล์จากอุปกรณ์โดยใช้บล็อก Select Files และหากเลือกไฟล์สำเร็จ องค์ประกอบที่มี index = 0 จะถูกนำไปใช้ BP ที่สอดคล้องกันมีลักษณะดังนี้:
องค์ประกอบไฟล์ที่เป็นผลลัพธ์ของอาร์เรย์ Files ต้องอัปโหลดไปยังเว็บแอปพลิเคชันเซิร์ฟเวอร์สำหรับการใช้งานเพิ่มเติม ( Server request POST /_files/ ) หากคำขอสำเร็จ วัตถุไฟล์ที่เอาต์พุตของบล็อก Server request POST /_files/ จะถูกส่งผ่านไปยังอินพุตของบล็อก Expand file เพื่อรับ Bytes Array ซึ่งจะถูกส่งผ่านไปยังอินพุตของบล็อก Image Update Properties ใน คุณสมบัติ Data
