NativeScript ตอนที่ 4 Event เบื้องต้น

ตอนที่แล้วเราลองทำแค่ interface ง่ายๆ คราวนี้เราจะลองเพิ่ม event ง่ายๆกันดูครับ

เริ่มต้นด้วยในโปรเจคเดิม เราสร้างไฟล์ interface ใหม่ชื่อ hello.xml เพื่อแสดงข้อความบนหน้าจอ

คราวนี้เราจะลองเพิ่มโค้ดที่เป็น event เข้าไป โดยเริ่มจาก event ง่ายๆคือ "loaded" สำหรับ Page

ดังนั้น ในไฟล์ hello.xml เราก็จะเพิ่ม event "loaded" สำหรับ Page เข้าไปเป็น

<Page loaded="onLoad">
    <Label text="Hello World" class="title"/>
</Page>

หลังจากนั้น เราก็จะสร้างไฟล์โค้ดที่คู่กับหน้านี้ ชื่อ hello.js แล้วเพิ่มโค้ดง่ายๆดังนี้

function hello() {
    alert("Hello world");
}
exports.onLoad = hello;

ซึ่งเมื่อรันโปรแกรม ก็จะแสดง alert dialog ขึ้นมาแบบนี้ครับ


ต่อไป เราจะลองเพิ่มปุ่มกดดูบ้าง ก็จะกลับไปแก้ไขไฟล์ hello.xml ใหม่ให้เป็น

<Page>
 <StackLayout>
  <Label text="Hello World" class="title"/>
  <Button text="OK" tap="sayHello"/>
 </StackLayout>
</Page>

สังเกตว่ามีการใช้ StackLayout ซึ่งเป็น LayOut ประเภทหนึ่งที่จัดเรียง widget ที่อยู่ภายในแบบบนลงล่างหรือซ้ายไปขวา

ในที่นี้เราสร้าง Label และ ปุ่มกดไว้ใน StackLayout นี้ และเอา Page Load event ออก แต่เพิ่ม "tap" event ให้กับปุ่ม ซึ่งเมื่อเรากดก็จะไปเรียกใช้ฟังก์ชัน sayHello ในไฟล์ hello.js อีกที

และปรับแก้ไฟล์ hello.js ดังนี้

function hello() {
    alert("Hello world");
}
exports.sayHello = hello;

คราวนี้เมื่อเรากดปุ่ม ก็จะเกิด alert dialog ตามรูปครับ



ตอนต่อไป เราจะลองรับค่าจาก Text box คลิกปุ่มแล้วนำค่าที่ได้ไปแสดงผลใน Label กันครับ