ใน Flex เวลาจะใช้ชิ้นส่วนอะไรก็ตามชิ้นส่วนเหล่านั้นส่วนใหญ่จะมาจาก UIComponent ทั้งนั้น คราวนี้ก่อนที่มันจะวาดชิ้นส่วนขึ้นมาเป็นภาพมันดันมีขั้นตอนต่างๆ ที่คล้ายๆ Applet ซะนี่ลองดูลำดับตามด้านล่างละกัน
- Constructor
- CreateChildren
- CommitProperty
- UpdateDisplayList
อาจจะมีมากกว่านี้แต่หลักๆ ที่จะเจอกันบ่อยๆ คือสี่ขั้นนี้แหละ เริ่มจาก Constructor ก่อนที่จะใช้กำหนดค่าเริ่มต้นต่างๆ ให้กับ Component อันนี้ก็ไม่ค่อยมีอะไร เพราะภาษาที่มีคลาสเกือบทุกภาษาก็คงมีเหมือนกัน
ตัวถัดมาคือ CreateChildren จะถูกเรียกครั้งเดียวตอนที่เริ่มสร้าง Component โดยมีหน้าที่หลักๆ ก็คือเอาชิ้นส่วนย่อยๆ มาประกอบล่างเป็นชิ้นใหญ่ๆ เช่นฟอร์มที่ใช้ส่งข้อมูลต่างๆ ก็จะมีพวก Label, TextField, … ซึ่งจะไม่มีการเปลี่ยนแปลงรูปร่างหรือขนาดอะไรอีก เอามาใส่ในขั้นนี้ให้หมด รวมถึงตอนกำหนด Event ต่างๆ ให้กับมันด้วย
CommitProperty เป็นขั้นที่เตรียมวาดขึ้นหน้าจอแล้ว จริงๆ มีขั้นก่อนหน้านี้เล็กๆ น้อยๆ พอสมควรพวก Measure… ทั้งหลายแหละ ที่เอาไว้บอกว่า Component นี้จะมีขนาดเท่าไหร่แน่เวลาเอาไปประกอบกับชิ้นส่วนอื่น ซึ่งถ้าหากอยากเพิ่มความเร็วขึ้นอีกอาจจะต้องไปเขียนเพิ่ม(แต่ผมขี้เกียจอะนะ ขอใช้พวก VBox, HBox ซ้อนๆ กันละกัน) ขั้นนี้จะถูกเรียกตอนที่มีการเปลี่ยนแปลงข้อมูลซึ่งใส่มาในตัวแปรชื่อ data เช่นข้อมูลที่เกี่ยวข้องกับ Component นี้มีข้อมูลอยู่สามอย่างคือ ชื่อ วันเกิด เบอร์โทรศัพท์แล้วมีการเปลี่ยนค่าวันเกิดไปโดยเลือกจาก Component อื่นที่เป็นปฏิทิน ซึ่งจะทำให้เกิด Event ขึ้นมาชื่อ DataChange หรือ CollectionChange ตามแต่ประเภทข้อมูลที่อยู่ใน data ทำให้มีการเรียก invalidateDisplayList เพื่อให้มีการเปลี่ยนแปลงหน้าตาของ Component ให้ชื่อเปลี่ยนตามหรือวันเกิดเปลี่ยนตาม
UpdateDisplayList เป็นอะไรที่เรียกบ่อยที่สุดแล้ว เพราะว่าเมื่อมีเหตุการณ์อะไรก็ตามมันจะถูกเรียกตลอด เช่น ลากเม้าส์ กดเม้าส์ … แต่ก็ขึ้นอยู่กับ Component ด้วยว่าให้มีการเปลี่ยนแปลงหน้าตาบ่อยขนาดไหน อย่าง List เมื่อลากทีก็จะเรียกทีเพราะว่ามีผลต่อการเน้นสีแถวต่างๆ ดังนั้น ขั้นนี้ควรจะเป็นอะไรที่สามารถวาดได้เร็วๆ เช่นให้พื้นหลังเปลี่ยนสี เป็นต้น
เขียนมาทั้งหมดเพราะแต่ก่อนนี่โค้ดจะมั่วมาก กระจายๆ ไปทุกส่วนเลย - -” สุดท้ายก็เลยต้องหาทางจับย้ายไปย้ายมากว่าจะรู้ว่าควรวางไว้ที่ไหนเล่นนานพอสมควรเลย T T” แต่วันนี้กำลังเบลอๆ เนื่องจากฝนเมื่อวาน งืด แย่จริง วันนี้มีเรียนภาษาอังกฤษถึงดึกด้วย แย่แล้ว ~ ~”
เขียนเมื่อ: July 1st, 2008 | หมวด: ภาษาเครื่องกล | แถก: Flex,uicomponent | อ้างอิง |
มีสไดล์อธิบายเรื่องนี้อยู่ครับ ลองดูครับ
http://www.axelscript.com/wp-content/360flex.zip
@iporsut อ่าอ่านสไลด์แล้วละเอียดสุดๆ ~ ~” แต่ผมมั่วไปก่อนเยอะแล้วแฮะ เจอสไลด์นี้อาจแก้ได้เร็วกว่านี้
[...] คราวที่แล้วเขียนไปแค่สี่ขั้นตอน แต่ถ้าใครลองโหลดไฟล์ที่ @iporsut แนบมาใน comment คงเห็นรายละเอียดที่มากกว่านั้นเยอะแยะเลย แต่ผมก็ได้แค่อ่านผ่านๆ นะ ยังไม่ได้ดูละเอียดเท่าไหร่ แหะๆ แต่วันนี้จะมาเขียนถึงขั้นลึกลับอีกขั้นนึงนั่นคือ measure() เพราะต้องใช้มันเข้าพอดี -_-” ปกติฟังก์ชั่นนี้จะไม่ค่อยต้องเขียนเองเท่าไหร่เพราะหน้าที่ของมันคือใช้บอกว่า component เรามีขนาดเท่าไหร่ แล้วให้ขั้นถัดไปคือ updateDisplayList เป็นคนวาด ซึ่งวิธีทำปกตินั้นก็ง่ายแสนง่ายคือเรียก component ลูกให้วัดค่าออกมาให้ แล้วก็จับมันบวกๆ ลบๆ กันแล้วส่งออกไป แต่มีปัญหากับผมอีกและ -_-” เพราะว่าถ้าหากเราตั้งขนาดของ component ลูกเป็น % แล้วหละก็มันก็มีบางอย่างที่คำนวนออกมาให้พลาดเหมือนกัน(จริงๆ ก็ไม่พลาดหรอกแต่ผลลัพธ์ที่ต้องการมันไม่ไช่อย่างนั้นหนะ) เช่น List ลองมาดูโจทย์ผมละกัน โจทย์ก็แสนจะง่ายดาย มี List ย่อยๆ หลายๆ List ที่แต่ละ List มีข้อมูลไม่เท่ากัน โดยต้องเอา List เหล่านั้นมารวมกันให้เป็น List ใหญ่ๆ ก้อนนึง อ๊ะ เหมือนธรรมดา ยังไม่หมดๆ แต่ละ List มีสองแบบคือ List ที่เป็นแบบแถวเรียงลงมา กับ List ที่เป็นแบบกล่องไอคอน แบบที่เห็นใน Nautilus หรือ My computer นั่นแหละ ซับซ้อนดีมะ ซึ่งแต่ละ List ก็ต้องโชว์ขนาดทั้งหมดอีก เอาเป็นว่าคงไม่เห็นภาพกันแน่นอน ไปดูของจริงเลยดีกว่า อ่ะคราวนี้จากด้านบนถ้าตั้ง List แต่ละอันว่าให้ขนาดเป็น 100% มันก็จะไม่สามารถรู้ได้อีกว่ามันควรจะให้ความสูงมันเป็นเท่าไหร่ ผลก็คือมันจะให้กล่องแต่ละกล่องมีขนาดเท่ากันหมด และย่อเหลือแสดงแค่สองแถวเท่านั้น (จริงๆ ข้อมูลด้านบนมันไม่ดีนะเนี๊ยะ ช่องบนกับช่องล่างข้อมูลมีขนาดเท่ากัน -_-”) วิธีแก้คือไป override measure() ซะโดยคำนวนขนาดของแต่ละแถวของ List ว่ามีความสูงเท่าไหร่ จับบวกลบคูณหารนิดหน่อยยัดใส่ตัวแปรชื่อ measuredHeight ก็เป็นอันจบ พอไปถึงขั้นถัดไปคือ updateDisplayList มันจะวาดกล่องต่างๆ ตามขนาดที่เรากำหนดใน measuredWidth กับ measuredHeight protected override function measure():void { super.measure() if (stack.selectedChild == listCanvas) { measuredHeight = titleBar.measuredHeight + list.measureHeightOfItems(0, provider.length + 1) } else { if (providerLength != provider.length || tileRowCount < 0) { providerLength = provider.length tileRowCount = tile.rowCount + 1 } measuredHeight = titleBar.measuredHeight + tileRowCount * tile.rowHeight } } [...]