Creating a Simple AIR Application with HTML and JavaScript

From Blognone

Jump to: navigation, search

ลองสร้างแอพพลิเคชัน AIR ด้วย HTML และ JavaScript

ตอนนี้คุณได้ติดตั้ง AIR และ AIR SDK รุ่นเบต้าเรียบร้อยแล้ว เราก็มาเริ่มสร้างแอพพลิเคชัน AIR ตัวแรกกันเสียที

เราจะลองสร้าง "hello world" ซึ่งเป็นแอพพลิเคชันที่เรียบง่ายมาก หลังจากคุณได้ลองสร้างและทดสอบแอพพลิเคชันตัวนี้ แสดงว่าคุณมีสภาวะการพัฒนาที่พร้อมสำหรับสร้างแอพพลิเคชัน AIR ที่ซับซ้อนมากขึ้นแล้ว

Contents

สร้างไฟล์สำหรับแอพพลิเคชัน

แอพพลิเคชัน AIR ทุกตัวจำเป็นต้องมีไฟล์อย่างน้อย 2 ไฟล์ ไฟล์แรกคือไฟล์ root ซึ่งเป็นไฟล์ HTML หรือ SWF หลักสำหรับแอพพลิเคชัน และไฟล์นี้จะเป็นไฟล์ที่ถูกเรียกเมื่อแอพพลิเคชันเริ่มทำงาน

ไฟล์ที่สองคือไฟล์อธิบายข้อมูลแอพพลิเคชัน ซึ่งเป็น XML ที่บอกข้อมูล (metadata) เกี่ยวกับแอพพลิเคชัน AIR ของเรา

ลองสร้างไฟล์ทั้งสองนี้สำหรับแอพพลิเคชันของเรา

  1. สร้างโฟลเดอร์ใหม่ชื่อ AIRHelloWorld
  2. ในโฟลเดอร์นี้ สร้างไฟล์ใหม่สองไฟล์ชื่อ AIRHelloWorld.html และ AIRHelloWorld.xml
  3. เปิดไฟล์ด้วยโปรแกรมแก้ไขข้อความที่ถนัด

ทำความเข้าใจไฟล์อธิบายข้อมูลแอพพลิเคชัน

ไฟล์อธิบายข้อมูลแอพพลิเคชันเป็นไฟล์ XML ที่จำเป็นต้องมีในแอพพลิเคชัน AIR แต่ละตัว โดยมันทำหน้าที่ให้ข้อมูลทั่วไปเกี่ยวกับโปรแกรม (metadata) เช่น ชื่อและคำอธิบาย ไปจนถึงวิธีการเรียกใช้แอพพลิเคชัน ในไฟล์นี้จะบอกตำแหน่งของไฟล์ root และรูปแบบหน้าต่างที่แอพพลิเคชันใช้งาน

ขั้นแรกให้ลองดูตัวอย่างไฟล์อธิบายข้อมูลแอพพลิเคชันของเรา (AIRHelloWorld.xml) แล้วเราจะเข้าสู่รายละเอียดของไฟล์ทีละส่วน

Tip: คุณสามารถดูตัวอย่างไฟล์อธิบายข้อมูลแอพพลิเคชันได้จากโฟลเดอร์ templates ใน AIR SDK

เปิดไฟล์ AIRHelloWorld.xml แล้วพิมพ์ข้อความดังต่อไปนี้ 

<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/1.0.M4"
         appId="com.oreilly.AIRHelloWorld"
         version="1.0">

   <name>AIRHelloWorld</name>
   <title>AIRHelloWorld Installer</title>
   <description>Simple Hello World Example using HTML</description>
   <copyright></copyright>

   <rootContent systemChrome="standard" transparent="false" visible="true">
       ApolloHelloWorld.html</rootContent>

</application>

ตัวข้อความอธิบายตัวเองได้ค่อนข้างดีอยู่แล้ว แต่เรามาดูกันอย่างละเอียดว่าแต่ละบรรทัดหมายถึงอะไร 

<application xmlns="http://ns.adobe.com/air/application/1.0.M4"
         appId="com.oreilly.AIRHelloWorld"
         version="1.0">

ในบรรทัดนี้มีสองจุดที่น่าสนใจ อย่างแรกคือ namespace 

http://ns.adobe.com/air/application/1.0.M4

นี่เป็นการบอกรุ่นของ AIR ที่แอพพลิเคชันตัวนั้นคาดหวังว่าจะใช้ โดยในกรณีนี้ระบุรุ่น 1.0.M4 ซึ่งหมายถึงรุ่น Beta

ส่วนคุณสมบัติ appId เป็นการบ่งบอกถึงแอพพลิเคชัน AIR ตัวนั้นๆ โดย AIR จะใช้ ID นี้แยกแยะระหว่างแอพพลิเคชันแต่ละตัว

คุณจะเห็นว่าฟอร์แมตของ appID ใช้วิธีแบบ reverse domain name ซึ่งคุณอาจเคยเห็นมาบ้างในภาษาโปรแกรมบางตัวอย่างเช่น Java, ActionScript และเฟรมเวิร์คบางตัวของ JavaScript คุณสามารถสร้าง ID ของตัวเองได้จากโดเมนเนม และตามด้วยชื่อแอพพลิเคชัน

