JavaFX#4 Object Literal

posted on 06 Jul 2009 11:44 by interviewz in JavaFX

Object คืออะไร

JavaFX Script เป็น object-oriented แล้วมันหมายความว่ายังไงล่ะ? จริง ๆ แล้ว Object มันคืออะไร?

ตัวอย่างเช่น ทีวีของเราก็เป็น object ทีวีมี state (ช่องปัจจุบัน, ระดับเสียงในปัจจุบัน, เปิด, ปิด) และ behavior (เปลี่ยนช่อง, ปรับระดับเสียง, เปิดเครื่อง, ปิดเครื่อง) เรามองโทรทัศน์ทั้งหมดเป็น object เดียว แต่ในความเป็นจริง ทีวีนั้นประกอบมาจากหลาย ๆ อย่าง (ปุ่มกดต่าง ๆ ส่วนประกอบอื่น ๆ ภายในเครื่องก็เป็น objects)

เราสามารถแกะชิ้นส่วนของทีวีออกมาจนได้ น็อต ซึ่งเป็น object เดียว ไม่สามารถแตกออกเป็นอะไรได้อีกแล้วถ้าเราเคยซื้ออะไรซักอย่างมาประกอบเอง สมมุติว่าเป็นราวตากผ้าละกัน เราจะเห็นภาพราวตากผ้าและทุกชิ้นส่วนของมัน แค่เรามองเราก็จะเข้าใจว่ามีชิ้นส่วนวัตถุอะไรบ้าง และมันเชื่อมต่อเข้าด้วยกันอย่างไร เช่นเดียวกันกับไฟล์ .fx เราสามรถเข้าใจ objects ของ script ว่ามันเชื่อมต่อเข้าด้วยกันได้อย่างไรจากการมองภาพรวมของ application

การประกาศ Object Literal

ใน JavaFX Script นั้น object จะถูกสร้างจาก object literal

Address {

street: "1 Main Street";

city: "Santa Clara";

state: "CA";

zip: "95050";

}

โค๊ดด้านบนนี้สร้าง Address object โดยระบุค่าให้ street, city, state, และ zip ในโปรแกรมจริง เราสามารถจินตนาการว่า ในส่วนติดต่อกับผู้ใช้ (GUI) นั้น มันเชื่อมต่ออยู่กับ Address object ดังนั้นอะไรที่ปรากฏบนหน้าจอจะมีผลกับข้อมูลที่ถูกเก็บโดยโปรแกรมนี้

แต่ก่อนที่เราจะลองคอมไพล์โค๊ดนี้ เราต้องรู้ก่อนว่า คอมไพล์เลอร์ต้องการพิมพ์เขียว (blueprint) หรือที่เราเรียกว่า class นั่นเอง เพื่อที่จะอธิบายว่าข้อมูลใน Address object จะอยู่ในไหน (ในตัวอย่างนี้เราบอกว่า Address มี street, city, state, และ zip แต่คอมไพล์เลอร์จะไม่มีทางรู้ได้เลยจนกว่าเราจะใส่มันให้อยู่ใน class) เราจะยังไม่อธิบายเรื่อง class ในตอนนี้เพราะว่า JavaFX Application Programming Interface (API) มี library สำหรับสร้าง built-in classes พร้อมให้เราเรียกใช้ นอกจากนี้ JavaFX Script ยังถูกสร้างบน Java platform เราจึงสามารถเข้าถึง programming language API ได้

เราสามารถคอมไพล์ ตัวอย่าง Address example ได้โดยการดาวน์โหลดไฟล์ Address.fx (ซึ่งกำหนด Address class ไว้แล้ว) นำไปวางไว้ใน directory เดียวกับตัวอย่างข้างต้น (ต้องแน่ใจว่าเซฟโค๊ดตัวอย่าง โดยใช้ชื่อไฟล์ที่ไม่ซ้ำกัน เช่น AddressTest.fx) โค๊ดนี้ไม่ได้สร้าง output อะไรออกมา แต่ว่ามันคอมไพล์และพิสูจน์ว่าการสร้าง object นั้นสำเร็จจริงๆ

