Accessing AIR APIs from JavaScript

From Blognone

Accessing AIR APIs from JavaScript

ชุดคำสั่ง JavaScript ที่ทำงานอยู่ในขอบเขตแอพพลิเคชันหนึ่งใน AIR สามารถใช้งาน API ของ AIR รันไทม์ แฟรชเพลเยอร์รันไทม์ หรือแม้แต่ชุดคำสั่งของ ActionScript 3 นอกเหนือไปจากชุดคำสั่งมาตรฐานใน JavaScript หรือว่า HTML DOM API เอง การที่สามารถเข้าถึง API ที่หลากหลายเป็นการเพิ่มความสามารถของ JavaScript ผ่าน API ที่มีอยู่ในบราวเซอร์ ยกตัวอย่างเช่น

• การเล่นเสียง
• การแก้ไขปรับเปลี่ยนรูปภาพและบิตแมพ
• การอ่านและเขียนไฟล์จากระบบจักการไฟล์ในเครื่องคอมพิวเตอร์
• การสร้าง ควบคุม และแก้ไขปรับเปลี่ยนหน้าต่าง native
• การสร้างการเชื่อมต่อ socket โดยตรง (ทั้งการส่งข้อมูลข้อความ และ binary)
• การเข้าถึงคลิปบอร์ด
• การใช้งานฐานข้อมูลแบบฝังตัวเพื่อจัดเก็บข้อมูล

Tip: คุณสามารถดูตัวอย่างการใช้งานความสามารถเหล่านี้ได้จากบทที่ 4

เนื้อหาของบทนี้นำเสนอการใช้งาน API ของ AIR และแฟลชเพลเยอร์จาก JavaScript เช่นเดียวกับการเรียกและใช้งานชุดคำสั่ง ActionScript ที่ผ่านการคอมไฟล์แล้วจาก JavaScript

การเข้าถึง API ของ AIR และแฟลชเพลเยอร์

API ของ AIR และแฟลชเพลเยอร์ส่วนใหญ่จะถูกจัดเก็บไว้ในแพกเกจ (คล้ายกับการที่ JavaScript framework ใช้ namespace และแพกเกจ) การใช้เพกเกจช่วยจัดระเบียบให้กับ API และลดโอกาสการตั้งชื่อชนกัน เมื่อต้องการเข้าถึง API ของ AIR และแฟลชเพลเยอร์โดยตรงจาก JavaScript คุณต้องเรียกผ่านชื่อแพกเกจอย่างครบถ้วน

ดังที่ได้อธิบายก่อนหน้านี้ API ของ AIR และแพลชเพลเยอร์ทั้งหมดสามารถเรียกใช้ผ่านคุณสมบัติ window.runtime ซึ่งจะเป็นราก (Root) ของสภาพแวดล้อมของรันไทม์ และ API ทั้งหมดจะต้องเรียกผ่านรากนี้

ตัวอย่างเช่น ถ้าต้องการจะเรียกใช้ API ที่ไม่ได้อยู่ในแพกเกจ เช่น trace() คุณจะต้องเรียกใช้มันโดยตรงจากคุณสมบัติของรันไทม์ ดังนี้:

 window.runtime.trace("foo");

อย่างไรก็ตามถ้าคุณต้องการเข้าถึง API ที่อยู่ในแพกเกจ คุณต้องเพิ่ม path ของแพกเกจนั้น ตัวอย่างเช่น ถ้าต้องการเข้าถึงขนาดของหน่วยความจำที่แอพพลิเคชันใช้อยู่ คุณสามารถเรียกใช้คุณสมบัติ totalMemory ของแฟรชเพลเยอร์ ซึ่งอยู่ในคลาส flash.system.System การเรียกใช้ API ดังกล่าวใน JavaScript ทำดังนี้:

var mem = window.runtime.flash.system.System.totalMemory;

การสร้างอินสแตนส์ของคลาสใน API จาก JavaScript ก็ทำเช่นเดียวกัน:

var file = new window.runtime.flash.filesystem.File();

ชุดคำสั่งนี้สร้างอินสแตนส์จากคลาส File ที่สามารถใช้ในการทำงานกับระบบไฟล์ได้

ตัวอย่างนี้แสดงวิธีการเขียนข้อมูลลงไปในไฟล์ output.txt บนเดสค์ทอปของผู้ใช้:

