การใช้ 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 แล้ว จะออกมาเป็นลักษณะแบบนี้

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

หยุดลูปไม่รู้จบ จากการแรนดอม by dekunderkover

จากการแรนดอมเพื่อเรียงตัวเลขใหม่ที่จะใช้ในการสับเปลี่ยนอาร์เรย์


นี่คือการเขียนแบบตรงๆ ดิบๆ เถื่อนๆ ไม่แนะนำให้ทำตาม!!!

var intArray:Array = new Array();
var i:int = 50;
var j:int = 0;
while (i > 0){
var rand:int = Math.floor(Math.random());
for (var k:int = 0; k < intArray.length; k++){
if (rand != intArray[k]){
intArray[j] = rand;
i--;
j++;
}
}
}

ดูเยอะแยะ วุ่นวายมาก ลูปซ้อนลูป
นี่ยังเขียนไม่เสร็จเลยนะ ได้แค่ตัวเลข 0-49 ที่แรนดอมแล้ว ต้องนำไปดึงอาร์เรย์ตัวเก่ามาเรียงใหม่อีกที


แค่ตรงส่วนนี้ ทำให้เกิดปัญหาหลายอย่าง
1. เกิดการวนลูปซ้ำๆ จากการแรนดอมหลายครั้ง แต่ตัวเลขซ้ำๆกับที่เคยแรนดอมมาในช่วงท้ายๆ
2. หลังจากแรนดอมนานจนเกินไปทำให้เกิด error timeout ซึ่ง timeout โดยทั่วไปจะอยู่ที่ 15 วินาที แล้วทำให้โปรแกรมหยุดการทำงานไปเลย


แต่……..






นี่คือหนทางใหม่ ที่จะไม่เกิดปัญหาเดิมๆนั้น

// arr คือ อาร์เรย์ที่มีข้อมูลอยู่แล้ว ต้องการนำมา shuffle ลำดับใหม่
var randomArray:Array = new Array();
while (arr.length > 0){
var tmp:Array = arr.splice(Math.floor(Math.random()*arr.length), 1);
randomArray.push(tmp[0]);
}

ห๊ะ!!! เสร็จแล้วเหรอ ได้อาร์เรย์ที่สับเปลี่ยนลำดับกันแล้วในอาร์เรย์ที่ชื่อ randomArray


หลักการทำงานคือ นำ arr มา splice ออก ในจุดที่เราแรนดอมออกมา 1 ตัว ได้ออกมาเป็น tmp แล้วเราจึงนำไปใส่ในอาร์เรย์ randomArray


อธิบายง่ายกว่านั้นได้อีกคือ เราเอา arr มาแรนดอมหยิบออกทีละอัน มาโยนใส่ randomArray


ตามโค้ดด้านต้น ท้ายสุด arr จะไม่มีข้อมูลเหลือ ถ้าอยากเก็บข้อมูลแบบเก่าไว้ด้วย อย่าลืมโคลนเก็บไว้ก่อนนะ