การใช้ List ใน Flex by dekunderkover

เราจะมาพูดถึงส่วนประกอบของ List ใน Flex
สิ่งที่พูดถึงนี้อยู่ใน spark.components.list

แท็ก list เวลาเรียกใช้คือ <s> </s> แบบโค้ดตัวอย่างนี้

<s:List x="295" y="207" width="412" height="112" id="prtList1" dataProvider="{usedArr1}" itemRenderer="components.partCustomComponent" />
</s:List>

x, y : จุด x y ที่เราจะวาง list ลงไป
width, height : ความกว้าง ความสูง ของ list ที่เราสร้าง
dataProvider : ข้อมูลที่จะใส่ลงใน list
itemRenderer : component แต่ละตัวใน list

ลงรายละเอียดกันอีกนิด
ข้อมูลที่จะใส่ใน dataProvider จะเป็นข้อมูลแบบ array เช่น

var usedArr:Array =[{"friend_id":1234,"nick":"Paiboon","level":10,"exp":2},
{"friend_id":5678,"nick":"Ziah","level":99,"exp":999999}];

จะมีข้อมูลคือ friend_id เป็น 1234, nick เป็น Paiboon, level เป็น 10, exp เป็น 2

itemRenderer จะเป็นคลาสที่สร้าง component แต่ละตัวออกมา โดยใช้ข้อมูลจาก dataProvider ทีละตัว

public function init():void {
str = data.nick;
exp = data.exp;
level = data.level;
id = "id: "+data.friend_id;
}

data คือข้อมูลจากในอาร์เรย์ . ด้วยชื่อของข้อมูลที่ต้องการ
แล้วจึงนำไปใส่

<s:Label text="name: {str}" y="60" />
<s:Label text="exp: {exp}" y="70" />
<s:Label text="level: {level}" y="80" />

มาดูให้เห็นภาพ (ไม่ตรงตามโค้ดนะจ๊ะ)
หลังจากข้อมูลหนึ่งตัวเข้า itemRenderer แล้ว จะออกมาเป็นลักษณะแบบนี้

พอใช้ข้อมูลทุกตัว ก็จะออกมาเป็นแบบนี้