Mobidevthai

หลังจากที่เราได้รู้จัก Object ต่าง ๆ กันไปพอสมควร วันนี้ผมก็จะนำเสนอ Container อีกประเภทหนึ่ง ที่ใช้กันบ่อยมาก ๆ เลยนะครับ Container นั้นก็ คือ TableView นั่นเองครับ ด้วยตัวชื่อก็ บอกอยู่แล้วครับว่า มันคือ Table แล้วมันสามารถทำอะไรได้บ้างเราไปดูกันครับ เราสามารถสร้างมันขึ้นมาได้ด้วยคำสั่ง
var TableView = Titanium.UI.createTableView(); หลังจากได้ Table ที่เป็น Container แล้วเราก็จะมาเริ่มการสร้าง Content ใน Table กันครับ ใน Titanium Studio นั้น จะสามารถสร้าง Content ได้หลายแบบนะครับ เราไปดูแต่ละแบบกันครับ วิธีแรกครับ เป็นการ ระบุ Content ลงไปใน ตัวแปร Array ตรง ๆ โดยสามารถเขียนได้ดังนี้ครับ
var data = [{ title : 'Row 1',leftImage: 'row.png' },{ title : 'Row 2' ,leftImage: 'row.png'  },{ title : 'Row 3',leftImage: 'row.png' }];
จากนั้นก็นำไปใส่ใน TableView ด้วยคำสั่ง
TableView.data = data;
เพียงเท่านี้เราก็จะได้ ตารางตามที่เราต้องการ



จะสังเกตุได้ว่า ลักษณะการแสดงผลบน Table จะมีเพียงแค่ข้อความธรรมดา ๆ เท่านั้น แล้วถ้าเราต้องการใส่ อย่างอื่นหล่ะ จะทำยังงัย ทำได้โดยการ สร้าง Object อีกประเภทนึงขึ้นมารองรับครับ นั่นก็คือ TableViewRow ตัว object นี้เปรียบเสมือนกับ View ธรรมดา ๆ นั่นเองครับ แต่ ตัว View เพียงแต่มี Property รองรับสำหรับ การทำงานบน Table โดยเฉพาะ โดยสามารถเขียนได้ดังนี้
var row = Titanium.UI.createTableViewRow( title : 'Row 1' , leftImage : 'row.png' }); จากคำสั่งข้างต้นเราก็จะได้ row ที่พร้อมจะนำไปใส่ใน Table แล้ว แต่ถ้าเราต้องการ หลาย ๆ row เราก็สามารถที่จะวนลูป เพื่อนำข้อมูลเข้าไปได้เช่นหากต้องการ นำข้อมูลเข้าไป 10 row ก็สามารถทำได้ดังนี้
for (var i =0; i <= 10 ; i++) { var row = Titanium.UI.createTableViewRow({ title : 'Row ' + i , leftImage : 'row.png' }); TableView.appendrow(row); } แล้วถ้าเราเอาทั้ง 2 วิธีมารวมกันจะได้หรือไม่ คำตอบคือ ได้ครับ นั่นก็คือ สร้าง tableviewrow ขึ้นมาแล้วจับมันใส่ลงใน Array แล้วทำการ ใส่ลงใน Table ด้วยคำสั่งแบบนี้
var data = []; for (var i =0; i <= 10 ; i++) { var row = Titanium.UI.createTableViewRow({ title : 'Row ' + i , leftImage : 'row.png' }); data.push(row); } TableView.data = data; ข้อดีของวิธีการหลังนี้ก็คือ สามารถปรับแต่ง Row ได้ตามที่เราต้องการ แต่ก็ต้องคำนึงถึง performance ที่จะได้รับกลับมาด้วย หาก object ที่อยู่ใน row มีมากจนเกินไปก็อาจทำให้การเลื่อนขึ้นลงของ Table กระตุก หรือ ออกอาการ ไม่ลื่นนั่นเองครับ

วันนี้ขอจบเพียงเท่านี้ก่อน หากมีอะไรตกหล่นอะไร ก็ ขออภัยมา ณ ที่นี้นะครับ ยังงัยก็ ติชมกันได้นะครับ