ส่วนถัดไปคือข้อมูลทั่วไปของแอพพลิเคชันนั้นๆ 

   <name>AIRHelloWorld</name>
   <title>AIRHelloWorld Installer</title>
   <description>Simple Hello World Example using HTML</description>
   <copyright></copyright>
Element คำอธิบาย
name ชื่อของแอพพลิเคชัน โดยชื่อนี้จะเป็นชื่อที่ระบบปฏิบัติการและผู้ใช้มองเห็น
title ชื่อที่แสดงในตัวติดตั้งแอพพลิเคชัน
description คำอธิบายซึ่งจะแสดงต่อผู้ใช้ระหว่างการติดตั้ง
copyright (ไม่จำเป็นต้องใส่) ให้ข้อมูลเกี่ยวกับลิขสิทธิ์ของแอพพลิเคชัน

ส่วนถัดไปคือแท็ก rootContent ซึ่งจะบอกรันไทม์ AIR ว่าไฟล์ไหนคือไฟล์ root ของแอพพลิเคชัน 

   <rootContent systemChrome="standard" transparent="false" visible="true">
       ApolloHelloWorld.html</rootContent>

ในกรณีนี้เราใช้ไฟล์ HTML เป็นไฟล์ root ของแอพพลิเคชัน

Tip: ไฟล์อธิบายข้อมูลแอพพลิเคชัน และไฟล์ root ของแอพพลิเคชันจำเป็นต้องอยู่ในโฟลเดอร์เดียวกัน

ในแท็ก rootContent มีค่าคุณสมบัติที่ระบุรูปแบบหน้าต่างและโครงของแอพพลิเคชันเมื่อเริ่มต้นทำงานดังนี้

Element คำอธิบาย
systemChrome บอกชนิดของ systemChrome ที่แอพพลิเคชันจะเรียกใช้ ("standard" หรือ "none")
transparent ระบุว่าพื้นหลังของแอพพลิเคชันจะโปร่งใสหรือไม่ ถ้าตั้ง systermChrome เป็น standard ค่านี้จะเป็น true
visible ระบุว่าให้ผู้ใช้มองเห็นแอพพลิเคชันทันทีเมื่อเรียกใช้หรือไม่ มักใช้ในกรณีที่แอพพลิเคชันต้องทำงานบางอย่างก่อนแสดงหน้าตาให้ผู้ใช้เห็น

ในตัวอย่างของเรานี้ เราจะใช้โครงและหน้าต่างแบบเดียวกับของระบบปฏิบัติการ

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

สร้างไฟล์ root ของแอพพลิเคชัน

ไฟล์ root เป็นไฟล์หลักของแอพพลิเคชันซึ่งจะถูกอ่านเมื่อแอพพลิเคชันเริ่มทำงาน ไฟล์นี้อาจเป็น Flash (SWF) หรือ HTML ก็ได้

ในบทนี้เราจะสร้างไฟล์ HTML อย่างง่ายเพื่อทดสอบว่าเราได้ติดตั้งสภาพแวดล้อมในการทำงานอย่างถูกต้อง โดยเราจะเข้าสู่การใช้ API ของ AIR ที่ซับซ้อนขึ้นในบทที่ 3 และ 4 

<html>
 <head>
 	<title>AIRHelloWorld</title>
 	<script>
 		function init( )
 		{
 			runtime.trace("init function called");
 		}
 	</script>
 </head>
 <body onload="init( )">
 	<div align="center">Hello World</div>
 </body>
 </html>

คุณคงเห็นว่านี่เป็นไฟล์ HTML ง่ายๆ ที่แสดงข้อความ "Hello World" และเรียกใช้ฟังก์ชันของ JavaScript เมื่อไฟล์ถูกเรียกและเริ่มต้นทำงาน

บางบรรทัดที่น่าสนใจ 

 <body onload="init( )">

เราใช้อีเวนต์มาตรฐาน onload ในแท็ก body เพื่อเป็นจุดเริ่มต้นของ JavaScript ในแอพพลิเคชันของเรา 

		function init( )
		{
			...
		}

จากนั้นเราใช้ฟังก์ชันมาตรฐานของ JavaScript เพื่อติดต่อกับอีเวนต์ onload

เรียกใช้ API ของ AIR

ลองสังเกตที่ฟังก์ชัน init คุณจะเห็นโค้ดที่คุณอาจไม่คุ้นเคย 

			runtime.trace("init function called");

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

API ของ AIR ทุกตัว (ซึ่งรวมถึง API ของ Flash Player ด้วย)​ สามารถเรียกใช้จาก JavaScript โดยผ่านคุณสมบัติ runtime ซึ่งเราจะอธิบายเรื่องนี้อย่างละเอียดในบทหลังๆ

Tip: คุณสามารถตรวจสอบว่าแอพพลิเคชันของคุณรันอยู่ใน AIR หรือไม่ โดยใช้วิธีตรวจว่ามีคุณสมบัติ runtime หรือเปล่า จากโค้ดต่อไปนี้ 

if (window.runtime)
{
	//running within AIR
}

ตอนนี้เราได้สร้างทั้งไฟล์อธิบายข้อมูลแอพพลิเคชัน และไฟล์ root แล้ว ขั้นต่อไปเป็นการรันทดสอบแอพพลิเคชันของเราด้วยรันไทม์

Retrieved from "http://lib.blognone.com/Creating_a_Simple_AIR_Application_with_HTML_and_JavaScript"