//call a static property 
var desktop = window.runtime.flash.filesystem.File.desktopDirectory;
//call a function on an instance of a class 
var file = desktop.resolve("output.txt"); 
//create a new instance of a class using new 
var fileStream = new window.runtime.flash.filesystem. FileStream(); 
   //call a function, passing arguments 
   fileStream.open(file, window.runtime.flash.filesystem.FileMode.WRITE); 
   fileStream.writeUTFBytes("Hello World"); 
   fileStream.close();

อย่ากังวลมากนักกับชุดคำสั่งที่ใช้ในตัวอย่างนี้ แต่ควรจะสนใจกับวิธีการเรียกใช้ API ของ AIR จาก JavaScript

ด้วยวิธีการเหล่านี้คุณสามารถเรียกใช้ API เกือบทั้งหมดของ AIR และแพลชเพลเยอร์จากใน JavaScript ได้

Tip: ดาวน์โหลด เอกสารอ้างอิงภาษา JavaScript เฉพาะสำหรับ AIR ได้จากเว็บไซท์ของ Adobe ที่: http://www.adobe.com/go/air

คุณสามารถเรียกใช้ API ของ AIR แฟรชเพลเยอร์ และ ActionScript ทั้งหมดได้ ถ้าคุณสามารถจำโครงสร้างของแพกเกจของ API เหล่านั้น ถึงแม้ว่าเอกสารของ JavaScript จะไม่มีกล่าวถึงเลยก็ตาม

การทำงานกับ event ของ AIR และแฟลชเพลเยอร์

คำสั่งใน API ของ AIR และแฟลชเพลเยอร์จำนวนมากใช้งาน event อย่างกว้างขวาง การจัดการ event ใน API แบบ ActionScript จะอยู่บนพื้นฐานของ W3C DOM Level 2 event model ผ่านทาง JavaScript แต่ว่าจะแตกต่างจากขบวนการ callback ที่มักจะใช้ใน JavaScript อย่างมาก

ในการที่จะเตือนว่าเกิด event จาก API ของ AIR หรือว่าแฟรชเพลเยอร์ คุณจะต้องลงทะเบียน (register) เพื่อจะรับ event นั้น วิธีการที่ดีที่สุดที่จะทำความเข้าใจขบวนการเหล่านี้ก็คือการดูจากตัวอย่าง ตัวอย่างต่อไปนี้แสดงการลงทะเบียนเพื่อรับ event NETWORK_CHANGE ซึ่งจะถูกเผยแพร่มาจากคลาส Shell:

function onNetworkChang(event)
{
       runtime.trace("Network status changed");
}

function onAppLoad()
{
       window.runtime.flash.system.Shell.shell.addEventListener(
               window.runtime.flash.events.Event.NETWORK_CHANGE,
               onNetworkChange);
}

อย่างที่คุณได้เห็นจากตัวอย่าง คุณสามารถลงทะเบียนรับ event ที่เผยแพร่มาจากอินสแตนส์ของคลาสโดยเรียกใช้คำสั่ง addEventListener ของอินเสตนส์นั้น โดยคำสั่งนี้ต้องการอาร์กิวเมนท์สองตัว

อาร์กิวเมนท์ตัวแรกคือชื่อของ event ที่ถูกเผยแพร่ สำหรับ API ของ AIR และแพลชเพลเยอร์ ชื่อของ event จะเป็นค่าคงที่ซึ่งคุณสามารถหาได้จากเอกสาร API

อาร์กิวเมนท์ตัวที่สองอ้างอิงไปถึงฟังค์ชันที่ทำหน้าที่จัดการกับ event ในตัวอย่างนี้ ฟังค์ชันดังกล่าวชื่อว่า onNetworkChange ลองดูที่ฟังค์ชันนั้น คุณจะเห็นว่ามันได้รับค่าอาร์กิวเมนท์ซึ่งเป็นข้อมูลเกี่ยวกับ event เช่นกันกับในทุก API ของ AIR และแฟรชเพลเยอร์จะส่งออบเจ็คท์ event ให้กับฟังค์ชันที่ทำหน้าที่จัดการกับ event คุณสามารถหาชนิดของออบเจ็คท์ event ข้อมูลที่ออบเจ็คท์ดังกล่าวเก็บไว้ โดยอ้างอิงจากเอกสาร API

การใช้งาน AIRAliases.js

จากตัวอย่างที่ผ่านมา การเรียกใช้ API ของ AIR และแฟรชเพลเยอร์โดยตรงจาก JavaScript นั้นมีประโยชน์อย่างมาก แต่เพราะว่าคุณต้องอ้างอิง API จากคุณสมบัติรันไทม์และเส้นทางแพกเกจของ API อย่างสมบูรณ์ ซึ่งส่งผลให้อ่านโคดได้ยาก

