Mobidevthai

สำหรับในบทความนี้นั้นเราจะกล่าวถึง Input Box ประเภท Text นั่นก็คือ TextField และ TextArea นั่นเองครับ ทั้ง 2 Object นี้ มีความสำคัญต่อการพัฒนาโปรแกรมบน มือถือ มากพอสมควรครับ เนื่องจากมันจะเป็นที่รองรับการ Input ข้อมูลต่าง ๆ ที่  User ได้ทำการพิมพ์เข้ามานั่นเอง โดยที่ทั้ง 2 ตัวนั้น มีึความแตกต่างกันอย่างไรบ้าง ลองไปดูกันครับ


TextField 

TextField นั้น เป็นช่องสำหรับรองรับการพิมพ์ตัวอักษรหรือตัวเลขจากหน้าจอ แบบบรรทัดเดียว หรือ Single Line Text Field นั่นเองครับ เราก็จะสามารถสร้าง TextField นี้ได้ด้วยคำสั่ง
Titanium.UI.createTextField
โดย TextField นี้ก็จะมี Property เยอะแยะมากมาย โดยสามารถดูได้จาก Titanium Document  เรามาดูวิธีสร้าง TextField แบบง่าย ๆ กันดีกว่าครับ เริ่มจากสร้าง Window จากนั้นก็ทำการสร้าง TextField ขึ้นมา 1 อันครับ โดยใช้คำสั่ง
var textField = Titanium.UI.createTextField({ backgroundColor:'#fff', color:'#000', borderRadius:5, top:10, width : 300, left:10, hintText: 'Your Name' });
จากนั้นก็ นำไปวางบน Window แล้วทำการ รัน ก็จะได้ TextField ที่อยู่บนหน้าจอ ตามภาพ


เมื่อทำการ Click ไปบน TextField ก็จะปรากฏเป็น Vitual Keyboard ตามแต่ละ OS ขึ้นมาให้เราทำการพิมพ์​ข้อความลงไปได้

TextArea 

TextArea นั้น เป็นช่องสำหรับรองรับการพิมพ์ตัวอักษรหรือตัวเลขจากหน้าจอ แบบหลาย ๆ บรรทัด นั่นเองครับ เราก็จะสามารถสร้าง TextArea นี้ได้ด้วยคำสั่ง
Titanium.UI.createTextArea()
เช่นเดียวกับ TextField มี Property เยอะแยะมากมาย สามารถดูได้จาก Titanium Document เรามาดูวิธีการสร้าง TextArea กันเลยครับ ใช้คำสั่ง
var textArea = Titanium.UI.createTextArea({ backgroundColor:'#fff', color:'#000', top:30, width: 300, height:120, left:10, borderRadius:5 }); จากนั้นก็ นำไปวางบน Window แล้วทำการ รัน ก็จะได้ TextArea ที่อยู่บนหน้าจอ ตามภาพ



หลังจากที่เราได้ทำการ สร้าง Text Input ทั้ง 2 แบบแล้ว object อีกอย่างหนึ่งที่ถูกผูกอยู่กับ Text Input ทั้ง 2 แบบก็คือ object keyboard นั่นเองครับ ใน Framework  ของ Titanium เองนั้นรองรับการ Input ข้อมูลหลายประเภทด้วยกัน โดยที่เราสามารถระบุ ประเภทของ Keyboard ลงไปได้ ด้วย  Property ที่ชื่อว่า "keyboardType" โดย ทาง Titanium นั้น มีการจัดเตรียม  ประเภทของ Keyboard ให้เราเลือกใช้ได้ดังนี้

KEYBOARD_ASCII,  KEYBOARD_DECIMAL_PAD,  KEYBOARD_DEFAULT,  KEYBOARD_EMAIL, KEYBOARD_NAMEPHONE_PAD, KEYBOARD_NUMBERS_PUNCTUATION, KEYBOARD_NUMBER_PAD,  KEYBOARD_PHONE_PAD, KEYBOARD_URL

โดยเราสามารถเลือกใช้ได้ โดยใช้คำสั่ง Titanium.UI  แล้วตามด้วย ประเภทของ Keyboard ที่ต้องการ ตัวอย่างการระบุ KeyboardType
var textField = Titanium.UI.createTextField({ backgroundColor:'#fff', color:'#000', borderRadius:5, top:10, width : 300, left:10, hintText: 'Your Name', keyboardType:Ti.UI.KEYBOARD_ASCII });
มาถึงตรงนี้เราก็ได้รู้จักกับ Object หลัก ๆ ในการพัฒนาไปบ้างแล้ว ในครั้งต่อ ๆ ไป จะเป็น Object หรือ เรื่องใด ๆ ติดตามกันต่อได้นะครับ

Full Source Code File name : app.js
var win = Ti.UI.createWindow({ backgroundColor:'#000' }) var textField = Titanium.UI.createTextField({ backgroundColor:'#fff', color:'#000', borderRadius:5, top:10, width : 300, left:10, hintText: 'Your Name', keyboardType:Ti.UI.KEYBOARD_ASCII }); win.add(textField); var textArea = Titanium.UI.createTextArea({ backgroundColor:'#fff', color:'#000', top:100, width: 300, height:120, left:10, borderRadius:5 }); win.add(textArea); win.open();