วันจันทร์ที่ 1 กรกฎาคม พ.ศ. 2556

Qt 5.0 Programming V : Element ID and Navigating the Objects Tree

Standard


         QML นั้นสามารถกำหนดชื่อเรียกให้กับ element (element id, object id) ได้ ซึ่งช่วยให้เข้าถึง กำหนดค่าหรืออ้างอิงกับ element ต่างๆ ในไฟล์ QML นั้นได้ ซึ่งการกำหมด id นั้นมีรูปแบบคือ






และ id ภายในไฟล์ QML เดียวกันจะต้องไม่ซ้ำกันและการประกาศ id ภายใน element จะประกาศตรงส่วนไหนก็ได้ภายใน block ของ element {}





          การอ้างถึง element อื่นผ่านทาง element id สามารถทำได้ภายในไฟล์ QML  และสามารถเรียก element ไหนก็ได้ จาก source code ดูที่ rec_3_1 เรียก properties width และ height ของ element rec_3 หรือ element rec_3 properties width และ height  ของ rec_main แต่ใน QML มี id พิเศษ ที่ไม่ต้องประกาศก็สามารถเรียกใช้งานได้ (แต่มีข้อจำกัด) ก็คือ id ที่ชื่อ "parent"


           จากตัวอย่าง rec_parent เป็น parent ของ rec_child_1 และ txt_child และ rec_child_1 เป็น parent ของ rec_child_2 เพราะฉะนั้น ถ้าภายใน block ของ element rec_child_1 หรือ txt_child มีการเรียกใช้งาน parent.XXX ก็จะหมายถึง properties ของ rec_parent และในขณะเดียวกันถ้า rec_child_2 มีการเรียก parent.YYY ก็หมายถึง rec_child_1 นะครับ ไม่ใช่ rec_parent มาถึงตรงนี้หลายท่านคงจะพอเข้าใจแล้ว ว่า parent คืออะไร ซึ่งอธิบายง่ายๆ ก็คือ ขึ้นไป 1 ระดับ 

จาก source code ลองมาดูเรื่องการอ้างอิง parent นะครับ ดูที่ rec_2(ส่วนของสีขาวฝั่งด้านบน) ที่มีการอ้างอิง width และ height จาก parent (rec_main) โดยที่จุดมุ่งหมายคือ ต้องการให้ rec_2 มีความยาวเท่ากับ parent และมีความสูงมีขนาด 1 ในสามของ parent (ซึ่งในส่วนนี้ rec_3 ก็เล่นกัน แต่ใช้การอ้างอิงจาก rec_main แทน)

การอ้างอิง parent ของ rec_2

การอ้างอิง parent ของ rec_2_1


ดูที่ rec_2_1 (แถบสีแดงบนสุด) ที่มีการอ้างอิง parent โดยที่ rec_2_1 ต้องการความยาวเท่ากับ parent และความสูงคือครึ่งของ parent เมื่อทดลองรัน code นี้ ก็จะเห็นว่าถ้าพิจารณาส่วนครึ่งข้างบน สีขาว (rec_2) มีขนาด 1/3 ของทั้งหมด และสีแดงข้างบนสุด (rec_2_1) มีขนาด 1/2 ของสีขาว (rec_2) จึงสรุปได้ว่า parent นั้นก็ก็คือ ขึ้นไป 1 ระดับ  หรือก็คือการอ้างอิงถึง element ที่ครอบตัวของเราอยู่นั้นเอง


<< Qt 5.0 Programming IV : QML + Javascript อะไรจะขนาดนั้น !!!
>> Qt 5.0 Programming VI : Element Image and Animation part I

0 ความคิดเห็น:

แสดงความคิดเห็น