การที่จะใช้งาน API ที่ใช้บ่อยของ AIR และแฟรชเพลเยอร์จากใน JavaScript ให้ง่ายขึ้น Adobe ได้สร้างไฟล์นำเข้าของ JavaScript ไฟล์หนึ่งชื่อว่า AIRAliases.js' ไฟล์นี้สามารถหาได้จากไดเร็กทอรี framework ของ SDK และสามารถใช้ในการสร้างนามแฝงสำหรับ API ที่ใช้บ่อยเพื่อให้สามารถเรียกใช้ได้ง่ายขึ้นจากใน JavaScript

ในการที่จะใช้ไฟล์นี้ ให้ทำการสำเนาจาก SDK มายังไดเร็กทอรีของแอพพลิเคชันของคุณ (ตรวจสอบให้แน่ใจว่าคุณได้ใส่ไฟล์ดังกล่าวลงไปในแพกเกจของ AIR ของคุณด้วย) ต่อจากนั้น คุณก็สามารถเพิ่มไฟล์นี้เข้าไปยังแอพพลิเคชันของคุณโดยใช้แทกของสคริปท์ในเอกสาร HTML ที่คุณต้องการจะใช้งานนามแฝงดังกล่าว

ลองย้อนกลับไปดูตัวอย่างที่ผ่าน ๆ มาเกี่ยวกับการเขียนไฟล์ลงไปบนเดสค์ทอป แต่ว่าใช้นามแฝง JavaScript ที่อยู่ในไฟล์ AIRAliases.js แทนที่จะเขียนเส้นทางแพกเกจแบบเต็ม

<script src="AIRAliases.js"></script> 
<script type="text/javascript"> 
   function writeFile() 
   { 
       var desktop = air.File.desktopDirectory; 
       var file = desktop.resolve("output.txt"); 
       var fileStream = new air.FileStream(); 
           fileStream.open(file, air.FileMode.WRITE); 
           fileStream.writeUTFBytes("Hello World"); 
           fileStream.close(); 
   } 
</script> 

สิ่งแรกที่สังเกตุเห็นได้ก็คือโคดที่อ่านได้ง่ายขึ้น เพราะว่าไม่ต้องอ้างอิง API ผ่าน window.runtime และเส้นทางแพกเกจแบบสมบูรณ์แล้ว เราสามารถใช้นามแฝงจากในไฟล์ AIRAliases.js

ตัวอย่างเช่น จาก

var desktop = window.runtime.flash.filesystem.File. 
desktopDirectory; 

ถูกทำให้สั้นลงเหลือแค่

var desktop = air.File.desktopDirectory; 

ข้อสังเกตุที่สองก็คือ API ของ AIR และแฟรชเพลเยอร์ถูกเก็บไว้ในเนมสเปซ air ซึ่งถ้าคุณเปิดไฟล์ AIRAliases.js ขึ้นมาดู คุณจะเห็นว่าการทำนามแฝงนั้นทำเช่นไร ตัวอย่างของโคดที่ใช้กำหนดนามแฝงของ File API ก็เช่น

var air; if (!air) air = {}; 
// file 
air.File = window.runtime.flash.filesystem.File; 
air.FileStream = window.runtime.flash.filesystem.FileStream; 
air.FileMode = window.runtime.flash.filesystem.FileMode; 

ถ้าต้องการดูรายละเอียดทั้งหมดของ API ที่ถูกกำหนดนามแฝงไว้ ก็ลองเปิดไฟล์ AIRAliases.js ในโปรแกรมจัดการข้อความ ถึงแม้ว่า API ทั้งหมดจะไม่ถูกบรรจุอยู่ในไฟล์ดังกล่าว แต่คุณก็สามารถเพิ่ม API ที่ต้องการเข้าไปได้อย่างง่ายดาย โดยทำตามตัวอย่างที่อยู่ในไฟล์นั้น

การใช้งานไลบรารีของ ActionScript ที่ผ่านการคอมไพล์แล้ว

นอกจากแอพพลิเคชันของ AIR จะสามารถเรียกใช้ API ของแฟลชเพลเยอร์โดยตรงจาก JavaScript แล้ว มันยังสามารถเรียกใช้ชุดไลบรารีของ ActionScript 3 ที่ผ่านการคอมไพล์แล้วจาก JavaScript เช่นเดียวกัน

