การสร้าง View
เมื่อเรารู้จักกับการสร้าง Windows และ Object พิ้นฐานไปบ้างแล้ว สิ่งต่อมาที่เราควรจะต้องรู้จักนั่นก็คือ View นั่นเองครับ
View เป็น Container สำหรับวาง Object ต่าง ๆ ซึ่งจะมีความคล้ายคลึงกับ Window เพียงแต่ไม่สามารถสั่ง Open หรือ Close ได้ สามารถกำหนดรูปแบบการแสดงได้หลากหลาย โดยส่วนใหญ่แล้วจะใช้ Object View เพื่อการแสดงผลในส่วนต่าง ๆ ของ Window อีกด้วย โดยที่เราสามารถสร้าง View ได้ด้วยคำสั่ง
Titanium.UI.createView()
เมื่อเรารู้จักกับ View แล้ว เราก็จะมาสร้าง Application ตัวอย่างเกี่ยวกับ View ประเภทต่าง ๆ กันนะครับ โดยเริ่มจากการสร้าง Application แบบ Single Window Application (หรือแบบอื่นก็ได้ เพราะเราไม่ได้ใช้่งานอยู่แล้ว 555) จากนั้น เปิด File app.js ขึ้นมา ทำการ ลบ Code ที่ทาง Appcelator สร้างมาออกก่อนครับ (เพื่อให้เข้าใจได้ง่ายมากยิ่งขึ้น) จากนั้นทำการ สร้าง Window ครับ
var win = Ti.UI.createWindow({
width:Ti.Platform.displayCaps.platformWidth,
height:Ti.Platform.displayCaps.platformHeight,
backgroundColor:'#fff'
});
เมื่อเราได้ Window มาแล้วเราก็จะเริ่มทำการสร้าง View ต่าง ๆ กันเลยนะครับ เริ่มจาก View ก่อนนะครับ ผมอยากให้ View นี้ อยู่ด้านบนสุดของ Window โดยมีขนาดความกว่้าง 300 pixel สูง 120 Pixel BackGround เป็น สีเขียวมีชอบเป็นลักษณะมน ๆ โดยเริ่มจากการสร้าง View ก่อนด้วยคำสั่งนี้ครับ
var view =Ti.UI.createView({
width:300,
height:120,
backgroundColor:'green',
borderRadius:10
borderColor:'#000',
top:100,
borderWidth:2
});
จากนั้นเอาไปใส่ใน Window ด้วยคำสั่ง win.add(view) ทดลองรันดูครับ จะเห็นว่า View จะแสดงอยู่บนสุดของ Window พอดี (ก่อนรันอย่าลืมคำสั่ง win.open(); ก่อนนะครับ มิฉะนั้นจะไม่เกิดอะไรขึ้นเลย) ก็จะพบกับ View สีเขียวอยู่บนหัวสุดของ Window ครับ
บทความหน้าจะเป็นการพัฒนา Application แบบลงในรายละเอียดมากขึ้นแล้วนะครับ ยังงัยก็ติดตามกันต่อได้นะครับ หรือ หากมีข้อสงสัย ข้อตำหนิ ยังงัยก็ Comment กันได้ตลอดนะครับ
0 ความคิดเห็น:
แสดงความคิดเห็น