NativeScript ตอนที่ 2 องค์ประกอบของแอพ

หลังจากที่เราทดลองติดตั้งและสร้างแอพโดยใช้ template ที่เป็นตัวตั้งต้นแล้ว เราลองมาดูองค์ประกอบของไฟล์ที่ถูกสร้างขึ้นกับครับ

ถ้าเข้าไปดูในโฟลเดอร์ของโปรเจคที่ถูกสร้างขึ้น จะเห็นว่ามันมีองค์ประกอบคือ
Project
--app
--node_modules
--platform
package.json

ซึ่งตัวโค้ดหลักๆ จะอยู่ในโฟลเดอร์ app
เมื่อเข้าไปดู จะพบว่ามีไฟล์ที่สำคัญคือ

• app.js เป็นไฟล์เริ่มต้น จะบอกว่าให้โปรแกรมไปเรียกโมดูลและหน้าไหนมาทำงานเป็นหน้าแรก
• app.css เอาไว้กำหนดรูปแบบ สไตล์การแสดงผลโดยรวมของแอพ
• main-page.xml หน้าอินเตอร์เฟสหลัก
• main-page.js โค้ดที่สัมพันธ์กับ main-page.xml

ถ้าดูรายละเอียดของ app.js จะพบดังนี้

var application = require("application");
application.start({ moduleName: "main-page" }); 

นั่นคือบรรทัดแรกจะมีการ include โมดูลชื่อ application
บรรทัดที่สองจะสั่งให้ start module โดยที่ไปเริ่มที่หน้าซึ่งมีชื่อว่า main-page (ตรงกับไฟล์ main-page.xml และ main-page.js)

ต่อไป เราจะลองเปิดไฟล์ main-page.xml ซึ่งเป็นส่วนของ interface

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo">
  <StackLayout>
    <Label text="Tap the button" class="title"/>
    <Button text="TAP" tap="{{ onTap }}" />
    <Label text="{{ message }}" class="message" textWrap="true"/>
  </StackLayout>
</Page>

 ซึ่งจะมีหลายองค์ประกอบ ในที่นี้ถ้าเราแยกส่วนดู จะพบว่าประกอบไปด้วย

• Page คือ หน้านั้น
• StackLayout คือโครงของหน้านั้นว่าจะมีการเรียงอินเตอร์เฟสอย่างไร ในที่นี้เป็นแบบ Stack คือเรียงจากบนลงล่าง หรือ ซ้ายไปขวา
• Label ก็คือข้อความที่เอาไว้แสดงผล
• Button คือปุ่มกด

 ซึ่งจะสังเกตว่ามีการอ้างถึง event ที่จะใช้กับปุ่ม คือ tap = {{ onTap }} เป็นต้น ซึ่งรายละเอียดจะอยู่ในไฟล์ main-view-model.js อีกที

เนื่องจากโค้ดตัวอย่างนี้ เป็นลักษณะการเขียนโค้ดแบบ Model-View-View-Model ซึ่งอาจจะเข้าใจยาก ในตอนต่อไปเราจะลองเริ่มเขียนแอพแบบโครงสร้างธรรมดาง่ายๆกันดูครับ