เช่นเดียวกับการเรียกใช้ไฟล์ JavaScript ภายนอก แทก HTML ภายในแอพพลิเคชันของ AIR ยังสามารถเรียกใช้ชุดไลบรารีของ ActionScript 3 ที่ผ่านการคอมพไฟล์แล้ว และอนุญาตให้เข้าถึงคลาสของ ActionScript ภายในไฟล์ดังกล่าวได้ เมื่อ SWF ถูกเรียกขึ้นมา API ของมันจะสามารถถูกเข้าถึงได้ในแบบเดียวกับการเข้าถึง API ของ AIR และแฟลชเพลเยอร์ ผ่านทางเส้นทางแพกเกจและชื่อของ API

Tip: เทคนิคนี้สามารถใช้ได้กับไลบรารีของ ActionScript 3 เท่านั้น

ลองดูตัวอย่างสักตัวอย่าง Adobe AIR SDK มี SWF ที่บรรจุ API สำหรับเชื่อมต่อบริการของ AIR ผ่านทาง ActionScript 3 ถึงแม้ตัวอย่างต่อไปนี้จะไม่ได้วิธีการใช้งาน API ดังกล่าว แต่มันแสดงวิธีการเข้าถึง API จากใน JavaScript

Tip: ตัวอย่างการใช้งาน API สำหรับเชื่อมต่อบริการอยู่ในบทที่ 4

ในการที่จะทำให้ตัวอย่างนี้ทำงานได้ คุณจะต้องสำเนาไฟล์ frameworks/servicemonitor.swf จาก AIR SDK มายังไดเร็กทอรีของแอพพลิเคชันของคุณ

คลาสและ API ใด ๆ ที่อยู่ใน SWF ที่คอมไพล์แล้วจะสามารถเข้าถึงได้ผ่านทางคุณสมบัติ window.runtime API ที่เราต้องการจะอ้างถึงอยู่ในคลาสที่ชื่อว่า ServiceMonitor อยู่ในแพกเกจ air.net

นี่คือโคดของตัวอย่าง

<script src="servicemonitor.swf"></script> 
<script> 
   function onAppLoad() 
   { 
       var monitor = new runtime.air.net.ServiceMonitor(); 
   } 
</script> 

นี่เป็นตัวอย่างอย่างง่ายที่แสดงการเข้าถึงใช้ไลบรารีของ ActionScript ที่คอมไพล์แล้ว และเรียกใช้ผ่านทาง JavaScript ในตัวอย่างนี้เรารวมไฟล์ servicemonitor.swf เข้ามาโดยใช้แทกของ HTML script ไฟล์นี้มี API ของ ActionScript 3 ที่คอมไพล์แล้วสำหรับคลาส air.net.ServiceMonitor

การใช้เทคนิคนี้ทำให้คุณสามารถใช้งาน API ของ ActionScript จากผู้พัฒนาคนอื่นจากในแอพพลิเคชันของ AIR ผ่านทาง JavaScript

Tip: ไลบรารีของ ActionScript 3 ส่วนใหญ่จะถูกแจกจ่ายในรูปของไฟล์บีบอัดแบบ SWC ในการที่จะใช้งานไลบรารีเหล่านี้ใน JavaScript จะต้องทำการเปลี่ยนนามสกุลของไลบรารีจาก SWC ไปเป็น ZIP แล้วทำการคลายการบีบอัดโดยใช้โปรแกรมคลายการบีบอัด แล้วจึงทำการย้ายไฟล์ไลบรารีที่มีนามสกุล SWF ออกมาจากในไฟล์ SWC คุณสามารถรวมไฟล์ SWF ไว้ภายในแอพพลิเคชันของคุณโดยใช้วิธีการเดียวกับที่ได้แสดงให้ดูก่อนหน้านี้

ณ จุดนี้ คุณควรจะมีความเข้าใจที่ดีเกี่ยวกับสภาพแวดล้อม HTML และ JavaScript ภายใน Adobe AIR เช่นเดียวกับการใช้ API ของ AIR แฟรชเพลเยอร์ และ ActionScript 3 จากนักพัฒนาอื่น ๆ จากใน JavaScript ส่วนที่เหลือของหนังสือเล่มนี้จะใช้ความรู้เหล่านี้ในการที่จะทำงานต่าง ๆ จากแอพพลิเคชัน HTML และ JavaScript ที่ทำงานอยู่ใน Adobe AIR