สังเกตว่า ตัวแปรของ Address object (ได้แก่ street, city, state, zip) ในตัวอย่างนี้ หรือที่เรารู้กันว่ามันเป็น instance variables เราสามารถมองว่ามันเป็น set of built-in attributes ที่การันตีว่ามันจะมีในทุก object แน่ๆ ในความจริงแล้วคำว่า "attribute" ถูกใช้ใน JavaFX Script เวอร์ชั่นก่อน แต่ในโลกของ object-oriented programming นั้น คำว่า instance"และ "object" มีความหมายเหมือนกัน

Object Literal Syntax

ในตัวอย่างนี้ คำแรก (Address) ระบุประเภทของ object ที่เราสร้าง ปีกกาเปิดและปิดกำหนดส่วน body ของ object ส่วนอื่น ๆ (street, city, state, zip) กำหนดค่าเริ่มต้นของ instance variables ของ object นี้

สังเกตุว่าเมื่อเราประกาศ object literal นั้น ในส่วนของ instance variables อาจจะถูกแยกจากกันด้วยลูกน้ำ (commas) ช่องว่าง (whitespace) หรอเซมิโคลอน semi-colons เราจะใช้อันไหนก็ได้ แต่ส่วนใหญ่นิยมใช้ semi-colons

เราจะกำหนดค่าให้ object ใหม่ที่พึ่งสร้างแบบนี้ก็ได้

def myAddress = Address {

street: "1 Main Street";

city: "Santa Clara";

state: "CA";

zip: "95050";

}

หรือใส่ object ซ้อนอยู่ในอีก object ก็ได้

def customer = Customer {

firstName: "John";

lastName: "Doe";

phoneNum: "(408) 555-1212";

address: Address {

street: "1 Main Street";

city: "Santa Clara";

state: "CA";

zip: "95050";

}

ในตัวอย่างโค๊ดด้านบน Customer object นั้นมีการประกาศตัวแปร แล้วก็มี Address object เก็บในตัวแปรชื่อว่า address ใน application จริงจะมีหลาย ๆ object ซ้อนกันอยู่ รูปแบบการซ้อนกันทำให้มันง่ายในการมองโดยรวมว่า object ใดอยู่ตรงไหน ในการคอมไพล์ตัวอย่างนี้ เราต้องเพิ่ม Customer.fx ไปไว้ใน directory ปัจจุบันก่อน

Real-World Example: Video Puzzle

ในตัวอย่าง video puzzle จะตัดแบ่ง video ออกเป็น puzzle ในโค๊ดตัวอย่างเราได้เน้นส่วนของโค๊ดที่ใช้ object literals เราควรจะจำ syntax ได้ ถึงแม้ว่าเราจะไม่คุ้นเคยกับ classes ที่ให้มานี้ โค๊ดนี้ถูกตัดมาบางส่วน จะเห็นว่า ตัวแปร visible และ content เป็นของ Group object ส่วนตัวแปร x, y, width, height, arcWidth, arcHeight, fill, และ blocksMouse เป็นของ Rectangle object โดย Group object ถูกเก็บอยู่ในตัวแปรชื่อว่า previewDimOverlay ที่จะใช้ในการเข้าถึงภายหลัง.

การเรียก Instance Functions

นอกจากใน objects จะมี instance variables แล้วยังอาจจะมี instance functions ด้วย เราสามารถเรียก instance functions โดยใช้ชื่อของ variable (customer ตัวอย่างด้านล่าง), ตามด้วยจุด ("."), ตามด้วย function ที่เราต้องการเรียก

def customer = Customer {

firstName: "John";

lastName: "Doe";

phoneNum: "(408) 555-1212"

address: Address {

street: "1 Main Street";

city: "Santa Clara";

state: "CA";

zip: "95050";

}

customer.printName();

customer.printPhoneNum();